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

refactor: ally team is always displayed first in match details

Browse source
This commit is contained in:
Valentin Kaelin 2019-11-03 21:19:17 +01:00
parent 05f635d7d4
commit d3628d6cf6
2 changed files with 33 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

41
client/src/components/Match/DetailedMatch.vue
View file

@ -1,47 +1,49 @@
<template> <template>
<transition name="slide"> <transition name="slide">
<div v-if="data.status === 'loaded' && detailsOpen" class="bg-blue-800 rounded-b-lg"> <div v-if="data.status === 'loaded' && detailsOpen" class="bg-blue-800 rounded-b-lg">
<DetailedMatchTeam :data="data.blueTeam" /> <DetailedMatchTeam :data="allyTeam" />
<div class="py-5"> <div class="py-5">
<div class="px-3 flex justify-between"> <div class="px-3 flex justify-between">
<div v-if="data.blueTeam.bans"> <div v-if="allyTeam.bans">
<div <div
v-for="ban in data.blueTeam.bans" v-for="ban in allyTeam.bans"
:key="'ban-' + ban.pickTurn" :key="'ban-' + ban.pickTurn"
:class="{'ml-2': ban.pickTurn !== 1}" :class="[{'ml-2': ban.pickTurn !== 6 && ban.pickTurn !== 1}, banColorChampion(allyTeam.color)]"
class="relative ban ban-blue inline-block border-2 border-teal-500 rounded-full" class="relative ban inline-block border-2 rounded-full"
> >
<div <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('https://ddragon.leagueoflegends.com/cdn/${version}/img/champion/${ban.champion.id}.png')`} : '']"
class="ban-img w-6 h-6 bg-cover bg-center bg-blue-1000 rounded-full" class="ban-img w-6 h-6 bg-cover bg-center bg-blue-1000 rounded-full"
></div> ></div>
<div <div
class="absolute ban-order w-4 h-4 flex items-center justify-center bg-teal-500 text-xs text-teal-100 font-bold rounded-full" :class="banColorPickOrder(allyTeam.color)"
class="absolute ban-order w-4 h-4 flex items-center justify-center text-xs font-bold rounded-full"
>{{ ban.pickTurn }}</div> >{{ ban.pickTurn }}</div>
</div> </div>
</div> </div>
<div v-if="data.redTeam.bans"> <div v-if="enemyTeam.bans">
<div <div
v-for="ban in data.redTeam.bans" v-for="ban in enemyTeam.bans"
:key="'ban-' + ban.pickTurn" :key="'ban-' + ban.pickTurn"
:class="{'ml-2': ban.pickTurn !== 6}" :class="[{'ml-2': ban.pickTurn !== 6 && ban.pickTurn !== 1}, banColorChampion(enemyTeam.color)]"
class="relative ban ban-red inline-block border-2 border-red-500 rounded-full" class="relative ban inline-block border-2 rounded-full"
> >
<div <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('https://ddragon.leagueoflegends.com/cdn/${version}/img/champion/${ban.champion.id}.png')`} : '']"
class="ban-img w-6 h-6 bg-cover bg-center bg-blue-1000 rounded-full" class="ban-img w-6 h-6 bg-cover bg-center bg-blue-1000 rounded-full"
></div> ></div>
<div <div
class="absolute ban-order w-4 h-4 flex items-center justify-center bg-red-500 text-xs text-red-100 font-bold rounded-full" :class="banColorPickOrder(enemyTeam.color)"
class="absolute ban-order w-4 h-4 flex items-center justify-center text-xs font-bold rounded-full"
>{{ ban.pickTurn }}</div> >{{ ban.pickTurn }}</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<DetailedMatchTeam :data="data.redTeam" /> <DetailedMatchTeam :data="enemyTeam" />
</div> </div>
<div v-else-if="data.status === 'loading' && detailsOpen"> <div v-else-if="data.status === 'loading' && detailsOpen">
<p class="bg-blue-800 py-5 text-blue-100 text-lg font-semibold">Loading...</p> <p class="bg-blue-800 py-5 text-blue-100 text-lg font-semibold">Loading...</p>
@ -68,7 +70,22 @@ export default {
}, },
computed: { computed: {
allyTeam() {
return this.data.blueTeam.players.some(p => p.name.toLowerCase() === this.$route.params.name.toLowerCase()) ? this.data.blueTeam : this.data.redTeam
},
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']), ...mapGetters('ddragon', ['version']),
},
methods: {
banColorChampion(colorTeam) {
return colorTeam === 'Blue' ? 'ban-blue border-teal-500' : 'ban-red border-red-500'
},
banColorPickOrder(colorTeam) {
return colorTeam === 'Blue' ? 'text-teal-100 bg-teal-500' : 'text-red-100 bg-red-500'
}
} }
} }
</script> </script>

8
client/src/components/Match/DetailedMatchTeam.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<table :class="{'rounded-b-lg overflow-hidden': !blueTeam}" class="w-full table-auto"> <table :class="{'rounded-b-lg overflow-hidden': !allyTeam}" class="w-full table-auto">
<thead class="leading-none"> <thead class="leading-none">
<tr :class="`heading-${data.result}`" class="heading text-blue-200 font-semibold"> <tr :class="`heading-${data.result}`" class="heading text-blue-200 font-semibold">
<th class="py-5 border-r border-blue-700"> <th class="py-5 border-r border-blue-700">
@ -38,7 +38,7 @@
<th class="px-2 py-5 text-sm">kp</th> <th class="px-2 py-5 text-sm">kp</th>
</tr> </tr>
</thead> </thead>
<tbody :class="[{'border-b border-blue-700': blueTeam}, data.result]" class="leading-none"> <tbody :class="[{'border-b border-blue-700': allyTeam}, data.result]" class="leading-none">
<tr v-for="(player, index) in data.players" :key="player.name + index"> <tr v-for="(player, index) in data.players" :key="player.name + index">
<td class="py-2 border-r border-blue-700"> <td class="py-2 border-r border-blue-700">
<div class="px-2 flex justify-between"> <div class="px-2 flex justify-between">
@ -170,7 +170,7 @@ export default {
data() { data() {
return { return {
blueTeam: this.data.color === 'Blue' allyTeam: this.data.players.some(p => p.name.toLowerCase() === this.$route.params.name.toLowerCase())
} }
}, },
@ -180,7 +180,7 @@ export default {
methods: { methods: {
displayBorderbottom(index) { displayBorderbottom(index) {
return this.blueTeam || index !== this.data.players.length - 1 return this.allyTeam || index !== this.data.players.length - 1
} }
} }
} }