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: reorder tailwind css classes with headwind extension

Browse source
This commit is contained in:
Valentin Kaelin 2020-06-11 20:55:39 +02:00
parent 8b73271823
commit 58c27324f8
35 changed files with 323 additions and 317 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
client/src/App.vue
View file

@ -1,5 +1,5 @@
<template>
<div id="app" class="font-sans bg-blue-900 antialiased min-h-screen">
<div id="app" class="min-h-screen font-sans antialiased bg-blue-900">
<SVGContainer />
<NotificationsContainer />
<component :is="layout">
@ -31,9 +31,9 @@ export default {
created() {
this.updatePercent()
this.updateSettings({name: 'region'})
this.updateSettings({name: 'recentSearches', isJson: true})
this.updateSettings({name: 'favorites', isJson: true})
this.updateSettings({ name: 'region' })
this.updateSettings({ name: 'recentSearches', isJson: true })
this.updateSettings({ name: 'favorites', isJson: true })
},
methods: {

4
client/src/assets/css/transition.css
View file

@ -80,12 +80,12 @@
.scale-fade-enter,
.scale-fade-leave-to {
@apply opacity-0 scale-90;
@apply scale-90 opacity-0;
}
.scale-fade-enter-to,
.scale-fade-leave {
@apply opacity-100 scale-100;
@apply scale-100 opacity-100;
}
/* Grow transition (ripples) */

8
client/src/components/Common/DotsLoader.vue
View file

@ -1,8 +1,8 @@
<template>
<div :style="{width: width}" class="spinner text-center">
<div :style="dotStyle" class="bounce1 inline-block rounded-full"></div>
<div :style="dotStyle" class="bounce2 inline-block rounded-full"></div>
<div :style="dotStyle" class="bounce3 inline-block rounded-full"></div>
<div :style="{width: width}" class="text-center spinner">
<div :style="dotStyle" class="inline-block rounded-full bounce1"></div>
<div :style="dotStyle" class="inline-block rounded-full bounce2"></div>
<div :style="dotStyle" class="inline-block rounded-full bounce3"></div>
</div>
</template>

10
client/src/components/Common/LazyBackgroundImage.vue
View file

@ -38,7 +38,7 @@ export default {
}
},
data () {
data() {
return {
imageState: 'loading',
asyncImage: new Image()
@ -46,7 +46,7 @@ export default {
},
computed: {
computedStyle () {
computedStyle() {
if (this.imageState === 'loaded') {
return `background-image: ${this.moreBackgrounds} url(${this.asyncImage.src}); background-size: ${this.backgroundSize}`
}
@ -54,19 +54,19 @@ export default {
}
},
mounted () {
mounted() {
this.$nextTick(() => {
this.fetchImage()
})
},
methods: {
fetchImage () {
fetchImage() {
this.asyncImage.onload = this.imageOnLoad
this.imageState = 'loading'
this.asyncImage.src = this.imageSource
},
imageOnLoad () {
imageOnLoad() {
this.imageState = 'loaded'
}
}

2
client/src/components/Common/Ripple.vue
View file

@ -8,7 +8,7 @@
<div
v-for="ripple in ripples"
:key="ripple.id"
class="absolute w-full h-full opacity-0 rounded-full pointer-events-none"
class="absolute w-full h-full rounded-full opacity-0 pointer-events-none"
:style="{
top: ripple.top,
left: ripple.left,

2
client/src/components/Common/Tooltip.vue
View file

@ -16,7 +16,7 @@
<div
v-show="isOpen"
ref="content"
class="fixed z-40 bg-blue-1000 py-2 rounded-md shadow"
class="fixed z-40 py-2 rounded-md shadow bg-blue-1000"
:style="{ ...position }"
>
<slot></slot>

21
client/src/components/Form/SearchForm.vue
View file

@ -1,5 +1,5 @@
<template>
<form @submit.prevent="formSubmit" :class="formClasses" class="flex text-teal-100 text-lg w-full">
<form @submit.prevent="formSubmit" :class="formClasses" class="flex w-full text-lg text-teal-100">
<div class="relative w-full">
<button
ref="submit"
@ -7,7 +7,7 @@
class="absolute z-30 h-full hover:text-teal-200"
type="submit"
>
<svg class="absolute vertical-center horizontal-center w-4 h-4">
<svg class="absolute w-4 h-4 vertical-center horizontal-center">
<use xlink:href="#search" />
</svg>
</button>
@ -15,9 +15,10 @@
ref="input"
v-model="summoner"
@focus="selected = true"
type="text"
:class="[inputClasses]"
class="summoner-input w-full outline-none font-bold"
class="w-full font-bold outline-none summoner-input"
spellcheck="false"
type="text"
/>
<transition name="scale-fade">
<SearchFormDropdown v-if="selected" @click-dropdown="clickDropdown = true" />
@ -26,15 +27,15 @@
<div ref="region-dropdown">
<div
:class="{'mr-12': size === 'xl'}"
class="absolute right-0 z-30 vertical-center flex items-center h-full"
class="absolute right-0 z-30 flex items-center h-full vertical-center"
>
<div
@click="dropdown = !dropdown"
:class="[selectRegionClasses]"
class="border-2 border-transparent cursor-pointer flex items-center rounded transition-all transition-fast ease-in-quad ease-out-quad hover:text-white"
class="flex items-center transition-all border-2 border-transparent rounded cursor-pointer transition-fast ease-in-quad ease-out-quad hover:text-white"
>
<span class="selected font-bold uppercase select-none">{{ selectedRegion }}</span>
<svg class="ml-1 -mr-1 w-4 h-4">
<span class="font-bold uppercase select-none selected">{{ selectedRegion }}</span>
<svg class="w-4 h-4 ml-1 -mr-1">
<use xlink:href="#caret-down" />
</svg>
</div>
@ -50,11 +51,11 @@
:key="region"
@click="updateSettings({name: 'region', value: region.toLowerCase()})"
:class="classRegions(index)"
class="relative pr-2 pl-5 py-1 text-xs text-right bg-blue-1000 select-none hover:bg-blue-800"
class="relative py-1 pl-5 pr-2 text-xs text-right select-none bg-blue-1000 hover:bg-blue-800"
>
<svg
v-if="region.toLowerCase() === selectedRegion"
class="absolute vertical-center offsetIcon w-3 h-3 fill-current"
class="absolute w-3 h-3 fill-current vertical-center offsetIcon"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
>

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

@ -1,11 +1,11 @@
<template>
<div
@mousedown="clickDropdown"
class="mt-2 absolute z-30 w-full px-3 py-2 bg-blue-900 rounded-lg shadow"
class="absolute z-30 w-full px-3 py-2 mt-2 bg-blue-900 rounded-lg shadow"
>
<div v-if="favorites.length">
<div class="text-base text-blue-100">favorites:</div>
<div class="-mx-1 flex items-center flex-wrap text-xs leading-none">
<div class="flex flex-wrap items-center -mx-1 text-xs leading-none">
<SearchFormDropdownPlayer
v-for="player in favorites"
:key="player.name"
@ -17,7 +17,7 @@
</div>
<div :class="{'mt-2': favorites.length}">
<div class="text-base text-blue-100">recent searches:</div>
<div class="-mx-1 flex items-center flex-wrap text-xs leading-none">
<div class="flex flex-wrap items-center -mx-1 text-xs leading-none">
<template v-if="recentSearches.length">
<SearchFormDropdownPlayer
v-for="player in recentSearches"
@ -27,10 +27,10 @@
/>
</template>
<template v-else>
<svg class="ml-4 mt-1 w-4 h-4 text-blue-200">
<svg class="w-4 h-4 mt-1 ml-4 text-blue-200">
<use xlink:href="#info" />
</svg>
<div class="ml-1 mt-1 text-sm text-blue-200">Example :</div>
<div class="mt-1 ml-1 text-sm text-blue-200">Example :</div>
<SearchFormDropdownPlayer
:player="{name: 'Alderiate', icon: 1150, region: 'euw'}"
:favorite="false"

10
client/src/components/Form/SearchFormDropdownPlayer.vue
View file

@ -2,14 +2,14 @@
<router-link
:to="{ name: 'summoner', params: { region: player.region, name: player.name }}"
:title="player.name"
class="mt-1 ml-1 flex items-center bg-blue-1000 p-1 text-blue-200 hover:bg-blue-800 cursor-pointer select-none"
class="flex items-center p-1 mt-1 ml-1 text-blue-200 cursor-pointer select-none bg-blue-1000 hover:bg-blue-800"
>
<div class="bg-blue-800 p-1 text-xxs text-white font-bold uppercase rounded">{{ player.region }}</div>
<div class="p-1 font-bold text-white uppercase bg-blue-800 rounded text-xxs">{{ player.region }}</div>
<div
:style="{backgroundImage: `url('https://raw.communitydragon.org/latest/plugins/rcp-be-lol-game-data/global/default/v1/profile-icons/${player.icon}.jpg')`}"
class="ml-1 w-5 h-5 bg-center bg-cover rounded"
class="w-5 h-5 ml-1 bg-center bg-cover rounded"
></div>
<div class="ml-1 max-w-12 truncate">{{ player.name }}</div>
<div class="ml-1 truncate max-w-12">{{ player.name }}</div>
<svg
@click.prevent="favoriteClick"
:class="favorite ? 'text-yellow-400' : 'hover:text-yellow-400 cursor-pointer'"
@ -17,7 +17,7 @@
>
<use xlink:href="#star" />
</svg>
<svg @click.prevent="closeClick" class="ml-2 w-3p5 h-3p5 hover:text-white cursor-pointer">
<svg @click.prevent="closeClick" class="ml-2 cursor-pointer w-3p5 h-3p5 hover:text-white">
<use xlink:href="#times" />
</svg>
</router-link>

12
client/src/components/Form/SwitchToggle.vue
View file

@ -1,32 +1,32 @@
<template>
<div class="switch relative z-10 text-teal-400 text-sm select-none leading-tight">
<div class="relative z-10 text-sm leading-tight text-teal-400 select-none switch">
<input
v-model="selected"
id="toggle-on"
class="toggle toggle-left hidden"
class="hidden toggle toggle-left"
:value="true"
type="radio"
/>
<label
:class="{'selected-label': selected}"
for="toggle-on"
class="inline-block py-1 rounded-l-full border-t-2 border-r border-b-2 border-l-2 border-teal-500 cursor-pointer"
class="inline-block py-1 border-t-2 border-b-2 border-l-2 border-r border-teal-500 rounded-l-full cursor-pointer"
>{{ leftLabel }}</label>
<input
v-model="selected"
id="toggle-off"
class="toggle toggle-right hidden"
class="hidden toggle toggle-right"
:value="false"
type="radio"
/>
<label
:class="{'selected-label': !selected}"
for="toggle-off"
class="inline-block py-1 rounded-r-full border-t-2 border-r-2 border-b-2 border-l border-teal-500 cursor-pointer"
class="inline-block py-1 border-t-2 border-b-2 border-l border-r-2 border-teal-500 rounded-r-full cursor-pointer"
>{{ rightLabel }}</label>
<div
:class="selected ? 'left-checked' : 'right-checked'"
class="selector absolute w-1/2 inset-0 bg-teal-500"
class="absolute inset-0 w-1/2 bg-teal-500 selector"
></div>
</div>
</template>

2
client/src/components/Global/NotificationsContainer.vue
View file

@ -1,5 +1,5 @@
<template>
<div class="pr-2 pb-2 fixed bottom-0 right-0 z-50">
<div class="fixed bottom-0 right-0 z-50 pb-2 pr-2">
<PopupNotification
v-for="notification in notifications"
:key="notification.id"

6
client/src/components/Global/PopupNotification.vue
View file

@ -5,14 +5,14 @@
'bg-red-500': notification.type === 'error',
'bg-green-500': notification.type === 'success'
}"
class="mt-2 relative rounded-lg shadow-md p-6 pr-10 text-white"
class="relative p-6 pr-10 mt-2 text-white rounded-lg shadow-md"
style="min-width: 240px"
>
<button
@click="deleteNotification"
class="cursor-pointer block absolute top-0 right-0 border border-transparent rounded-full py-1 px-1 my-1 mx-1 focus:outline-none hover:border-white"
class="absolute top-0 right-0 block px-1 py-1 mx-1 my-1 border border-transparent rounded-full cursor-pointer focus:outline-none hover:border-white"
>
<svg class="fill-current w-3 h-3" viewBox="0 0 20 20">
<svg class="w-3 h-3 fill-current" viewBox="0 0 20 20">
<path
d="M10 8.586L2.929 1.515 1.515 2.929 8.586 10l-7.071 7.071 1.414 1.414L10 11.414l7.071 7.071 1.414-1.414L11.414 10l7.071-7.071-1.414-1.414L10 8.586z"
/>

4
client/src/components/Match/DetailedMatch.vue
View file

@ -7,7 +7,7 @@
:ally-team="true"
/>
<div class="px-3 py-2 flex justify-between items-start">
<div class="flex items-start justify-between px-3 py-2">
<DetailedMatchGlobalStats :team="allyTeam" :ally-team="true" />
<SwitchToggle
@updateValue="updatePercent"
@ -26,7 +26,7 @@
/>
</div>
<div v-else-if="data.status === 'loading' && detailsOpen">
<p class="bg-blue-800 py-5 text-blue-100 text-lg font-semibold">Loading...</p>
<p class="py-5 text-lg font-semibold text-blue-100 bg-blue-800">Loading...</p>
</div>
</transition>
</template>

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

@ -10,20 +10,20 @@
<template v-slot:trigger>
<div
:class="[allyTeam ? 'ban-blue border-teal-500' : 'ban-red border-red-500']"
class="relative ban border-2 rounded-full cursor-pointer"
class="relative border-2 rounded-full cursor-pointer ban"
>
<div
:style="[ban.champion.id ? {backgroundImage: `url('${ban.champion.icon}')`} : '']"
class="ban-img w-6 h-6 bg-cover bg-center bg-blue-1000 rounded-full"
class="w-6 h-6 bg-center bg-cover rounded-full ban-img bg-blue-1000"
></div>
<div
:class="[textLightColor, bgColor]"
class="absolute ban-order w-4 h-4 flex items-center justify-center text-xs font-bold rounded-full"
class="absolute flex items-center justify-center w-4 h-4 text-xs font-bold rounded-full ban-order"
>{{ ban.pickTurn }}</div>
</div>
</template>
<template v-slot:default>
<div class="px-2 text-white text-center text-xs leading-tight select-none">
<div class="px-2 text-xs leading-tight text-center text-white select-none">
<div>{{ ban.champion.id ? ban.champion.name : 'No ban' }}</div>
</div>
</template>
@ -31,32 +31,32 @@
</div>
<div
:class="allyTeam ? 'text-left' : 'text-right flex-row-reverse'"
class="mt-2 flex leading-tight"
class="flex mt-2 leading-tight"
>
<div>
<div
:class="textColor"
class="text-base font-semibold"
>{{ `${team.teamStats.kills}/${team.teamStats.deaths}/${team.teamStats.assists}` }}</div>
<div class="text-white text-xs">k / d / a</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"
>{{ +(team.teamStats.gold / 1000).toFixed(1) + 'k' }}</div>
<div class="text-white text-xs">gold</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"
>{{ +(team.teamStats.dmgChamp / 1000).toFixed(1) + 'k' }}</div>
<div class="text-white text-xs">dmg</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 text-teal-400 font-semibold"></div>
<div class="flex text-white text-xs">
<div class="text-base font-semibold text-teal-400"></div>
<div class="flex text-xs text-white">
<div :class="allyTeam ? '' : 'mr-2'">
<span :class="textColor">{{ team.towers }}</span> towers
</div>

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

@ -3,12 +3,12 @@
:class="[{'rounded-b-lg overflow-hidden': !allyTeam}, data.result]"
class="w-full table-fixed"
>
<thead class="heading-detailed leading-none">
<thead class="leading-none heading-detailed">
<tr
:style="getHeadingColor(data.result)"
class="relative heading-row text-blue-200 font-semibold"
class="relative font-semibold text-blue-200 heading-row"
>
<th class="w-players py-5">
<th class="py-5 w-players">
<div class="flex justify-between">
<span
:class="allyTeam ? 'text-teal-400' : 'text-red-400'"
@ -19,38 +19,38 @@
:class="allyTeam ? 'text-teal-400' : 'text-red-400'"
class="flex pr-2"
>
<svg class="w-4 h-4 items-center">
<svg class="items-center w-4 h-4">
<use xlink:href="#award" />
</svg>
<span class="ml-2px">VICTORY</span>
</div>
</div>
</th>
<th class="w-kda px-2 py-5 text-sm">K</th>
<th class="w-kda px-2 py-5 text-sm">D</th>
<th class="w-kda px-2 py-5 text-sm">A</th>
<th class="w-minions px-2 py-5 text-sm">{{ statsFormat === 'stats' ? 'cs' : 'cs/m' }}</th>
<th class="w-vision px-2 py-5 text-sm">{{ statsFormat === 'stats' ? 'vs' : 'vs/m' }}</th>
<th class="w-gold-dmg-kp px-2 py-5 text-sm">gold</th>
<th class="w-gold-dmg-kp px-2 py-5 text-sm">
<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">
dmg
<br />champ
</th>
<th class="w-gold-dmg-kp px-2 py-5 text-sm">
<th class="px-2 py-5 text-sm w-gold-dmg-kp">
dmg
<br />obj
</th>
<th class="w-gold-dmg-kp px-2 py-5 text-sm">
<th class="px-2 py-5 text-sm w-gold-dmg-kp">
dmg
<br />taken
</th>
<th class="w-gold-dmg-kp px-2 py-5 text-sm">kp</th>
<th class="px-2 py-5 text-sm w-gold-dmg-kp">kp</th>
</tr>
</thead>
<tbody :class="{'border-b border-blue-700': allyTeam}" class="leading-none">
<tr v-for="(player, index) in data.players" :key="player.name + index">
<td class="py-2 border-r border-blue-700">
<div class="px-1 flex justify-between">
<div class="flex justify-between px-1">
<div class="flex">
<div class="flex items-center">
<div
@ -61,33 +61,33 @@
</div>
<div
:style="{backgroundImage: `url('${player.champion.icon}')`}"
class="ml-2 relative w-8 h-8 bg-cover bg-center bg-blue-1000 rounded-full"
class="relative w-8 h-8 ml-2 bg-center bg-cover rounded-full bg-blue-1000"
>
<div
:class="allyTeam ? 'bg-teal-500 text-teal-100' : 'bg-red-500 text-red-100'"
class="absolute level-position bottom-0 flex items-center justify-center w-4 h-4 rounded-full text-xxs"
class="absolute bottom-0 flex items-center justify-center w-4 h-4 rounded-full level-position text-xxs"
>
<span>{{ player.level }}</span>
</div>
</div>
<div class="ml-1 flex flex-col justify-around">
<div class="flex flex-col justify-around ml-1">
<Tooltip>
<template v-slot:trigger>
<div
:style="{backgroundImage: `url(${player.firstSum ? player.firstSum.icon : null})`}"
:class="{'cursor-pointer': player.firstSum}"
class="w-4 h-4 bg-blue-1000 rounded-md bg-center bg-cover"
class="w-4 h-4 bg-center bg-cover rounded-md bg-blue-1000"
></div>
</template>
<template v-if="player.firstSum" v-slot:default>
<div class="flex max-w-sm p-2 text-white text-left text-xs select-none">
<div class="flex max-w-sm p-2 text-xs text-left text-white select-none">
<div
:style="{backgroundImage: `url('${player.firstSum.icon}')`}"
class="ml-1 w-12 h-12 flex-shrink-0 rounded-md bg-blue-1000 bg-center bg-cover"
class="flex-shrink-0 w-12 h-12 ml-1 bg-center bg-cover rounded-md bg-blue-1000"
></div>
<div class="ml-2 leading-tight">
<div class="text-base leading-none">{{ player.firstSum.name }}</div>
<div class="mt-1 text-blue-200 font-light">{{ player.firstSum.description }}</div>
<div class="mt-1 font-light text-blue-200">{{ player.firstSum.description }}</div>
</div>
</div>
</template>
@ -97,52 +97,52 @@
<div
:style="{backgroundImage: `url(${player.secondSum ? player.secondSum.icon : null})`}"
:class="{'cursor-pointer': player.secondSum}"
class="w-4 h-4 bg-blue-1000 rounded-md bg-center bg-cover"
class="w-4 h-4 bg-center bg-cover rounded-md bg-blue-1000"
></div>
</template>
<template v-if="player.secondSum" v-slot:default>
<div class="flex max-w-sm p-2 text-white text-left text-xs select-none">
<div class="flex max-w-sm p-2 text-xs text-left text-white select-none">
<div
:style="{backgroundImage: `url('${player.secondSum.icon}')`}"
class="ml-1 w-12 h-12 flex-shrink-0 rounded-md bg-blue-1000 bg-center bg-cover"
class="flex-shrink-0 w-12 h-12 ml-1 bg-center bg-cover rounded-md bg-blue-1000"
></div>
<div class="ml-2 leading-tight">
<div class="text-base leading-none">{{ player.secondSum.name }}</div>
<div
class="mt-1 text-blue-200 font-light"
class="mt-1 font-light text-blue-200"
>{{ player.secondSum.description }}</div>
</div>
</div>
</template>
</Tooltip>
</div>
<div class="ml-2px flex flex-col justify-around">
<div class="flex flex-col justify-around ml-2px">
<div
:style="[player.primaryRune ? {background: `url(${player.primaryRune}) center/cover`} : '']"
class="w-4 h-4 bg-blue-1000 rounded-md"
class="w-4 h-4 rounded-md bg-blue-1000"
></div>
<div
:style="[player.secondaryRune ? {background: `url(${player.secondaryRune}) center/cover`} : '']"
class="w-4 h-4 bg-blue-1000 rounded-md"
class="w-4 h-4 rounded-md bg-blue-1000"
></div>
</div>
<div class="ml-1 flex flex-col items-start justify-center leading-none">
<div class="flex flex-col items-start justify-center ml-1 leading-none">
<router-link
v-if="player.firstSum"
:to="{ name: 'summoner', params: { region: $route.params.region, name: player.name }}"
:class="{'font-semibold text-yellow-400': account.id === player.summonerId}"
class="w-22 text-xs text-white text-left overflow-hidden text-overflow whitespace-no-wrap hover:text-blue-200"
class="overflow-hidden text-xs text-left text-white whitespace-no-wrap w-22 text-overflow hover:text-blue-200"
>{{ player.name }}</router-link>
<div
v-else
class="w-22 text-xs text-white text-left overflow-hidden text-overflow whitespace-no-wrap"
class="overflow-hidden text-xs text-left text-white whitespace-no-wrap w-22 text-overflow"
>{{ player.name }}</div>
<div class="text-xxs text-teal-500">{{ player.champion.name }}</div>
<div class="text-teal-500 text-xxs">{{ player.champion.name }}</div>
</div>
</div>
<div class="flex items-center">
<div v-if="player.rank">
<svg class="ml-auto w-5 h-5">
<svg class="w-5 h-5 ml-auto">
<use :xlink:href="`#rank-${player.rank.tier.toLowerCase()}`" />
</svg>
<div class="text-blue-300 text-xxs">{{ player.rank.shortName }}</div>
@ -151,7 +151,7 @@
<DotsLoader width="30px" dot-width="10px" />
</div>
<div v-else class="w-5 h-5">
<div class="-mt-1 text-blue-300 text-2xl">-</div>
<div class="-mt-1 text-2xl text-blue-300">-</div>
</div>
<MatchItems :items="player.items" :one-row="true" />
</div>
@ -159,43 +159,43 @@
</td>
<td
:style="bgColor(player, '71, 132, 116', 'kills')"
class="p-2 text-white text-sm"
class="p-2 text-sm text-white"
>{{ player.stats.kills }}</td>
<td
:style="bgColor(player, '156, 71, 109', 'deaths')"
class="p-2 text-white text-sm"
class="p-2 text-sm text-white"
>{{ player.stats.deaths }}</td>
<td
:style="bgColor(player, '146, 100, 79', 'assists')"
class="p-2 text-white text-sm"
class="p-2 text-sm text-white"
>{{ player.stats.assists }}</td>
<td
class="p-2 text-white text-sm"
class="p-2 text-sm text-white"
:style="bgColor(player, '140, 101, 182', 'minions')"
>{{ player[statsFormat].minions }}</td>
<td
class="p-2 text-white text-sm"
class="p-2 text-sm text-white"
:style="bgColor(player, '55, 118, 179', 'vision')"
>{{ player[statsFormat].vision }}</td>
<td
class="p-2 text-white text-sm"
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-white text-sm"
class="p-2 text-sm text-white"
>{{ roundStats(player[statsFormat].dmgChamp) }}</td>
<td
:style="bgColor(player, '156, 71, 109', 'dmgObj')"
class="p-2 text-white text-sm text-red"
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-white text-sm"
class="p-2 text-sm text-white"
>{{ roundStats(player[statsFormat].dmgTaken) }}</td>
<td
:style="bgColor(player, '71, 132, 116', 'kp')"
class="p-2 text-white text-sm"
class="p-2 text-sm text-white"
>{{ player.stats.kp }}</td>
</tr>
</tbody>

14
client/src/components/Match/LiveMatch.vue
View file

@ -1,9 +1,9 @@
<template>
<div class="ml-4 bg-blue-800 rounded-lg overflow-hidden text-sm">
<div class="relative w-full flex justify-between">
<div class="absolute horizontal-center h-full flex flex-col items-center justify-between">
<div class="text-blue-200 text-base leading-loose">{{ gamemode.name }}</div>
<div class="vs flex flex-col text-2xl font-bold leading-none">
<div class="ml-4 overflow-hidden text-sm bg-blue-800 rounded-lg">
<div class="relative flex justify-between w-full">
<div class="absolute flex flex-col items-center justify-between h-full horizontal-center">
<div class="text-base leading-loose text-blue-200">{{ gamemode.name }}</div>
<div class="flex flex-col text-2xl font-bold leading-none vs">
<span>V</span>
<span class="ml-4 -mt-3">S</span>
</div>
@ -18,7 +18,7 @@
>
<div
:style="{backgroundImage: `url('https://raw.communitydragon.org/latest/plugins/rcp-be-lol-game-data/global/default/v1/champion-icons/${ally.championId}.png')`}"
class="w-6 h-6 bg-cover bg-center bg-blue-1000 rounded-full"
class="w-6 h-6 bg-center bg-cover rounded-full bg-blue-1000"
></div>
<router-link
v-if="!ally.bot"
@ -42,7 +42,7 @@
>{{ enemy.summonerName }}</router-link>
<div
:style="{backgroundImage: `url('https://raw.communitydragon.org/latest/plugins/rcp-be-lol-game-data/global/default/v1/champion-icons/${enemy.championId}.png')`}"
class="ml-2 w-6 h-6 bg-cover bg-center bg-blue-1000 rounded-full"
class="w-6 h-6 ml-2 bg-center bg-cover rounded-full bg-blue-1000"
></div>
</li>
</ul>

66
client/src/components/Match/Match.vue
View file

@ -1,59 +1,59 @@
<template>
<li class="ml-4 relative">
<li class="relative ml-4">
<Ripple
@click.native="displayDetails"
color="rgba(43, 108, 176, 0.7)"
:class="[data.result, showDetails ? 'rounded-t-lg' : 'rounded-lg', {'mt-4': indexMatch !== 0 }]"
class="match relative bg-blue-800 text-white text-base cursor-pointer hover:shadow-xl"
class="relative text-base text-white bg-blue-800 cursor-pointer match hover:shadow-xl"
>
<div class="relative flex flex-wrap px-5 py-3">
<div
v-if="data.newMatch"
class="new-match absolute right-0 top-0 px-2 text-xxs rounded-full"
class="absolute top-0 right-0 px-2 rounded-full new-match text-xxs"
style="margin: 0.35rem 0.35rem 0 0; background-color: rgba(99,179,237, .2);"
>New</div>
<div class="first w-4/12 text-left">
<div class="w-4/12 text-left first">
<div>
<div
class="h-6 text-lg text-teal-500 font-extrabold uppercase leading-none"
class="h-6 text-lg font-extrabold leading-none text-teal-500 uppercase"
>{{ data.champion.name }}</div>
<div class="flex">
<div class="flex flex-col justify-end items-center">
<div class="flex flex-col items-center justify-end">
<div
v-if="data.role !== 'NONE'"
:style="{backgroundImage: `url(${require('@/assets/img/roles/' + data.role + '.png')})`}"
class="w-10 h-10 bg-center bg-cover"
></div>
<div
class="w-10 text-center text-xs text-teal-500 font-extrabold"
class="w-10 text-xs font-extrabold text-center text-teal-500"
>LVL {{ data.level }}</div>
</div>
<div
:style="{backgroundImage: `url('${data.champion.icon}')`}"
class="ml-2 w-16 h-16 crop-champion bg-blue-1000 rounded-lg"
class="w-16 h-16 ml-2 rounded-lg crop-champion bg-blue-1000"
></div>
<div class="ml-2 flex flex-col justify-around">
<div class="flex flex-col justify-around ml-2">
<div
:style="{backgroundImage: `url(${data.firstSum})`}"
class="w-6 h-6 bg-blue-1000 rounded-md bg-center bg-cover"
class="w-6 h-6 bg-center bg-cover rounded-md bg-blue-1000"
></div>
<div
:style="{backgroundImage: `url(${data.secondSum})`}"
class="w-6 h-6 bg-blue-1000 rounded-md bg-center bg-cover"
class="w-6 h-6 bg-center bg-cover rounded-md bg-blue-1000"
></div>
</div>
<div class="ml-1 flex flex-col justify-around">
<div class="flex flex-col justify-around ml-1">
<div
:style="[data.primaryRune ? {background: `url(${data.primaryRune}) center/cover`} : '']"
class="w-6 h-6 bg-blue-1000 rounded-md"
class="w-6 h-6 rounded-md bg-blue-1000"
></div>
<div
:style="[data.secondaryRune ? {background: `url(${data.secondaryRune}) center/cover`} : '']"
class="w-6 h-6 bg-blue-1000 rounded-md"
class="w-6 h-6 rounded-md bg-blue-1000"
></div>
</div>
<div class="mx-auto flex flex-col justify-center items-center leading-none">
<div class="flex flex-col items-center justify-center mx-auto leading-none">
<div class="text-xl font-extrabold text-teal-500">
<span class>{{ data.stats.kills }}</span>
<span class>/</span>
@ -62,18 +62,18 @@
<span class>{{ data.stats.assists }}</span>
</div>
<div
class="relative z-30 mt-2 text-white text-xs font-extrabold"
class="relative z-30 mt-2 text-xs font-extrabold text-white"
>{{ data.stats.kda }} KDA</div>
</div>
</div>
<div
class="relative z-30 h-6 flex items-end text-sm text-white font-extrabold leading-none"
class="relative z-30 flex items-end h-6 text-sm font-extrabold leading-none text-white"
>{{ data.gamemode.name }}</div>
</div>
</div>
<div class="second w-3/12 py-6 flex items-center">
<div class="flex items-center w-3/12 py-6 second">
<MatchItems :items="data.items" />
<div class="relative z-30 ml-4 leading-none">
@ -81,7 +81,7 @@
<svg style="width: 15px; height: 15px;">
<use xlink:href="#creeps" />
</svg>
<div class="ml-1 text-teal-300 text-sm font-bold">
<div class="ml-1 text-sm font-bold text-teal-300">
{{ data.stats.minions }}
<span class="font-normal">cs</span>
</div>
@ -90,64 +90,64 @@
<svg style="width: 15px; height: 15px;">
<use xlink:href="#gold" />
</svg>
<div class="ml-1 gold text-sm font-bold">{{ data.stats.gold|kilo }}</div>
<div class="ml-1 text-sm font-bold gold">{{ data.stats.gold|kilo }}</div>
</div>
<div class="flex items-center">
<svg style="width: 15px; height: 15px;">
<use xlink:href="#damage" />
</svg>
<div class="ml-1 damage text-sm font-bold">{{ data.stats.dmgChamp|kilo }}</div>
<div class="ml-1 text-sm font-bold damage">{{ data.stats.dmgChamp|kilo }}</div>
</div>
<div class="flex items-center">
<svg style="width: 15px; height: 15px;">
<use xlink:href="#kill-participation" />
</svg>
<div class="ml-1 kp text-sm font-bold">{{ data.stats.kp|percent }}</div>
<div class="ml-1 text-sm font-bold kp">{{ data.stats.kp|percent }}</div>
</div>
</div>
</div>
<div class="relative z-30 third w-5/12 py-1 flex items-center">
<div class="relative z-30 flex items-center w-5/12 py-1 third">
<div v-if="data.allyTeam.length > 1">
<div
v-for="(ally, index) in data.allyTeam"
:key="'player-' + index"
class="ml-4 flex items-center leading-none"
class="flex items-center ml-4 leading-none"
>
<div
:class="isSummonerProfile(ally.account_id)"
class="w-16 text-right overflow-hidden text-overflow whitespace-no-wrap text-xs text-blue-200 font-medium"
class="w-16 overflow-hidden text-xs font-medium text-right text-blue-200 whitespace-no-wrap text-overflow"
>{{ ally.name }}</div>
<div
:class="index !== 0 ? '-mt-1': ''"
:style="{backgroundImage: `url('${ally.champion.icon}')`}"
class="ml-1 w-6 h-6 bg-blue-1000 bg-center bg-cover rounded-full overflow-hidden"
class="w-6 h-6 ml-1 overflow-hidden bg-center bg-cover rounded-full bg-blue-1000"
></div>
<div
class="mx-3 w-4 h-4 bg-center bg-cover"
class="w-4 h-4 mx-3 bg-center bg-cover"
:style="{backgroundImage: `url(${require('@/assets/img/roles/' + roles[index] + '.png')})`}"
></div>
<div
:class="index !== 0 ? '-mt-1' : ''"
:style="{backgroundImage: `url('${data.enemyTeam[index].champion.icon}')`}"
class="w-6 h-6 bg-blue-1000 bg-center bg-cover rounded-full"
class="w-6 h-6 bg-center bg-cover rounded-full bg-blue-1000"
></div>
<div
class="ml-1 w-16 text-left overflow-hidden text-overflow whitespace-no-wrap text-xs text-blue-200 font-medium"
class="w-16 ml-1 overflow-hidden text-xs font-medium text-left text-blue-200 whitespace-no-wrap text-overflow"
>{{ data.enemyTeam[index].name }}</div>
</div>
</div>
<div class="ml-auto flex flex-col items-center justify-center">
<div class="flex flex-col items-center justify-center ml-auto">
<svg class="w-5 h-5 text-blue-200">
<use xlink:href="#stopwatch" />
</svg>
<div class="text-lg text-teal-400 font-medium">{{ data.time|secToTime }}</div>
<div class="text-lg font-medium text-teal-400">{{ data.time|secToTime }}</div>
<Tooltip>
<template v-slot:trigger>
<div class="text-xs text-white font-medium">{{ data.date }}</div>
<div class="text-xs font-medium text-white">{{ data.date }}</div>
</template>
<template v-slot:default>
<div class="px-2 text-white text-center text-xs leading-tight select-none">
<div class="px-2 text-xs leading-tight text-center text-white select-none">
<svg class="w-4 h-4 mx-auto text-teal-400">
<use xlink:href="#time" />
</svg>

10
client/src/components/Match/MatchItems.vue
View file

@ -5,22 +5,22 @@
<div
:style="{backgroundImage: item ? `url('${item.image}')` : null}"
:class="[oneRow ? 'ml-2px w-6 h-6' : 'ml-1 w-8 h-8', {'cursor-pointer': item !== null}]"
class="rounded-md bg-blue-1000 bg-center bg-cover"
class="bg-center bg-cover rounded-md bg-blue-1000"
></div>
</template>
<template v-if="item !== null" v-slot:default>
<div class="flex max-w-md p-2 text-white text-left text-xs select-none">
<div class="flex max-w-md p-2 text-xs text-left text-white select-none">
<div
:style="{backgroundImage: item ? `url('${item.image}')` : null}"
class="ml-1 w-12 h-12 flex-shrink-0 rounded-md bg-blue-1000 bg-center bg-cover"
class="flex-shrink-0 w-12 h-12 ml-1 bg-center bg-cover rounded-md bg-blue-1000"
></div>
<div class="ml-2 leading-none">
<div class="text-base">{{ item.name }}</div>
<div class="mt-1">
<span class="text-blue-200">Price:</span>
<span class="ml-1 text-sm text-yellow-500 font-semibold">{{ item.price }}</span>
<span class="ml-1 text-sm font-semibold text-yellow-500">{{ item.price }}</span>
</div>
<div v-html="item.description" class="mt-1 item-description text-blue-200 font-light"></div>
<div v-html="item.description" class="mt-1 font-light text-blue-200 item-description"></div>
</div>
</div>
</template>

4
client/src/components/Summoner/Champions/ChampionsSearch.vue
View file

@ -3,11 +3,11 @@
<input
v-model="championName"
@input="search"
class="input-color px-2 pl-10 py-2 rounded-lg outline-none focus:bg-blue-1000"
class="px-2 py-2 pl-10 rounded-lg outline-none input-color focus:bg-blue-1000"
type="text"
placeholder="Search Champions"
/>
<svg class="ml-3 absolute left-0 vertical-center w-4 h-4">
<svg class="absolute left-0 w-4 h-4 ml-3 vertical-center">
<use xlink:href="#search" />
</svg>
</Ripple>

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

@ -1,11 +1,11 @@
<template>
<table class="w-full table-fixed bg-blue-800 rounded-lg text-center leading-none">
<table class="w-full leading-none text-center bg-blue-800 rounded-lg table-fixed">
<thead>
<tr class="heading rounded-t-lg text-sm select-none">
<tr class="text-sm rounded-t-lg select-none heading">
<th
@click="sortBy('index')"
:class="sortedClasses('index')"
class="relative px-2 py-4 rounded-tl-lg font-normal cursor-pointer hover:bg-blue-700"
class="relative px-2 py-4 font-normal rounded-tl-lg cursor-pointer hover:bg-blue-700"
>rank</th>
<th
v-for="(heading, index) in headings"
@ -28,36 +28,36 @@
>
<td
:class="{'rounded-bl-lg': index === championsToDisplay.length - 1}"
class="relative px-2 py-3 bg-blue-800 border-t-table border-t-table-70 text-white text-sm"
class="relative px-2 py-3 text-sm text-white bg-blue-800 border-t-table border-t-table-70"
>{{ champion.index + 1 }}</td>
<td class="relative px-2 py-3 bg-blue-800 border-t-table text-white text-sm">
<td class="relative px-2 py-3 text-sm text-white bg-blue-800 border-t-table">
<div class="flex items-center">
<div
:style="{backgroundImage: `url('${champion.champion.icon}')`}"
class="w-6 h-6 flex-shrink-0 bg-cover bg-center bg-blue-1000 rounded-full"
class="flex-shrink-0 w-6 h-6 bg-center bg-cover rounded-full bg-blue-1000"
></div>
<div class="ml-2">{{ champion.champion.name }}</div>
</div>
</td>
<td
:style="bgColor(champion, '71, 132, 116', 'winrate')"
class="px-2 py-3 text-white text-sm"
class="px-2 py-3 text-sm text-white"
>{{ champion.winrate|percent }}</td>
<td
:style="bgColor(champion, '55, 118, 179', 'playrate')"
class="px-2 py-3 text-white text-sm"
class="px-2 py-3 text-sm text-white"
>{{ champion.playrate|percent }}</td>
<td
:style="bgColor(champion, '71, 132, 116', 'wins')"
class="px-2 py-3 text-white text-sm"
class="px-2 py-3 text-sm text-white"
>{{ champion.wins }}</td>
<td
:style="bgColor(champion, '55, 118, 179', 'count')"
class="px-2 py-3 text-white text-sm"
class="px-2 py-3 text-sm text-white"
>{{ champion.count }}</td>
<td :style="bgColor(champion, '55, 118, 179', 'kda')" class="px-2 py-3 text-white text-sm">
<td :style="bgColor(champion, '55, 118, 179', 'kda')" class="px-2 py-3 text-sm text-white">
<div>{{ champion.kda|round }}</div>
<div class="mt-1 text-xxs text-blue-200">
<div class="mt-1 text-blue-200 text-xxs">
{{ champion.kills/champion.count|round(1) }}
/
{{ champion.deaths/champion.count|round(1) }}
@ -67,31 +67,31 @@
</td>
<td
:style="bgColor(champion, '71, 132, 116', 'kp')"
class="px-2 py-3 text-white text-sm"
class="px-2 py-3 text-sm text-white"
>{{ champion.kp|percent }}</td>
<td
:style="bgColor(champion, '140, 101, 182', 'minions')"
class="px-2 py-3 text-white text-sm"
class="px-2 py-3 text-sm text-white"
>{{ champion.minions|round(0) }}</td>
<td
:style="bgColor(champion, '146, 100, 79', 'gold')"
class="px-2 py-3 text-white text-sm"
class="px-2 py-3 text-sm text-white"
>{{ champion.gold|kilo }}</td>
<td
:style="bgColor(champion, '156, 71, 109', 'dmgChamp')"
class="px-2 py-3 text-white text-sm"
class="px-2 py-3 text-sm text-white"
>{{ champion.dmgChamp|kilo }}</td>
<td
:style="bgColor(champion, '146, 145, 106', 'dmgTaken')"
class="px-2 py-3 text-white text-sm"
class="px-2 py-3 text-sm text-white"
>{{ champion.dmgTaken|kilo }}</td>
<td
:style="bgColor(champion, '71, 132, 116', 'gameLength')"
class="px-2 py-3 text-white text-sm"
class="px-2 py-3 text-sm text-white"
>{{ champion.gameLength|secToTime }}</td>
<td
:class="{'rounded-br-lg': index === championsToDisplay.length - 1}"
class="px-2 py-3 text-white text-sm"
class="px-2 py-3 text-sm text-white"
>{{ champion.lastPlayed }}</td>
</tr>
</tbody>

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

@ -3,14 +3,14 @@
<select
v-model="queue"
@change="filterQueue"
class="block appearance-none bg-blue-800 hover:bg-blue-700 w-full px-4 py-2 pr-8 rounded-md font-semibold lowercase cursor-pointer focus:outline-none"
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"
>
<option v-for="(key) in Object.keys(choices)" :key="key" :value="key">{{ choices[key].name }}</option>
</select>
<div
class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700"
class="absolute inset-y-0 right-0 flex items-center px-2 text-gray-700 pointer-events-none"
>
<svg class="text-white w-5 h-5">
<svg class="w-5 h-5 text-white">
<use xlink:href="#chevron-down" />
</svg>
</div>

13
client/src/components/Summoner/FilterSeason.vue
View file

@ -1,16 +1,21 @@
<template>
<div class="relative group self-end inline-block text-blue-200 leading-none">
<div class="relative self-end inline-block leading-none text-blue-200 group">
<select
v-model="season"
@change="filterSeason"
dir="rtl"
class="block appearance-none bg-transparent w-full px-4 pr-8 rounded-md cursor-pointer focus:outline-none group-hover:text-white"
class="block w-full px-4 pr-8 bg-transparent rounded-md appearance-none cursor-pointer focus:outline-none group-hover:text-white"
>
<option :value="null" class="bg-blue-800">All seasons</option>
<option v-for="(s, index) in seasons" :key="index" :value="s" class="bg-blue-800">Season {{ s }}</option>
<option
v-for="(s, index) in seasons"
:key="index"
:value="s"
class="bg-blue-800"
>Season {{ s }}</option>
</select>
<div
class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700"
class="absolute inset-y-0 right-0 flex items-center px-2 text-gray-700 pointer-events-none"
>
<svg class="w-4 h-4 text-blue-200 group-hover:text-white">
<use xlink:href="#caret-down" />

4
client/src/components/Summoner/HeaderLoader.vue
View file

@ -1,5 +1,5 @@
<template>
<div class="text-white pb-2">
<div class="pb-2 text-white">
<div class="flex justify-between">
<div style="width: 520px; height: 239px;">
<content-loader
@ -21,7 +21,7 @@
</content-loader>
</div>
<div class="bg-blue-850 rounded-lg" style="width: 347px; height: 215px;">
<div class="rounded-lg bg-blue-850" style="width: 347px; height: 215px;">
<content-loader
:height="215"
:width="347"

46
client/src/components/Summoner/Live/LiveTeam.vue
View file

@ -1,18 +1,18 @@
<template>
<div class="mt-2 bg-blue-800 px-5 py-4 rounded-lg">
<div class="px-5 py-4 mt-2 bg-blue-800 rounded-lg">
<table
class="w-full table-fixed text-center leading-none"
class="w-full leading-none text-center table-fixed"
style="border-collapse:separate; border-spacing:0 0.5rem;"
>
<thead>
<tr class="text-left">
<th
:class="[ally ? 'text-teal-400 ' : 'text-red-400 ']"
class="w-team font-semibold"
class="font-semibold w-team"
>{{ ally ? 'Ally' : 'Enemy' }} Team</th>
<th class="w-ranked text-blue-200 text-sm font-normal">SoloQ Stats</th>
<th class="w-ranked text-blue-200 text-sm font-normal">Flex Stats</th>
<th class="w-bans px-2 text-right text-blue-200 text-sm font-normal">Bans</th>
<th class="text-sm font-normal text-blue-200 w-ranked">SoloQ Stats</th>
<th class="text-sm font-normal text-blue-200 w-ranked">Flex Stats</th>
<th class="px-2 text-sm font-normal text-right text-blue-200 w-bans">Bans</th>
</tr>
</thead>
<tbody v-if="liveLoaded">
@ -27,29 +27,29 @@
<div class="flex flex-col items-center">
<div
:style="{backgroundImage: `url('${player.runes.primaryRune}')`}"
class="w-6 h-6 bg-cover bg-center"
class="w-6 h-6 bg-center bg-cover"
></div>
<div
:style="{backgroundImage: `url('${player.runes.secondaryRune}')`}"
class="mt-1 w-3 h-3 bg-cover bg-center"
class="w-3 h-3 mt-1 bg-center bg-cover"
></div>
</div>
<div
:style="{backgroundImage: `url('https://raw.communitydragon.org/latest/plugins/rcp-be-lol-game-data/global/default/v1/champion-icons/${player.championId}.png')`}"
:class="borderChampion(player.summonerId)"
class="ml-2 w-12 h-12 bg-cover bg-center bg-blue-1000 border-2 rounded-full"
class="w-12 h-12 ml-2 bg-center bg-cover border-2 rounded-full bg-blue-1000"
></div>
<div class="ml-2 flex flex-col">
<div class="flex flex-col ml-2">
<div
:style="{backgroundImage: `url(${getSummonerLink(player.spell1Id)})`}"
class="w-4 h-4 bg-blue-1000 rounded-md bg-center bg-cover"
class="w-4 h-4 bg-center bg-cover rounded-md bg-blue-1000"
></div>
<div
:style="{backgroundImage: `url(${getSummonerLink(player.spell2Id)})`}"
class="mt-1 w-4 h-4 bg-blue-1000 rounded-md bg-center bg-cover"
class="w-4 h-4 mt-1 bg-center bg-cover rounded-md bg-blue-1000"
></div>
</div>
<div class="ml-3 text-left text-sm leading-tight">
<div class="ml-3 text-sm leading-tight text-left">
<router-link
v-if="!player.bot"
:to="{ name: 'summoner', params: { region: $route.params.region, name: player.summonerName }}"
@ -68,7 +68,7 @@
<use :xlink:href="`#rank-${player.rank.soloQ.tier.toLowerCase()}`" />
</svg>
<div
class="mt-2px text-blue-300 text-xs font-semibold"
class="text-xs font-semibold text-blue-300 mt-2px"
>{{ player.rank.soloQ.shortName }}</div>
</div>
<div class="ml-5 text-center">
@ -79,7 +79,7 @@
</div>
</div>
<div v-else class="w-5 h-5">
<div class="-mt-1 text-blue-300 text-2xl">-</div>
<div class="-mt-1 text-2xl text-blue-300">-</div>
</div>
</div>
</td>
@ -91,7 +91,7 @@
<use :xlink:href="`#rank-${player.rank.flex5v5.tier.toLowerCase()}`" />
</svg>
<div
class="mt-2px text-blue-300 text-xs font-semibold"
class="text-xs font-semibold text-blue-300 mt-2px"
>{{ player.rank.flex5v5.shortName }}</div>
</div>
<div class="ml-5 text-center">
@ -102,16 +102,16 @@
</div>
</div>
<div v-else class="w-5 h-5">
<div class="-mt-1 text-blue-300 text-2xl">-</div>
<div class="-mt-1 text-2xl text-blue-300">-</div>
</div>
</div>
</td>
<td class="py-1 text-right rounded-r-lg">
<div class="px-2 inline-block">
<div class="inline-block px-2">
<div
v-if="live.bannedChampions.length"
:class="[ally ? 'ban-blue border-teal-500' : 'ban-red border-red-500']"
class="relative ban border-2 rounded-full"
class="relative border-2 rounded-full ban"
>
<div
:style="[
@ -119,15 +119,15 @@
{backgroundImage: `url('https://raw.communitydragon.org/latest/plugins/rcp-be-lol-game-data/global/default/v1/champion-icons/${banChamp(index, player.teamId).championId}.png')`}
: ''
]"
class="ban-img w-6 h-6 bg-cover bg-center bg-blue-1000 rounded-full"
class="w-6 h-6 bg-center bg-cover rounded-full ban-img bg-blue-1000"
></div>
<div
:class="[ally ? 'text-teal-100 bg-teal-500' : 'text-red-100 bg-red-500']"
class="absolute ban-order w-4 h-4 flex items-center justify-center text-xs font-bold rounded-full"
class="absolute flex items-center justify-center w-4 h-4 text-xs font-bold rounded-full ban-order"
>{{ banChamp(index, player.teamId).pickTurn }}</div>
</div>
<div v-else class="w-5 h-5 text-left">
<div class="text-blue-300 text-2xl">-</div>
<div class="text-2xl text-blue-300">-</div>
</div>
</div>
</td>
@ -135,7 +135,7 @@
</tbody>
<tbody v-else>
<tr v-for="index in 5" :key="index">
<td colspan="4" class="bg-blue-760 rounded-lg">
<td colspan="4" class="rounded-lg bg-blue-760">
<content-loader
:height="54"
:width="1160"

12
client/src/components/Summoner/Overview/OverviewLoader.vue
View file

@ -1,7 +1,7 @@
<template>
<div class="mt-3 flex text-center">
<div class="flex mt-3 text-center">
<div class="w-3/12">
<div class="bg-blue-850 rounded-lg" style="width: 300px; height: 339px;">
<div class="rounded-lg bg-blue-850" style="width: 300px; height: 339px;">
<content-loader
:height="339"
:width="300"
@ -41,7 +41,7 @@
<rect x="246" y="308" rx="3" ry="3" width="42" height="16" />
</content-loader>
</div>
<div class="mt-4 bg-blue-850 rounded-lg" style="width: 300px; height: 828px;">
<div class="mt-4 rounded-lg bg-blue-850" style="width: 300px; height: 828px;">
<content-loader
:height="828"
:width="300"
@ -133,7 +133,7 @@
</content-loader>
</div>
<div class="mt-4 bg-blue-850 rounded-lg" style="width: 300px; height: 384px;">
<div class="mt-4 rounded-lg bg-blue-850" style="width: 300px; height: 384px;">
<content-loader
:height="384"
:width="300"
@ -192,7 +192,7 @@
v-for="index in 10"
:key="index"
:class="{'mt-4': index !== 1}"
class="ml-4 bg-blue-850 rounded-lg"
class="ml-4 rounded-lg bg-blue-850"
style="width: 884px; height: 144px;"
>
<content-loader
@ -242,7 +242,7 @@
<rect x="803" y="90" rx="3" ry="3" width="59" height="14" />
</content-loader>
</div>
<div class="mt-4 mx-auto" style="width: 135px; height: 40px;">
<div class="mx-auto mt-4" style="width: 135px; height: 40px;">
<content-loader
:height="40"
:width="135"

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

@ -1,6 +1,6 @@
<template>
<div class="bg-blue-800 rounded-lg">
<div class="relative heading flex items-center justify-center py-4 rounded-t-lg text-blue-200">
<div class="relative flex items-center justify-center py-4 text-blue-200 rounded-t-lg heading">
<svg class="w-5 h-5" style="transform: rotate(-5deg);">
<use xlink:href="#layers" />
</svg>
@ -8,7 +8,7 @@
<svg class="w-5 h-5" style="transform: rotate(5deg);">
<use xlink:href="#layers" />
</svg>
<div class="absolute right-0 top-0 mt-3 mr-2">
<div class="absolute top-0 right-0 mt-3 mr-2">
<Tooltip>
<template v-slot:trigger>
<svg class="w-4 h-4 cursor-pointer">
@ -16,12 +16,12 @@
</svg>
</template>
<template v-slot:default>
<div class="px-2 text-white text-center text-sm select-none">
<div class="px-2 text-sm text-center text-white select-none">
<div>Stats based on</div>
<div>
<span class="text-teal-400 font-bold">{{ stats.global ? stats.global.count : 0 }}</span> matches
<span class="font-bold text-teal-400">{{ stats.global ? stats.global.count : 0 }}</span> matches
</div>
<div class="mt-2 leading-tight text-xs text-blue-100 font-normal italic">
<div class="mt-2 text-xs italic font-normal leading-tight text-blue-100">
Load more matches
<br />to have better results.
</div>
@ -31,13 +31,13 @@
</div>
</div>
<div v-if="stats.champion.length">
<div class="mt-3 px-4 flex items-baseline text-left text-sm text-blue-300 font-bold">
<div class="ml-2 w-champion text-base text-blue-400">Champion</div>
<div class="flex items-baseline px-4 mt-3 text-sm font-bold text-left text-blue-300">
<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>
<ul class="mt-1 text-sm text-gray-100 text-left">
<ul class="mt-1 text-sm text-left text-gray-100">
<li
v-for="(champion, index) in stats.champion"
:key="index"
@ -45,34 +45,34 @@
class="relative flex items-center px-4 py-2 leading-tight"
>
<div class="absolute text-xs" style="left: 6px;">{{ index + 1 }}.</div>
<div class="ml-2 w-champion flex items-center">
<div class="flex items-center ml-2 w-champion">
<div
:style="{backgroundImage: `url('${champion.champion.icon}')`}"
class="w-8 h-8 bg-center bg-cover bg-blue-1000 rounded-full flex-shrink-0"
class="flex-shrink-0 w-8 h-8 bg-center bg-cover rounded-full bg-blue-1000"
></div>
<div class="mx-1 truncate">{{ champion.champion.name }}</div>
</div>
<div class="w-plays">
<div class="text-blue-400 text-xs">{{ champion.count }}</div>
<div class="text-xs text-blue-400">{{ champion.count }}</div>
<div
:style="{width: widthBar(champion.count, mostPlayed)}"
class="mt-2px bg-blue-400 rounded-full h-1"
class="h-1 bg-blue-400 rounded-full mt-2px"
></div>
</div>
<div class="w-winrate">
<div class="text-green-400 text-xs">{{ champion.wins * 100 / champion.count|percent }}</div>
<div class="text-xs text-green-400">{{ champion.wins * 100 / champion.count|percent }}</div>
<div
:style="{width: widthBar(champion.wins, champion.count)}"
class="mt-2px bg-green-400 rounded-full h-1"
class="h-1 bg-green-400 rounded-full mt-2px"
></div>
</div>
<div class="w-kda">
<div
class="text-purple-400 text-xs"
class="text-xs text-purple-400"
>{{ kda(champion.kills, champion.deaths, champion.assists) }}</div>
<div
:style="{width: widthBar(kda(champion.kills, champion.deaths, champion.assists), bestKda)}"
class="mt-2px bg-purple-400 rounded-full h-1"
class="h-1 bg-purple-400 rounded-full mt-2px"
></div>
</div>
</li>

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

@ -1,7 +1,7 @@
<template>
<div class="mt-4 bg-blue-800 rounded-lg">
<div class="pb-2">
<div class="flex items-center justify-center py-4 heading rounded-t-lg text-blue-200">
<div class="flex items-center justify-center py-4 text-blue-200 rounded-t-lg heading">
<svg class="w-5 h-5" style="transform: rotate(-5deg);">
<use xlink:href="#people" />
</svg>
@ -11,7 +11,7 @@
</svg>
</div>
<div v-if="hasMates" class="px-4 py-2 text-sm text-left">
<div class="flex font-bold text-base text-blue-400">
<div class="flex text-base font-bold text-blue-400">
<div class="w-2/4">Summoner</div>
<div class="w-1/4">W / L</div>
<div class="w-1/4">Winrate</div>
@ -20,7 +20,7 @@
<li
v-for="mate in mates.slice(0, maxMates)"
:key="mate._id"
class="flex justify-between items-center"
class="flex items-center justify-between"
>
<router-link
:to="{ name: 'summoner', params: { region: $route.params.region, name: mate.name }}"
@ -30,16 +30,16 @@
<div class="w-1/4">
<Tooltip>
<template v-slot:trigger>
<div class="bg-blue-900 rounded-full h-2 cursor-pointer">
<div class="h-2 bg-blue-900 rounded-full cursor-pointer">
<div
:class="getWinrateColor(mate.wins, mate.count)"
:style="{width: `${winrate(mate.wins, mate.count)}%`}"
class="rounded-full h-full"
class="h-full rounded-full"
></div>
</div>
</template>
<template v-slot:default>
<div class="px-2 text-white text-center text-xs">
<div class="px-2 text-xs text-center text-white">
<div>Winrate</div>
<div>
<span

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

@ -1,6 +1,6 @@
<template>
<div v-if="stats.global" class="mt-4 bg-blue-800 rounded-lg">
<div class="relative heading flex justify-center py-4 rounded-t-lg text-blue-200">
<div class="relative flex justify-center py-4 text-blue-200 rounded-t-lg heading">
<svg class="w-6 h-6">
<use xlink:href="#graph" />
</svg>
@ -8,7 +8,7 @@
<svg class="w-6 h-6" style="transform: scaleX(-1);">
<use xlink:href="#graph" />
</svg>
<div class="absolute right-0 top-0 mt-3 mr-2">
<div class="absolute top-0 right-0 mt-3 mr-2">
<Tooltip>
<template v-slot:trigger>
<svg class="w-4 h-4 cursor-pointer">
@ -16,12 +16,12 @@
</svg>
</template>
<template v-slot:default>
<div class="px-2 text-white text-center text-sm select-none">
<div class="px-2 text-sm text-center text-white select-none">
<div>Stats based on</div>
<div>
<span class="text-teal-400 font-bold">{{ stats.global.count }}</span> matches
<span class="font-bold text-teal-400">{{ stats.global.count }}</span> matches
</div>
<div class="mt-2 leading-tight text-xs text-blue-100 font-normal italic">
<div class="mt-2 text-xs italic font-normal leading-tight text-blue-100">
Load more matches
<br />to have better results.
</div>
@ -30,7 +30,7 @@
</Tooltip>
</div>
</div>
<div class="mt-2 flex items-center py-2">
<div class="flex items-center py-2 mt-2">
<div
v-for="(role, index) in stats.role"
:key="index"
@ -52,13 +52,13 @@
</div>
</template>
<template v-slot:default>
<div class="px-2 text-white text-center text-sm select-none">
<div class="px-2 text-sm text-center text-white 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="mx-1 font-bold text-gray-400">-</span>
<span
:class="winLossColor(role.wins, role.losses).loss"
class="font-bold"
@ -72,14 +72,14 @@
</Tooltip>
<div
:style="{backgroundImage: `url(${require('@/assets/img/roles/' + role.role + '.png')})`}"
class="mt-1 w-4 h-4 bg-center bg-cover"
class="w-4 h-4 mt-1 bg-center bg-cover"
></div>
<div class="text-xs text-blue-200">{{ role.count }}</div>
</div>
</div>
<div class="py-2 text-sm text-center">
<div class="px-4 flex items-baseline font-bold text-sm text-blue-300 uppercase">
<div class="w-1/4 text-left text-base text-blue-400">Stat</div>
<div class="flex items-baseline px-4 text-sm font-bold 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>
<div class="w-1/4">Avg</div>
@ -89,33 +89,33 @@
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"
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">{{ 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 justify-between items-center px-4 py-1 bg-blue-760 leading-tight">
<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">{{ (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 justify-between items-center 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"
>{{ (stats.global.kills + stats.global.assists) / stats.global.deaths|round }}</div>
</li>
<li class="flex justify-between items-center px-4 py-1 bg-blue-760 leading-tight">
<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">{{ stats.global.kp|percent }}</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="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="w-1/4">Winrate</div>
<div class="w-1/4">Record</div>
</div>
@ -124,7 +124,7 @@
v-for="(league, index) in leagueStatsByType('Ranked')"
:key="index"
:class="{'bg-blue-760': index % 2 !== 0}"
class="flex justify-between items-center 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
@ -136,7 +136,7 @@
: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="mx-1 font-bold text-gray-400">-</span>
<span
:class="winLossColor(league.wins, league.losses).loss"
class="font-bold"
@ -146,8 +146,8 @@
</ul>
</template>
<template v-if="leagueStatsByType('Normal').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">Normal Stats</div>
<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="w-1/4">Winrate</div>
<div class="w-1/4">Record</div>
</div>
@ -156,7 +156,7 @@
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"
class="flex items-center justify-between px-4 py-1 leading-tight"
>
<div class="w-2/4 text-left">{{ league.name.toLowerCase() }}</div>
<div
@ -168,7 +168,7 @@
: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="mx-1 font-bold text-gray-400">-</span>
<span
:class="winLossColor(league.wins, league.losses).loss"
class="font-bold"
@ -178,8 +178,8 @@
</ul>
</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="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="w-1/4">Winrate</div>
<div class="w-1/4">Record</div>
</div>
@ -188,7 +188,7 @@
v-for="(championClass, index) in championClasses"
:key="index"
:class="{'bg-blue-760': index % 2 !== 0}"
class="flex justify-between items-center 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 capitalize">{{ championClass._id }}</div>
<div
@ -200,7 +200,7 @@
: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="mx-1 font-bold text-gray-400">-</span>
<span
:class="winLossColor(championClass.wins, championClass.losses).loss"
class="font-bold"
@ -212,14 +212,14 @@
<div class="flex flex-col items-center pb-2 leading-snug">
<div
class="text-teal-400 text-xl"
class="text-xl text-teal-400"
>{{ 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="mx-1 font-bold text-gray-400">-</span>
<span
:class="winLossColor(stats.global.wins, stats.global.losses).loss"
class

34
client/src/components/Summoner/RecentActivity.vue
View file

@ -1,7 +1,9 @@
<template>
<div>
<div class="inline-block bg-blue-800 rounded-lg">
<div class="relative heading flex justify-center items-center py-2 rounded-t-lg text-blue-200">
<div
class="relative flex items-center justify-center py-2 text-blue-200 rounded-t-lg heading"
>
<svg class="w-4 h-4">
<use xlink:href="#time" />
</svg>
@ -12,34 +14,34 @@
</div>
<div class="p-3 pt-1">
<div class="flex">
<span class="ml-12 text-blue-200 font-semibold text-xs">{{ gridDays[11].month }}</span>
<span class="ml-16 text-blue-200 font-semibold text-xs">{{ gridDays[42].month }}</span>
<span class="ml-16 text-blue-200 font-semibold text-xs">{{ gridDays[73].month }}</span>
<span class="ml-16 text-blue-200 font-semibold text-xs">{{ gridDays[104].month }}</span>
<span class="ml-12 text-xs font-semibold text-blue-200">{{ gridDays[11].month }}</span>
<span class="ml-16 text-xs font-semibold text-blue-200">{{ gridDays[42].month }}</span>
<span class="ml-16 text-xs font-semibold text-blue-200">{{ gridDays[73].month }}</span>
<span class="ml-16 text-xs font-semibold text-blue-200">{{ gridDays[104].month }}</span>
</div>
<div class="mt-1 flex">
<div class="flex mt-1">
<div class="flex flex-col">
<span class="text-blue-200 font-semibold text-xs leading-snug">Mo</span>
<span class="text-blue-200 font-semibold text-xs leading-snug mt-1">Tu</span>
<span class="text-blue-200 font-semibold text-xs leading-snug mt-1">We</span>
<span class="text-blue-200 font-semibold text-xs leading-snug mt-1">Th</span>
<span class="text-blue-200 font-semibold text-xs leading-snug mt-1">Fr</span>
<span class="text-blue-200 font-semibold text-xs leading-snug mt-1">Sa</span>
<span class="text-blue-200 font-semibold text-xs leading-snug mt-1">Su</span>
<span class="text-xs font-semibold leading-snug text-blue-200">Mo</span>
<span class="mt-1 text-xs font-semibold leading-snug text-blue-200">Tu</span>
<span class="mt-1 text-xs font-semibold leading-snug text-blue-200">We</span>
<span class="mt-1 text-xs font-semibold leading-snug text-blue-200">Th</span>
<span class="mt-1 text-xs font-semibold leading-snug text-blue-200">Fr</span>
<span class="mt-1 text-xs font-semibold leading-snug text-blue-200">Sa</span>
<span class="mt-1 text-xs font-semibold leading-snug text-blue-200">Su</span>
</div>
<div
class="ml-1 flex flex-col flex-wrap"
class="flex flex-col flex-wrap ml-1"
style="width: calc(20px * 15); height: calc(20px * 7)"
>
<Tooltip v-for="(day, index) in gridDays.slice(indexFirstMonday)" :key="day.timestamp">
<template v-slot:trigger>
<div
:class="[getCaseMargin(index), getCaseColor(day.matches)]"
class="ml-1 w-4 h-4 cursor-pointer"
class="w-4 h-4 ml-1 cursor-pointer"
/>
</template>
<template v-slot:default>
<div class="px-2 text-white text-center text-xs">
<div class="px-2 text-xs text-center text-white">
<div>{{ day.date }}</div>
<div>
<span class="font-bold text-teal-400">{{ day.matches }}</span> game(s)

6
client/src/components/Summoner/Records/RecordCard.vue
View file

@ -7,7 +7,7 @@
`${hover ? gradientHover : gradient},
url('https://raw.communitydragon.org/latest/plugins/rcp-be-lol-game-data/global/default/v1/champion-splashes/${record.champion.id}/${record.champion.id}000.jpg')`
}"
class="mt-6 mx-2 record-card w-full bg-cover bg-center p-2 rounded-lg leading-none"
class="w-full p-2 mx-2 mt-6 leading-none bg-center bg-cover rounded-lg record-card"
>
<div class="text-5xl">{{ record[property] }}</div>
<div>
@ -23,10 +23,10 @@
</div>
<div class="text-gray-500">
as
<span class="text-white font-bold">{{ record.champion.name }}</span>
<span class="font-bold text-white">{{ record.champion.name }}</span>
</div>
</div>
<div class="mt-3 text-gray-200 text-sm opacity-25">match {{ record.gameId }}</div>
<div class="mt-3 text-sm text-gray-200 opacity-25">match {{ record.gameId }}</div>
</div>
</template>

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

@ -1,13 +1,13 @@
<template>
<div class="ml-2 leading-none flex items-center">
<div class="ml-1 flex flex-col justify-center">
<div class="flex items-center ml-2 leading-none">
<div class="flex flex-col justify-center ml-1">
<div class="flex items-center">
<div
ref="leagueBorder"
:style="{backgroundColor: colorBorder}"
class="percentage-circle relative w-12 h-12 flex items-center justify-center rounded-full"
class="relative flex items-center justify-center w-12 h-12 rounded-full percentage-circle"
>
<div class="relative w-11 h-11 p-1 bg-blue-900 rounded-full">
<div class="relative p-1 bg-blue-900 rounded-full w-11 h-11">
<div
class="h-full bg-center bg-cover"
:style="{backgroundImage: `url(${selectedLeague.rankImgLink})`}"
@ -15,12 +15,12 @@
</div>
</div>
<div
class="ml-2 text-teal-500 text-3xl uppercase font-extrabold"
class="ml-2 text-3xl font-extrabold text-teal-500 uppercase"
>{{ selectedLeague.fullRank }}</div>
<div class="ml-4 text-2xl font-extrabold">{{ selectedLeague.leaguePoints }} LP</div>
<div
v-if="selectedLeague.miniSeries"
class="ml-2 flex items-center p-2 bg-blue-800 rounded"
class="flex items-center p-2 ml-2 bg-blue-800 rounded"
>
<div
v-for="(result, index) in bo"
@ -30,11 +30,11 @@
></div>
</div>
</div>
<div class="flex mt-2 items-center">
<div class="flex items-center mt-2">
<div class="relative inline-block text-white">
<select
v-model="selectedKey"
class="block appearance-none bg-blue-800 hover:bg-blue-700 w-full px-4 py-2 pr-8 rounded-md leading-tight text-lg font-extrabold cursor-pointer focus:outline-none"
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"
>
<option
v-for="(data, leagueName) in ranked"
@ -43,19 +43,19 @@
>{{ data.name }}</option>
</select>
<div
class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700"
class="absolute inset-y-0 right-0 flex items-center px-2 text-gray-700 pointer-events-none"
>
<svg class="text-white w-5 h-5">
<svg class="w-5 h-5 text-white">
<use xlink:href="#chevron-down" />
</svg>
</div>
</div>
<div class="ml-2 p-2 flex bg-blue-800 rounded items-center">
<div class="text-base uppercase font-bold">Record</div>
<div class="ml-2 text-green-400 font-bold">{{ selectedLeague.wins }}</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>
<span class="mx-1">-</span>
<div class="text-red-400 font-bold">{{ selectedLeague.losses }}</div>
<div class="ml-3 text-base uppercase font-bold">Winrate</div>
<div class="font-bold text-red-400">{{ selectedLeague.losses }}</div>
<div class="ml-3 text-base font-bold uppercase">Winrate</div>
<div
:class="['ml-2 text-base leading-tight font-bold', parseFloat(selectedLeague.winrate) >= 50 ? 'text-green-400' : 'text-red-400']"
>{{ selectedLeague.winrate }}</div>

10
client/src/views/Home.vue
View file

@ -1,18 +1,18 @@
<template>
<div class="relative bg-blue-900 overflow-hidden">
<div class="relative overflow-hidden bg-blue-900">
<LazyBackground
:image-source="require('@/assets/img/bg-homepage-1.jpg')"
image-class="absolute inset-0 bg-center"
transition-name="fade"
></LazyBackground>
<div class="h-screen flex flex-col items-center justify-center">
<div class="flex flex-col items-center justify-center h-screen">
<div class="absolute top-0 right-0">
<div class="line line-top relative mr-4 mt-4 w-20 h-2"></div>
<div class="relative w-20 h-2 mt-4 mr-4 line line-top"></div>
</div>
<div class="absolute bottom-0 left-0">
<div class="line line-bottom relative ml-4 mb-4 w-20 h-2"></div>
<div class="relative w-20 h-2 mb-4 ml-4 line line-bottom"></div>
</div>
<div class="relative flex flex-col items-center w-full max-w-lg">
@ -21,7 +21,7 @@
</div>
<p
class="pb-4 absolute horizontal-center bottom-0 text-center text-xxs text-blue-300 leading-tight"
class="absolute bottom-0 pb-4 leading-tight text-center text-blue-300 horizontal-center text-xxs"
>
LeagueStats.gg isn't endorsed by Riot Games and doesn't reflect the views or opinions of Riot Games or anyone officially involved in producing or managing Riot Games properties.
<br />Riot Games, and all associated properties are trademarks or registered trademarks of Riot Games, Inc.

10
client/src/views/SummonerLive.vue
View file

@ -1,13 +1,13 @@
<template>
<div key="live-game">
<div v-if="playing || summonerLoading">
<div v-if="liveLoaded" class="-mt-4 flex items-center justify-end text-blue-200 text-base">
<div v-if="liveLoaded" class="flex items-center justify-end -mt-4 text-base text-blue-200">
<div>{{ gamemode.type }} {{ gamemode.name }}</div>
<div class="mx-2">-</div>
<div>{{ displayStartTime }}</div>
<button
@click="liveMatchRequest"
class="ml-4 bg-blue-800 px-3 py-1 text-blue-100 rounded-md shadow-md hover:bg-blue-760"
class="px-3 py-1 ml-4 text-blue-100 bg-blue-800 rounded-md shadow-md hover:bg-blue-760"
>Reload</button>
</div>
<div v-else class="h-4"></div>
@ -16,13 +16,13 @@
<LiveTeam :team="enemyTeam" :ally="false" :gamemode="gamemode.name" class="mt-4" />
</div>
<div v-else>
<div class="mt-16 flex justify-center">
<div class="bg-gradient px-4 py-3 rounded-lg text-center text-lg text-blue-100 font-bold">
<div class="flex justify-center mt-16">
<div class="px-4 py-3 text-lg font-bold text-center text-blue-100 rounded-lg bg-gradient">
<div>This summoner is not in game.</div>
<div class="mt-2">🕊</div>
<button
@click="liveMatchRequest"
class="my-4 bg-blue-800 px-3 py-1 text-sm text-blue-100 rounded-md shadow-md hover:bg-blue-760"
class="px-3 py-1 my-4 text-sm text-blue-100 bg-blue-800 rounded-md shadow-md hover:bg-blue-760"
>Reload</button>
</div>
</div>

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

@ -1,8 +1,8 @@
<template>
<div key="records">
<template v-if="!recordsLoaded || (recordsLoaded && records.maxKda)">
<div class="mx-4 text-blue-200 text-2xl border-b-2 border-blue-800 blue-900">basics</div>
<div class="-mx-2 flex flex-wrap">
<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
color="text-blue-400"
@ -52,7 +52,7 @@
v-for="index in 7"
:key="index"
style="width: 288px; height: 146px;"
class="mt-6 mx-2"
class="mx-2 mt-6"
>
<content-loader
:height="146"
@ -66,10 +66,8 @@
</div>
</template>
</div>
<div
class="mt-3 mx-4 text-blue-200 text-2xl border-b-2 border-blue-800 blue-900"
>game impact</div>
<div class="-mx-2 flex flex-wrap">
<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
color="text-yellow-400"
@ -101,7 +99,7 @@
v-for="index in 4"
:key="index"
style="width: 288px; height: 146px;"
class="mt-6 mx-2"
class="mx-2 mt-6"
>
<content-loader
:height="146"
@ -115,8 +113,8 @@
</div>
</template>
</div>
<div class="mt-3 mx-4 text-blue-200 text-2xl border-b-2 border-blue-800 blue-900">team work</div>
<div class="-mx-2 flex flex-wrap">
<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
color="text-blue-500"
@ -130,7 +128,7 @@
v-for="index in 1"
:key="index"
style="width: 288px; height: 146px;"
class="mt-6 mx-2"
class="mx-2 mt-6"
>
<content-loader
:height="146"
@ -146,7 +144,7 @@
</div>
</template>
<template v-if="recordsLoaded && !records.maxKda">
<div class="mt-4 flex flex-col items-center">
<div class="flex flex-col items-center mt-4">
<div>No records have been found.</div>
<div>😕</div>
</div>