mirror of
https://github.com/vkaelin/LeagueStats.git
synced 2026-03-25 21:07:27 +00:00
Configure ESLint for the Vue project
This commit is contained in:
Valentin Kaelin
parent
1846f84491
commit
8a603a3903
11 changed files with 308 additions and 270 deletions
|
|
@ -5,12 +5,34 @@ module.exports = {
|
|||
},
|
||||
'extends': [
|
||||
'plugin:vue/essential',
|
||||
'plugin:vue/recommended',
|
||||
'eslint:recommended'
|
||||
],
|
||||
rules: {
|
||||
//'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
|
||||
'no-console': 'off',
|
||||
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
|
||||
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
|
||||
'vue/singleline-html-element-content-newline': 'off',
|
||||
'vue/multiline-html-element-content-newline': 'off',
|
||||
"vue/html-self-closing": 'off',
|
||||
'vue/max-attributes-per-line': 'off',
|
||||
"vue/attributes-order": ["error", {
|
||||
"order": [
|
||||
"DEFINITION",
|
||||
"LIST_RENDERING",
|
||||
"CONDITIONALS",
|
||||
"RENDER_MODIFIERS",
|
||||
"UNIQUE",
|
||||
"TWO_WAY_BINDING",
|
||||
"OTHER_DIRECTIVES",
|
||||
"EVENTS",
|
||||
"CONTENT",
|
||||
"GLOBAL",
|
||||
"OTHER_ATTR"
|
||||
]
|
||||
}],
|
||||
"quotes": [2, "single", { "avoidEscape": true }],
|
||||
"semi": [2, "never"]
|
||||
},
|
||||
parserOptions: {
|
||||
parser: 'babel-eslint'
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
<template>
|
||||
<div id="app" class="font-sans bg-gray-200 antialiased min-h-screen">
|
||||
|
||||
<NotificationsContainer/>
|
||||
<router-view/>
|
||||
<NotificationsContainer />
|
||||
<router-view />
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -45,10 +45,16 @@ export default {
|
|||
if (this.imageState === 'loaded') {
|
||||
return 'background-image: url(' + this.asyncImage.src + '); background-size: ' + this.backgroundSize
|
||||
}
|
||||
return '';
|
||||
return ''
|
||||
}
|
||||
},
|
||||
|
||||
mounted () {
|
||||
this.$nextTick(() => {
|
||||
this.fetchImage()
|
||||
})
|
||||
},
|
||||
|
||||
methods: {
|
||||
fetchImage () {
|
||||
this.asyncImage.onload = this.imageOnLoad
|
||||
|
|
@ -58,11 +64,6 @@ export default {
|
|||
imageOnLoad () {
|
||||
this.imageState = 'loaded'
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.$nextTick(() => {
|
||||
this.fetchImage()
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,11 +1,10 @@
|
|||
<template>
|
||||
<li class="match bg-white shadow text-sm md:text-base" :class="data.result ? 'win' : 'lose'">
|
||||
|
||||
|
||||
|
||||
<div class="match-container">
|
||||
<!-- Responsive -->
|
||||
<div class="flex justify-between lg:hidden text-sm text-gray-800 px-2 border-gray-300 border-b">
|
||||
<div
|
||||
class="flex justify-between lg:hidden text-sm text-gray-800 px-2 border-gray-300 border-b"
|
||||
>
|
||||
<div class="flex">
|
||||
<div class="gamemode mr-1">{{ data.gamemode }}</div>
|
||||
<span>•</span>
|
||||
|
|
@ -17,53 +16,60 @@
|
|||
</div>
|
||||
|
||||
<div class="flex-container">
|
||||
|
||||
<div class="first col w-1/3 lg:w-1/4">
|
||||
<div class="icon-and-sums flex flex-col sm:flex-row">
|
||||
<div class="relative">
|
||||
<img :src="`https://ddragon.leagueoflegends.com/cdn/${$patch}/img/champion/${data.champ}.png`" class="champion-icon mb-2px sm:mb-0 sm:mr-2px" alt="example design">
|
||||
<span class="level absolute bottom-0 left-0 text-white font-bold">{{ data.level }}</span>
|
||||
</div>
|
||||
<div class="summonerSpells flex flex-row sm:flex-col">
|
||||
<img class="spell-icon mr-2px sm:mr-0 sm:mb-2px" :src="data.firstSum" alt="Ignite">
|
||||
<img class="spell-icon" :src="data.secondSum" alt="Ignite">
|
||||
</div>
|
||||
</div>
|
||||
<span class="champion-name hidden sm:block">{{ data.champ }}</span>
|
||||
</div>
|
||||
|
||||
<div class="second col hidden lg:block lg:w-1/4">
|
||||
<div class="map">{{ data.map }}</div>
|
||||
<div class="gamemode">{{ data.gamemode }}</div>
|
||||
</div>
|
||||
|
||||
<div class="third col w-1/2 lg:w-1/4 flex-wrap md:flex-no-wrap">
|
||||
<div
|
||||
v-for="(item, index) in data.items" :key="index"
|
||||
:style="{background: item}" class="item"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="fourth w-1/6 lg:w-1/4 flex-col items-center justify-center sm:flex-row sm:justify-around">
|
||||
<div class="score mb-2 sm:mb-0 font-bold">{{ data.kills }}/{{ data.deaths }}/{{ data.assists }}</div>
|
||||
<div class="gold-farm text-center">
|
||||
<div class="gold flex items-center justify-center mb-2 sm:mb-0">
|
||||
{{ data.gold }}
|
||||
<v-icon name="coins" class="h-3 ml-1 text-blue-800" />
|
||||
<div class="first col w-1/3 lg:w-1/4">
|
||||
<div class="icon-and-sums flex flex-col sm:flex-row">
|
||||
<div class="relative">
|
||||
<img
|
||||
:src="`https://ddragon.leagueoflegends.com/cdn/${$patch}/img/champion/${data.champ}.png`"
|
||||
class="champion-icon mb-2px sm:mb-0 sm:mr-2px"
|
||||
alt="example design"
|
||||
/>
|
||||
<span class="level absolute bottom-0 left-0 text-white font-bold">{{ data.level }}</span>
|
||||
</div>
|
||||
<div class="farm flex items-center justify-center">
|
||||
{{ data.minions }}
|
||||
<v-icon name="skull-crossbones" class="h-3 ml-1 text-blue-800" />
|
||||
<div class="summonerSpells flex flex-row sm:flex-col">
|
||||
<img class="spell-icon mr-2px sm:mr-0 sm:mb-2px" :src="data.firstSum" alt="Ignite" />
|
||||
<img class="spell-icon" :src="data.secondSum" alt="Ignite" />
|
||||
</div>
|
||||
</div>
|
||||
<span class="champion-name hidden sm:block">{{ data.champ }}</span>
|
||||
</div>
|
||||
|
||||
<div class="second col hidden lg:block lg:w-1/4">
|
||||
<div class="map">{{ data.map }}</div>
|
||||
<div class="gamemode">{{ data.gamemode }}</div>
|
||||
</div>
|
||||
|
||||
<div class="third col w-1/2 lg:w-1/4 flex-wrap md:flex-no-wrap">
|
||||
<div
|
||||
v-for="(item, index) in data.items"
|
||||
:key="index"
|
||||
:style="{background: item}"
|
||||
class="item"
|
||||
></div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="fourth w-1/6 lg:w-1/4 flex-col items-center justify-center sm:flex-row sm:justify-around"
|
||||
>
|
||||
<div
|
||||
class="score mb-2 sm:mb-0 font-bold"
|
||||
>{{ data.kills }}/{{ data.deaths }}/{{ data.assists }}</div>
|
||||
<div class="gold-farm text-center">
|
||||
<div class="gold flex items-center justify-center mb-2 sm:mb-0">
|
||||
{{ data.gold }}
|
||||
<v-icon name="coins" class="h-3 ml-1 text-blue-800" />
|
||||
</div>
|
||||
<div class="farm flex items-center justify-center">
|
||||
{{ data.minions }}
|
||||
<v-icon name="skull-crossbones" class="h-3 ml-1 text-blue-800" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="duration-date hidden lg:block">
|
||||
<div class="duration">{{ data.time }}</div>
|
||||
<div class="date">{{ data.date }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="duration-date hidden lg:block">
|
||||
<div class="duration">{{ data.time }}</div>
|
||||
<div class="date">{{ data.date }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</template>
|
||||
|
|
@ -73,7 +79,10 @@
|
|||
|
||||
export default {
|
||||
props: {
|
||||
data: Object
|
||||
data: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -92,11 +101,11 @@ export default {
|
|||
}
|
||||
|
||||
.match.win .match-container {
|
||||
border-left: 10px solid #48BB78;
|
||||
border-left: 10px solid #48bb78;
|
||||
}
|
||||
|
||||
.match.lose .match-container {
|
||||
border-left: 10px solid #F56565;
|
||||
border-left: 10px solid #f56565;
|
||||
}
|
||||
|
||||
/* First col */
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import PopupNotification from '@/components/PopupNotification.vue';
|
||||
import PopupNotification from '@/components/PopupNotification.vue'
|
||||
import { mapState } from 'vuex'
|
||||
|
||||
export default {
|
||||
|
|
|
|||
|
|
@ -1,38 +1,38 @@
|
|||
<template>
|
||||
<transition name="slide-fade">
|
||||
<div
|
||||
:class="{
|
||||
'bg-red-500': notification.type === 'error',
|
||||
'bg-green-500': notification.type === 'success'
|
||||
}"
|
||||
class="mt-2 relative rounded-lg shadow-md p-6 pr-10 text-white"
|
||||
style="min-width: 240px"
|
||||
<transition name="slide-fade">
|
||||
<div
|
||||
:class="{
|
||||
'bg-red-500': notification.type === 'error',
|
||||
'bg-green-500': notification.type === 'success'
|
||||
}"
|
||||
class="mt-2 relative rounded-lg shadow-md p-6 pr-10 text-white"
|
||||
style="min-width: 240px"
|
||||
>
|
||||
<button
|
||||
@click="deleteNotification"
|
||||
class="cursor-pointer block absolute top-0 right-0 border border-transparent rounded-full py-1 px-1 my-1 mx-1 focus:outline-none hover:border-white"
|
||||
>
|
||||
<button
|
||||
@click="deleteNotification"
|
||||
class="cursor-pointer block absolute top-0 right-0 border border-transparent rounded-full py-1 px-1 my-1 mx-1 focus:outline-none hover:border-white"
|
||||
>
|
||||
<svg class="fill-current w-3 h-3" viewBox="0 0 20 20">
|
||||
<path
|
||||
d="M10 8.586L2.929 1.515 1.515 2.929 8.586 10l-7.071 7.071 1.414 1.414L10 11.414l7.071 7.071 1.414-1.414L11.414 10l7.071-7.071-1.414-1.414L10 8.586z"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
<div class="flex items-center text-white">
|
||||
<svg v-if="notification.type === 'success'" class="w-6 fill-current" viewBox="0 0 20 20">
|
||||
<path
|
||||
d="M2.93 17.07A10 10 0 1 1 17.07 2.93 10 10 0 0 1 2.93 17.07zm12.73-1.41A8 8 0 1 0 4.34 4.34a8 8 0 0 0 11.32 11.32zM6.7 9.29L9 11.6l4.3-4.3 1.4 1.42L9 14.4l-3.7-3.7 1.4-1.42z"
|
||||
/>
|
||||
</svg>
|
||||
<svg v-if="notification.type === 'error'" class="w-6 fill-current" viewBox="0 0 20 20">
|
||||
<path
|
||||
d="M2.93 17.07A10 10 0 1 1 17.07 2.93 10 10 0 0 1 2.93 17.07zm1.41-1.41A8 8 0 1 0 15.66 4.34 8 8 0 0 0 4.34 15.66zm9.9-8.49L11.41 10l2.83 2.83-1.41 1.41L10 11.41l-2.83 2.83-1.41-1.41L8.59 10 5.76 7.17l1.41-1.41L10 8.59l2.83-2.83 1.41 1.41z"
|
||||
/>
|
||||
</svg>
|
||||
<span class="ml-3">{{ notification.message }}</span>
|
||||
</div>
|
||||
<svg class="fill-current w-3 h-3" viewBox="0 0 20 20">
|
||||
<path
|
||||
d="M10 8.586L2.929 1.515 1.515 2.929 8.586 10l-7.071 7.071 1.414 1.414L10 11.414l7.071 7.071 1.414-1.414L11.414 10l7.071-7.071-1.414-1.414L10 8.586z"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
<div class="flex items-center text-white">
|
||||
<svg v-if="notification.type === 'success'" class="w-6 fill-current" viewBox="0 0 20 20">
|
||||
<path
|
||||
d="M2.93 17.07A10 10 0 1 1 17.07 2.93 10 10 0 0 1 2.93 17.07zm12.73-1.41A8 8 0 1 0 4.34 4.34a8 8 0 0 0 11.32 11.32zM6.7 9.29L9 11.6l4.3-4.3 1.4 1.42L9 14.4l-3.7-3.7 1.4-1.42z"
|
||||
/>
|
||||
</svg>
|
||||
<svg v-if="notification.type === 'error'" class="w-6 fill-current" viewBox="0 0 20 20">
|
||||
<path
|
||||
d="M2.93 17.07A10 10 0 1 1 17.07 2.93 10 10 0 0 1 2.93 17.07zm1.41-1.41A8 8 0 1 0 15.66 4.34 8 8 0 0 0 4.34 15.66zm9.9-8.49L11.41 10l2.83 2.83-1.41 1.41L10 11.41l-2.83 2.83-1.41-1.41L8.59 10 5.76 7.17l1.41-1.41L10 8.59l2.83-2.83 1.41 1.41z"
|
||||
/>
|
||||
</svg>
|
||||
<span class="ml-3">{{ notification.message }}</span>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -49,14 +49,7 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
timeout: null
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
deleteNotification() {
|
||||
this.remove(this.notification)
|
||||
},
|
||||
...mapActions('notification', ['remove'])
|
||||
}
|
||||
},
|
||||
|
||||
beforeDestroy() {
|
||||
|
|
@ -64,6 +57,13 @@ export default {
|
|||
},
|
||||
mounted() {
|
||||
this.timeout = setTimeout(() => this.deleteNotification(), 3000)
|
||||
},
|
||||
|
||||
methods: {
|
||||
deleteNotification() {
|
||||
this.remove(this.notification)
|
||||
},
|
||||
...mapActions('notification', ['remove'])
|
||||
}
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
|
@ -28,7 +28,7 @@
|
|||
:title="day.date + ' : ' + day.matches + ' game(s)'"
|
||||
:class="[getCaseMargin(index), getCaseColor(day.matches)]"
|
||||
class="ml-1 w-4 h-4 cursor-pointer"
|
||||
></div>
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -49,74 +49,74 @@ export default {
|
|||
gridDays: [],
|
||||
indexFirstMonday: 0,
|
||||
nbColumns: 15
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
createGrid() {
|
||||
const nbDaysInGrid = this.nbColumns * 7;
|
||||
|
||||
const options = {
|
||||
year: "numeric",
|
||||
month: "2-digit",
|
||||
day: "numeric"
|
||||
};
|
||||
|
||||
// Create array with all the days of the Grid
|
||||
for (let i = 1; i <= nbDaysInGrid; i++) {
|
||||
const day = new Date();
|
||||
day.setDate(day.getDate() - nbDaysInGrid + i);
|
||||
const formattedDay = day.toLocaleString("fr", options);
|
||||
|
||||
this.gridDays.push({
|
||||
date: formattedDay,
|
||||
matches: 0,
|
||||
day: day.toLocaleString("en", { weekday: "long" }).substring(0, 2),
|
||||
month: day.toLocaleString("en", { month: "long" }).substring(0, 3)
|
||||
});
|
||||
}
|
||||
|
||||
// Add all the matches made by the summoner
|
||||
for (const key in this.matches) {
|
||||
const match = this.matches[key];
|
||||
const matchTime = new Date(match.timestamp);
|
||||
const formattedTime = matchTime.toLocaleString("fr", options);
|
||||
|
||||
const dayOfTheMatch = this.gridDays.filter(
|
||||
e => e.date === formattedTime
|
||||
);
|
||||
if (dayOfTheMatch.length > 0) {
|
||||
dayOfTheMatch[0].matches++;
|
||||
}
|
||||
}
|
||||
|
||||
// Get the index of the first Monday
|
||||
this.indexFirstMonday = this.gridDays.findIndex(d => d.day === "Mo");
|
||||
},
|
||||
getCaseColor(nbMatches) {
|
||||
/* TODO: change this */
|
||||
if (nbMatches >= 6) {
|
||||
return "bg-teal-200";
|
||||
} else if (nbMatches >= 4) {
|
||||
return "bg-teal-300";
|
||||
} else if (nbMatches >= 2) {
|
||||
return "bg-teal-400";
|
||||
} else if (nbMatches >= 1) {
|
||||
return "bg-teal-500";
|
||||
}
|
||||
return "bg-teal-700";
|
||||
},
|
||||
getCaseMargin(index) {
|
||||
if (index % 7 !== 0) {
|
||||
return "mt-1";
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
created() {
|
||||
console.log("activity");
|
||||
console.log('activity')
|
||||
|
||||
this.createGrid();
|
||||
this.createGrid()
|
||||
},
|
||||
|
||||
methods: {
|
||||
createGrid() {
|
||||
const nbDaysInGrid = this.nbColumns * 7
|
||||
|
||||
const options = {
|
||||
year: 'numeric',
|
||||
month: '2-digit',
|
||||
day: 'numeric'
|
||||
}
|
||||
|
||||
// Create array with all the days of the Grid
|
||||
for (let i = 1; i <= nbDaysInGrid; i++) {
|
||||
const day = new Date()
|
||||
day.setDate(day.getDate() - nbDaysInGrid + i)
|
||||
const formattedDay = day.toLocaleString('fr', options)
|
||||
|
||||
this.gridDays.push({
|
||||
date: formattedDay,
|
||||
matches: 0,
|
||||
day: day.toLocaleString('en', { weekday: 'long' }).substring(0, 2),
|
||||
month: day.toLocaleString('en', { month: 'long' }).substring(0, 3)
|
||||
})
|
||||
}
|
||||
|
||||
// Add all the matches made by the summoner
|
||||
for (const key in this.matches) {
|
||||
const match = this.matches[key]
|
||||
const matchTime = new Date(match.timestamp)
|
||||
const formattedTime = matchTime.toLocaleString('fr', options)
|
||||
|
||||
const dayOfTheMatch = this.gridDays.filter(
|
||||
e => e.date === formattedTime
|
||||
)
|
||||
if (dayOfTheMatch.length > 0) {
|
||||
dayOfTheMatch[0].matches++
|
||||
}
|
||||
}
|
||||
|
||||
// Get the index of the first Monday
|
||||
this.indexFirstMonday = this.gridDays.findIndex(d => d.day === 'Mo')
|
||||
},
|
||||
getCaseColor(nbMatches) {
|
||||
/* TODO: change this */
|
||||
if (nbMatches >= 6) {
|
||||
return 'bg-teal-200'
|
||||
} else if (nbMatches >= 4) {
|
||||
return 'bg-teal-300'
|
||||
} else if (nbMatches >= 2) {
|
||||
return 'bg-teal-400'
|
||||
} else if (nbMatches >= 1) {
|
||||
return 'bg-teal-500'
|
||||
}
|
||||
return 'bg-teal-700'
|
||||
},
|
||||
getCaseMargin(index) {
|
||||
if (index % 7 !== 0) {
|
||||
return 'mt-1'
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
|
@ -3,10 +3,10 @@
|
|||
<div v-if="dropdown" @click="dropdown = false" class="fixed z-20 inset-0"></div>
|
||||
<div class="relative w-full">
|
||||
<input
|
||||
v-model="summoner"
|
||||
type="text"
|
||||
autofocus
|
||||
class="input w-full px-2 py-4 rounded-lg outline-none pl-8 pr-16 font-bold"
|
||||
v-model="summoner"
|
||||
>
|
||||
<div class="absolute right-0 z-30 vertical-center flex items-center h-full mr-2">
|
||||
<div
|
||||
|
|
@ -41,7 +41,8 @@
|
|||
v-if="region === selectedRegion"
|
||||
name="check"
|
||||
scale="0.7"
|
||||
class="absolute vertical-center offsetIcon">
|
||||
class="absolute vertical-center offsetIcon"
|
||||
>
|
||||
</v-icon>
|
||||
{{ region }}
|
||||
</div>
|
||||
|
|
@ -75,20 +76,20 @@ export default {
|
|||
'RU'
|
||||
],
|
||||
selectedRegion: 'EUW'
|
||||
};
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
classRegions(index) {
|
||||
return {
|
||||
'rounded-t': index === 0,
|
||||
'rounded-b': index === this.regions.length - 1
|
||||
};
|
||||
}
|
||||
},
|
||||
formSubmit() {
|
||||
const regexNames = new RegExp('^[0-9\\p{L} _\\.]+$', 'u');
|
||||
const regexNames = new RegExp('^[0-9\\p{L} _\\.]+$', 'u')
|
||||
|
||||
if(regexNames.exec(this.summoner)) {
|
||||
this.$emit('formSubmit', this.summoner.split(' ').join(''), this.selectedRegion.toLowerCase());
|
||||
this.$emit('formSubmit', this.summoner.split(' ').join(''), this.selectedRegion.toLowerCase())
|
||||
} else {
|
||||
this.$store.dispatch('notification/add', {
|
||||
type: 'error',
|
||||
|
|
@ -97,7 +98,7 @@ export default {
|
|||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
|
|
|||
|
|
@ -3,26 +3,26 @@
|
|||
* @param previous : time we want to get difference
|
||||
*/
|
||||
export function timeDifference(previous) {
|
||||
const current = new Date();
|
||||
const msPerMinute = 60 * 1000;
|
||||
const msPerHour = msPerMinute * 60;
|
||||
const msPerDay = msPerHour * 24;
|
||||
const msPerWeek = msPerDay * 7;
|
||||
const elapsed = current - previous;
|
||||
const current = new Date()
|
||||
const msPerMinute = 60 * 1000
|
||||
const msPerHour = msPerMinute * 60
|
||||
const msPerDay = msPerHour * 24
|
||||
const msPerWeek = msPerDay * 7
|
||||
const elapsed = current - previous
|
||||
|
||||
if (elapsed < msPerMinute) {
|
||||
return Math.round(elapsed / 1000) + 's';
|
||||
return Math.round(elapsed / 1000) + 's'
|
||||
} else if (elapsed < msPerHour) {
|
||||
return Math.round(elapsed / msPerMinute) + 'm';
|
||||
return Math.round(elapsed / msPerMinute) + 'm'
|
||||
} else if (elapsed < msPerDay) {
|
||||
return Math.round(elapsed / msPerHour) + 'h';
|
||||
return Math.round(elapsed / msPerHour) + 'h'
|
||||
} else if (elapsed < msPerWeek) {
|
||||
return Math.round(elapsed / msPerDay) + 'j';
|
||||
return Math.round(elapsed / msPerDay) + 'j'
|
||||
} else {
|
||||
const oldDate = new Date(previous);
|
||||
const day = oldDate.getDate() < 10 ? '0' + oldDate.getDate() : oldDate.getDate();
|
||||
const month = oldDate.getMonth() < 9 ? '0' + (oldDate.getMonth() + 1) : (oldDate.getMonth() + 1);
|
||||
return day + '.' + month + '.' + oldDate.getFullYear().toString().substr(-2);
|
||||
const oldDate = new Date(previous)
|
||||
const day = oldDate.getDate() < 10 ? '0' + oldDate.getDate() : oldDate.getDate()
|
||||
const month = oldDate.getMonth() < 9 ? '0' + (oldDate.getMonth() + 1) : (oldDate.getMonth() + 1)
|
||||
return day + '.' + month + '.' + oldDate.getFullYear().toString().substr(-2)
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -32,9 +32,9 @@ export function timeDifference(previous) {
|
|||
* @param sec : time in seconds to convert
|
||||
*/
|
||||
export function secToTime(sec) {
|
||||
const min = Math.floor(sec / 60);
|
||||
const newSec = sec - min * 60;
|
||||
return min + ':' + (newSec < 10 ? '0' + newSec : newSec); //
|
||||
const min = Math.floor(sec / 60)
|
||||
const newSec = sec - min * 60
|
||||
return min + ':' + (newSec < 10 ? '0' + newSec : newSec) //
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -44,9 +44,9 @@ export function secToTime(sec) {
|
|||
*/
|
||||
export function getRankImg(soloQStats) {
|
||||
if (!soloQStats) {
|
||||
return 'https://cdn.valentinkaelin.ch/riot/tier-icons/provisional.png';
|
||||
return 'https://cdn.valentinkaelin.ch/riot/tier-icons/provisional.png'
|
||||
}
|
||||
return 'https://cdn.valentinkaelin.ch/riot/tier-icons/Emblem_' + capitalize(soloQStats.tier.toLowerCase()) + '.png';
|
||||
return 'https://cdn.valentinkaelin.ch/riot/tier-icons/Emblem_' + capitalize(soloQStats.tier.toLowerCase()) + '.png'
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -55,5 +55,5 @@ export function getRankImg(soloQStats) {
|
|||
* @param string : string to capitalize
|
||||
*/
|
||||
function capitalize(string) {
|
||||
return string.charAt(0).toUpperCase() + string.slice(1);
|
||||
return string.charAt(0).toUpperCase() + string.slice(1)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@
|
|||
|
||||
<script>
|
||||
import LazyBackground from '@/components/LazyBackgroundImage.vue'
|
||||
import SearchForm from '@/components/SearchForm.vue';
|
||||
import SearchForm from '@/components/SearchForm.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
|
|
@ -38,7 +38,7 @@ export default {
|
|||
this.$router.push(`/summoner/${region}/${summoner}`)
|
||||
},
|
||||
}
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div>
|
||||
<button class="debug" @click="resetLocalStorage"></button>
|
||||
<button @click="resetLocalStorage" class="debug"></button>
|
||||
|
||||
<header class="search mb-4 bg-teal-900 text-teal-100">
|
||||
<div class="container mx-auto flex justify-between py-8">
|
||||
|
|
@ -13,10 +13,10 @@
|
|||
|
||||
<button
|
||||
v-if="summonerFound"
|
||||
@click="apiCall"
|
||||
id="refresh"
|
||||
class="input btn w-20 rounded-lg ml-2 relative"
|
||||
:disabled="loading"
|
||||
@click="apiCall"
|
||||
>
|
||||
<v-icon name="sync" class="absolute vertical-center horizontal-center" />
|
||||
</button>
|
||||
|
|
@ -41,7 +41,7 @@
|
|||
class="player__ratio"
|
||||
>{{ localInfos.rankedWins ? localInfos.rankedWins + ' wins / ' + localInfos.rankedLosses + ' losses' : "Joueur non classé" }}</h3>
|
||||
|
||||
<RecentActivity v-show="localInfos.allMatches" :matches="localInfos.allMatches"></RecentActivity>
|
||||
<RecentActivity v-show="localInfos.allMatches" :matches="localInfos.allMatches" />
|
||||
|
||||
<ul class="list-matches--debug">
|
||||
<Match
|
||||
|
|
@ -57,7 +57,7 @@
|
|||
<div
|
||||
class="flex items-center justify-center bg-white max-w-xs mx-auto p-5 rounded-lg shadow-xl"
|
||||
>
|
||||
<dot-loader :loading="loading"></dot-loader>
|
||||
<dot-loader :loading="loading" />
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
|
|
@ -69,11 +69,11 @@
|
|||
<script>
|
||||
// import itemsJSON from '@/data/item.json'
|
||||
import summonersJSON from '@/data/summoner.json'
|
||||
import RecentActivity from '@/components/RecentActivity.vue';
|
||||
import Match from '@/components/Match.vue';
|
||||
import SearchForm from '@/components/SearchForm.vue';
|
||||
import { maps, gameModes } from "@/data/data.js";
|
||||
import { timeDifference, secToTime, getRankImg } from "@/helpers/functions.js";
|
||||
import RecentActivity from '@/components/RecentActivity.vue'
|
||||
import Match from '@/components/Match.vue'
|
||||
import SearchForm from '@/components/SearchForm.vue'
|
||||
import { maps, gameModes } from '@/data/data.js'
|
||||
import { timeDifference, secToTime, getRankImg } from '@/helpers/functions.js'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
|
|
@ -81,7 +81,8 @@ export default {
|
|||
RecentActivity,
|
||||
SearchForm
|
||||
},
|
||||
data () {
|
||||
|
||||
data() {
|
||||
return {
|
||||
championsInfos: [],
|
||||
localInfos: {},
|
||||
|
|
@ -100,22 +101,38 @@ export default {
|
|||
'tr': 'tr1',
|
||||
'ru': 'ru'
|
||||
}
|
||||
};
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
summoner () {
|
||||
summoner() {
|
||||
return this.$route.params.name
|
||||
},
|
||||
region () {
|
||||
region() {
|
||||
return this.$route.params.region
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
$route() {
|
||||
console.log('route changed')
|
||||
this.checkLocalStorage()
|
||||
}
|
||||
},
|
||||
|
||||
created: function () {
|
||||
this.getData()
|
||||
},
|
||||
mounted: function () {
|
||||
this.checkLocalStorage()
|
||||
},
|
||||
|
||||
methods: {
|
||||
apiCall () {
|
||||
apiCall() {
|
||||
console.log(this.$patch)
|
||||
const summoner = this.summoner;
|
||||
const region = this.regionsList[this.region];
|
||||
this.loading = true;
|
||||
const summoner = this.summoner
|
||||
const region = this.regionsList[this.region]
|
||||
this.loading = true
|
||||
this.axios({
|
||||
method: 'POST',
|
||||
url: process.env.NODE_ENV === 'development' ? 'http://localhost:5000/api' : 'https://leaguestats.valentinkaelin.ch/api',
|
||||
|
|
@ -128,7 +145,7 @@ export default {
|
|||
}
|
||||
})
|
||||
.then(response => {
|
||||
return response.data;
|
||||
return response.data
|
||||
})
|
||||
.then(jsonData => {
|
||||
if (jsonData) {
|
||||
|
|
@ -136,16 +153,16 @@ export default {
|
|||
this.createObject(jsonData)
|
||||
} else {
|
||||
this.summonerFound = false
|
||||
this.loading = false;
|
||||
this.loading = false
|
||||
console.log('Summoner not found')
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
this.loading = false;
|
||||
console.log(err);
|
||||
});
|
||||
this.loading = false
|
||||
console.log(err)
|
||||
})
|
||||
},
|
||||
checkLocalStorage () {
|
||||
checkLocalStorage() {
|
||||
if (localStorage[`${this.summoner}:${this.region}`]) {
|
||||
console.log('cached')
|
||||
this.summonerFound = true
|
||||
|
|
@ -154,52 +171,52 @@ export default {
|
|||
this.apiCall()
|
||||
}
|
||||
},
|
||||
createObject (JSONData) {
|
||||
createObject(JSONData) {
|
||||
console.time('frontend')
|
||||
console.log('--- ALL INFOS ---')
|
||||
console.log(JSONData);
|
||||
console.log(JSONData)
|
||||
|
||||
const userStats = JSONData[0];
|
||||
const rankedStats = JSONData[1];
|
||||
const soloQStats = rankedStats !== null ? (rankedStats.queueType == 'RANKED_SOLO_5x5' ? rankedStats : JSONData[2]) : false;
|
||||
const matches = JSONData[3];
|
||||
const userStats = JSONData[0]
|
||||
const rankedStats = JSONData[1]
|
||||
const soloQStats = rankedStats !== null ? (rankedStats.queueType == 'RANKED_SOLO_5x5' ? rankedStats : JSONData[2]) : false
|
||||
const matches = JSONData[3]
|
||||
|
||||
const matchesInfos = [];
|
||||
const matchesInfos = []
|
||||
// Loop on all matches
|
||||
for (let i = 0; i < matches.length; i++) {
|
||||
const currentMatch = matches[i];
|
||||
const currentMatch = matches[i]
|
||||
const participantId = currentMatch.participantIdentities.find((p) => p.player.currentAccountId === userStats.accountId).participantId
|
||||
|
||||
const teamId = currentMatch.participants[participantId - 1].teamId;
|
||||
const teamId = currentMatch.participants[participantId - 1].teamId
|
||||
const win = currentMatch.teams.find((t) => t.teamId === teamId).win === 'Win'
|
||||
|
||||
const map = maps[currentMatch.mapId];
|
||||
let mode = gameModes[currentMatch.queueId];
|
||||
const map = maps[currentMatch.mapId]
|
||||
let mode = gameModes[currentMatch.queueId]
|
||||
if (!mode)
|
||||
mode = 'Undefined gamemode';
|
||||
mode = 'Undefined gamemode'
|
||||
//console.log(Object.entries(this.championsInfos))
|
||||
//console.log(this.championsInfos)
|
||||
const champion = Object.entries(this.championsInfos).find(([, champion]) => Number(champion.key) === currentMatch.participants[participantId - 1].championId)[0]
|
||||
//const champion = championsId[currentMatch.participants[participantId - 1].championId];
|
||||
const role = currentMatch.participants[participantId - 1].timeline.lane;
|
||||
const timeAgo = timeDifference(currentMatch.gameCreation);
|
||||
const time = secToTime(currentMatch.gameDuration);
|
||||
const kills = currentMatch.participants[participantId - 1].stats.kills;
|
||||
const deaths = currentMatch.participants[participantId - 1].stats.deaths;
|
||||
const assists = currentMatch.participants[participantId - 1].stats.assists;
|
||||
const level = currentMatch.participants[participantId - 1].stats.champLevel;
|
||||
const role = currentMatch.participants[participantId - 1].timeline.lane
|
||||
const timeAgo = timeDifference(currentMatch.gameCreation)
|
||||
const time = secToTime(currentMatch.gameDuration)
|
||||
const kills = currentMatch.participants[participantId - 1].stats.kills
|
||||
const deaths = currentMatch.participants[participantId - 1].stats.deaths
|
||||
const assists = currentMatch.participants[participantId - 1].stats.assists
|
||||
const level = currentMatch.participants[participantId - 1].stats.champLevel
|
||||
|
||||
const items = [];
|
||||
const items = []
|
||||
for (let i = 0; i < 6; i++) {
|
||||
const currentItem = 'item' + i;
|
||||
items.push(this.getItemLink(currentMatch.participants[participantId - 1].stats[currentItem]));
|
||||
const currentItem = 'item' + i
|
||||
items.push(this.getItemLink(currentMatch.participants[participantId - 1].stats[currentItem]))
|
||||
}
|
||||
|
||||
const gold = (currentMatch.participants[participantId - 1].stats.goldEarned / 1000).toFixed(1) + 'k';
|
||||
const minions = currentMatch.participants[participantId - 1].stats.totalMinionsKilled + currentMatch.participants[participantId - 1].stats.neutralMinionsKilled;
|
||||
const gold = (currentMatch.participants[participantId - 1].stats.goldEarned / 1000).toFixed(1) + 'k'
|
||||
const minions = currentMatch.participants[participantId - 1].stats.totalMinionsKilled + currentMatch.participants[participantId - 1].stats.neutralMinionsKilled
|
||||
|
||||
const firstSum = currentMatch.participants[participantId - 1].spell1Id;
|
||||
const secondSum = currentMatch.participants[participantId - 1].spell2Id;
|
||||
const firstSum = currentMatch.participants[participantId - 1].spell1Id
|
||||
const secondSum = currentMatch.participants[participantId - 1].spell2Id
|
||||
|
||||
matchesInfos.push({
|
||||
result: win,
|
||||
|
|
@ -218,10 +235,10 @@ export default {
|
|||
minions: minions,
|
||||
firstSum: this.getSummonerLink(firstSum),
|
||||
secondSum: this.getSummonerLink(secondSum)
|
||||
});
|
||||
})
|
||||
} // end loop matches
|
||||
console.log('matches infos just below')
|
||||
console.log(matchesInfos);
|
||||
console.log(matchesInfos)
|
||||
|
||||
this.localInfos = {
|
||||
accountId: userStats.accountId,
|
||||
|
|
@ -236,15 +253,15 @@ export default {
|
|||
rankedLosses: soloQStats ? soloQStats.losses : undefined
|
||||
}
|
||||
|
||||
console.log('====== Saved infos ======');
|
||||
console.log(this.localInfos);
|
||||
console.log('====== Saved infos ======')
|
||||
console.log(this.localInfos)
|
||||
|
||||
localStorage[`${this.summoner}:${this.region}`] = JSON.stringify(this.localInfos);
|
||||
localStorage[`${this.summoner}:${this.region}`] = JSON.stringify(this.localInfos)
|
||||
console.timeEnd('frontend')
|
||||
this.loading = false;
|
||||
this.loading = false
|
||||
|
||||
},
|
||||
getData () {
|
||||
getData() {
|
||||
console.log('API CALL FOR CHAMPIONS')
|
||||
this.axios({
|
||||
method: 'GET',
|
||||
|
|
@ -258,34 +275,22 @@ export default {
|
|||
this.championsInfos = jsonData.data
|
||||
})
|
||||
},
|
||||
getItemLink (id) {
|
||||
return `url('https://ddragon.leagueoflegends.com/cdn/${this.$patch}/img/item/${id === 0 ? 3637 : id}.png') no-repeat center center / contain`;
|
||||
getItemLink(id) {
|
||||
return `url('https://ddragon.leagueoflegends.com/cdn/${this.$patch}/img/item/${id === 0 ? 3637 : id}.png') no-repeat center center / contain`
|
||||
},
|
||||
getSummonerLink (id) {
|
||||
getSummonerLink(id) {
|
||||
const spellName = Object.entries(summonersJSON.data).find(([, spell]) => Number(spell.key) === id)[0]
|
||||
return `https://ddragon.leagueoflegends.com/cdn/${this.$patch}/img/spell/${spellName}.png`;
|
||||
return `https://ddragon.leagueoflegends.com/cdn/${this.$patch}/img/spell/${spellName}.png`
|
||||
},
|
||||
redirect (summoner, region) {
|
||||
redirect(summoner, region) {
|
||||
this.$router.push(`/summoner/${region}/${summoner}`)
|
||||
},
|
||||
resetLocalStorage () {
|
||||
resetLocalStorage() {
|
||||
console.log('CLEAR LOCALSTORAGE')
|
||||
localStorage.clear()
|
||||
}
|
||||
},
|
||||
created: function () {
|
||||
this.getData()
|
||||
},
|
||||
mounted: function () {
|
||||
this.checkLocalStorage()
|
||||
},
|
||||
watch: {
|
||||
$route () {
|
||||
console.log('route changed')
|
||||
this.checkLocalStorage()
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
|
|
|||
Loading…
Reference in a new issue