mirror of
https://github.com/vkaelin/LeagueStats.git
synced 2026-03-25 21:07:27 +00:00
Start cleaning some Vue code
This commit is contained in:
Valentin Kaelin
parent
0aba0954e4
commit
d611a7647d
3 changed files with 107 additions and 147 deletions
95
client/src/helpers/summoner.js
Normal file
95
client/src/helpers/summoner.js
Normal file
|
|
@ -0,0 +1,95 @@
|
|||
import { timeDifference, secToTime, getRankImg } from '@/helpers/functions.js'
|
||||
import { maps, gameModes } from '@/data/data.js'
|
||||
import summonersJSON from '@/data/summoner.json'
|
||||
|
||||
/**
|
||||
* Return all the infos about a summoner built with the Riot API data
|
||||
* @param {Object} RiotData : all data from the Riot API
|
||||
* @param {Object} championsInfos : champions data from the Riot API
|
||||
*/
|
||||
export function createSummonerData(RiotData, championsInfos) {
|
||||
console.log('--- ALL INFOS ---')
|
||||
console.log(RiotData)
|
||||
|
||||
const userStats = RiotData.account
|
||||
const soloQStats = RiotData.soloQ
|
||||
const matches = RiotData.matchesDetails
|
||||
|
||||
const matchesInfos = []
|
||||
// Loop on all matches
|
||||
for (let i = 0; i < matches.length; 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 win = currentMatch.teams.find((t) => t.teamId === teamId).win === 'Win'
|
||||
|
||||
const map = maps[currentMatch.mapId]
|
||||
let mode = gameModes[currentMatch.queueId]
|
||||
if (!mode)
|
||||
mode = 'Undefined gamemode'
|
||||
const champion = Object.entries(championsInfos).find(([, champion]) => Number(champion.key) === currentMatch.participants[participantId - 1].championId)[0]
|
||||
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 = []
|
||||
for (let i = 0; i < 6; i++) {
|
||||
const currentItem = 'item' + i
|
||||
items.push(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 firstSum = currentMatch.participants[participantId - 1].spell1Id
|
||||
const secondSum = currentMatch.participants[participantId - 1].spell2Id
|
||||
|
||||
matchesInfos.push({
|
||||
result: win,
|
||||
map: map,
|
||||
gamemode: mode,
|
||||
champ: champion,
|
||||
role: role,
|
||||
date: timeAgo,
|
||||
time: time,
|
||||
kills: kills,
|
||||
deaths: deaths,
|
||||
assists: assists,
|
||||
level: level,
|
||||
items: items,
|
||||
gold: gold,
|
||||
minions: minions,
|
||||
firstSum: getSummonerLink(firstSum),
|
||||
secondSum: getSummonerLink(secondSum)
|
||||
})
|
||||
} // end loop matches
|
||||
console.log('matches infos just below')
|
||||
console.log(matchesInfos)
|
||||
|
||||
return {
|
||||
accountId: userStats.accountId,
|
||||
allMatches: RiotData.allMatches,
|
||||
matches: matchesInfos,
|
||||
profileIconId: userStats.profileIconId,
|
||||
name: userStats.name,
|
||||
level: userStats.summonerLevel,
|
||||
rank: soloQStats ? soloQStats.tier + ' ' + soloQStats.rank : 'Player is unranked',
|
||||
rankImgLink: getRankImg(soloQStats),
|
||||
rankedWins: soloQStats ? soloQStats.wins : undefined,
|
||||
rankedLosses: soloQStats ? soloQStats.losses : undefined
|
||||
}
|
||||
}
|
||||
|
||||
function getItemLink(id) {
|
||||
return `url('https://ddragon.leagueoflegends.com/cdn/${process.env.VUE_APP_PATCH}/img/item/${id === 0 ? 3637 : id}.png') no-repeat center center / contain`
|
||||
}
|
||||
|
||||
function getSummonerLink(id) {
|
||||
const spellName = Object.entries(summonersJSON.data).find(([, spell]) => Number(spell.key) === id)[0]
|
||||
return `https://ddragon.leagueoflegends.com/cdn/${process.env.VUE_APP_PATCH}/img/spell/${spellName}.png`
|
||||
}
|
||||
|
|
@ -1,7 +1,5 @@
|
|||
import { axios } from '@/plugins/axios'
|
||||
import { timeDifference, secToTime, getRankImg } from '@/helpers/functions.js'
|
||||
import { maps, gameModes } from '@/data/data.js'
|
||||
import summonersJSON from '@/data/summoner.json'
|
||||
import { createSummonerData } from '@/helpers/summoner'
|
||||
|
||||
export const namespaced = true
|
||||
|
||||
|
|
@ -33,9 +31,8 @@ export const actions = {
|
|||
commit('SUMMONER_REQUEST')
|
||||
try {
|
||||
const resp = await axios(({ url: 'api', data: { summoner, region }, method: 'POST' }))
|
||||
await dispatch('ddragon/getChampions', {}, { root: true })
|
||||
if (resp.data) {
|
||||
const infos = createObject(resp.data, rootState.ddragon.champions)
|
||||
const infos = createSummonerData(resp.data, rootState.ddragon.champions)
|
||||
commit('SUMMONER_FOUND', infos)
|
||||
} else {
|
||||
commit('SUMMONER_NOT_FOUND')
|
||||
|
|
@ -52,90 +49,3 @@ export const actions = {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
function createObject(JSONData, championsInfos) {
|
||||
console.log('--- ALL INFOS ---')
|
||||
console.log(JSONData)
|
||||
|
||||
const userStats = JSONData.account
|
||||
const soloQStats = JSONData.soloQ
|
||||
const matches = JSONData.matchesDetails
|
||||
|
||||
const matchesInfos = []
|
||||
// Loop on all matches
|
||||
for (let i = 0; i < matches.length; 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 win = currentMatch.teams.find((t) => t.teamId === teamId).win === 'Win'
|
||||
|
||||
const map = maps[currentMatch.mapId]
|
||||
let mode = gameModes[currentMatch.queueId]
|
||||
if (!mode)
|
||||
mode = 'Undefined gamemode'
|
||||
const champion = Object.entries(championsInfos).find(([, champion]) => Number(champion.key) === currentMatch.participants[participantId - 1].championId)[0]
|
||||
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 = []
|
||||
for (let i = 0; i < 6; i++) {
|
||||
const currentItem = 'item' + i
|
||||
items.push(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 firstSum = currentMatch.participants[participantId - 1].spell1Id
|
||||
const secondSum = currentMatch.participants[participantId - 1].spell2Id
|
||||
|
||||
matchesInfos.push({
|
||||
result: win,
|
||||
map: map,
|
||||
gamemode: mode,
|
||||
champ: champion,
|
||||
role: role,
|
||||
date: timeAgo,
|
||||
time: time,
|
||||
kills: kills,
|
||||
deaths: deaths,
|
||||
assists: assists,
|
||||
level: level,
|
||||
items: items,
|
||||
gold: gold,
|
||||
minions: minions,
|
||||
firstSum: getSummonerLink(firstSum),
|
||||
secondSum: getSummonerLink(secondSum)
|
||||
})
|
||||
} // end loop matches
|
||||
console.log('matches infos just below')
|
||||
console.log(matchesInfos)
|
||||
|
||||
return {
|
||||
accountId: userStats.accountId,
|
||||
allMatches: JSONData.allMatches,
|
||||
matches: matchesInfos,
|
||||
profileIconId: userStats.profileIconId,
|
||||
name: userStats.name,
|
||||
level: userStats.summonerLevel,
|
||||
rank: soloQStats ? soloQStats.tier + ' ' + soloQStats.rank : 'Joueur non classé',
|
||||
rankImgLink: getRankImg(soloQStats),
|
||||
rankedWins: soloQStats ? soloQStats.wins : undefined,
|
||||
rankedLosses: soloQStats ? soloQStats.losses : undefined
|
||||
}
|
||||
}
|
||||
|
||||
function getItemLink(id) {
|
||||
return `url('https://ddragon.leagueoflegends.com/cdn/${process.env.VUE_APP_PATCH}/img/item/${id === 0 ? 3637 : id}.png') no-repeat center center / contain`
|
||||
}
|
||||
|
||||
function getSummonerLink(id) {
|
||||
const spellName = Object.entries(summonersJSON.data).find(([, spell]) => Number(spell.key) === id)[0]
|
||||
return `https://ddragon.leagueoflegends.com/cdn/${process.env.VUE_APP_PATCH}/img/spell/${spellName}.png`
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,25 +13,25 @@
|
|||
|
||||
<template v-if="summonerFound && !loading">
|
||||
<div class="container mx-auto pb-16">
|
||||
<div class="player bg-blue-100">
|
||||
<div class="mt-4 mx-auto p-4 text-center bg-blue-100 border border-gray-300 rounded-lg">
|
||||
<div
|
||||
class="player__pp"
|
||||
class="mx-auto w-16 h-16 bg-gray-300"
|
||||
: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"
|
||||
class="mx-auto w-16 h-16 bg-gray-300"
|
||||
:style="{background: `url(${localInfos.rankImgLink}) center/cover`}"
|
||||
></div>
|
||||
<h3
|
||||
class="player__ratio"
|
||||
>{{ localInfos.rankedWins ? localInfos.rankedWins + ' wins / ' + localInfos.rankedLosses + ' losses' : "Joueur non classé" }}</h3>
|
||||
>{{ localInfos.rankedWins ? localInfos.rankedWins + ' wins / ' + localInfos.rankedLosses + ' losses' : localInfos.rank }}</h3>
|
||||
|
||||
<RecentActivity :matches="localInfos.allMatches" />
|
||||
|
||||
<ul class="list-matches--debug">
|
||||
<ul>
|
||||
<Match
|
||||
v-for="(match, index) in localInfos.matches"
|
||||
:key="index"
|
||||
|
|
@ -49,13 +49,12 @@
|
|||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<p>Le joueur est introuvable.</p>
|
||||
<p>Player can't be found.</p>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import itemsJSON from '@/data/item.json'
|
||||
import { mapState, mapActions } from 'vuex'
|
||||
import RecentActivity from '@/components/RecentActivity.vue'
|
||||
import Match from '@/components/Match.vue'
|
||||
|
|
@ -89,64 +88,20 @@ export default {
|
|||
}
|
||||
},
|
||||
|
||||
// created() {
|
||||
// this.getChampionData()
|
||||
// },
|
||||
mounted() {
|
||||
this.apiCall()
|
||||
},
|
||||
|
||||
methods: {
|
||||
async apiCall() {
|
||||
await this.summonerRequest({ summoner: this.summoner, region: this.region })
|
||||
await this.getChampions()
|
||||
this.summonerRequest({ summoner: this.summoner, region: this.region })
|
||||
},
|
||||
redirect(summoner, region) {
|
||||
this.$router.push(`/summoner/${region}/${summoner}`)
|
||||
},
|
||||
...mapActions('summoner', ['summonerRequest'])
|
||||
...mapActions('summoner', ['summonerRequest']),
|
||||
...mapActions('ddragon', ['getChampions'])
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.debug {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: none;
|
||||
z-index: 9999999999;
|
||||
}
|
||||
|
||||
.debug:hover {
|
||||
background: #ef5753;
|
||||
}
|
||||
|
||||
.player {
|
||||
text-align: center;
|
||||
margin: 16px auto 0;
|
||||
border: 1px solid #ebebeb;
|
||||
padding: 16px;
|
||||
/* background: #fff; */
|
||||
}
|
||||
|
||||
.player__pp {
|
||||
width: 75px;
|
||||
height: 75px;
|
||||
background: #ebebeb;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.player__rank-img {
|
||||
width: 75px;
|
||||
height: 75px;
|
||||
background: #ebebeb;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.list-matches {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in a new issue