Doble/LeagueStats
1
0
Fork 0
mirror of https://github.com/vkaelin/LeagueStats.git synced 2026-03-25 21:07:27 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Configure ESLint for the Vue project

Browse source
This commit is contained in:
Valentin Kaelin 2019-08-23 16:48:16 +02:00
parent 1846f84491
commit 8a603a3903
11 changed files with 308 additions and 270 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
client/.eslintrc.js
View file

@ -5,12 +5,34 @@ module.exports = {
}, },
'extends': [ 'extends': [
'plugin:vue/essential', 'plugin:vue/essential',
'plugin:vue/recommended',
'eslint:recommended' 'eslint:recommended'
], ],
rules: { rules: {
//'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off', //'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'no-console': '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: { parserOptions: {
parser: 'babel-eslint' parser: 'babel-eslint'

4
client/src/App.vue
View file

@ -1,8 +1,8 @@
<template> <template>
<div id="app" class="font-sans bg-gray-200 antialiased min-h-screen"> <div id="app" class="font-sans bg-gray-200 antialiased min-h-screen">
<NotificationsContainer/> <NotificationsContainer />
<router-view/> <router-view />
</div> </div>
</template> </template>

13
client/src/components/LazyBackgroundImage.vue
View file

@ -45,10 +45,16 @@ export default {
if (this.imageState === 'loaded') { if (this.imageState === 'loaded') {
return 'background-image: url(' + this.asyncImage.src + '); background-size: ' + this.backgroundSize return 'background-image: url(' + this.asyncImage.src + '); background-size: ' + this.backgroundSize
} }
return ''; return ''
} }
}, },
mounted () {
this.$nextTick(() => {
this.fetchImage()
})
},
methods: { methods: {
fetchImage () { fetchImage () {
this.asyncImage.onload = this.imageOnLoad this.asyncImage.onload = this.imageOnLoad
@ -58,11 +64,6 @@ export default {
imageOnLoad () { imageOnLoad () {
this.imageState = 'loaded' this.imageState = 'loaded'
} }
},
mounted () {
this.$nextTick(() => {
this.fetchImage()
})
} }
} }
</script> </script>

45
client/src/components/Match.vue
View file

@ -1,11 +1,10 @@
<template> <template>
<li class="match bg-white shadow text-sm md:text-base" :class="data.result ? 'win' : 'lose'"> <li class="match bg-white shadow text-sm md:text-base" :class="data.result ? 'win' : 'lose'">
<div class="match-container"> <div class="match-container">
<!-- Responsive --> <!-- 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="flex">
<div class="gamemode mr-1">{{ data.gamemode }}</div> <div class="gamemode mr-1">{{ data.gamemode }}</div>
<span>•</span> <span>•</span>
@ -17,16 +16,19 @@
</div> </div>
<div class="flex-container"> <div class="flex-container">
<div class="first col w-1/3 lg:w-1/4"> <div class="first col w-1/3 lg:w-1/4">
<div class="icon-and-sums flex flex-col sm:flex-row"> <div class="icon-and-sums flex flex-col sm:flex-row">
<div class="relative"> <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"> <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> <span class="level absolute bottom-0 left-0 text-white font-bold">{{ data.level }}</span>
</div> </div>
<div class="summonerSpells flex flex-row sm:flex-col"> <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 mr-2px sm:mr-0 sm:mb-2px" :src="data.firstSum" alt="Ignite" />
<img class="spell-icon" :src="data.secondSum" alt="Ignite"> <img class="spell-icon" :src="data.secondSum" alt="Ignite" />
</div> </div>
</div> </div>
<span class="champion-name hidden sm:block">{{ data.champ }}</span> <span class="champion-name hidden sm:block">{{ data.champ }}</span>
@ -39,14 +41,19 @@
<div class="third col w-1/2 lg:w-1/4 flex-wrap md:flex-no-wrap"> <div class="third col w-1/2 lg:w-1/4 flex-wrap md:flex-no-wrap">
<div <div
v-for="(item, index) in data.items" :key="index" v-for="(item, index) in data.items"
:style="{background: item}" class="item" :key="index"
> :style="{background: item}"
</div> class="item"
></div>
</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
<div class="score mb-2 sm:mb-0 font-bold">{{ data.kills }}/{{ data.deaths }}/{{ data.assists }}</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-farm text-center">
<div class="gold flex items-center justify-center mb-2 sm:mb-0"> <div class="gold flex items-center justify-center mb-2 sm:mb-0">
{{ data.gold }} {{ data.gold }}
@ -62,7 +69,6 @@
<div class="date">{{ data.date }}</div> <div class="date">{{ data.date }}</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</li> </li>
@ -73,7 +79,10 @@
export default { export default {
props: { props: {
data: Object data: {
type: Object,
required: true
}
} }
} }
</script> </script>
@ -92,11 +101,11 @@ export default {
} }
.match.win .match-container { .match.win .match-container {
border-left: 10px solid #48BB78; border-left: 10px solid #48bb78;
} }
.match.lose .match-container { .match.lose .match-container {
border-left: 10px solid #F56565; border-left: 10px solid #f56565;
} }
/* First col */ /* First col */

2
client/src/components/NotificationsContainer.vue
View file

@ -9,7 +9,7 @@
</template> </template>
<script> <script>
import PopupNotification from '@/components/PopupNotification.vue'; import PopupNotification from '@/components/PopupNotification.vue'
import { mapState } from 'vuex' import { mapState } from 'vuex'
export default { export default {

18
client/src/components/PopupNotification.vue
View file

@ -49,14 +49,7 @@ export default {
data() { data() {
return { return {
timeout: null timeout: null
}; }
},
methods: {
deleteNotification() {
this.remove(this.notification)
},
...mapActions('notification', ['remove'])
}, },
beforeDestroy() { beforeDestroy() {
@ -64,6 +57,13 @@ export default {
}, },
mounted() { mounted() {
this.timeout = setTimeout(() => this.deleteNotification(), 3000) this.timeout = setTimeout(() => this.deleteNotification(), 3000)
},
methods: {
deleteNotification() {
this.remove(this.notification)
},
...mapActions('notification', ['remove'])
} }
}; }
</script> </script>

130
client/src/components/RecentActivity.vue
View file

@ -28,7 +28,7 @@
:title="day.date + ' : ' + day.matches + ' game(s)'" :title="day.date + ' : ' + day.matches + ' game(s)'"
:class="[getCaseMargin(index), getCaseColor(day.matches)]" :class="[getCaseMargin(index), getCaseColor(day.matches)]"
class="ml-1 w-4 h-4 cursor-pointer" class="ml-1 w-4 h-4 cursor-pointer"
></div> />
</div> </div>
</div> </div>
</div> </div>
@ -49,74 +49,74 @@ export default {
gridDays: [], gridDays: [],
indexFirstMonday: 0, indexFirstMonday: 0,
nbColumns: 15 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() { 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> </script>

15
client/src/components/SearchForm.vue
View file

@ -3,10 +3,10 @@
<div v-if="dropdown" @click="dropdown = false" class="fixed z-20 inset-0"></div> <div v-if="dropdown" @click="dropdown = false" class="fixed z-20 inset-0"></div>
<div class="relative w-full"> <div class="relative w-full">
<input <input
v-model="summoner"
type="text" type="text"
autofocus autofocus
class="input w-full px-2 py-4 rounded-lg outline-none pl-8 pr-16 font-bold" 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 class="absolute right-0 z-30 vertical-center flex items-center h-full mr-2">
<div <div
@ -41,7 +41,8 @@
v-if="region === selectedRegion" v-if="region === selectedRegion"
name="check" name="check"
scale="0.7" scale="0.7"
class="absolute vertical-center offsetIcon"> class="absolute vertical-center offsetIcon"
>
</v-icon> </v-icon>
{{ region }} {{ region }}
</div> </div>
@ -75,20 +76,20 @@ export default {
'RU' 'RU'
], ],
selectedRegion: 'EUW' selectedRegion: 'EUW'
}; }
}, },
methods: { methods: {
classRegions(index) { classRegions(index) {
return { return {
'rounded-t': index === 0, 'rounded-t': index === 0,
'rounded-b': index === this.regions.length - 1 'rounded-b': index === this.regions.length - 1
}; }
}, },
formSubmit() { formSubmit() {
const regexNames = new RegExp('^[0-9\\p{L} _\\.]+$', 'u'); const regexNames = new RegExp('^[0-9\\p{L} _\\.]+$', 'u')
if(regexNames.exec(this.summoner)) { 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 { } else {
this.$store.dispatch('notification/add', { this.$store.dispatch('notification/add', {
type: 'error', type: 'error',
@ -97,7 +98,7 @@ export default {
} }
} }
} }
}; }
</script> </script>
<style scoped> <style scoped>

40
client/src/helpers/functions.js
View file

@ -3,26 +3,26 @@
* @param previous : time we want to get difference * @param previous : time we want to get difference
*/ */
export function timeDifference(previous) { export function timeDifference(previous) {
const current = new Date(); const current = new Date()
const msPerMinute = 60 * 1000; const msPerMinute = 60 * 1000
const msPerHour = msPerMinute * 60; const msPerHour = msPerMinute * 60
const msPerDay = msPerHour * 24; const msPerDay = msPerHour * 24
const msPerWeek = msPerDay * 7; const msPerWeek = msPerDay * 7
const elapsed = current - previous; const elapsed = current - previous
if (elapsed < msPerMinute) { if (elapsed < msPerMinute) {
return Math.round(elapsed / 1000) + 's'; return Math.round(elapsed / 1000) + 's'
} else if (elapsed < msPerHour) { } else if (elapsed < msPerHour) {
return Math.round(elapsed / msPerMinute) + 'm'; return Math.round(elapsed / msPerMinute) + 'm'
} else if (elapsed < msPerDay) { } else if (elapsed < msPerDay) {
return Math.round(elapsed / msPerHour) + 'h'; return Math.round(elapsed / msPerHour) + 'h'
} else if (elapsed < msPerWeek) { } else if (elapsed < msPerWeek) {
return Math.round(elapsed / msPerDay) + 'j'; return Math.round(elapsed / msPerDay) + 'j'
} else { } else {
const oldDate = new Date(previous); const oldDate = new Date(previous)
const day = oldDate.getDate() < 10 ? '0' + oldDate.getDate() : oldDate.getDate(); const day = oldDate.getDate() < 10 ? '0' + oldDate.getDate() : oldDate.getDate()
const month = oldDate.getMonth() < 9 ? '0' + (oldDate.getMonth() + 1) : (oldDate.getMonth() + 1); const month = oldDate.getMonth() < 9 ? '0' + (oldDate.getMonth() + 1) : (oldDate.getMonth() + 1)
return day + '.' + month + '.' + oldDate.getFullYear().toString().substr(-2); return day + '.' + month + '.' + oldDate.getFullYear().toString().substr(-2)
} }
} }
@ -32,9 +32,9 @@ export function timeDifference(previous) {
* @param sec : time in seconds to convert * @param sec : time in seconds to convert
*/ */
export function secToTime(sec) { export function secToTime(sec) {
const min = Math.floor(sec / 60); const min = Math.floor(sec / 60)
const newSec = sec - min * 60; const newSec = sec - min * 60
return min + ':' + (newSec < 10 ? '0' + newSec : newSec); // return min + ':' + (newSec < 10 ? '0' + newSec : newSec) //
} }
@ -44,9 +44,9 @@ export function secToTime(sec) {
*/ */
export function getRankImg(soloQStats) { export function getRankImg(soloQStats) {
if (!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 * @param string : string to capitalize
*/ */
function capitalize(string) { function capitalize(string) {
return string.charAt(0).toUpperCase() + string.slice(1); return string.charAt(0).toUpperCase() + string.slice(1)
} }

4
client/src/views/Home.vue
View file

@ -25,7 +25,7 @@
<script> <script>
import LazyBackground from '@/components/LazyBackgroundImage.vue' import LazyBackground from '@/components/LazyBackgroundImage.vue'
import SearchForm from '@/components/SearchForm.vue'; import SearchForm from '@/components/SearchForm.vue'
export default { export default {
components: { components: {
@ -38,7 +38,7 @@ export default {
this.$router.push(`/summoner/${region}/${summoner}`) this.$router.push(`/summoner/${region}/${summoner}`)
}, },
} }
}; }
</script> </script>
<style scoped> <style scoped>

155
client/src/views/Summoner.vue
View file

@ -1,6 +1,6 @@
<template> <template>
<div> <div>
<button class="debug" @click="resetLocalStorage"></button> <button @click="resetLocalStorage" class="debug"></button>
<header class="search mb-4 bg-teal-900 text-teal-100"> <header class="search mb-4 bg-teal-900 text-teal-100">
<div class="container mx-auto flex justify-between py-8"> <div class="container mx-auto flex justify-between py-8">
@ -13,10 +13,10 @@
<button <button
v-if="summonerFound" v-if="summonerFound"
@click="apiCall"
id="refresh" id="refresh"
class="input btn w-20 rounded-lg ml-2 relative" class="input btn w-20 rounded-lg ml-2 relative"
:disabled="loading" :disabled="loading"
@click="apiCall"
> >
<v-icon name="sync" class="absolute vertical-center horizontal-center" /> <v-icon name="sync" class="absolute vertical-center horizontal-center" />
</button> </button>
@ -41,7 +41,7 @@
class="player__ratio" class="player__ratio"
>{{ localInfos.rankedWins ? localInfos.rankedWins + ' wins / ' + localInfos.rankedLosses + ' losses' : "Joueur non classé" }}</h3> >{{ 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"> <ul class="list-matches--debug">
<Match <Match
@ -57,7 +57,7 @@
<div <div
class="flex items-center justify-center bg-white max-w-xs mx-auto p-5 rounded-lg shadow-xl" 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> </div>
</template> </template>
<template v-else> <template v-else>
@ -69,11 +69,11 @@
<script> <script>
// import itemsJSON from '@/data/item.json' // import itemsJSON from '@/data/item.json'
import summonersJSON from '@/data/summoner.json' import summonersJSON from '@/data/summoner.json'
import RecentActivity from '@/components/RecentActivity.vue'; import RecentActivity from '@/components/RecentActivity.vue'
import Match from '@/components/Match.vue'; import Match from '@/components/Match.vue'
import SearchForm from '@/components/SearchForm.vue'; import SearchForm from '@/components/SearchForm.vue'
import { maps, gameModes } from "@/data/data.js"; import { maps, gameModes } from '@/data/data.js'
import { timeDifference, secToTime, getRankImg } from "@/helpers/functions.js"; import { timeDifference, secToTime, getRankImg } from '@/helpers/functions.js'
export default { export default {
components: { components: {
@ -81,7 +81,8 @@ export default {
RecentActivity, RecentActivity,
SearchForm SearchForm
}, },
data () {
data() {
return { return {
championsInfos: [], championsInfos: [],
localInfos: {}, localInfos: {},
@ -100,22 +101,38 @@ export default {
'tr': 'tr1', 'tr': 'tr1',
'ru': 'ru' 'ru': 'ru'
} }
}; }
}, },
computed: { computed: {
summoner () { summoner() {
return this.$route.params.name return this.$route.params.name
}, },
region () { region() {
return this.$route.params.region return this.$route.params.region
} }
}, },
watch: {
$route() {
console.log('route changed')
this.checkLocalStorage()
}
},
created: function () {
this.getData()
},
mounted: function () {
this.checkLocalStorage()
},
methods: { methods: {
apiCall () { apiCall() {
console.log(this.$patch) console.log(this.$patch)
const summoner = this.summoner; const summoner = this.summoner
const region = this.regionsList[this.region]; const region = this.regionsList[this.region]
this.loading = true; this.loading = true
this.axios({ this.axios({
method: 'POST', method: 'POST',
url: process.env.NODE_ENV === 'development' ? 'http://localhost:5000/api' : 'https://leaguestats.valentinkaelin.ch/api', url: process.env.NODE_ENV === 'development' ? 'http://localhost:5000/api' : 'https://leaguestats.valentinkaelin.ch/api',
@ -128,7 +145,7 @@ export default {
} }
}) })
.then(response => { .then(response => {
return response.data; return response.data
}) })
.then(jsonData => { .then(jsonData => {
if (jsonData) { if (jsonData) {
@ -136,16 +153,16 @@ export default {
this.createObject(jsonData) this.createObject(jsonData)
} else { } else {
this.summonerFound = false this.summonerFound = false
this.loading = false; this.loading = false
console.log('Summoner not found') console.log('Summoner not found')
} }
}) })
.catch(err => { .catch(err => {
this.loading = false; this.loading = false
console.log(err); console.log(err)
}); })
}, },
checkLocalStorage () { checkLocalStorage() {
if (localStorage[`${this.summoner}:${this.region}`]) { if (localStorage[`${this.summoner}:${this.region}`]) {
console.log('cached') console.log('cached')
this.summonerFound = true this.summonerFound = true
@ -154,52 +171,52 @@ export default {
this.apiCall() this.apiCall()
} }
}, },
createObject (JSONData) { createObject(JSONData) {
console.time('frontend') console.time('frontend')
console.log('--- ALL INFOS ---') console.log('--- ALL INFOS ---')
console.log(JSONData); console.log(JSONData)
const userStats = JSONData[0]; const userStats = JSONData[0]
const rankedStats = JSONData[1]; const rankedStats = JSONData[1]
const soloQStats = rankedStats !== null ? (rankedStats.queueType == 'RANKED_SOLO_5x5' ? rankedStats : JSONData[2]) : false; const soloQStats = rankedStats !== null ? (rankedStats.queueType == 'RANKED_SOLO_5x5' ? rankedStats : JSONData[2]) : false
const matches = JSONData[3]; const matches = JSONData[3]
const matchesInfos = []; const matchesInfos = []
// Loop on all matches // Loop on all matches
for (let i = 0; i < matches.length; i++) { 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 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 win = currentMatch.teams.find((t) => t.teamId === teamId).win === 'Win'
const map = maps[currentMatch.mapId]; const map = maps[currentMatch.mapId]
let mode = gameModes[currentMatch.queueId]; let mode = gameModes[currentMatch.queueId]
if (!mode) if (!mode)
mode = 'Undefined gamemode'; mode = 'Undefined gamemode'
//console.log(Object.entries(this.championsInfos)) //console.log(Object.entries(this.championsInfos))
//console.log(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 = Object.entries(this.championsInfos).find(([, champion]) => Number(champion.key) === currentMatch.participants[participantId - 1].championId)[0]
//const champion = championsId[currentMatch.participants[participantId - 1].championId]; //const champion = championsId[currentMatch.participants[participantId - 1].championId];
const role = currentMatch.participants[participantId - 1].timeline.lane; const role = currentMatch.participants[participantId - 1].timeline.lane
const timeAgo = timeDifference(currentMatch.gameCreation); const timeAgo = timeDifference(currentMatch.gameCreation)
const time = secToTime(currentMatch.gameDuration); const time = secToTime(currentMatch.gameDuration)
const kills = currentMatch.participants[participantId - 1].stats.kills; const kills = currentMatch.participants[participantId - 1].stats.kills
const deaths = currentMatch.participants[participantId - 1].stats.deaths; const deaths = currentMatch.participants[participantId - 1].stats.deaths
const assists = currentMatch.participants[participantId - 1].stats.assists; const assists = currentMatch.participants[participantId - 1].stats.assists
const level = currentMatch.participants[participantId - 1].stats.champLevel; const level = currentMatch.participants[participantId - 1].stats.champLevel
const items = []; const items = []
for (let i = 0; i < 6; i++) { for (let i = 0; i < 6; i++) {
const currentItem = 'item' + i; const currentItem = 'item' + i
items.push(this.getItemLink(currentMatch.participants[participantId - 1].stats[currentItem])); items.push(this.getItemLink(currentMatch.participants[participantId - 1].stats[currentItem]))
} }
const gold = (currentMatch.participants[participantId - 1].stats.goldEarned / 1000).toFixed(1) + 'k'; 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 minions = currentMatch.participants[participantId - 1].stats.totalMinionsKilled + currentMatch.participants[participantId - 1].stats.neutralMinionsKilled
const firstSum = currentMatch.participants[participantId - 1].spell1Id; const firstSum = currentMatch.participants[participantId - 1].spell1Id
const secondSum = currentMatch.participants[participantId - 1].spell2Id; const secondSum = currentMatch.participants[participantId - 1].spell2Id
matchesInfos.push({ matchesInfos.push({
result: win, result: win,
@ -218,10 +235,10 @@ export default {
minions: minions, minions: minions,
firstSum: this.getSummonerLink(firstSum), firstSum: this.getSummonerLink(firstSum),
secondSum: this.getSummonerLink(secondSum) secondSum: this.getSummonerLink(secondSum)
}); })
} // end loop matches } // end loop matches
console.log('matches infos just below') console.log('matches infos just below')
console.log(matchesInfos); console.log(matchesInfos)
this.localInfos = { this.localInfos = {
accountId: userStats.accountId, accountId: userStats.accountId,
@ -236,15 +253,15 @@ export default {
rankedLosses: soloQStats ? soloQStats.losses : undefined rankedLosses: soloQStats ? soloQStats.losses : undefined
} }
console.log('====== Saved infos ======'); console.log('====== Saved infos ======')
console.log(this.localInfos); 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') console.timeEnd('frontend')
this.loading = false; this.loading = false
}, },
getData () { getData() {
console.log('API CALL FOR CHAMPIONS') console.log('API CALL FOR CHAMPIONS')
this.axios({ this.axios({
method: 'GET', method: 'GET',
@ -258,34 +275,22 @@ export default {
this.championsInfos = jsonData.data this.championsInfos = jsonData.data
}) })
}, },
getItemLink (id) { getItemLink(id) {
return `url('https://ddragon.leagueoflegends.com/cdn/${this.$patch}/img/item/${id === 0 ? 3637 : id}.png') no-repeat center center / contain`; 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] 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}`) this.$router.push(`/summoner/${region}/${summoner}`)
}, },
resetLocalStorage () { resetLocalStorage() {
console.log('CLEAR LOCALSTORAGE') console.log('CLEAR LOCALSTORAGE')
localStorage.clear() localStorage.clear()
} }
},
created: function () {
this.getData()
},
mounted: function () {
this.checkLocalStorage()
},
watch: {
$route () {
console.log('route changed')
this.checkLocalStorage()
} }
} }
};
</script> </script>
<style scoped> <style scoped>