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

refactor: switch from Lato font to Inter

Browse source
This commit is contained in:
Valentin Kaelin 2020-08-22 15:11:25 +02:00
parent 8eb8a31112
commit 7f631d2662
14 changed files with 147 additions and 127 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
client/src/assets/css/base.css
View file

@ -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 { ::-webkit-scrollbar {
width: 8px; width: 8px;

6
client/src/components/Form/SearchFormDropdown.vue
View file

@ -1,10 +1,10 @@
<template> <template>
<div <div
@mousedown="clickDropdown" @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 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"> <div class="flex flex-wrap items-center -mx-1 text-xs leading-none">
<SearchFormDropdownPlayer <SearchFormDropdownPlayer
v-for="player in favorites" v-for="player in favorites"
@ -16,7 +16,7 @@
</div> </div>
</div> </div>
<div :class="{'mt-2': favorites.length}"> <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"> <div class="flex flex-wrap items-center -mx-1 text-xs leading-none">
<template v-if="recentSearches.length"> <template v-if="recentSearches.length">
<SearchFormDropdownPlayer <SearchFormDropdownPlayer

8
client/src/components/Match/DetailedMatchGlobalStats.vue
View file

@ -36,26 +36,26 @@
<div> <div>
<div <div
:class="textColor" :class="textColor"
class="text-base font-semibold" class="text-sm font-medium"
>{{ `${team.teamStats.kills}/${team.teamStats.deaths}/${team.teamStats.assists}` }}</div> >{{ `${team.teamStats.kills}/${team.teamStats.deaths}/${team.teamStats.assists}` }}</div>
<div class="text-xs text-white">k / d / a</div> <div class="text-xs text-white">k / d / a</div>
</div> </div>
<div :class="allyTeam ? 'ml-3' : 'mr-3'"> <div :class="allyTeam ? 'ml-3' : 'mr-3'">
<div <div
:class="textColor" :class="textColor"
class="text-base font-semibold" class="text-sm font-medium"
>{{ +(team.teamStats.gold / 1000).toFixed(1) + 'k' }}</div> >{{ +(team.teamStats.gold / 1000).toFixed(1) + 'k' }}</div>
<div class="text-xs text-white">gold</div> <div class="text-xs text-white">gold</div>
</div> </div>
<div :class="allyTeam ? 'ml-3' : 'mr-3'"> <div :class="allyTeam ? 'ml-3' : 'mr-3'">
<div <div
:class="textColor" :class="textColor"
class="text-base font-semibold" class="text-sm font-medium"
>{{ +(team.teamStats.dmgChamp / 1000).toFixed(1) + 'k' }}</div> >{{ +(team.teamStats.dmgChamp / 1000).toFixed(1) + 'k' }}</div>
<div class="text-xs text-white">dmg</div> <div class="text-xs text-white">dmg</div>
</div> </div>
<div :class="allyTeam ? 'ml-3' : 'mr-3'" class="flex flex-col justify-end"> <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="flex text-xs text-white">
<div :class="allyTeam ? '' : 'mr-2'"> <div :class="allyTeam ? '' : 'mr-2'">
<span :class="textColor">{{ team.towers }}</span> towers <span :class="textColor">{{ team.towers }}</span> towers

124
client/src/components/Match/DetailedMatchTeam.vue
View file

@ -26,25 +26,29 @@
</div> </div>
</div> </div>
</th> </th>
<th class="px-2 py-5 text-sm w-kda">K</th> <th class="px-2 py-5 text-sm font-medium w-kda">K</th>
<th class="px-2 py-5 text-sm w-kda">D</th> <th class="px-2 py-5 text-sm font-medium w-kda">D</th>
<th class="px-2 py-5 text-sm w-kda">A</th> <th class="px-2 py-5 text-sm font-medium w-kda">A</th>
<th class="px-2 py-5 text-sm w-minions">{{ statsFormat === 'stats' ? 'cs' : 'cs/m' }}</th> <th
<th class="px-2 py-5 text-sm w-vision">{{ statsFormat === 'stats' ? 'vs' : 'vs/m' }}</th> class="px-2 py-5 text-sm font-medium w-minions"
<th class="px-2 py-5 text-sm w-gold-dmg-kp">gold</th> >{{ statsFormat === 'stats' ? 'cs' : 'cs/m' }}</th>
<th class="px-2 py-5 text-sm w-gold-dmg-kp"> <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 dmg
<br />champ <br />champ
</th> </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 dmg
<br />obj <br />obj
</th> </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 dmg
<br />taken <br />taken
</th> </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> </tr>
</thead> </thead>
<tbody :class="{'border-b border-blue-700': allyTeam}" class="leading-none"> <tbody :class="{'border-b border-blue-700': allyTeam}" class="leading-none">
@ -157,46 +161,66 @@
</div> </div>
</div> </div>
</td> </td>
<td <td class="relative">
:style="bgColor(player, '71, 132, 116', 'kills')" <div
class="p-2 text-sm text-white" :style="bgColor(player, '71, 132, 116', 'kills')"
>{{ player.stats.kills }}</td> class="absolute inset-0 flex items-center justify-center p-2 text-sm text-white"
<td >{{ player.stats.kills }}</div>
:style="bgColor(player, '156, 71, 109', 'deaths')" </td>
class="p-2 text-sm text-white" <td class="relative">
>{{ player.stats.deaths }}</td> <div
<td :style="bgColor(player, '156, 71, 109', 'deaths')"
:style="bgColor(player, '146, 100, 79', 'assists')" class="absolute inset-0 flex items-center justify-center p-2 text-sm text-white"
class="p-2 text-sm text-white" >{{ player.stats.deaths }}</div>
>{{ player.stats.assists }}</td> </td>
<td <td class="relative">
class="p-2 text-sm text-white" <div
:style="bgColor(player, '140, 101, 182', 'minions')" :style="bgColor(player, '146, 100, 79', 'assists')"
>{{ player[statsFormat].minions }}</td> class="absolute inset-0 flex items-center justify-center p-2 text-sm text-white"
<td >{{ player.stats.assists }}</div>
class="p-2 text-sm text-white" </td>
:style="bgColor(player, '55, 118, 179', 'vision')" <td class="relative">
>{{ player[statsFormat].vision }}</td> <div
<td :style="bgColor(player, '140, 101, 182', 'minions')"
class="p-2 text-sm text-white" class="absolute inset-0 flex items-center justify-center p-2 text-sm text-white"
:style="bgColor(player, '146, 100, 79', 'gold')" >{{ player[statsFormat].minions }}</div>
>{{ roundStats(player[statsFormat].gold) }}</td> </td>
<td <td class="relative">
:style="bgColor(player, '156, 71, 109', 'dmgChamp')" <div
class="p-2 text-sm text-white" :style="bgColor(player, '55, 118, 179', 'vision')"
>{{ roundStats(player[statsFormat].dmgChamp) }}</td> class="absolute inset-0 flex items-center justify-center p-2 text-sm text-white"
<td >{{ player[statsFormat].vision }}</div>
:style="bgColor(player, '156, 71, 109', 'dmgObj')" </td>
class="p-2 text-sm text-white text-red" <td class="relative">
>{{ roundStats(player[statsFormat].dmgObj) }}</td> <div
<td :style="bgColor(player, '146, 100, 79', 'gold')"
:style="bgColor(player, '146, 145, 106', 'dmgTaken')" class="absolute inset-0 flex items-center justify-center p-2 text-sm text-white"
class="p-2 text-sm text-white" >{{ roundStats(player[statsFormat].gold) }}</div>
>{{ roundStats(player[statsFormat].dmgTaken) }}</td> </td>
<td <td class="relative">
:style="bgColor(player, '71, 132, 116', 'kp')" <div
class="p-2 text-sm text-white" :style="bgColor(player, '156, 71, 109', 'dmgChamp')"
>{{ player.stats.kp }}</td> 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> </tr>
</tbody> </tbody>
</table> </table>

36
client/src/components/Summoner/Champions/ChampionsTable.vue
View file

@ -13,7 +13,7 @@
@click="sortBy(heading.props)" @click="sortBy(heading.props)"
v-html="heading.name" v-html="heading.name"
:class="[ :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) sortedClasses(heading.props)
]" ]"
class="relative px-2 py-4 font-normal cursor-pointer hover:bg-blue-700" class="relative px-2 py-4 font-normal cursor-pointer hover:bg-blue-700"
@ -28,7 +28,7 @@
> >
<td <td
:class="{'rounded-bl-lg': index === championsToDisplay.length - 1}" :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> >{{ champion.index + 1 }}</td>
<td class="relative px-2 py-3 text-sm text-white bg-blue-800 border-t-table"> <td class="relative px-2 py-3 text-sm text-white bg-blue-800 border-t-table">
<div class="flex items-center"> <div class="flex items-center">
@ -91,7 +91,7 @@
>{{ champion.gameLength|secToTime }}</td> >{{ champion.gameLength|secToTime }}</td>
<td <td
:class="{'rounded-br-lg': index === championsToDisplay.length - 1}" :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> >{{ champion.lastPlayed }}</td>
</tr> </tr>
</tbody> </tbody>
@ -152,55 +152,55 @@ export default {
return { return {
headings: [ headings: [
{ {
name: 'name', name: 'Name',
props: 'champion.name' props: 'champion.name'
}, },
{ {
name: 'win rate', name: 'Win <br> rate',
props: 'winrate' props: 'winrate'
}, },
{ {
name: 'play <br> rate', name: 'Play <br> rate',
props: 'playrate' props: 'playrate'
}, },
{ {
name: 'wins', name: 'Wins',
props: 'wins' props: 'wins'
}, },
{ {
name: 'plays', name: 'Plays',
props: 'count' props: 'count'
}, },
{ {
name: 'kda', name: 'KDA',
props: 'kda' props: 'kda'
}, },
{ {
name: 'kp', name: 'KP',
props: 'kp' props: 'kp'
}, },
{ {
name: 'minions', name: 'Minions',
props: 'minions' props: 'minions'
}, },
{ {
name: 'gold', name: 'Gold',
props: 'gold' props: 'gold'
}, },
{ {
name: 'dmg <br> champ', name: 'Dmg <br> champ',
props: 'dmgChamp' props: 'dmgChamp'
}, },
{ {
name: 'dmg <br> taken', name: 'Dmg <br> taken',
props: 'dmgTaken' props: 'dmgTaken'
}, },
{ {
name: 'game <br> length', name: 'Game <br> length',
props: 'gameLength' props: 'gameLength'
}, },
{ {
name: 'last played', name: 'Last <br> played',
props: 'date' props: 'date'
} }
], ],
@ -303,10 +303,6 @@ export default {
background-color: rgba(190, 227, 248, 0.2); background-color: rgba(190, 227, 248, 0.2);
} }
.border-t-table-70::after {
width: 70%;
}
.sorted::after { .sorted::after {
content: ""; content: "";
position: absolute; position: absolute;

2
client/src/components/Summoner/Champions/FilterQueue.vue
View file

@ -3,7 +3,7 @@
<select <select
v-model="queue" v-model="queue"
@change="filterQueue" @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> <option v-for="(key) in Object.keys(choices)" :key="key" :value="key">{{ choices[key].name }}</option>
</select> </select>

10
client/src/components/Summoner/Overview/SummonerChampions.vue
View file

@ -4,7 +4,7 @@
<svg class="w-5 h-5" style="transform: rotate(-5deg);"> <svg class="w-5 h-5" style="transform: rotate(-5deg);">
<use xlink:href="#layers" /> <use xlink:href="#layers" />
</svg> </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);"> <svg class="w-5 h-5" style="transform: rotate(5deg);">
<use xlink:href="#layers" /> <use xlink:href="#layers" />
</svg> </svg>
@ -31,11 +31,11 @@
</div> </div>
</div> </div>
<div v-if="stats.champion.length"> <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="ml-2 text-base text-blue-400 w-champion">Champion</div>
<div class="w-plays">plays</div> <div class="w-plays">Plays</div>
<div class="w-winrate">winrate</div> <div class="w-winrate">Winrate</div>
<div class="w-kda">kda</div> <div class="w-kda">KDA</div>
</div> </div>
<ul class="mt-1 text-sm text-left text-gray-100"> <ul class="mt-1 text-sm text-left text-gray-100">
<li <li

2
client/src/components/Summoner/Overview/SummonerMates.vue
View file

@ -5,7 +5,7 @@
<svg class="w-5 h-5" style="transform: rotate(-5deg);"> <svg class="w-5 h-5" style="transform: rotate(-5deg);">
<use xlink:href="#people" /> <use xlink:href="#people" />
</svg> </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);"> <svg class="w-5 h-5" style="transform: rotate(5deg);">
<use xlink:href="#people" /> <use xlink:href="#people" />
</svg> </svg>

46
client/src/components/Summoner/Overview/SummonerStats.vue
View file

@ -4,7 +4,7 @@
<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-semibold 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>
@ -78,7 +78,7 @@
</div> </div>
</div> </div>
<div class="py-2 text-sm text-center"> <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 text-base text-left text-blue-400">Stat</div>
<div class="w-1/4">Total</div> <div class="w-1/4">Total</div>
<div class="w-1/4">Per min</div> <div class="w-1/4">Per min</div>
@ -91,31 +91,31 @@
:class="{'bg-blue-760': index % 2 !== 0}" :class="{'bg-blue-760': index % 2 !== 0}"
class="flex items-center justify-between px-4 py-1 leading-tight" 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 }}</div>
<div class="w-1/4">{{ stat / (stats.global.time / 60)|round }}</div> <div class="w-1/4">{{ stat / (stats.global.time / 60)|round }}</div>
<div class="w-1/4">{{ stat / stats.global.count|round }}</div> <div class="w-1/4">{{ stat / stats.global.count|round }}</div>
</li> </li>
<li class="flex items-center justify-between px-4 py-1 leading-tight bg-blue-760"> <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">{{ (stats.global.time / 3600).toFixed(1) + 'h' }}</div>
<div class="w-1/4"></div> <div class="w-1/4"></div>
<div class="w-1/4">{{ (stats.global.time / stats.global.count)|secToTime(true) }}</div> <div class="w-1/4">{{ (stats.global.time / stats.global.count)|secToTime(true) }}</div>
</li> </li>
<li class="flex items-center justify-between px-4 py-1 leading-tight"> <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 <div
class="w-1/4" class="w-1/4"
>{{ (stats.global.kills + stats.global.assists) / stats.global.deaths|round }}</div> >{{ (stats.global.kills + stats.global.assists) / stats.global.deaths|round }}</div>
</li> </li>
<li class="flex items-center justify-between px-4 py-1 leading-tight bg-blue-760"> <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> <div class="w-1/4">{{ stats.global.kp|percent }}</div>
</li> </li>
</ul> </ul>
<template v-if="leagueStatsByType('Ranked').length"> <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="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 Stats</div> <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">Winrate</div>
<div class="w-1/4">Record</div> <div class="w-1/4">Record</div>
</div> </div>
@ -126,7 +126,7 @@
:class="{'bg-blue-760': index % 2 !== 0}" :class="{'bg-blue-760': index % 2 !== 0}"
class="flex items-center justify-between px-4 py-1 leading-tight" 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 <div
:class="calculateWinrate(league.wins, league.count).color" :class="calculateWinrate(league.wins, league.count).color"
class="w-1/4" class="w-1/4"
@ -134,20 +134,20 @@
<div class="w-1/4"> <div class="w-1/4">
<span <span
:class="winLossColor(league.wins, league.losses).win" :class="winLossColor(league.wins, league.losses).win"
class="font-bold" class="font-semibold"
>{{ league.wins }}</span> >{{ league.wins }}</span>
<span class="mx-1 font-bold text-gray-400">-</span> <span class="mx-1 font-semibold text-gray-400">-</span>
<span <span
:class="winLossColor(league.wins, league.losses).loss" :class="winLossColor(league.wins, league.losses).loss"
class="font-bold" class="font-semibold"
>{{ league.losses }}</span> >{{ league.losses }}</span>
</div> </div>
</li> </li>
</ul> </ul>
</template> </template>
<template v-if="leagueStatsByType('Normal').length"> <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="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 Stats</div> <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">Winrate</div>
<div class="w-1/4">Record</div> <div class="w-1/4">Record</div>
</div> </div>
@ -158,7 +158,7 @@
:class="{'bg-blue-760': index % 2 !== 0}" :class="{'bg-blue-760': index % 2 !== 0}"
class="flex items-center justify-between px-4 py-1 leading-tight" 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 <div
:class="calculateWinrate(league.wins, league.count).color" :class="calculateWinrate(league.wins, league.count).color"
class="w-1/4" class="w-1/4"
@ -166,20 +166,20 @@
<div class="w-1/4"> <div class="w-1/4">
<span <span
:class="winLossColor(league.wins, league.losses).win" :class="winLossColor(league.wins, league.losses).win"
class="font-bold" class="font-semibold"
>{{ league.wins }}</span> >{{ league.wins }}</span>
<span class="mx-1 font-bold text-gray-400">-</span> <span class="mx-1 font-semibold text-gray-400">-</span>
<span <span
:class="winLossColor(league.wins, league.losses).loss" :class="winLossColor(league.wins, league.losses).loss"
class="font-bold" class="font-semibold"
>{{ league.losses }}</span> >{{ league.losses }}</span>
</div> </div>
</li> </li>
</ul> </ul>
</template> </template>
<div class="flex items-baseline px-4 mt-3 text-sm font-bold text-blue-300 uppercase"> <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">Stats by Class</div> <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">Winrate</div>
<div class="w-1/4">Record</div> <div class="w-1/4">Record</div>
</div> </div>
@ -198,12 +198,12 @@
<div class="w-1/4"> <div class="w-1/4">
<span <span
:class="winLossColor(championClass.wins, championClass.losses).win" :class="winLossColor(championClass.wins, championClass.losses).win"
class="font-bold" class="font-semibold"
>{{ championClass.wins }}</span> >{{ championClass.wins }}</span>
<span class="mx-1 font-bold text-gray-400">-</span> <span class="mx-1 font-semibold text-gray-400">-</span>
<span <span
:class="winLossColor(championClass.wins, championClass.losses).loss" :class="winLossColor(championClass.wins, championClass.losses).loss"
class="font-bold" class="font-semibold"
>{{ championClass.losses }}</span> >{{ championClass.losses }}</span>
</div> </div>
</li> </li>

16
client/src/components/Summoner/SummonerRanked.vue
View file

@ -15,9 +15,9 @@
</div> </div>
</div> </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> >{{ 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 <div
v-if="selectedLeague.miniSeries" v-if="selectedLeague.miniSeries"
class="flex items-center p-2 ml-2 bg-blue-800 rounded" class="flex items-center p-2 ml-2 bg-blue-800 rounded"
@ -34,7 +34,7 @@
<div class="relative inline-block text-white"> <div class="relative inline-block text-white">
<select <select
v-model="selectedKey" 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 <option
v-for="(data, leagueName) in ranked" v-for="(data, leagueName) in ranked"
@ -51,13 +51,13 @@
</div> </div>
</div> </div>
<div class="flex items-center p-2 ml-2 bg-blue-800 rounded"> <div class="flex items-center p-2 ml-2 bg-blue-800 rounded">
<div class="text-base font-bold uppercase">Record</div> <div class="text-base font-semibold uppercase">Record</div>
<div class="ml-2 font-bold text-green-400">{{ selectedLeague.wins }}</div> <div class="ml-2 font-semibold text-green-400">{{ selectedLeague.wins }}</div>
<span class="mx-1">-</span> <span class="mx-1">-</span>
<div class="font-bold text-red-400">{{ selectedLeague.losses }}</div> <div class="font-semibold text-red-400">{{ selectedLeague.losses }}</div>
<div class="ml-3 text-base font-bold uppercase">Winrate</div> <div class="ml-3 text-base font-semibold uppercase">Winrate</div>
<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> >{{ selectedLeague.winrate }}</div>
</div> </div>
</div> </div>

12
client/src/layouts/Default.vue
View file

@ -35,8 +35,8 @@
/> />
</svg> </svg>
<span class="ml-8"> <span class="ml-8">
Join us Join
<span class="font-bold">on Discord</span> <span class="font-bold">our Discord</span>
</span> </span>
</a> </a>
</div> </div>
@ -126,25 +126,25 @@
:class="isRouteActive('summoner')" :class="isRouteActive('summoner')"
class="pb-2 text-blue-300 border-b-2 border-transparent cursor-pointer hover:text-blue-100" class="pb-2 text-blue-300 border-b-2 border-transparent cursor-pointer hover:text-blue-100"
exact exact
>overview</router-link> >Overview</router-link>
<router-link <router-link
:to="{ name: 'summonerChampions', params: { region: $route.params.region, name: $route.params.name }}" :to="{ name: 'summonerChampions', params: { region: $route.params.region, name: $route.params.name }}"
:class="isRouteActive('summonerChampions')" :class="isRouteActive('summonerChampions')"
class="pb-2 ml-4 text-blue-300 border-b-2 border-transparent cursor-pointer hover:text-blue-100" class="pb-2 ml-4 text-blue-300 border-b-2 border-transparent cursor-pointer hover:text-blue-100"
exact exact
>champions</router-link> >Champions</router-link>
<router-link <router-link
:to="{ name: 'summonerRecords', params: { region: $route.params.region, name: $route.params.name }}" :to="{ name: 'summonerRecords', params: { region: $route.params.region, name: $route.params.name }}"
:class="isRouteActive('summonerRecords')" :class="isRouteActive('summonerRecords')"
class="pb-2 ml-4 text-blue-300 border-b-2 border-transparent cursor-pointer hover:text-blue-100" class="pb-2 ml-4 text-blue-300 border-b-2 border-transparent cursor-pointer hover:text-blue-100"
exact exact
>records</router-link> >Records</router-link>
<router-link <router-link
:to="{ name: 'summonerLive', params: { region: $route.params.region, name: $route.params.name }}" :to="{ name: 'summonerLive', params: { region: $route.params.region, name: $route.params.name }}"
:class="isRouteActive('summonerLive')" :class="isRouteActive('summonerLive')"
class="pb-2 ml-4 text-blue-300 border-b-2 border-transparent cursor-pointer hover:text-blue-100" class="pb-2 ml-4 text-blue-300 border-b-2 border-transparent cursor-pointer hover:text-blue-100"
exact exact
>live game</router-link> >Live game</router-link>
</div> </div>
<!-- Select Season --> <!-- Select Season -->

2
client/src/views/SummonerChampions.vue
View file

@ -43,7 +43,7 @@ export default {
[key]: gameModes[key] [key]: gameModes[key]
} }
}, {}) }, {})
return { '-1': { type: 'Normal', name: 'ALL QUEUES' }, ...queues } return { '-1': { type: 'Normal', name: 'All queues' }, ...queues }
}, },
...mapGetters('summoner', ['summonerFound']), ...mapGetters('summoner', ['summonerFound']),
...mapState({ ...mapState({

6
client/src/views/SummonerRecords.vue
View file

@ -1,7 +1,7 @@
<template> <template>
<div key="records"> <div key="records">
<template v-if="!recordsLoaded || (recordsLoaded && records.maxKda)"> <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"> <div class="flex flex-wrap -mx-2">
<template v-if="recordsLoaded"> <template v-if="recordsLoaded">
<RecordCard <RecordCard
@ -66,7 +66,7 @@
</div> </div>
</template> </template>
</div> </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"> <div class="flex flex-wrap -mx-2">
<template v-if="recordsLoaded"> <template v-if="recordsLoaded">
<RecordCard <RecordCard
@ -113,7 +113,7 @@
</div> </div>
</template> </template>
</div> </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"> <div class="flex flex-wrap -mx-2">
<template v-if="recordsLoaded"> <template v-if="recordsLoaded">
<RecordCard <RecordCard

2
client/tailwind.config.js
View file

@ -233,7 +233,7 @@ module.exports = {
}, },
fontFamily: { fontFamily: {
sans: [ sans: [
'Lato', 'Inter',
'-apple-system', '-apple-system',
'BlinkMacSystemFont', 'BlinkMacSystemFont',
'"Segoe UI"', '"Segoe UI"',