mirror of
https://github.com/vkaelin/LeagueStats.git
synced 2026-03-25 12:57:28 +00:00
refactor: switch from Lato font to Inter
This commit is contained in:
Valentin Kaelin
parent
8eb8a31112
commit
7f631d2662
14 changed files with 147 additions and 127 deletions
|
|
@ -1,4 +1,4 @@
|
|||
@import url('https://fonts.googleapis.com/css?family=Lato:300,400,700,900');
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
<template>
|
||||
<div
|
||||
@mousedown="clickDropdown"
|
||||
class="absolute z-30 w-full px-3 py-2 mt-2 bg-blue-900 rounded-lg shadow"
|
||||
class="absolute z-30 w-full px-3 py-2 mt-2 bg-blue-900 border border-blue-800 rounded-lg shadow"
|
||||
>
|
||||
<div v-if="favorites.length">
|
||||
<div class="text-base text-blue-100">favorites:</div>
|
||||
<div class="text-base text-blue-100">Favorites:</div>
|
||||
<div class="flex flex-wrap items-center -mx-1 text-xs leading-none">
|
||||
<SearchFormDropdownPlayer
|
||||
v-for="player in favorites"
|
||||
|
|
@ -16,7 +16,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div :class="{'mt-2': favorites.length}">
|
||||
<div class="text-base text-blue-100">recent searches:</div>
|
||||
<div class="text-base text-blue-100">Recent searches:</div>
|
||||
<div class="flex flex-wrap items-center -mx-1 text-xs leading-none">
|
||||
<template v-if="recentSearches.length">
|
||||
<SearchFormDropdownPlayer
|
||||
|
|
|
|||
|
|
@ -36,26 +36,26 @@
|
|||
<div>
|
||||
<div
|
||||
:class="textColor"
|
||||
class="text-base font-semibold"
|
||||
class="text-sm font-medium"
|
||||
>{{ `${team.teamStats.kills}/${team.teamStats.deaths}/${team.teamStats.assists}` }}</div>
|
||||
<div class="text-xs text-white">k / d / a</div>
|
||||
</div>
|
||||
<div :class="allyTeam ? 'ml-3' : 'mr-3'">
|
||||
<div
|
||||
:class="textColor"
|
||||
class="text-base font-semibold"
|
||||
class="text-sm font-medium"
|
||||
>{{ +(team.teamStats.gold / 1000).toFixed(1) + 'k' }}</div>
|
||||
<div class="text-xs text-white">gold</div>
|
||||
</div>
|
||||
<div :class="allyTeam ? 'ml-3' : 'mr-3'">
|
||||
<div
|
||||
:class="textColor"
|
||||
class="text-base font-semibold"
|
||||
class="text-sm font-medium"
|
||||
>{{ +(team.teamStats.dmgChamp / 1000).toFixed(1) + 'k' }}</div>
|
||||
<div class="text-xs text-white">dmg</div>
|
||||
</div>
|
||||
<div :class="allyTeam ? 'ml-3' : 'mr-3'" class="flex flex-col justify-end">
|
||||
<div class="text-base font-semibold text-teal-400"></div>
|
||||
<div class="text-sm font-medium text-teal-400"></div>
|
||||
<div class="flex text-xs text-white">
|
||||
<div :class="allyTeam ? '' : 'mr-2'">
|
||||
<span :class="textColor">{{ team.towers }}</span> towers
|
||||
|
|
|
|||
|
|
@ -26,25 +26,29 @@
|
|||
</div>
|
||||
</div>
|
||||
</th>
|
||||
<th class="px-2 py-5 text-sm w-kda">K</th>
|
||||
<th class="px-2 py-5 text-sm w-kda">D</th>
|
||||
<th class="px-2 py-5 text-sm w-kda">A</th>
|
||||
<th class="px-2 py-5 text-sm w-minions">{{ statsFormat === 'stats' ? 'cs' : 'cs/m' }}</th>
|
||||
<th class="px-2 py-5 text-sm w-vision">{{ statsFormat === 'stats' ? 'vs' : 'vs/m' }}</th>
|
||||
<th class="px-2 py-5 text-sm w-gold-dmg-kp">gold</th>
|
||||
<th class="px-2 py-5 text-sm w-gold-dmg-kp">
|
||||
<th class="px-2 py-5 text-sm font-medium w-kda">K</th>
|
||||
<th class="px-2 py-5 text-sm font-medium w-kda">D</th>
|
||||
<th class="px-2 py-5 text-sm font-medium w-kda">A</th>
|
||||
<th
|
||||
class="px-2 py-5 text-sm font-medium w-minions"
|
||||
>{{ statsFormat === 'stats' ? 'cs' : 'cs/m' }}</th>
|
||||
<th
|
||||
class="px-2 py-5 text-sm font-medium w-vision"
|
||||
>{{ statsFormat === 'stats' ? 'vs' : 'vs/m' }}</th>
|
||||
<th class="px-2 py-5 text-sm font-medium w-gold-dmg-kp">gold</th>
|
||||
<th class="px-2 py-5 text-sm font-medium w-gold-dmg-kp">
|
||||
dmg
|
||||
<br />champ
|
||||
</th>
|
||||
<th class="px-2 py-5 text-sm w-gold-dmg-kp">
|
||||
<th class="px-2 py-5 text-sm font-medium w-gold-dmg-kp">
|
||||
dmg
|
||||
<br />obj
|
||||
</th>
|
||||
<th class="px-2 py-5 text-sm w-gold-dmg-kp">
|
||||
<th class="px-2 py-5 text-sm font-medium w-gold-dmg-kp">
|
||||
dmg
|
||||
<br />taken
|
||||
</th>
|
||||
<th class="px-2 py-5 text-sm w-gold-dmg-kp">kp</th>
|
||||
<th class="px-2 py-5 text-sm font-medium w-gold-dmg-kp">kp</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody :class="{'border-b border-blue-700': allyTeam}" class="leading-none">
|
||||
|
|
@ -157,46 +161,66 @@
|
|||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
:style="bgColor(player, '71, 132, 116', 'kills')"
|
||||
class="p-2 text-sm text-white"
|
||||
>{{ player.stats.kills }}</td>
|
||||
<td
|
||||
:style="bgColor(player, '156, 71, 109', 'deaths')"
|
||||
class="p-2 text-sm text-white"
|
||||
>{{ player.stats.deaths }}</td>
|
||||
<td
|
||||
:style="bgColor(player, '146, 100, 79', 'assists')"
|
||||
class="p-2 text-sm text-white"
|
||||
>{{ player.stats.assists }}</td>
|
||||
<td
|
||||
class="p-2 text-sm text-white"
|
||||
:style="bgColor(player, '140, 101, 182', 'minions')"
|
||||
>{{ player[statsFormat].minions }}</td>
|
||||
<td
|
||||
class="p-2 text-sm text-white"
|
||||
:style="bgColor(player, '55, 118, 179', 'vision')"
|
||||
>{{ player[statsFormat].vision }}</td>
|
||||
<td
|
||||
class="p-2 text-sm text-white"
|
||||
:style="bgColor(player, '146, 100, 79', 'gold')"
|
||||
>{{ roundStats(player[statsFormat].gold) }}</td>
|
||||
<td
|
||||
:style="bgColor(player, '156, 71, 109', 'dmgChamp')"
|
||||
class="p-2 text-sm text-white"
|
||||
>{{ roundStats(player[statsFormat].dmgChamp) }}</td>
|
||||
<td
|
||||
:style="bgColor(player, '156, 71, 109', 'dmgObj')"
|
||||
class="p-2 text-sm text-white text-red"
|
||||
>{{ roundStats(player[statsFormat].dmgObj) }}</td>
|
||||
<td
|
||||
:style="bgColor(player, '146, 145, 106', 'dmgTaken')"
|
||||
class="p-2 text-sm text-white"
|
||||
>{{ roundStats(player[statsFormat].dmgTaken) }}</td>
|
||||
<td
|
||||
:style="bgColor(player, '71, 132, 116', 'kp')"
|
||||
class="p-2 text-sm text-white"
|
||||
>{{ player.stats.kp }}</td>
|
||||
<td class="relative">
|
||||
<div
|
||||
:style="bgColor(player, '71, 132, 116', 'kills')"
|
||||
class="absolute inset-0 flex items-center justify-center p-2 text-sm text-white"
|
||||
>{{ player.stats.kills }}</div>
|
||||
</td>
|
||||
<td class="relative">
|
||||
<div
|
||||
:style="bgColor(player, '156, 71, 109', 'deaths')"
|
||||
class="absolute inset-0 flex items-center justify-center p-2 text-sm text-white"
|
||||
>{{ player.stats.deaths }}</div>
|
||||
</td>
|
||||
<td class="relative">
|
||||
<div
|
||||
:style="bgColor(player, '146, 100, 79', 'assists')"
|
||||
class="absolute inset-0 flex items-center justify-center p-2 text-sm text-white"
|
||||
>{{ player.stats.assists }}</div>
|
||||
</td>
|
||||
<td class="relative">
|
||||
<div
|
||||
:style="bgColor(player, '140, 101, 182', 'minions')"
|
||||
class="absolute inset-0 flex items-center justify-center p-2 text-sm text-white"
|
||||
>{{ player[statsFormat].minions }}</div>
|
||||
</td>
|
||||
<td class="relative">
|
||||
<div
|
||||
:style="bgColor(player, '55, 118, 179', 'vision')"
|
||||
class="absolute inset-0 flex items-center justify-center p-2 text-sm text-white"
|
||||
>{{ player[statsFormat].vision }}</div>
|
||||
</td>
|
||||
<td class="relative">
|
||||
<div
|
||||
:style="bgColor(player, '146, 100, 79', 'gold')"
|
||||
class="absolute inset-0 flex items-center justify-center p-2 text-sm text-white"
|
||||
>{{ roundStats(player[statsFormat].gold) }}</div>
|
||||
</td>
|
||||
<td class="relative">
|
||||
<div
|
||||
:style="bgColor(player, '156, 71, 109', 'dmgChamp')"
|
||||
class="absolute inset-0 flex items-center justify-center p-2 text-sm text-white"
|
||||
>{{ roundStats(player[statsFormat].dmgChamp) }}</div>
|
||||
</td>
|
||||
<td class="relative">
|
||||
<div
|
||||
:style="bgColor(player, '156, 71, 109', 'dmgObj')"
|
||||
class="absolute inset-0 flex items-center justify-center p-2 text-sm text-white"
|
||||
>{{ roundStats(player[statsFormat].dmgObj) }}</div>
|
||||
</td>
|
||||
<td class="relative">
|
||||
<div
|
||||
:style="bgColor(player, '146, 145, 106', 'dmgTaken')"
|
||||
class="absolute inset-0 flex items-center justify-center p-2 text-sm text-white"
|
||||
>{{ roundStats(player[statsFormat].dmgTaken) }}</div>
|
||||
</td>
|
||||
<td class="relative">
|
||||
<div
|
||||
:style="bgColor(player, '71, 132, 116', 'kp')"
|
||||
class="absolute inset-0 flex items-center justify-center p-2 text-sm text-white"
|
||||
>{{ player.stats.kp }}</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
@click="sortBy(heading.props)"
|
||||
v-html="heading.name"
|
||||
:class="[
|
||||
{'rounded-tr-lg': index === headings.length - 1, 'w-name': heading.name === 'name'},
|
||||
{'rounded-tr-lg': index === headings.length - 1, 'w-name': heading.name === 'Name'},
|
||||
sortedClasses(heading.props)
|
||||
]"
|
||||
class="relative px-2 py-4 font-normal cursor-pointer hover:bg-blue-700"
|
||||
|
|
@ -28,7 +28,7 @@
|
|||
>
|
||||
<td
|
||||
:class="{'rounded-bl-lg': index === championsToDisplay.length - 1}"
|
||||
class="relative px-2 py-3 text-sm text-white bg-blue-800 border-t-table border-t-table-70"
|
||||
class="relative px-2 py-3 text-sm text-white bg-blue-800 border-t-table"
|
||||
>{{ champion.index + 1 }}</td>
|
||||
<td class="relative px-2 py-3 text-sm text-white bg-blue-800 border-t-table">
|
||||
<div class="flex items-center">
|
||||
|
|
@ -91,7 +91,7 @@
|
|||
>{{ champion.gameLength|secToTime }}</td>
|
||||
<td
|
||||
:class="{'rounded-br-lg': index === championsToDisplay.length - 1}"
|
||||
class="px-2 py-3 text-sm text-white"
|
||||
class="px-2 py-3 text-xs text-white"
|
||||
>{{ champion.lastPlayed }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
|
@ -152,55 +152,55 @@ export default {
|
|||
return {
|
||||
headings: [
|
||||
{
|
||||
name: 'name',
|
||||
name: 'Name',
|
||||
props: 'champion.name'
|
||||
},
|
||||
{
|
||||
name: 'win rate',
|
||||
name: 'Win <br> rate',
|
||||
props: 'winrate'
|
||||
},
|
||||
{
|
||||
name: 'play <br> rate',
|
||||
name: 'Play <br> rate',
|
||||
props: 'playrate'
|
||||
},
|
||||
{
|
||||
name: 'wins',
|
||||
name: 'Wins',
|
||||
props: 'wins'
|
||||
},
|
||||
{
|
||||
name: 'plays',
|
||||
name: 'Plays',
|
||||
props: 'count'
|
||||
},
|
||||
{
|
||||
name: 'kda',
|
||||
name: 'KDA',
|
||||
props: 'kda'
|
||||
},
|
||||
{
|
||||
name: 'kp',
|
||||
name: 'KP',
|
||||
props: 'kp'
|
||||
},
|
||||
{
|
||||
name: 'minions',
|
||||
name: 'Minions',
|
||||
props: 'minions'
|
||||
},
|
||||
{
|
||||
name: 'gold',
|
||||
name: 'Gold',
|
||||
props: 'gold'
|
||||
},
|
||||
{
|
||||
name: 'dmg <br> champ',
|
||||
name: 'Dmg <br> champ',
|
||||
props: 'dmgChamp'
|
||||
},
|
||||
{
|
||||
name: 'dmg <br> taken',
|
||||
name: 'Dmg <br> taken',
|
||||
props: 'dmgTaken'
|
||||
},
|
||||
{
|
||||
name: 'game <br> length',
|
||||
name: 'Game <br> length',
|
||||
props: 'gameLength'
|
||||
},
|
||||
{
|
||||
name: 'last played',
|
||||
name: 'Last <br> played',
|
||||
props: 'date'
|
||||
}
|
||||
],
|
||||
|
|
@ -303,10 +303,6 @@ export default {
|
|||
background-color: rgba(190, 227, 248, 0.2);
|
||||
}
|
||||
|
||||
.border-t-table-70::after {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.sorted::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<select
|
||||
v-model="queue"
|
||||
@change="filterQueue"
|
||||
class="block w-full px-4 py-2 pr-8 font-semibold lowercase bg-blue-800 rounded-md appearance-none cursor-pointer hover:bg-blue-700 focus:outline-none"
|
||||
class="block w-full px-4 py-2 pr-8 font-semibold capitalize bg-blue-800 rounded-md appearance-none cursor-pointer hover:bg-blue-700 focus:outline-none"
|
||||
>
|
||||
<option v-for="(key) in Object.keys(choices)" :key="key" :value="key">{{ choices[key].name }}</option>
|
||||
</select>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<svg class="w-5 h-5" style="transform: rotate(-5deg);">
|
||||
<use xlink:href="#layers" />
|
||||
</svg>
|
||||
<span class="mx-4 text-lg font-bold uppercase">CHAMPIONS</span>
|
||||
<span class="mx-4 text-lg font-semibold uppercase">CHAMPIONS</span>
|
||||
<svg class="w-5 h-5" style="transform: rotate(5deg);">
|
||||
<use xlink:href="#layers" />
|
||||
</svg>
|
||||
|
|
@ -31,11 +31,11 @@
|
|||
</div>
|
||||
</div>
|
||||
<div v-if="stats.champion.length">
|
||||
<div class="flex items-baseline px-4 mt-3 text-sm font-bold text-left text-blue-300">
|
||||
<div class="flex items-baseline px-4 mt-3 text-xs font-semibold text-left text-blue-300 uppercase">
|
||||
<div class="ml-2 text-base text-blue-400 w-champion">Champion</div>
|
||||
<div class="w-plays">plays</div>
|
||||
<div class="w-winrate">winrate</div>
|
||||
<div class="w-kda">kda</div>
|
||||
<div class="w-plays">Plays</div>
|
||||
<div class="w-winrate">Winrate</div>
|
||||
<div class="w-kda">KDA</div>
|
||||
</div>
|
||||
<ul class="mt-1 text-sm text-left text-gray-100">
|
||||
<li
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
<svg class="w-5 h-5" style="transform: rotate(-5deg);">
|
||||
<use xlink:href="#people" />
|
||||
</svg>
|
||||
<span class="mx-4 text-lg font-bold uppercase">FRIENDS</span>
|
||||
<span class="mx-4 text-lg font-semibold uppercase">FRIENDS</span>
|
||||
<svg class="w-5 h-5" style="transform: rotate(5deg);">
|
||||
<use xlink:href="#people" />
|
||||
</svg>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<svg class="w-6 h-6">
|
||||
<use xlink:href="#graph" />
|
||||
</svg>
|
||||
<span class="mx-4 text-lg font-bold uppercase">STATS</span>
|
||||
<span class="mx-4 text-lg font-semibold uppercase">STATS</span>
|
||||
<svg class="w-6 h-6" style="transform: scaleX(-1);">
|
||||
<use xlink:href="#graph" />
|
||||
</svg>
|
||||
|
|
@ -78,7 +78,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="py-2 text-sm text-center">
|
||||
<div class="flex items-baseline px-4 text-sm font-bold text-blue-300 uppercase">
|
||||
<div class="flex items-baseline px-4 text-xs font-semibold text-blue-300 uppercase">
|
||||
<div class="w-1/4 text-base text-left text-blue-400">Stat</div>
|
||||
<div class="w-1/4">Total</div>
|
||||
<div class="w-1/4">Per min</div>
|
||||
|
|
@ -91,31 +91,31 @@
|
|||
:class="{'bg-blue-760': index % 2 !== 0}"
|
||||
class="flex items-center justify-between px-4 py-1 leading-tight"
|
||||
>
|
||||
<div class="w-1/4 text-left">{{ name }}</div>
|
||||
<div class="w-1/4 text-left capitalize">{{ name }}</div>
|
||||
<div class="w-1/4">{{ stat }}</div>
|
||||
<div class="w-1/4">{{ stat / (stats.global.time / 60)|round }}</div>
|
||||
<div class="w-1/4">{{ stat / stats.global.count|round }}</div>
|
||||
</li>
|
||||
<li class="flex items-center justify-between px-4 py-1 leading-tight bg-blue-760">
|
||||
<div class="w-1/4 text-left whitespace-no-wrap">time</div>
|
||||
<div class="w-1/4 text-left whitespace-no-wrap">Time</div>
|
||||
<div class="w-1/4">{{ (stats.global.time / 3600).toFixed(1) + 'h' }}</div>
|
||||
<div class="w-1/4"></div>
|
||||
<div class="w-1/4">{{ (stats.global.time / stats.global.count)|secToTime(true) }}</div>
|
||||
</li>
|
||||
<li class="flex items-center justify-between px-4 py-1 leading-tight">
|
||||
<div class="w-1/4 text-left whitespace-no-wrap">kda</div>
|
||||
<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>
|
||||
<li class="flex items-center justify-between px-4 py-1 leading-tight bg-blue-760">
|
||||
<div class="w-1/4 text-left whitespace-no-wrap">kill participation</div>
|
||||
<div class="w-1/4 text-left whitespace-no-wrap">Kill participation</div>
|
||||
<div class="w-1/4">{{ stats.global.kp|percent }}</div>
|
||||
</li>
|
||||
</ul>
|
||||
<template v-if="leagueStatsByType('Ranked').length">
|
||||
<div class="flex items-baseline px-4 mt-3 text-sm font-bold text-blue-300 uppercase">
|
||||
<div class="w-2/4 text-base text-left text-blue-400">Ranked Stats</div>
|
||||
<div class="flex items-baseline px-4 mt-3 text-xs font-semibold text-blue-300 uppercase">
|
||||
<div class="w-2/4 text-base text-left text-blue-400">Ranked</div>
|
||||
<div class="w-1/4">Winrate</div>
|
||||
<div class="w-1/4">Record</div>
|
||||
</div>
|
||||
|
|
@ -126,7 +126,7 @@
|
|||
:class="{'bg-blue-760': index % 2 !== 0}"
|
||||
class="flex items-center justify-between px-4 py-1 leading-tight"
|
||||
>
|
||||
<div class="w-2/4 text-left">{{ league.name.toLowerCase() }}</div>
|
||||
<div class="w-2/4 text-left capitalize">{{ league.name.toLowerCase() }}</div>
|
||||
<div
|
||||
:class="calculateWinrate(league.wins, league.count).color"
|
||||
class="w-1/4"
|
||||
|
|
@ -134,20 +134,20 @@
|
|||
<div class="w-1/4">
|
||||
<span
|
||||
:class="winLossColor(league.wins, league.losses).win"
|
||||
class="font-bold"
|
||||
class="font-semibold"
|
||||
>{{ league.wins }}</span>
|
||||
<span class="mx-1 font-bold text-gray-400">-</span>
|
||||
<span class="mx-1 font-semibold text-gray-400">-</span>
|
||||
<span
|
||||
:class="winLossColor(league.wins, league.losses).loss"
|
||||
class="font-bold"
|
||||
class="font-semibold"
|
||||
>{{ league.losses }}</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
<template v-if="leagueStatsByType('Normal').length">
|
||||
<div class="flex items-baseline px-4 mt-3 text-sm font-bold text-blue-300 uppercase">
|
||||
<div class="w-2/4 text-base text-left text-blue-400">Normal Stats</div>
|
||||
<div class="flex items-baseline px-4 mt-3 text-xs font-semibold text-blue-300 uppercase">
|
||||
<div class="w-2/4 text-base text-left text-blue-400">Normal</div>
|
||||
<div class="w-1/4">Winrate</div>
|
||||
<div class="w-1/4">Record</div>
|
||||
</div>
|
||||
|
|
@ -158,7 +158,7 @@
|
|||
:class="{'bg-blue-760': index % 2 !== 0}"
|
||||
class="flex items-center justify-between px-4 py-1 leading-tight"
|
||||
>
|
||||
<div class="w-2/4 text-left">{{ league.name.toLowerCase() }}</div>
|
||||
<div class="w-2/4 text-left capitalize">{{ league.name.toLowerCase() }}</div>
|
||||
<div
|
||||
:class="calculateWinrate(league.wins, league.count).color"
|
||||
class="w-1/4"
|
||||
|
|
@ -166,20 +166,20 @@
|
|||
<div class="w-1/4">
|
||||
<span
|
||||
:class="winLossColor(league.wins, league.losses).win"
|
||||
class="font-bold"
|
||||
class="font-semibold"
|
||||
>{{ league.wins }}</span>
|
||||
<span class="mx-1 font-bold text-gray-400">-</span>
|
||||
<span class="mx-1 font-semibold text-gray-400">-</span>
|
||||
<span
|
||||
:class="winLossColor(league.wins, league.losses).loss"
|
||||
class="font-bold"
|
||||
class="font-semibold"
|
||||
>{{ league.losses }}</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
|
||||
<div class="flex items-baseline px-4 mt-3 text-sm font-bold text-blue-300 uppercase">
|
||||
<div class="w-2/4 text-base text-left text-blue-400">Stats by Class</div>
|
||||
<div class="flex items-baseline px-4 mt-3 text-xs font-semibold text-blue-300 uppercase">
|
||||
<div class="w-2/4 text-base text-left text-blue-400">Class</div>
|
||||
<div class="w-1/4">Winrate</div>
|
||||
<div class="w-1/4">Record</div>
|
||||
</div>
|
||||
|
|
@ -198,12 +198,12 @@
|
|||
<div class="w-1/4">
|
||||
<span
|
||||
:class="winLossColor(championClass.wins, championClass.losses).win"
|
||||
class="font-bold"
|
||||
class="font-semibold"
|
||||
>{{ championClass.wins }}</span>
|
||||
<span class="mx-1 font-bold text-gray-400">-</span>
|
||||
<span class="mx-1 font-semibold text-gray-400">-</span>
|
||||
<span
|
||||
:class="winLossColor(championClass.wins, championClass.losses).loss"
|
||||
class="font-bold"
|
||||
class="font-semibold"
|
||||
>{{ championClass.losses }}</span>
|
||||
</div>
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -15,9 +15,9 @@
|
|||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ml-2 text-3xl font-extrabold text-teal-500 uppercase"
|
||||
class="ml-2 text-3xl font-bold text-teal-500 uppercase"
|
||||
>{{ selectedLeague.fullRank }}</div>
|
||||
<div class="ml-4 text-2xl font-extrabold">{{ selectedLeague.leaguePoints }} LP</div>
|
||||
<div class="ml-4 text-2xl font-bold">{{ selectedLeague.leaguePoints }} LP</div>
|
||||
<div
|
||||
v-if="selectedLeague.miniSeries"
|
||||
class="flex items-center p-2 ml-2 bg-blue-800 rounded"
|
||||
|
|
@ -34,7 +34,7 @@
|
|||
<div class="relative inline-block text-white">
|
||||
<select
|
||||
v-model="selectedKey"
|
||||
class="block w-full px-4 py-2 pr-8 text-lg font-extrabold leading-tight bg-blue-800 rounded-md appearance-none cursor-pointer hover:bg-blue-700 focus:outline-none"
|
||||
class="block w-full px-4 py-2 pr-8 text-lg font-bold leading-tight bg-blue-800 rounded-md appearance-none cursor-pointer hover:bg-blue-700 focus:outline-none"
|
||||
>
|
||||
<option
|
||||
v-for="(data, leagueName) in ranked"
|
||||
|
|
@ -51,13 +51,13 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="flex items-center p-2 ml-2 bg-blue-800 rounded">
|
||||
<div class="text-base font-bold uppercase">Record</div>
|
||||
<div class="ml-2 font-bold text-green-400">{{ selectedLeague.wins }}</div>
|
||||
<div class="text-base font-semibold uppercase">Record</div>
|
||||
<div class="ml-2 font-semibold text-green-400">{{ selectedLeague.wins }}</div>
|
||||
<span class="mx-1">-</span>
|
||||
<div class="font-bold text-red-400">{{ selectedLeague.losses }}</div>
|
||||
<div class="ml-3 text-base font-bold uppercase">Winrate</div>
|
||||
<div class="font-semibold text-red-400">{{ selectedLeague.losses }}</div>
|
||||
<div class="ml-3 text-base font-semibold uppercase">Winrate</div>
|
||||
<div
|
||||
:class="['ml-2 text-base leading-tight font-bold', parseFloat(selectedLeague.winrate) >= 50 ? 'text-green-400' : 'text-red-400']"
|
||||
:class="['ml-2 text-base leading-tight font-semibold', parseFloat(selectedLeague.winrate) >= 50 ? 'text-green-400' : 'text-red-400']"
|
||||
>{{ selectedLeague.winrate }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -35,8 +35,8 @@
|
|||
/>
|
||||
</svg>
|
||||
<span class="ml-8">
|
||||
Join us
|
||||
<span class="font-bold">on Discord</span>
|
||||
Join
|
||||
<span class="font-bold">our Discord</span>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
|
|
@ -126,25 +126,25 @@
|
|||
:class="isRouteActive('summoner')"
|
||||
class="pb-2 text-blue-300 border-b-2 border-transparent cursor-pointer hover:text-blue-100"
|
||||
exact
|
||||
>overview</router-link>
|
||||
>Overview</router-link>
|
||||
<router-link
|
||||
:to="{ name: 'summonerChampions', params: { region: $route.params.region, name: $route.params.name }}"
|
||||
:class="isRouteActive('summonerChampions')"
|
||||
class="pb-2 ml-4 text-blue-300 border-b-2 border-transparent cursor-pointer hover:text-blue-100"
|
||||
exact
|
||||
>champions</router-link>
|
||||
>Champions</router-link>
|
||||
<router-link
|
||||
:to="{ name: 'summonerRecords', params: { region: $route.params.region, name: $route.params.name }}"
|
||||
:class="isRouteActive('summonerRecords')"
|
||||
class="pb-2 ml-4 text-blue-300 border-b-2 border-transparent cursor-pointer hover:text-blue-100"
|
||||
exact
|
||||
>records</router-link>
|
||||
>Records</router-link>
|
||||
<router-link
|
||||
:to="{ name: 'summonerLive', params: { region: $route.params.region, name: $route.params.name }}"
|
||||
:class="isRouteActive('summonerLive')"
|
||||
class="pb-2 ml-4 text-blue-300 border-b-2 border-transparent cursor-pointer hover:text-blue-100"
|
||||
exact
|
||||
>live game</router-link>
|
||||
>Live game</router-link>
|
||||
</div>
|
||||
|
||||
<!-- Select Season -->
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@ export default {
|
|||
[key]: gameModes[key]
|
||||
}
|
||||
}, {})
|
||||
return { '-1': { type: 'Normal', name: 'ALL QUEUES' }, ...queues }
|
||||
return { '-1': { type: 'Normal', name: 'All queues' }, ...queues }
|
||||
},
|
||||
...mapGetters('summoner', ['summonerFound']),
|
||||
...mapState({
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div key="records">
|
||||
<template v-if="!recordsLoaded || (recordsLoaded && records.maxKda)">
|
||||
<div class="mx-4 text-2xl text-blue-200 border-b-2 border-blue-800 blue-900">basics</div>
|
||||
<div class="mx-4 text-2xl text-blue-200 border-b-2 border-blue-800 blue-900">Basics</div>
|
||||
<div class="flex flex-wrap -mx-2">
|
||||
<template v-if="recordsLoaded">
|
||||
<RecordCard
|
||||
|
|
@ -66,7 +66,7 @@
|
|||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<div class="mx-4 mt-3 text-2xl text-blue-200 border-b-2 border-blue-800 blue-900">game impact</div>
|
||||
<div class="mx-4 mt-3 text-2xl text-blue-200 border-b-2 border-blue-800 blue-900">Game impact</div>
|
||||
<div class="flex flex-wrap -mx-2">
|
||||
<template v-if="recordsLoaded">
|
||||
<RecordCard
|
||||
|
|
@ -113,7 +113,7 @@
|
|||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<div class="mx-4 mt-3 text-2xl text-blue-200 border-b-2 border-blue-800 blue-900">team work</div>
|
||||
<div class="mx-4 mt-3 text-2xl text-blue-200 border-b-2 border-blue-800 blue-900">Team work</div>
|
||||
<div class="flex flex-wrap -mx-2">
|
||||
<template v-if="recordsLoaded">
|
||||
<RecordCard
|
||||
|
|
|
|||
|
|
@ -233,7 +233,7 @@ module.exports = {
|
|||
},
|
||||
fontFamily: {
|
||||
sans: [
|
||||
'Lato',
|
||||
'Inter',
|
||||
'-apple-system',
|
||||
'BlinkMacSystemFont',
|
||||
'"Segoe UI"',
|
||||
|
|
|
|||
Loading…
Reference in a new issue