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 hover infos for role stats

Browse source
This commit is contained in:
Valentin Kaelin 2019-11-10 19:01:26 +01:00
parent c394857aae
commit 1774306504
2 changed files with 46 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -38,16 +38,40 @@
:key="index"
class="flex flex-col items-center w-1/5"
>
<div class="flex flex-col justify-end w-2 h-12 bg-blue-900 rounded-full">
<div
:style="{height: (role.count * 3 / mostPlayedRole) * role.wins / role.count + 'rem'}"
class="bg-green-400 rounded-t-full"
></div>
<div
:style="{height: (role.count * 3 / mostPlayedRole) * role.losses / role.count + 'rem'}"
class="bg-red-400 rounded-b-full"
></div>
</div>
<Dropdown>
<template v-slot:trigger>
<div
class="flex flex-col justify-end w-2 h-12 bg-blue-900 rounded-full cursor-pointer"
>
<div
:style="{height: (role.count * 3 / mostPlayedRole) * role.wins / role.count + 'rem'}"
class="bg-green-400 rounded-t-full"
></div>
<div
:style="{height: (role.count * 3 / mostPlayedRole) * role.losses / role.count + 'rem'}"
class="bg-red-400 rounded-b-full"
></div>
</div>
</template>
<template v-slot:default>
<div class="px-2 text-white text-center text-sm select-none">
<div>{{ role.role|capitalize }}</div>
<span
:class="winLossColor(role.wins, role.losses).win"
class="font-bold"
>{{ role.wins }}</span>
<span class="mx-1 text-gray-400 font-bold">-</span>
<span
:class="winLossColor(role.wins, role.losses).loss"
class="font-bold"
>{{ role.losses }}</span>
<div
:class="calculateWinrate(role.wins, role.count).color"
class="mt-1 font-bold"
>{{ calculateWinrate(role.wins, role.count).winrate|round }}%</div>
</div>
</template>
</Dropdown>
<div
:style="{backgroundImage: `url(${require('@/assets/img/roles/' + role.role + '.png')})`}"
class="mt-1 w-4 h-4 bg-center bg-cover"
@ -104,9 +128,15 @@
class="w-1/4"
>{{ calculateWinrate(league.wins, league.count).winrate|percent }}</div>
<div class="w-1/4">
<span class="text-green-400 font-bold">{{ league.wins }}</span>
<span
:class="winLossColor(league.wins, league.losses).win"
class="font-bold"
>{{ league.wins }}</span>
<span class="mx-1 text-gray-400 font-bold">-</span>
<span class="text-gray-200 font-bold">{{ league.losses }}</span>
<span
:class="winLossColor(league.wins, league.losses).loss"
class="font-bold"
>{{ league.losses }}</span>
</div>
</li>
</ul>

4
client/src/main.js
View file

@ -10,6 +10,10 @@ import store from './store'
Vue.config.productionTip = false
Vue.use(VueAxios)
Vue.filter('capitalize', (value) => {
return value.charAt(0).toUpperCase() + value.slice(1).toLowerCase()
})
Vue.filter('secToTime', (sec) => {
const min = Math.floor(sec / 60)
const newSec = sec - min * 60