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

feat: add more team statistics in match details

Browse source
This commit is contained in:
Valentin Kaelin 2019-11-04 20:30:56 +01:00
parent a4e3697f24
commit 635a7c3279
2 changed files with 125 additions and 63 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -3,42 +3,9 @@
<div v-if="data.status === 'loaded' && detailsOpen" class="bg-blue-800 rounded-b-lg">
<DetailedMatchTeam :data="allyTeam" />
<div class="py-5">
<div class="px-3 flex justify-between">
<div v-if="allyTeam.bans">
<div
v-for="ban in allyTeam.bans"
:key="'ban-' + ban.pickTurn"
:class="[{'ml-2': ban.pickTurn !== 6 && ban.pickTurn !== 1}]"
class="relative ban ban-blue inline-block border-2 border-teal-500 rounded-full"
>
<div
: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"
></div>
<div
class="absolute ban-order w-4 h-4 flex items-center justify-center text-xs text-teal-100 bg-teal-500 font-bold rounded-full"
>{{ ban.pickTurn }}</div>
</div>
</div>
<div v-if="enemyTeam.bans">
<div
v-for="ban in enemyTeam.bans"
:key="'ban-' + ban.pickTurn"
:class="[{'ml-2': ban.pickTurn !== 6 && ban.pickTurn !== 1}]"
class="relative ban ban-red inline-block border-2 border-red-500 rounded-full"
>
<div
: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"
></div>
<div
class="absolute ban-order w-4 h-4 flex items-center justify-center text-xs text-red-100 bg-red-500 font-bold rounded-full"
>{{ ban.pickTurn }}</div>
</div>
</div>
</div>
<div class="px-3 py-2 flex justify-between">
<DetailedMatchGlobalStats :team="allyTeam" :ally-team="true" />
<DetailedMatchGlobalStats :team="enemyTeam" :ally-team="false" />
</div>
<DetailedMatchTeam :data="enemyTeam" />
@ -51,9 +18,11 @@
<script>
import { mapGetters } from 'vuex'
import DetailedMatchGlobalStats from '@/components/Match/DetailedMatchGlobalStats.vue'
import DetailedMatchTeam from '@/components/Match/DetailedMatchTeam.vue'
export default {
components: {
DetailedMatchGlobalStats,
DetailedMatchTeam
},
props: {
@ -80,33 +49,6 @@ export default {
</script>
<style scoped>
.ban::after {
content: "";
position: absolute;
left: 0px;
top: 50%;
width: calc(100% + 1px);
height: 2px;
transform: rotate(-45deg);
}
.ban-blue::after {
background: #38b2ac;
}
.ban-red::after {
background: #f56565;
}
.ban-img {
filter: grayscale(100%);
}
.ban-order {
left: -7px;
top: -5px;
}
.slide-enter-active {
transition-duration: 0.3s;
transition-timing-function: ease-in;

120
client/src/components/Match/DetailedMatchGlobalStats.vue Normal file
View file

@ -0,0 +1,120 @@
<template>
<div :class="allyTeam ? 'text-left' : 'text-right'">
<div v-if="team.bans">
<div
v-for="ban in team.bans"
:key="'ban-' + ban.pickTurn"
:class="[{'ml-2': ban.pickTurn !== 6 && ban.pickTurn !== 1}, allyTeam ? 'ban-blue border-teal-500' : 'ban-red border-red-500']"
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')`} : '']"
class="ban-img w-6 h-6 bg-cover bg-center bg-blue-1000 rounded-full"
></div>
<div
:class="[textLightColor, bgColor]"
class="absolute ban-order w-4 h-4 flex items-center justify-center text-xs font-bold rounded-full"
>{{ ban.pickTurn }}</div>
</div>
</div>
<div
:class="allyTeam ? 'text-left' : 'text-right flex-row-reverse'"
class="mt-2 flex leading-tight"
>
<div>
<div
:class="textColor"
class="text-base font-semibold"
>{{ `${team.teamStats.kills}/${team.teamStats.deaths}/${team.teamStats.assists}` }}</div>
<div class="text-white text-xs">k / d / a</div>
</div>
<div :class="allyTeam ? 'ml-3' : 'mr-3'">
<div
:class="textColor"
class="text-base font-semibold"
>{{ +(team.teamStats.gold / 1000).toFixed(2) + 'k' }}</div>
<div class="text-white text-xs">gold</div>
</div>
<div :class="allyTeam ? 'ml-3' : 'mr-3'">
<div
:class="textColor"
class="text-base font-semibold"
>{{ +(team.teamStats.dmgChamp / 1000).toFixed(2) + 'k' }}</div>
<div class="text-white text-xs">dmg</div>
</div>
<div :class="allyTeam ? 'ml-3' : 'mr-3'" class="flex flex-col justify-end">
<div class="text-base text-teal-400 font-semibold"></div>
<div class="flex text-white text-xs">
<div :class="allyTeam ? '' : 'mr-2'">
<span :class="textColor">{{ team.towers }}</span> towers
</div>
<div :class="allyTeam ? 'ml-2' : 'mr-2'">
<span :class="textColor">{{ team.dragons }}</span> dragons
</div>
<div :class="allyTeam ? 'ml-2' : ''">
<span :class="textColor">{{ team.barons }}</span> barons
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
props: {
team: {
type: Object,
required: true
},
allyTeam: {
type: Boolean,
default: false
}
},
computed: {
textLightColor() {
return this.allyTeam ? 'text-teal-100' : 'text-red-100'
},
textColor() {
return this.allyTeam ? 'text-teal-400' : 'text-red-400'
},
bgColor() {
return this.allyTeam ? 'bg-teal-500' : 'bg-red-500'
},
...mapGetters('ddragon', ['version']),
}
}
</script>
<style scoped>
.ban::after {
content: "";
position: absolute;
left: 0px;
top: 50%;
width: calc(100% + 1px);
height: 2px;
transform: rotate(-45deg);
}
.ban-blue::after {
background: #38b2ac;
}
.ban-red::after {
background: #f56565;
}
.ban-img {
filter: grayscale(100%);
}
.ban-order {
left: -7px;
top: -5px;
}
</style>