refactor: use CDragon data for everything instead of DDragon

This commit is contained in:
Valentin Kaelin 2019-11-25 21:15:52 +01:00
parent 4565eece17
commit 7a199d3194
14 changed files with 349 additions and 2057 deletions

View file

@ -1,7 +1,10 @@
<template>
<transition name="slide">
<div v-if="data.status === 'loaded' && detailsOpen" class="bg-blue-800 rounded-b-lg">
<DetailedMatchTeam :data="allyTeam" :all-players="[...allyTeam.players, ...enemyTeam.players]" />
<DetailedMatchTeam
:data="allyTeam"
:all-players="[...allyTeam.players, ...enemyTeam.players]"
/>
<div class="px-3 py-2 flex justify-between items-start">
<DetailedMatchGlobalStats :team="allyTeam" :ally-team="true" />
@ -9,7 +12,10 @@
<DetailedMatchGlobalStats :team="enemyTeam" :ally-team="false" />
</div>
<DetailedMatchTeam :data="enemyTeam" :all-players="[...allyTeam.players, ...enemyTeam.players]" />
<DetailedMatchTeam
:data="enemyTeam"
:all-players="[...allyTeam.players, ...enemyTeam.players]"
/>
</div>
<div v-else-if="data.status === 'loading' && detailsOpen">
<p class="bg-blue-800 py-5 text-blue-100 text-lg font-semibold">Loading...</p>
@ -18,7 +24,6 @@
</template>
<script>
import { mapGetters } from 'vuex'
import DetailedMatchGlobalStats from '@/components/Match/DetailedMatchGlobalStats.vue'
import DetailedMatchTeam from '@/components/Match/DetailedMatchTeam.vue'
import SwitchToggle from '@/components/SwitchToggle.vue'
@ -46,8 +51,7 @@ export default {
},
enemyTeam() {
return this.data.blueTeam.players.some(p => p.name.toLowerCase() === this.$route.params.name.toLowerCase()) ? this.data.redTeam : this.data.blueTeam
},
...mapGetters('ddragon', ['version']),
}
}
}
</script>

View file

@ -8,7 +8,7 @@
class="relative ban inline-block border-2 rounded-full"
>
<div
:style="[ban.champion.id ? {backgroundImage: `url('https://ddragon.leagueoflegends.com/cdn/${version}/img/champion/${ban.champion.id}.png')`} : '']"
:style="[ban.champion.id ? {backgroundImage: `url('${ban.champion.icon}')`} : '']"
class="ban-img w-6 h-6 bg-cover bg-center bg-blue-1000 rounded-full"
></div>
<div
@ -61,8 +61,6 @@
</template>
<script>
import { mapGetters } from 'vuex'
export default {
props: {
team: {
@ -84,8 +82,7 @@ export default {
},
bgColor() {
return this.allyTeam ? 'bg-teal-500' : 'bg-red-500'
},
...mapGetters('ddragon', ['version']),
}
}
}
</script>

View file

@ -54,7 +54,7 @@
></div>
</div>
<div
:style="{backgroundImage: `url('https://ddragon.leagueoflegends.com/cdn/${version}/img/champion/${player.champion.id}.png')`}"
:style="{backgroundImage: `url('${player.champion.icon}')`}"
class="ml-2 relative w-8 h-8 bg-cover bg-center bg-blue-1000 rounded-full"
>
<div
@ -155,7 +155,7 @@
</template>
<script>
import { mapGetters, mapState } from 'vuex'
import { mapState } from 'vuex'
import MatchItems from '@/components/Match/MatchItems'
export default {
@ -184,7 +184,6 @@ export default {
statsFormat() {
return this.percentSettings === 'true' ? 'percentStats' : 'stats'
},
...mapGetters('ddragon', ['version']),
...mapState({
percentSettings: state => state.settings.percent
}),

View file

@ -25,7 +25,7 @@
>LVL {{ data.level }}</div>
</div>
<div
:style="{backgroundImage: `url('https://ddragon.leagueoflegends.com/cdn/${version}/img/champion/${data.champion.id}.png')`}"
:style="{backgroundImage: `url('${data.champion.icon}')`}"
class="ml-2 w-16 h-16 crop-champion bg-blue-1000 rounded-lg"
></div>
<div class="ml-2 flex flex-col justify-around">
@ -56,7 +56,9 @@
<span class>/</span>
<span class>{{ data.stats.assists }}</span>
</div>
<div class="relative z-30 mt-2 text-white text-xs font-extrabold">{{ data.stats.kda }} KDA</div>
<div
class="relative z-30 mt-2 text-white text-xs font-extrabold"
>{{ data.stats.kda }} KDA</div>
</div>
</div>
@ -105,7 +107,7 @@
>{{ ally.name }}</div>
<div
:class="index !== 0 ? '-mt-1': ''"
:style="{backgroundImage: `url('https://ddragon.leagueoflegends.com/cdn/${version}/img/champion/${ally.champion.id}.png')`}"
:style="{backgroundImage: `url('${ally.champion.icon}')`}"
class="ml-1 w-6 h-6 bg-blue-1000 bg-center bg-cover rounded-full overflow-hidden"
></div>
<div
@ -114,7 +116,7 @@
></div>
<div
:class="index !== 0 ? '-mt-1' : ''"
:style="{backgroundImage: `url('https://ddragon.leagueoflegends.com/cdn/${version}/img/champion/${data.enemyTeam[index].champion.id}.png')`}"
:style="{backgroundImage: `url('${data.enemyTeam[index].champion.icon}')`}"
class="w-6 h-6 bg-blue-1000 bg-center bg-cover rounded-full"
></div>
<div
@ -164,7 +166,6 @@ export default {
...mapState({
roles: state => state.roles
}),
...mapGetters('ddragon', ['version']),
...mapGetters('detailedMatch', ['getMatchDetails']),
},

View file

@ -46,10 +46,10 @@
<div class="absolute text-xs" style="left: 6px;">{{ index + 1 }}.</div>
<div class="ml-2 w-champion flex items-center">
<div
:style="{backgroundImage: `url('https://ddragon.leagueoflegends.com/cdn/${version}/img/champion/${champion._id}.png')`}"
:style="{backgroundImage: `url('${champion.champion.icon}')`}"
class="w-8 h-8 bg-center bg-cover bg-blue-1000 rounded-full flex-shrink-0"
></div>
<div class="mx-1 truncate">{{ champion.champion }}</div>
<div class="mx-1 truncate">{{ champion.champion.name }}</div>
</div>
<div class="w-plays">
<div class="text-blue-400 text-xs">{{ champion.count }}</div>
@ -80,7 +80,7 @@
</template>
<script>
import { mapGetters, mapState } from 'vuex'
import { mapState } from 'vuex'
import Dropdown from '@/components/Dropdown.vue'
export default {
@ -98,7 +98,6 @@ export default {
mostPlayed() {
return this.stats.champion.reduce((a, b) => a.count > b.count ? a : b).count
},
...mapGetters('ddragon', ['version']),
...mapState({
stats: state => state.summoner.infos.stats
}),

View file

@ -184,7 +184,7 @@
:class="{'bg-blue-760': index % 2 !== 0}"
class="flex justify-between items-center px-4 py-1 leading-tight"
>
<div class="w-2/4 text-left">{{ championClass._id }}</div>
<div class="w-2/4 text-left capitalize">{{ championClass._id }}</div>
<div
:class="calculateWinrate(championClass.wins, championClass.count).color"
class="w-1/4"

File diff suppressed because it is too large Load diff

View file

@ -1,7 +1,6 @@
import { timeDifference } from '@/helpers/functions.js'
import { maps, gameModes } from '@/data/data.js'
import summonersJSON from '@/data/summoner.json'
import store from '@/store'
const uniqueLeagues = ['CHALLENGER', 'GRANDMASTER', 'MASTER']
const leaguesNumbers = { 'I': 1, 'II': 2, 'III': 3, 'IV': 4 }
@ -101,6 +100,6 @@ export function getRankImg(leagueData) {
function getSummonerLink(id) {
if(id === 0) return null
const spellName = Object.entries(summonersJSON.data).find(([, spell]) => Number(spell.key) === id)[0]
return `https://ddragon.leagueoflegends.com/cdn/${store.getters['ddragon/version']}/img/spell/${spellName}.png`
const spellName = summonersJSON.find(s => s.id === id).iconPath.split('/assets/')[1].toLowerCase()
return `https://raw.communitydragon.org/latest/plugins/rcp-be-lol-game-data/global/default/${spellName}`
}

View file

@ -40,7 +40,7 @@
<div
:class="{'border-2': !playing}"
class="relative z-10 w-24 h-24 rounded-full bg-blue-1000 bg-center bg-cover border-teal-400"
:style="{backgroundImage: getSummonerIcon}"
:style="{backgroundImage: `url('https://raw.communitydragon.org/latest/plugins/rcp-be-lol-game-data/global/default/v1/profile-icons/${summonerInfos.account.profileIconId}.jpg')`}"
>
<div
class="absolute left-0 bottom-0 w-8 h-8 flex items-center justify-center bg-blue-900 rounded-full text-xs text-teal-500 font-extrabold border-2 border-teal-400"
@ -133,9 +133,6 @@ export default {
},
computed: {
getSummonerIcon() {
return `url(https://ddragon.leagueoflegends.com/cdn/${this.version}/img/profileicon/${this.summonerInfos.account.profileIconId}.png)`
},
summoner() {
return this.$route.params.name
},

View file

@ -24,7 +24,7 @@ class MatchRepository {
{
$group: {
_id: "$champion.id",
champion: { $first: "$champion.name" },
champion: { $first: "$champion" },
count: { $sum: 1 },
wins: {
$sum: {
@ -60,7 +60,7 @@ class MatchRepository {
},
{
$group: {
_id: { "$arrayElemAt": ["$champion.tags", 0] },
_id: { "$arrayElemAt": ["$champion.roles", 0] },
count: { $sum: 1 },
wins: {
$sum: {

View file

@ -53,7 +53,7 @@ class BasicMatchTransformer extends MatchTransformer {
const playerInfos = {
name: summoner.player.summonerName,
role: super.getRoleName(allData.timeline),
champion: (({ id, name }) => ({ id, name }))(Object.entries(this.champions).find(([, champion]) => Number(champion.key) === allData.championId)[1])
champion: super.getChampion(allData.championId)
}
if (allData.teamId === player.teamId) {

View file

@ -65,7 +65,7 @@ class DetailedMatchTransformer extends MatchTransformer {
name: null
}
} else {
b.champion = (({ id, name }) => ({ id, name }))(Object.entries(this.champions).find(([, champion]) => Number(champion.key) === b.championId)[1])
b.champion = super.getChampion(b.championId)
}
return b
})

View file

@ -13,18 +13,29 @@ class MatchTransformer {
*/
async getContext() {
const items = await Jax.CDragon.items()
const champions = await Jax.DDragon.Champion.list()
const champions = await Jax.CDragon.champions()
const perks = await Jax.CDragon.perks()
const perkstyles = await Jax.CDragon.perkstyles()
const version = Jax.DDragon.Version
this.champions = champions.data
this.champions = champions
this.items = items
this.perks = perks
this.perkstyles = perkstyles.styles
this.version = version
}
/**
* Get champion specific data
* @param id of the champion
*/
getChampion(id) {
const champion = { ...this.champions.find(c => c.id === id) }
champion.icon = `https://raw.communitydragon.org/latest/plugins/rcp-be-lol-game-data/global/default/${champion.squarePortraitPath.split('/assets/')[1].toLowerCase()}`
delete champion.squarePortraitPath
return champion
}
/**
* Get global data about the match
*/
@ -47,7 +58,7 @@ class MatchTransformer {
getPlayerData(match, player, detailed, teamStats = {}) {
const identity = match.participantIdentities.find(p => p.participantId === player.participantId)
const name = identity.player.summonerName
const champion = (({ id, name, tags }) => ({ id, name, tags }))(Object.entries(this.champions).find(([, champion]) => Number(champion.key) === player.championId)[1])
const champion = this.getChampion(player.championId)
const role = this.getRoleName(player.timeline)
const level = player.stats.champLevel

View file

@ -1,6 +1,10 @@
const CDragonRequest = require('../CDragonRequest')
class CDragonEndpoint {
champions() {
return new CDragonRequest('champion-summary.json').execute()
}
items() {
return new CDragonRequest('items.json').execute()
}