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 stats by champion class

Browse source
This commit is contained in:
Valentin Kaelin 2019-11-13 19:39:38 +01:00
parent 980e58fe57
commit 196d71e1fa
1 changed files with 33 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

40
client/src/components/Summoner/SummonerStats.vue
View file

@ -38,9 +38,7 @@
> >
<Dropdown> <Dropdown>
<template v-slot:trigger> <template v-slot:trigger>
<div <div class="flex flex-col justify-end w-2 h-12 bg-blue-900 rounded-full cursor-pointer">
class="flex flex-col justify-end w-2 h-12 bg-blue-900 rounded-full cursor-pointer"
>
<div <div
:style="{height: (role.count * 3 / mostPlayedRole) * role.wins / role.count + 'rem'}" :style="{height: (role.count * 3 / mostPlayedRole) * role.wins / role.count + 'rem'}"
class="bg-green-400 rounded-t-full" class="bg-green-400 rounded-t-full"
@ -172,6 +170,36 @@
</ul> </ul>
</template> </template>
<div class="mt-3 px-4 flex items-baseline font-bold text-sm text-blue-300 uppercase">
<div class="w-2/4 text-left text-base text-blue-400">Stats by Class</div>
<div class="w-1/4">Winrate</div>
<div class="w-1/4">Record</div>
</div>
<ul class="mt-1 text-gray-100">
<li
v-for="(championClass, index) in stats.class.sort((a, b) => b.count - a.count)"
:key="index"
: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="calculateWinrate(championClass.wins, championClass.count).color"
class="w-1/4"
>{{ calculateWinrate(championClass.wins, championClass.count).winrate|percent }}</div>
<div class="w-1/4">
<span
:class="winLossColor(championClass.wins, championClass.losses).win"
class="font-bold"
>{{ championClass.wins }}</span>
<span class="mx-1 text-gray-400 font-bold">-</span>
<span
:class="winLossColor(championClass.wins, championClass.losses).loss"
class="font-bold"
>{{ championClass.losses }}</span>
</div>
</li>
</ul>
</div> </div>
<div class="flex flex-col items-center pb-2 leading-snug"> <div class="flex flex-col items-center pb-2 leading-snug">
@ -181,18 +209,16 @@
<div class="flex text-sm"> <div class="flex text-sm">
<span <span
:class="winLossColor(stats.global.wins, stats.global.losses).win" :class="winLossColor(stats.global.wins, stats.global.losses).win"
class="" class
>{{ stats.global.wins }}</span> >{{ stats.global.wins }}</span>
<span class="mx-1 text-gray-400 font-bold">-</span> <span class="mx-1 text-gray-400 font-bold">-</span>
<span <span
:class="winLossColor(stats.global.wins, stats.global.losses).loss" :class="winLossColor(stats.global.wins, stats.global.losses).loss"
class="" class
>{{ stats.global.losses }}</span> >{{ stats.global.losses }}</span>
</div> </div>
<span class="text-xs">Global winrate</span> <span class="text-xs">Global winrate</span>
</div> </div>
</div> </div>
</template> </template>