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

Start RecentActivity component 🤯

Browse source
This commit is contained in:
Valentin Kaelin 2019-08-20 00:08:13 +02:00
parent 1b674f13fb
commit 103656f094
3 changed files with 126 additions and 52 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

57
client/src/components/RecentActivity.vue Normal file
View file

@ -0,0 +1,57 @@
<template>
<div>
<h4 class="font-bold text-lg">Recent Activity</h4>
<ul>
<li
v-for="(day) in matchesPerDay"
:key="day.timestamp"
>{{ day.date + ' : ' + day.matches + ' game(s)' }}</li>
</ul>
</div>
</template>
<script>
export default {
props: {
matches: {
type: Array,
required: true
}
},
data () {
return {
matchesPerDay: []
}
},
created () {
console.log('activity')
for (const key in this.matches) {
const match = this.matches[key]
const matchTime = new Date(match.timestamp)
const options = {
year: "numeric",
month: "2-digit",
day: "numeric"
};
const formattedTime = matchTime.toLocaleString('fr', options)
// const formattedTime = matchTime.getDate() + '/' + (matchTime.getMonth() + 1) + '/' + matchTime.getFullYear()
const day = this.matchesPerDay.filter(e => e.date === formattedTime)
if (day.length > 0) {
day[0].matches++
} else {
this.matchesPerDay.push({
date: formattedTime,
matches: 1
})
}
}
this.matchesPerDay = this.matchesPerDay.reverse()
},
}
</script>

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

@ -4,10 +4,12 @@
<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">
<router-link
to="/"
class="flex items-center text-lg text-teal-100 mr-8 hover:text-teal-200"
>Accueil</router-link>
<router-link to="/" class="flex items-center text-lg text-teal-100 mr-8 hover:text-teal-200">Accueil</router-link> <SearchForm @formSubmit="redirect" />
<SearchForm @formSubmit="redirect"/>
<button <button
v-if="summonerFound" v-if="summonerFound"
@ -16,49 +18,58 @@
:disabled="loading" :disabled="loading"
@click="apiCall" @click="apiCall"
> >
<v-icon name="sync" class="absolute vertical-center horizontal-center"/> <v-icon name="sync" class="absolute vertical-center horizontal-center" />
</button> </button>
</div> </div>
</header> </header>
<template v-if="summonerFound && !loading"> <template v-if="summonerFound && !loading">
<div class="container mx-auto pb-16"> <div class="container mx-auto pb-16">
<div class="player bg-blue-100"> <div class="player bg-blue-100">
<div class="player__pp" :style="{background: `url(https://ddragon.leagueoflegends.com/cdn/${this.$patch}/img/profileicon/${localInfos.profileIconId}.png) center/cover`}"></div> <div
class="player__pp"
:style="{background: `url(https://ddragon.leagueoflegends.com/cdn/${this.$patch}/img/profileicon/${localInfos.profileIconId}.png) center/cover`}"
></div>
<h1 class="player__name">{{ localInfos.name }}</h1> <h1 class="player__name">{{ localInfos.name }}</h1>
<h3 class="player__level">{{ localInfos.level }}</h3> <h3 class="player__level">{{ localInfos.level }}</h3>
<h3 class="player__rank">{{ localInfos.rank }}</h3> <h3 class="player__rank">{{ localInfos.rank }}</h3>
<div class="player__rank-img" :style="{background: `url(${localInfos.rankImgLink}) center/cover`}"></div> <div
<h3 class="player__ratio">{{ localInfos.rankedWins ? localInfos.rankedWins + ' wins / ' + localInfos.rankedLosses + ' losses' : "Joueur non classé" }}</h3> class="player__rank-img"
:style="{background: `url(${localInfos.rankImgLink}) center/cover`}"
></div>
<h3
class="player__ratio"
>{{ localInfos.rankedWins ? localInfos.rankedWins + ' wins / ' + localInfos.rankedLosses + ' losses' : "Joueur non classé" }}</h3>
<RecentActivity :matches="localInfos.allMatches"></RecentActivity>
<ul class="list-matches--debug"> <ul class="list-matches--debug">
<Match <Match
v-for="(match, index) in localInfos.matches" :key="index" v-for="(match, index) in localInfos.matches"
:key="index"
:data="localInfos.matches[index]" :data="localInfos.matches[index]"
/> />
</ul> </ul>
</div> </div>
</div> </div>
</template> </template>
<template v-else-if="loading"> <template v-else-if="loading">
<div class="flex items-center justify-center bg-white max-w-xs mx-auto p-5 rounded-lg shadow-xl"> <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"></dot-loader>
</div> </div>
</template> </template>
<template v-else> <template v-else>
<p>Le joueur est introuvable.</p> <p>Le joueur est introuvable.</p>
</template> </template>
</div> </div>
</template> </template>
<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 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";
@ -67,39 +78,40 @@ import { timeDifference, secToTime, getRankImg } from "@/helpers/functions.js";
export default { export default {
components: { components: {
Match, Match,
RecentActivity,
SearchForm SearchForm
}, },
data() { data () {
return { return {
championsInfos: [], championsInfos: [],
localInfos: {}, localInfos: {},
summonerFound: true, summonerFound: false,
loading: false, loading: false,
regionsList: { regionsList: {
'br': 'br1', 'br': 'br1',
'eune': 'eun1', 'eune': 'eun1',
'euw': 'euw1', 'euw': 'euw1',
'jp': 'jp1', 'jp': 'jp1',
'kr': 'kr', 'kr': 'kr',
'lan': 'la1', 'lan': 'la1',
'las': 'la2', 'las': 'la2',
'na': 'na1', 'na': 'na1',
'oce': 'oc1', 'oce': 'oc1',
'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
} }
}, },
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];
@ -116,15 +128,15 @@ export default {
} }
}) })
.then(response => { .then(response => {
this.loading = false;
return response.data; return response.data;
}) })
.then(jsonData => { .then(jsonData => {
if(jsonData) { if (jsonData) {
this.summonerFound = true this.summonerFound = true
this.createObject(jsonData) this.createObject(jsonData)
} else { } else {
this.summonerFound = false this.summonerFound = false
this.loading = false;
console.log('Summoner not found') console.log('Summoner not found')
} }
}) })
@ -133,7 +145,7 @@ export default {
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
@ -142,7 +154,7 @@ 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);
@ -150,7 +162,7 @@ export default {
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].matches; const matches = JSONData[3];
const matchesInfos = []; const matchesInfos = [];
// Loop on all matches // Loop on all matches
@ -210,8 +222,9 @@ export default {
} // end loop matches } // end loop matches
console.log(matchesInfos); console.log(matchesInfos);
this.localInfos = { this.localInfos = {
accountId: userStats.accountId, accountId: userStats.accountId,
allMatches: JSONData[4].matches,
matches: matchesInfos, matches: matchesInfos,
profileIconId: userStats.profileIconId, profileIconId: userStats.profileIconId,
name: userStats.name, name: userStats.name,
@ -227,44 +240,46 @@ export default {
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;
}, },
getData() { getData () {
console.log('API CALL FOR CHAMPIONS') console.log('API CALL FOR CHAMPIONS')
this.axios({ this.axios({
method: 'GET', method: 'GET',
url: `https://ddragon.leagueoflegends.com/cdn/${this.$patch}/data/en_US/champion.json` url: `https://ddragon.leagueoflegends.com/cdn/${this.$patch}/data/en_US/champion.json`
}) })
.then(response => { .then(response => {
return response.data return response.data
}) })
.then(jsonData => { .then(jsonData => {
console.log('here') console.log('here')
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() { created: function () {
this.getData() this.getData()
}, },
mounted: function () { mounted: function () {
this.checkLocalStorage() this.checkLocalStorage()
}, },
watch: { watch: {
$route() { $route () {
console.log('route changed') console.log('route changed')
this.checkLocalStorage() this.checkLocalStorage()
} }

12
server/server.js
View file

@ -108,14 +108,15 @@ const getRanked = function (res) {
}) })
} }
// Get 10 matches of an accountID // Get 100 matches basic infos and 10 matches details of an accountID
const getMatches = function (res) { const getMatches = function (res) {
console.time('getMatches'); console.time('getMatches');
request(`https://${data.region}.api.riotgames.com/lol/match/v4/matchlists/by-account/${data.accountID}?endIndex=10&api_key=${data.key}`, function (error, response, body) { request(`https://${data.region}.api.riotgames.com/lol/match/v4/matchlists/by-account/${data.accountID}?endIndex=100&api_key=${data.key}`, function (error, response, body) {
if (!error && response.statusCode == 200) { if (!error && response.statusCode == 200) {
data.JSONMatches = JSON.parse(body); const allMatches = JSON.parse(body)
const matchsId = data.JSONMatches.matches.map(x => x.gameId) data.JSONMatches = allMatches.matches.slice(0, 10)
const matchsId = data.JSONMatches.map(x => x.gameId)
Promise.map(matchsId, function (id) { Promise.map(matchsId, function (id) {
return getMatch('match/v4/matches/' + id); return getMatch('match/v4/matches/' + id);
@ -123,6 +124,7 @@ const getMatches = function (res) {
console.timeEnd('getMatches'); console.timeEnd('getMatches');
console.log('Finished - Data sent to front'); console.log('Finished - Data sent to front');
data.finalJSON.push(data.JSONMatches) data.finalJSON.push(data.JSONMatches)
data.finalJSON.push(allMatches)
res.send(data.finalJSON); res.send(data.finalJSON);
console.timeEnd('all') console.timeEnd('all')
}).catch(err => { }).catch(err => {
@ -137,6 +139,6 @@ const getMatches = function (res) {
const getMatch = async function (urlApi) { const getMatch = async function (urlApi) {
//console.log(urlApi); //console.log(urlApi);
return rp({ url: `https://${data.region}.api.riotgames.com/lol/${urlApi}?api_key=${data.key}`, json: true }).then(function (obj) { return rp({ url: `https://${data.region}.api.riotgames.com/lol/${urlApi}?api_key=${data.key}`, json: true }).then(function (obj) {
data.JSONMatches.matches = data.JSONMatches.matches.map((match) => match.gameId === obj.gameId ? obj : match); data.JSONMatches = data.JSONMatches.map((match) => match.gameId === obj.gameId ? obj : match);
}); });
} }