mirror of
https://github.com/vkaelin/LeagueStats.git
synced 2026-03-25 12:57:28 +00:00
Start RecentActivity component 🤯
This commit is contained in:
Valentin Kaelin
parent
1b674f13fb
commit
103656f094
3 changed files with 126 additions and 52 deletions
57
client/src/components/RecentActivity.vue
Normal file
57
client/src/components/RecentActivity.vue
Normal 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>
|
||||
|
|
@ -4,61 +4,72 @@
|
|||
|
||||
<header class="search mb-4 bg-teal-900 text-teal-100">
|
||||
<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
|
||||
v-if="summonerFound"
|
||||
id="refresh"
|
||||
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"/>
|
||||
<v-icon name="sync" class="absolute vertical-center horizontal-center" />
|
||||
</button>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</header>
|
||||
|
||||
|
||||
<template v-if="summonerFound && !loading">
|
||||
<div class="container mx-auto pb-16">
|
||||
<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>
|
||||
<h3 class="player__level">{{ localInfos.level }}</h3>
|
||||
<h3 class="player__rank">{{ localInfos.rank }}</h3>
|
||||
<div 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>
|
||||
<div
|
||||
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">
|
||||
<Match
|
||||
v-for="(match, index) in localInfos.matches" :key="index"
|
||||
v-for="(match, index) in localInfos.matches"
|
||||
:key="index"
|
||||
:data="localInfos.matches[index]"
|
||||
/>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<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">
|
||||
<dot-loader :loading="loading"></dot-loader>
|
||||
<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>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<p>Le joueur est introuvable.</p>
|
||||
</template>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<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";
|
||||
|
|
@ -67,39 +78,40 @@ import { timeDifference, secToTime, getRankImg } from "@/helpers/functions.js";
|
|||
export default {
|
||||
components: {
|
||||
Match,
|
||||
RecentActivity,
|
||||
SearchForm
|
||||
},
|
||||
data() {
|
||||
data () {
|
||||
return {
|
||||
championsInfos: [],
|
||||
localInfos: {},
|
||||
summonerFound: true,
|
||||
summonerFound: false,
|
||||
loading: false,
|
||||
regionsList: {
|
||||
'br': 'br1',
|
||||
'eune': 'eun1',
|
||||
'euw': 'euw1',
|
||||
'br': 'br1',
|
||||
'eune': 'eun1',
|
||||
'euw': 'euw1',
|
||||
'jp': 'jp1',
|
||||
'kr': 'kr',
|
||||
'lan': 'la1',
|
||||
'las': 'la2',
|
||||
'las': 'la2',
|
||||
'na': 'na1',
|
||||
'oce': 'oc1',
|
||||
'oce': 'oc1',
|
||||
'tr': 'tr1',
|
||||
'ru': 'ru'
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
summoner() {
|
||||
summoner () {
|
||||
return this.$route.params.name
|
||||
},
|
||||
region() {
|
||||
region () {
|
||||
return this.$route.params.region
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
apiCall() {
|
||||
apiCall () {
|
||||
console.log(this.$patch)
|
||||
const summoner = this.summoner;
|
||||
const region = this.regionsList[this.region];
|
||||
|
|
@ -116,15 +128,15 @@ export default {
|
|||
}
|
||||
})
|
||||
.then(response => {
|
||||
this.loading = false;
|
||||
return response.data;
|
||||
})
|
||||
.then(jsonData => {
|
||||
if(jsonData) {
|
||||
if (jsonData) {
|
||||
this.summonerFound = true
|
||||
this.createObject(jsonData)
|
||||
} else {
|
||||
this.summonerFound = false
|
||||
this.loading = false;
|
||||
console.log('Summoner not found')
|
||||
}
|
||||
})
|
||||
|
|
@ -133,7 +145,7 @@ export default {
|
|||
console.log(err);
|
||||
});
|
||||
},
|
||||
checkLocalStorage() {
|
||||
checkLocalStorage () {
|
||||
if (localStorage[`${this.summoner}:${this.region}`]) {
|
||||
console.log('cached')
|
||||
this.summonerFound = true
|
||||
|
|
@ -142,7 +154,7 @@ export default {
|
|||
this.apiCall()
|
||||
}
|
||||
},
|
||||
createObject(JSONData) {
|
||||
createObject (JSONData) {
|
||||
console.time('frontend')
|
||||
console.log('--- ALL INFOS ---')
|
||||
console.log(JSONData);
|
||||
|
|
@ -150,7 +162,7 @@ export default {
|
|||
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].matches;
|
||||
const matches = JSONData[3];
|
||||
|
||||
const matchesInfos = [];
|
||||
// Loop on all matches
|
||||
|
|
@ -210,8 +222,9 @@ export default {
|
|||
} // end loop matches
|
||||
console.log(matchesInfos);
|
||||
|
||||
this.localInfos = {
|
||||
this.localInfos = {
|
||||
accountId: userStats.accountId,
|
||||
allMatches: JSONData[4].matches,
|
||||
matches: matchesInfos,
|
||||
profileIconId: userStats.profileIconId,
|
||||
name: userStats.name,
|
||||
|
|
@ -227,44 +240,46 @@ export default {
|
|||
|
||||
localStorage[`${this.summoner}:${this.region}`] = JSON.stringify(this.localInfos);
|
||||
console.timeEnd('frontend')
|
||||
this.loading = false;
|
||||
|
||||
},
|
||||
getData() {
|
||||
getData () {
|
||||
console.log('API CALL FOR CHAMPIONS')
|
||||
this.axios({
|
||||
method: 'GET',
|
||||
url: `https://ddragon.leagueoflegends.com/cdn/${this.$patch}/data/en_US/champion.json`
|
||||
})
|
||||
.then(response => {
|
||||
return response.data
|
||||
})
|
||||
.then(jsonData => {
|
||||
console.log('here')
|
||||
this.championsInfos = jsonData.data
|
||||
})
|
||||
.then(response => {
|
||||
return response.data
|
||||
})
|
||||
.then(jsonData => {
|
||||
console.log('here')
|
||||
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`;
|
||||
},
|
||||
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`;
|
||||
},
|
||||
redirect(summoner, region) {
|
||||
redirect (summoner, region) {
|
||||
this.$router.push(`/summoner/${region}/${summoner}`)
|
||||
},
|
||||
resetLocalStorage() {
|
||||
resetLocalStorage () {
|
||||
console.log('CLEAR LOCALSTORAGE')
|
||||
localStorage.clear()
|
||||
}
|
||||
},
|
||||
created: function() {
|
||||
created: function () {
|
||||
this.getData()
|
||||
},
|
||||
mounted: function () {
|
||||
this.checkLocalStorage()
|
||||
},
|
||||
watch: {
|
||||
$route() {
|
||||
$route () {
|
||||
console.log('route changed')
|
||||
this.checkLocalStorage()
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
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) {
|
||||
data.JSONMatches = JSON.parse(body);
|
||||
const matchsId = data.JSONMatches.matches.map(x => x.gameId)
|
||||
const allMatches = JSON.parse(body)
|
||||
data.JSONMatches = allMatches.matches.slice(0, 10)
|
||||
const matchsId = data.JSONMatches.map(x => x.gameId)
|
||||
|
||||
Promise.map(matchsId, function (id) {
|
||||
return getMatch('match/v4/matches/' + id);
|
||||
|
|
@ -123,6 +124,7 @@ const getMatches = function (res) {
|
|||
console.timeEnd('getMatches');
|
||||
console.log('Finished - Data sent to front');
|
||||
data.finalJSON.push(data.JSONMatches)
|
||||
data.finalJSON.push(allMatches)
|
||||
res.send(data.finalJSON);
|
||||
console.timeEnd('all')
|
||||
}).catch(err => {
|
||||
|
|
@ -137,6 +139,6 @@ const getMatches = function (res) {
|
|||
const getMatch = async function (urlApi) {
|
||||
//console.log(urlApi);
|
||||
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);
|
||||
});
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue