mirror of
https://github.com/vkaelin/LeagueStats.git
synced 2026-03-25 12:57:28 +00:00
feat: add global winrate
This commit is contained in:
Valentin Kaelin
parent
1774306504
commit
48d2fade07
1 changed files with 178 additions and 159 deletions
|
|
@ -1,180 +1,199 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="bg-blue-800 rounded-lg">
|
<div class="bg-blue-800 rounded-lg">
|
||||||
<div class="pb-2">
|
<div class="relative heading flex justify-center py-4 rounded-t-lg text-blue-200">
|
||||||
<div class="relative flex justify-center py-4 heading rounded-t-lg text-blue-200">
|
<svg class="w-6 h-6">
|
||||||
<svg class="w-6 h-6">
|
<use xlink:href="#graph" />
|
||||||
<use xlink:href="#graph" />
|
</svg>
|
||||||
</svg>
|
<span class="mx-4 text-lg font-bold uppercase">STATS</span>
|
||||||
<span class="mx-4 text-lg font-bold uppercase">STATS</span>
|
<svg class="w-6 h-6" style="transform: scaleX(-1);">
|
||||||
<svg class="w-6 h-6" style="transform: scaleX(-1);">
|
<use xlink:href="#graph" />
|
||||||
<use xlink:href="#graph" />
|
</svg>
|
||||||
</svg>
|
<div class="absolute right-0 top-0 mt-3 mr-2">
|
||||||
<div class="absolute right-0 top-0 mt-3 mr-2">
|
<Dropdown>
|
||||||
<Dropdown>
|
<template v-slot:trigger>
|
||||||
<template v-slot:trigger>
|
<svg class="w-4 h-4 cursor-pointer">
|
||||||
<svg class="w-4 h-4 cursor-pointer">
|
<use xlink:href="#info" />
|
||||||
<use xlink:href="#info" />
|
</svg>
|
||||||
</svg>
|
</template>
|
||||||
</template>
|
<template v-slot:default>
|
||||||
<template v-slot:default>
|
<div class="px-2 text-white text-center text-sm select-none">
|
||||||
<div class="px-2 text-white text-center text-sm select-none">
|
<div>Stats based on</div>
|
||||||
<div>Stats based on</div>
|
<div>
|
||||||
<div>
|
<span class="text-teal-400 font-bold">{{ stats.global.count }}</span> matches
|
||||||
<span class="text-teal-400 font-bold">{{ stats.global.count }}</span> matches
|
|
||||||
</div>
|
|
||||||
<div class="mt-2 leading-tight text-xs text-blue-100 font-normal italic">
|
|
||||||
Load more matches
|
|
||||||
<br />and refresh the page
|
|
||||||
<br />to have better results.
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
<div class="mt-2 leading-tight text-xs text-blue-100 font-normal italic">
|
||||||
</Dropdown>
|
Load more matches
|
||||||
</div>
|
<br />and refresh the page
|
||||||
|
<br />to have better results.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</Dropdown>
|
||||||
</div>
|
</div>
|
||||||
<div class="mt-2 flex items-center py-2">
|
</div>
|
||||||
<div
|
<div class="mt-2 flex items-center py-2">
|
||||||
v-for="(role, index) in stats.role"
|
<div
|
||||||
:key="index"
|
v-for="(role, index) in stats.role"
|
||||||
class="flex flex-col items-center w-1/5"
|
:key="index"
|
||||||
>
|
class="flex flex-col items-center w-1/5"
|
||||||
<Dropdown>
|
>
|
||||||
<template v-slot:trigger>
|
<Dropdown>
|
||||||
|
<template v-slot:trigger>
|
||||||
|
<div
|
||||||
|
class="flex flex-col justify-end w-2 h-12 bg-blue-900 rounded-full cursor-pointer"
|
||||||
|
>
|
||||||
<div
|
<div
|
||||||
class="flex flex-col justify-end w-2 h-12 bg-blue-900 rounded-full cursor-pointer"
|
: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.wins / role.count + 'rem'}"
|
<div
|
||||||
class="bg-green-400 rounded-t-full"
|
:style="{height: (role.count * 3 / mostPlayedRole) * role.losses / role.count + 'rem'}"
|
||||||
></div>
|
class="bg-red-400 rounded-b-full"
|
||||||
<div
|
></div>
|
||||||
:style="{height: (role.count * 3 / mostPlayedRole) * role.losses / role.count + 'rem'}"
|
</div>
|
||||||
class="bg-red-400 rounded-b-full"
|
</template>
|
||||||
></div>
|
<template v-slot:default>
|
||||||
</div>
|
<div class="px-2 text-white text-center text-sm select-none">
|
||||||
</template>
|
<div>{{ role.role|capitalize }}</div>
|
||||||
<template v-slot:default>
|
<span
|
||||||
<div class="px-2 text-white text-center text-sm select-none">
|
:class="winLossColor(role.wins, role.losses).win"
|
||||||
<div>{{ role.role|capitalize }}</div>
|
class="font-bold"
|
||||||
<span
|
>{{ role.wins }}</span>
|
||||||
:class="winLossColor(role.wins, role.losses).win"
|
<span class="mx-1 text-gray-400 font-bold">-</span>
|
||||||
class="font-bold"
|
<span
|
||||||
>{{ role.wins }}</span>
|
:class="winLossColor(role.wins, role.losses).loss"
|
||||||
<span class="mx-1 text-gray-400 font-bold">-</span>
|
class="font-bold"
|
||||||
<span
|
>{{ role.losses }}</span>
|
||||||
:class="winLossColor(role.wins, role.losses).loss"
|
<div
|
||||||
class="font-bold"
|
:class="calculateWinrate(role.wins, role.count).color"
|
||||||
>{{ role.losses }}</span>
|
class="mt-1 font-bold"
|
||||||
<div
|
>{{ calculateWinrate(role.wins, role.count).winrate|round }}%</div>
|
||||||
:class="calculateWinrate(role.wins, role.count).color"
|
</div>
|
||||||
class="mt-1 font-bold"
|
</template>
|
||||||
>{{ calculateWinrate(role.wins, role.count).winrate|round }}%</div>
|
</Dropdown>
|
||||||
</div>
|
<div
|
||||||
</template>
|
:style="{backgroundImage: `url(${require('@/assets/img/roles/' + role.role + '.png')})`}"
|
||||||
</Dropdown>
|
class="mt-1 w-4 h-4 bg-center bg-cover"
|
||||||
<div
|
></div>
|
||||||
:style="{backgroundImage: `url(${require('@/assets/img/roles/' + role.role + '.png')})`}"
|
<div class="text-xs text-blue-200">{{ role.count }}</div>
|
||||||
class="mt-1 w-4 h-4 bg-center bg-cover"
|
|
||||||
></div>
|
|
||||||
<div class="text-xs text-blue-200">{{ role.count }}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="py-2 text-sm text-center">
|
</div>
|
||||||
<div class="px-4 flex items-baseline font-bold text-sm text-blue-300 uppercase">
|
<div class="py-2 text-sm text-center">
|
||||||
<div class="w-1/4 text-left text-base text-blue-400">Stat</div>
|
<div class="px-4 flex items-baseline font-bold text-sm text-blue-300 uppercase">
|
||||||
<div class="w-1/4">Total</div>
|
<div class="w-1/4 text-left text-base text-blue-400">Stat</div>
|
||||||
<div class="w-1/4">Per min</div>
|
<div class="w-1/4">Total</div>
|
||||||
<div class="w-1/4">Avg</div>
|
<div class="w-1/4">Per min</div>
|
||||||
|
<div class="w-1/4">Avg</div>
|
||||||
|
</div>
|
||||||
|
<ul class="mt-1 text-gray-100">
|
||||||
|
<li
|
||||||
|
v-for="(stat, name, index) in globalStatsKeys"
|
||||||
|
:key="index"
|
||||||
|
:class="{'bg-blue-760': index % 2 !== 0}"
|
||||||
|
class="flex justify-between items-center px-4 py-1 leading-tight"
|
||||||
|
>
|
||||||
|
<div class="w-1/4 text-left">{{ name }}</div>
|
||||||
|
<div class="w-1/4">{{ stat }}</div>
|
||||||
|
<div class="w-1/4">{{ (stat / (stats.global.time / 60)).toFixed(2) }}</div>
|
||||||
|
<div class="w-1/4">{{ (stat / stats.global.count).toFixed(2) }}</div>
|
||||||
|
</li>
|
||||||
|
<li class="flex justify-between items-center px-4 py-1 bg-blue-760 leading-tight">
|
||||||
|
<div class="w-1/4 text-left whitespace-no-wrap">kill participation</div>
|
||||||
|
<div class="w-1/4">{{ stats.global.kp|percent }}</div>
|
||||||
|
</li>
|
||||||
|
<li class="flex justify-between items-center px-4 py-1 leading-tight">
|
||||||
|
<div class="w-1/4 text-left whitespace-no-wrap">kda</div>
|
||||||
|
<div
|
||||||
|
class="w-1/4"
|
||||||
|
>{{ (stats.global.kills + stats.global.assists) / stats.global.deaths|round }}</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<template v-if="leagueStatsByType('Ranked').length">
|
||||||
|
<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">Ranked Stats</div>
|
||||||
|
<div class="w-1/4">Winrate</div>
|
||||||
|
<div class="w-1/4">Record</div>
|
||||||
</div>
|
</div>
|
||||||
<ul class="mt-1 text-gray-100">
|
<ul class="mt-1 text-gray-100">
|
||||||
<li
|
<li
|
||||||
v-for="(stat, name, index) in globalStatsKeys"
|
v-for="(league, index) in leagueStatsByType('Ranked')"
|
||||||
:key="index"
|
:key="index"
|
||||||
:class="{'bg-blue-760': index % 2 !== 0}"
|
:class="{'bg-blue-760': index % 2 !== 0}"
|
||||||
class="flex justify-between items-center px-4 py-1 leading-tight"
|
class="flex justify-between items-center px-4 py-1 leading-tight"
|
||||||
>
|
>
|
||||||
<div class="w-1/4 text-left">{{ name }}</div>
|
<div class="w-2/4 text-left">{{ `${league.type} ${league.name.toLowerCase()}` }}</div>
|
||||||
<div class="w-1/4">{{ stat }}</div>
|
|
||||||
<div class="w-1/4">{{ (stat / (stats.global.time / 60)).toFixed(2) }}</div>
|
|
||||||
<div class="w-1/4">{{ (stat / stats.global.count).toFixed(2) }}</div>
|
|
||||||
</li>
|
|
||||||
<li class="flex justify-between items-center px-4 py-1 bg-blue-760 leading-tight">
|
|
||||||
<div class="w-1/4 text-left whitespace-no-wrap">kill participation</div>
|
|
||||||
<div class="w-1/4">{{ stats.global.kp|percent }}</div>
|
|
||||||
</li>
|
|
||||||
<li class="flex justify-between items-center px-4 py-1 leading-tight">
|
|
||||||
<div class="w-1/4 text-left whitespace-no-wrap">kda</div>
|
|
||||||
<div
|
<div
|
||||||
|
:class="calculateWinrate(league.wins, league.count).color"
|
||||||
class="w-1/4"
|
class="w-1/4"
|
||||||
>{{ (stats.global.kills + stats.global.assists) / stats.global.deaths|round }}</div>
|
>{{ calculateWinrate(league.wins, league.count).winrate|percent }}</div>
|
||||||
|
<div class="w-1/4">
|
||||||
|
<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="winLossColor(league.wins, league.losses).loss"
|
||||||
|
class="font-bold"
|
||||||
|
>{{ league.losses }}</span>
|
||||||
|
</div>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
<template v-if="leagueStatsByType('Ranked').length">
|
</template>
|
||||||
<div class="mt-3 px-4 flex items-baseline font-bold text-sm text-blue-300 uppercase">
|
<template v-if="leagueStatsByType('Normal').length">
|
||||||
<div class="w-2/4 text-left text-base text-blue-400">Ranked Stats</div>
|
<div class="mt-3 px-4 flex items-baseline font-bold text-sm text-blue-300 uppercase">
|
||||||
<div class="w-1/4">Winrate</div>
|
<div class="w-2/4 text-left text-base text-blue-400">Normal Stats</div>
|
||||||
<div class="w-1/4">Record</div>
|
<div class="w-1/4">Winrate</div>
|
||||||
</div>
|
<div class="w-1/4">Record</div>
|
||||||
<ul class="mt-1 text-gray-100">
|
</div>
|
||||||
<li
|
<ul class="mt-1 text-gray-100">
|
||||||
v-for="(league, index) in leagueStatsByType('Ranked')"
|
<li
|
||||||
:key="index"
|
v-for="(league, index) in leagueStatsByType('Normal')"
|
||||||
:class="{'bg-blue-760': index % 2 !== 0}"
|
:key="index"
|
||||||
class="flex justify-between items-center px-4 py-1 leading-tight"
|
: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">{{ `${league.type} ${league.name.toLowerCase()}` }}</div>
|
>
|
||||||
<div
|
<div class="w-2/4 text-left">{{ `${league.type} ${league.name.toLowerCase()}` }}</div>
|
||||||
:class="calculateWinrate(league.wins, league.count).color"
|
<div
|
||||||
class="w-1/4"
|
:class="calculateWinrate(league.wins, league.count).color"
|
||||||
>{{ calculateWinrate(league.wins, league.count).winrate|percent }}</div>
|
class="w-1/4"
|
||||||
<div class="w-1/4">
|
>{{ calculateWinrate(league.wins, league.count).winrate|percent }}</div>
|
||||||
<span
|
<div class="w-1/4">
|
||||||
:class="winLossColor(league.wins, league.losses).win"
|
<span
|
||||||
class="font-bold"
|
:class="winLossColor(league.wins, league.losses).win"
|
||||||
>{{ league.wins }}</span>
|
class="font-bold"
|
||||||
<span class="mx-1 text-gray-400 font-bold">-</span>
|
>{{ league.wins }}</span>
|
||||||
<span
|
<span class="mx-1 text-gray-400 font-bold">-</span>
|
||||||
:class="winLossColor(league.wins, league.losses).loss"
|
<span
|
||||||
class="font-bold"
|
:class="winLossColor(league.wins, league.losses).loss"
|
||||||
>{{ league.losses }}</span>
|
class="font-bold"
|
||||||
</div>
|
>{{ league.losses }}</span>
|
||||||
</li>
|
</div>
|
||||||
</ul>
|
</li>
|
||||||
</template>
|
</ul>
|
||||||
<template v-if="leagueStatsByType('Normal').length">
|
</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">Normal Stats</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="(league, index) in leagueStatsByType('Normal')"
|
|
||||||
: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">{{ `${league.type} ${league.name.toLowerCase()}` }}</div>
|
|
||||||
<div
|
|
||||||
:class="calculateWinrate(league.wins, league.count).color"
|
|
||||||
class="w-1/4"
|
|
||||||
>{{ calculateWinrate(league.wins, league.count).winrate|percent }}</div>
|
|
||||||
<div class="w-1/4">
|
|
||||||
<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="winLossColor(league.wins, league.losses).loss"
|
|
||||||
class="font-bold"
|
|
||||||
>{{ league.losses }}</span>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</template>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="flex flex-col items-center pb-2 leading-snug">
|
||||||
|
<div
|
||||||
|
class="text-teal-400 text-xl"
|
||||||
|
>{{ calculateWinrate(stats.global.wins, stats.global.count).winrate|percent }}</div>
|
||||||
|
<div class="flex text-sm">
|
||||||
|
<span
|
||||||
|
:class="winLossColor(stats.global.wins, stats.global.losses).win"
|
||||||
|
class=""
|
||||||
|
>{{ stats.global.wins }}</span>
|
||||||
|
<span class="mx-1 text-gray-400 font-bold">-</span>
|
||||||
|
<span
|
||||||
|
:class="winLossColor(stats.global.wins, stats.global.losses).loss"
|
||||||
|
class=""
|
||||||
|
>{{ stats.global.losses }}</span>
|
||||||
|
</div>
|
||||||
|
<span class="text-xs">Global winrate</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue