Doble/LeagueStats
1
0
Fork 0
mirror of https://github.com/vkaelin/LeagueStats.git synced 2026-03-25 21:07:27 +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> <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 /> <SVGContainer />
<NotificationsContainer /> <NotificationsContainer />
<component :is="layout"> <component :is="layout">
@ -31,9 +31,9 @@ export default {
created() { created() {
this.updatePercent() this.updatePercent()
this.updateSettings({name: 'region'}) this.updateSettings({ name: 'region' })
this.updateSettings({name: 'recentSearches', isJson: true}) this.updateSettings({ name: 'recentSearches', isJson: true })
this.updateSettings({name: 'favorites', isJson: true}) this.updateSettings({ name: 'favorites', isJson: true })
}, },
methods: { methods: {

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

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

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

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

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

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

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

@ -8,7 +8,7 @@
<div <div
v-for="ripple in ripples" v-for="ripple in ripples"
:key="ripple.id" :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="{ :style="{
top: ripple.top, top: ripple.top,
left: ripple.left, left: ripple.left,

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

@ -16,7 +16,7 @@
<div <div
v-show="isOpen" v-show="isOpen"
ref="content" 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 }" :style="{ ...position }"
> >
<slot></slot> <slot></slot>

2
client/src/components/Form/LoadingButton.vue
View file

@ -38,7 +38,7 @@ export default {
default: false default: false
} }
}, },
methods: { methods: {
btnClicked() { btnClicked() {
this.$emit('clicked') this.$emit('clicked')

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

@ -1,5 +1,5 @@
<template> <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"> <div class="relative w-full">
<button <button
ref="submit" ref="submit"
@ -7,7 +7,7 @@
class="absolute z-30 h-full hover:text-teal-200" class="absolute z-30 h-full hover:text-teal-200"
type="submit" 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" /> <use xlink:href="#search" />
</svg> </svg>
</button> </button>
@ -15,9 +15,10 @@
ref="input" ref="input"
v-model="summoner" v-model="summoner"
@focus="selected = true" @focus="selected = true"
type="text"
:class="[inputClasses]" :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"> <transition name="scale-fade">
<SearchFormDropdown v-if="selected" @click-dropdown="clickDropdown = true" /> <SearchFormDropdown v-if="selected" @click-dropdown="clickDropdown = true" />
@ -26,15 +27,15 @@
<div ref="region-dropdown"> <div ref="region-dropdown">
<div <div
:class="{'mr-12': size === 'xl'}" :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 <div
@click="dropdown = !dropdown" @click="dropdown = !dropdown"
:class="[selectRegionClasses]" :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> <span class="font-bold uppercase select-none selected">{{ selectedRegion }}</span>
<svg class="ml-1 -mr-1 w-4 h-4"> <svg class="w-4 h-4 ml-1 -mr-1">
<use xlink:href="#caret-down" /> <use xlink:href="#caret-down" />
</svg> </svg>
</div> </div>
@ -50,11 +51,11 @@
:key="region" :key="region"
@click="updateSettings({name: 'region', value: region.toLowerCase()})" @click="updateSettings({name: 'region', value: region.toLowerCase()})"
:class="classRegions(index)" :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 <svg
v-if="region.toLowerCase() === selectedRegion" 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" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512" viewBox="0 0 512 512"
> >

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

@ -1,11 +1,11 @@
<template> <template>
<div <div
@mousedown="clickDropdown" @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 v-if="favorites.length">
<div class="text-base text-blue-100">favorites:</div> <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 <SearchFormDropdownPlayer
v-for="player in favorites" v-for="player in favorites"
:key="player.name" :key="player.name"
@ -17,7 +17,7 @@
</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="-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"> <template v-if="recentSearches.length">
<SearchFormDropdownPlayer <SearchFormDropdownPlayer
v-for="player in recentSearches" v-for="player in recentSearches"
@ -27,10 +27,10 @@
/> />
</template> </template>
<template v-else> <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" /> <use xlink:href="#info" />
</svg> </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 <SearchFormDropdownPlayer
:player="{name: 'Alderiate', icon: 1150, region: 'euw'}" :player="{name: 'Alderiate', icon: 1150, region: 'euw'}"
:favorite="false" :favorite="false"

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

@ -2,14 +2,14 @@
<router-link <router-link
:to="{ name: 'summoner', params: { region: player.region, name: player.name }}" :to="{ name: 'summoner', params: { region: player.region, name: player.name }}"
:title="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 <div
:style="{backgroundImage: `url('https://raw.communitydragon.org/latest/plugins/rcp-be-lol-game-data/global/default/v1/profile-icons/${player.icon}.jpg')`}" :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>
<div class="ml-1 max-w-12 truncate">{{ player.name }}</div> <div class="ml-1 truncate max-w-12">{{ player.name }}</div>
<svg <svg
@click.prevent="favoriteClick" @click.prevent="favoriteClick"
:class="favorite ? 'text-yellow-400' : 'hover:text-yellow-400 cursor-pointer'" :class="favorite ? 'text-yellow-400' : 'hover:text-yellow-400 cursor-pointer'"
@ -17,7 +17,7 @@
> >
<use xlink:href="#star" /> <use xlink:href="#star" />
</svg> </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" /> <use xlink:href="#times" />
</svg> </svg>
</router-link> </router-link>

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

@ -1,32 +1,32 @@
<template> <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 <input
v-model="selected" v-model="selected"
id="toggle-on" id="toggle-on"
class="toggle toggle-left hidden" class="hidden toggle toggle-left"
:value="true" :value="true"
type="radio" type="radio"
/> />
<label <label
:class="{'selected-label': selected}" :class="{'selected-label': selected}"
for="toggle-on" 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> >{{ leftLabel }}</label>
<input <input
v-model="selected" v-model="selected"
id="toggle-off" id="toggle-off"
class="toggle toggle-right hidden" class="hidden toggle toggle-right"
:value="false" :value="false"
type="radio" type="radio"
/> />
<label <label
:class="{'selected-label': !selected}" :class="{'selected-label': !selected}"
for="toggle-off" 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> >{{ rightLabel }}</label>
<div <div
:class="selected ? 'left-checked' : 'right-checked'" :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>
</div> </div>
</template> </template>

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

@ -1,5 +1,5 @@
<template> <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 <PopupNotification
v-for="notification in notifications" v-for="notification in notifications"
:key="notification.id" :key="notification.id"
@ -10,7 +10,7 @@
<script> <script>
import PopupNotification from '@/components/Global/PopupNotification.vue' import PopupNotification from '@/components/Global/PopupNotification.vue'
import { mapState } from 'vuex' import { mapState } from 'vuex'
export default { export default {
components: { components: {

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

@ -5,14 +5,14 @@
'bg-red-500': notification.type === 'error', 'bg-red-500': notification.type === 'error',
'bg-green-500': notification.type === 'success' '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" style="min-width: 240px"
> >
<button <button
@click="deleteNotification" @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 <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" 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" :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" /> <DetailedMatchGlobalStats :team="allyTeam" :ally-team="true" />
<SwitchToggle <SwitchToggle
@updateValue="updatePercent" @updateValue="updatePercent"
@ -26,7 +26,7 @@
/> />
</div> </div>
<div v-else-if="data.status === 'loading' && detailsOpen"> <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> </div>
</transition> </transition>
</template> </template>

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

@ -10,20 +10,20 @@
<template v-slot:trigger> <template v-slot:trigger>
<div <div
:class="[allyTeam ? 'ban-blue border-teal-500' : 'ban-red border-red-500']" :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 <div
:style="[ban.champion.id ? {backgroundImage: `url('${ban.champion.icon}')`} : '']" :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>
<div <div
:class="[textLightColor, bgColor]" :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> >{{ ban.pickTurn }}</div>
</div> </div>
</template> </template>
<template v-slot:default> <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>{{ ban.champion.id ? ban.champion.name : 'No ban' }}</div>
</div> </div>
</template> </template>
@ -31,32 +31,32 @@
</div> </div>
<div <div
:class="allyTeam ? 'text-left' : 'text-right flex-row-reverse'" :class="allyTeam ? 'text-left' : 'text-right flex-row-reverse'"
class="mt-2 flex leading-tight" class="flex mt-2 leading-tight"
> >
<div> <div>
<div <div
:class="textColor" :class="textColor"
class="text-base font-semibold" class="text-base font-semibold"
>{{ `${team.teamStats.kills}/${team.teamStats.deaths}/${team.teamStats.assists}` }}</div> >{{ `${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>
<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-base font-semibold"
>{{ +(team.teamStats.gold / 1000).toFixed(1) + 'k' }}</div> >{{ +(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>
<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-base font-semibold"
>{{ +(team.teamStats.dmgChamp / 1000).toFixed(1) + 'k' }}</div> >{{ +(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>
<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 text-teal-400 font-semibold"></div> <div class="text-base font-semibold text-teal-400"></div>
<div class="flex text-white text-xs"> <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
</div> </div>

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

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

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

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

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

@ -1,59 +1,59 @@
<template> <template>
<li class="ml-4 relative"> <li class="relative ml-4">
<Ripple <Ripple
@click.native="displayDetails" @click.native="displayDetails"
color="rgba(43, 108, 176, 0.7)" color="rgba(43, 108, 176, 0.7)"
:class="[data.result, showDetails ? 'rounded-t-lg' : 'rounded-lg', {'mt-4': indexMatch !== 0 }]" :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 class="relative flex flex-wrap px-5 py-3">
<div <div
v-if="data.newMatch" 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);" style="margin: 0.35rem 0.35rem 0 0; background-color: rgba(99,179,237, .2);"
>New</div> >New</div>
<div class="first w-4/12 text-left"> <div class="w-4/12 text-left first">
<div> <div>
<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> >{{ data.champion.name }}</div>
<div class="flex"> <div class="flex">
<div class="flex flex-col justify-end items-center"> <div class="flex flex-col items-center justify-end">
<div <div
v-if="data.role !== 'NONE'" v-if="data.role !== 'NONE'"
:style="{backgroundImage: `url(${require('@/assets/img/roles/' + data.role + '.png')})`}" :style="{backgroundImage: `url(${require('@/assets/img/roles/' + data.role + '.png')})`}"
class="w-10 h-10 bg-center bg-cover" class="w-10 h-10 bg-center bg-cover"
></div> ></div>
<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> >LVL {{ data.level }}</div>
</div> </div>
<div <div
:style="{backgroundImage: `url('${data.champion.icon}')`}" :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>
<div class="ml-2 flex flex-col justify-around"> <div class="flex flex-col justify-around ml-2">
<div <div
:style="{backgroundImage: `url(${data.firstSum})`}" :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>
<div <div
:style="{backgroundImage: `url(${data.secondSum})`}" :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> </div>
<div class="ml-1 flex flex-col justify-around"> <div class="flex flex-col justify-around ml-1">
<div <div
:style="[data.primaryRune ? {background: `url(${data.primaryRune}) center/cover`} : '']" :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>
<div <div
:style="[data.secondaryRune ? {background: `url(${data.secondaryRune}) center/cover`} : '']" :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> </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"> <div class="text-xl font-extrabold text-teal-500">
<span class>{{ data.stats.kills }}</span> <span class>{{ data.stats.kills }}</span>
<span class>/</span> <span class>/</span>
@ -62,18 +62,18 @@
<span class>{{ data.stats.assists }}</span> <span class>{{ data.stats.assists }}</span>
</div> </div>
<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> >{{ data.stats.kda }} KDA</div>
</div> </div>
</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> >{{ data.gamemode.name }}</div>
</div> </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" /> <MatchItems :items="data.items" />
<div class="relative z-30 ml-4 leading-none"> <div class="relative z-30 ml-4 leading-none">
@ -81,7 +81,7 @@
<svg style="width: 15px; height: 15px;"> <svg style="width: 15px; height: 15px;">
<use xlink:href="#creeps" /> <use xlink:href="#creeps" />
</svg> </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 }} {{ data.stats.minions }}
<span class="font-normal">cs</span> <span class="font-normal">cs</span>
</div> </div>
@ -90,64 +90,64 @@
<svg style="width: 15px; height: 15px;"> <svg style="width: 15px; height: 15px;">
<use xlink:href="#gold" /> <use xlink:href="#gold" />
</svg> </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>
<div class="flex items-center"> <div class="flex items-center">
<svg style="width: 15px; height: 15px;"> <svg style="width: 15px; height: 15px;">
<use xlink:href="#damage" /> <use xlink:href="#damage" />
</svg> </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>
<div class="flex items-center"> <div class="flex items-center">
<svg style="width: 15px; height: 15px;"> <svg style="width: 15px; height: 15px;">
<use xlink:href="#kill-participation" /> <use xlink:href="#kill-participation" />
</svg> </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>
</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-if="data.allyTeam.length > 1">
<div <div
v-for="(ally, index) in data.allyTeam" v-for="(ally, index) in data.allyTeam"
:key="'player-' + index" :key="'player-' + index"
class="ml-4 flex items-center leading-none" class="flex items-center ml-4 leading-none"
> >
<div <div
:class="isSummonerProfile(ally.account_id)" :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> >{{ ally.name }}</div>
<div <div
:class="index !== 0 ? '-mt-1': ''" :class="index !== 0 ? '-mt-1': ''"
:style="{backgroundImage: `url('${ally.champion.icon}')`}" :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>
<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')})`}" :style="{backgroundImage: `url(${require('@/assets/img/roles/' + roles[index] + '.png')})`}"
></div> ></div>
<div <div
:class="index !== 0 ? '-mt-1' : ''" :class="index !== 0 ? '-mt-1' : ''"
:style="{backgroundImage: `url('${data.enemyTeam[index].champion.icon}')`}" :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>
<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> >{{ data.enemyTeam[index].name }}</div>
</div> </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"> <svg class="w-5 h-5 text-blue-200">
<use xlink:href="#stopwatch" /> <use xlink:href="#stopwatch" />
</svg> </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> <Tooltip>
<template v-slot:trigger> <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>
<template v-slot:default> <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"> <svg class="w-4 h-4 mx-auto text-teal-400">
<use xlink:href="#time" /> <use xlink:href="#time" />
</svg> </svg>

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

@ -5,22 +5,22 @@
<div <div
:style="{backgroundImage: item ? `url('${item.image}')` : null}" :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="[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> ></div>
</template> </template>
<template v-if="item !== null" v-slot:default> <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 <div
:style="{backgroundImage: item ? `url('${item.image}')` : null}" :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>
<div class="ml-2 leading-none"> <div class="ml-2 leading-none">
<div class="text-base">{{ item.name }}</div> <div class="text-base">{{ item.name }}</div>
<div class="mt-1"> <div class="mt-1">
<span class="text-blue-200">Price:</span> <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>
<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>
</div> </div>
</template> </template>

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

@ -3,11 +3,11 @@
<input <input
v-model="championName" v-model="championName"
@input="search" @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" type="text"
placeholder="Search Champions" 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" /> <use xlink:href="#search" />
</svg> </svg>
</Ripple> </Ripple>

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

@ -1,11 +1,11 @@
<template> <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> <thead>
<tr class="heading rounded-t-lg text-sm select-none"> <tr class="text-sm rounded-t-lg select-none heading">
<th <th
@click="sortBy('index')" @click="sortBy('index')"
:class="sortedClasses('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> >rank</th>
<th <th
v-for="(heading, index) in headings" v-for="(heading, index) in headings"
@ -28,36 +28,36 @@
> >
<td <td
:class="{'rounded-bl-lg': index === championsToDisplay.length - 1}" :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> >{{ 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 class="flex items-center">
<div <div
:style="{backgroundImage: `url('${champion.champion.icon}')`}" :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>
<div class="ml-2">{{ champion.champion.name }}</div> <div class="ml-2">{{ champion.champion.name }}</div>
</div> </div>
</td> </td>
<td <td
:style="bgColor(champion, '71, 132, 116', 'winrate')" :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> >{{ champion.winrate|percent }}</td>
<td <td
:style="bgColor(champion, '55, 118, 179', 'playrate')" :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> >{{ champion.playrate|percent }}</td>
<td <td
:style="bgColor(champion, '71, 132, 116', 'wins')" :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> >{{ champion.wins }}</td>
<td <td
:style="bgColor(champion, '55, 118, 179', 'count')" :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> >{{ 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>{{ 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.kills/champion.count|round(1) }}
/ /
{{ champion.deaths/champion.count|round(1) }} {{ champion.deaths/champion.count|round(1) }}
@ -67,31 +67,31 @@
</td> </td>
<td <td
:style="bgColor(champion, '71, 132, 116', 'kp')" :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> >{{ champion.kp|percent }}</td>
<td <td
:style="bgColor(champion, '140, 101, 182', 'minions')" :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> >{{ champion.minions|round(0) }}</td>
<td <td
:style="bgColor(champion, '146, 100, 79', 'gold')" :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> >{{ champion.gold|kilo }}</td>
<td <td
:style="bgColor(champion, '156, 71, 109', 'dmgChamp')" :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> >{{ champion.dmgChamp|kilo }}</td>
<td <td
:style="bgColor(champion, '146, 145, 106', 'dmgTaken')" :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> >{{ champion.dmgTaken|kilo }}</td>
<td <td
:style="bgColor(champion, '71, 132, 116', 'gameLength')" :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> >{{ 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-white text-sm" class="px-2 py-3 text-sm text-white"
>{{ champion.lastPlayed }}</td> >{{ champion.lastPlayed }}</td>
</tr> </tr>
</tbody> </tbody>

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

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

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

@ -1,16 +1,21 @@
<template> <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 <select
v-model="season" v-model="season"
@change="filterSeason" @change="filterSeason"
dir="rtl" 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 :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> </select>
<div <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"> <svg class="w-4 h-4 text-blue-200 group-hover:text-white">
<use xlink:href="#caret-down" /> <use xlink:href="#caret-down" />

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

@ -1,5 +1,5 @@
<template> <template>
<div class="text-white pb-2"> <div class="pb-2 text-white">
<div class="flex justify-between"> <div class="flex justify-between">
<div style="width: 520px; height: 239px;"> <div style="width: 520px; height: 239px;">
<content-loader <content-loader
@ -21,7 +21,7 @@
</content-loader> </content-loader>
</div> </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 <content-loader
:height="215" :height="215"
:width="347" :width="347"

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

@ -1,18 +1,18 @@
<template> <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 <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;" style="border-collapse:separate; border-spacing:0 0.5rem;"
> >
<thead> <thead>
<tr class="text-left"> <tr class="text-left">
<th <th
:class="[ally ? 'text-teal-400 ' : 'text-red-400 ']" :class="[ally ? 'text-teal-400 ' : 'text-red-400 ']"
class="w-team font-semibold" class="font-semibold w-team"
>{{ ally ? 'Ally' : 'Enemy' }} Team</th> >{{ ally ? 'Ally' : 'Enemy' }} Team</th>
<th class="w-ranked text-blue-200 text-sm font-normal">SoloQ Stats</th> <th class="text-sm font-normal text-blue-200 w-ranked">SoloQ Stats</th>
<th class="w-ranked text-blue-200 text-sm font-normal">Flex Stats</th> <th class="text-sm font-normal text-blue-200 w-ranked">Flex Stats</th>
<th class="w-bans px-2 text-right text-blue-200 text-sm font-normal">Bans</th> <th class="px-2 text-sm font-normal text-right text-blue-200 w-bans">Bans</th>
</tr> </tr>
</thead> </thead>
<tbody v-if="liveLoaded"> <tbody v-if="liveLoaded">
@ -27,29 +27,29 @@
<div class="flex flex-col items-center"> <div class="flex flex-col items-center">
<div <div
:style="{backgroundImage: `url('${player.runes.primaryRune}')`}" :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>
<div <div
:style="{backgroundImage: `url('${player.runes.secondaryRune}')`}" :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> </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')`}" :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="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>
<div class="ml-2 flex flex-col"> <div class="flex flex-col ml-2">
<div <div
:style="{backgroundImage: `url(${getSummonerLink(player.spell1Id)})`}" :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>
<div <div
:style="{backgroundImage: `url(${getSummonerLink(player.spell2Id)})`}" :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> </div>
<div class="ml-3 text-left text-sm leading-tight"> <div class="ml-3 text-sm leading-tight text-left">
<router-link <router-link
v-if="!player.bot" v-if="!player.bot"
:to="{ name: 'summoner', params: { region: $route.params.region, name: player.summonerName }}" :to="{ name: 'summoner', params: { region: $route.params.region, name: player.summonerName }}"
@ -68,7 +68,7 @@
<use :xlink:href="`#rank-${player.rank.soloQ.tier.toLowerCase()}`" /> <use :xlink:href="`#rank-${player.rank.soloQ.tier.toLowerCase()}`" />
</svg> </svg>
<div <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> >{{ player.rank.soloQ.shortName }}</div>
</div> </div>
<div class="ml-5 text-center"> <div class="ml-5 text-center">
@ -79,7 +79,7 @@
</div> </div>
</div> </div>
<div v-else class="w-5 h-5"> <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>
</div> </div>
</td> </td>
@ -91,7 +91,7 @@
<use :xlink:href="`#rank-${player.rank.flex5v5.tier.toLowerCase()}`" /> <use :xlink:href="`#rank-${player.rank.flex5v5.tier.toLowerCase()}`" />
</svg> </svg>
<div <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> >{{ player.rank.flex5v5.shortName }}</div>
</div> </div>
<div class="ml-5 text-center"> <div class="ml-5 text-center">
@ -102,16 +102,16 @@
</div> </div>
</div> </div>
<div v-else class="w-5 h-5"> <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>
</div> </div>
</td> </td>
<td class="py-1 text-right rounded-r-lg"> <td class="py-1 text-right rounded-r-lg">
<div class="px-2 inline-block"> <div class="inline-block px-2">
<div <div
v-if="live.bannedChampions.length" v-if="live.bannedChampions.length"
:class="[ally ? 'ban-blue border-teal-500' : 'ban-red border-red-500']" :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 <div
:style="[ :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')`} {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>
<div <div
:class="[ally ? 'text-teal-100 bg-teal-500' : 'text-red-100 bg-red-500']" :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> >{{ banChamp(index, player.teamId).pickTurn }}</div>
</div> </div>
<div v-else class="w-5 h-5 text-left"> <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>
</div> </div>
</td> </td>
@ -135,7 +135,7 @@
</tbody> </tbody>
<tbody v-else> <tbody v-else>
<tr v-for="index in 5" :key="index"> <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 <content-loader
:height="54" :height="54"
:width="1160" :width="1160"

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

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

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

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

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

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

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

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

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

@ -1,7 +1,9 @@
<template> <template>
<div> <div>
<div class="inline-block bg-blue-800 rounded-lg"> <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"> <svg class="w-4 h-4">
<use xlink:href="#time" /> <use xlink:href="#time" />
</svg> </svg>
@ -12,34 +14,34 @@
</div> </div>
<div class="p-3 pt-1"> <div class="p-3 pt-1">
<div class="flex"> <div class="flex">
<span class="ml-12 text-blue-200 font-semibold text-xs">{{ gridDays[11].month }}</span> <span class="ml-12 text-xs font-semibold text-blue-200">{{ gridDays[11].month }}</span>
<span class="ml-16 text-blue-200 font-semibold text-xs">{{ gridDays[42].month }}</span> <span class="ml-16 text-xs font-semibold text-blue-200">{{ gridDays[42].month }}</span>
<span class="ml-16 text-blue-200 font-semibold text-xs">{{ gridDays[73].month }}</span> <span class="ml-16 text-xs font-semibold text-blue-200">{{ gridDays[73].month }}</span>
<span class="ml-16 text-blue-200 font-semibold text-xs">{{ gridDays[104].month }}</span> <span class="ml-16 text-xs font-semibold text-blue-200">{{ gridDays[104].month }}</span>
</div> </div>
<div class="mt-1 flex"> <div class="flex mt-1">
<div class="flex flex-col"> <div class="flex flex-col">
<span class="text-blue-200 font-semibold text-xs leading-snug">Mo</span> <span class="text-xs font-semibold leading-snug text-blue-200">Mo</span>
<span class="text-blue-200 font-semibold text-xs leading-snug mt-1">Tu</span> <span class="mt-1 text-xs font-semibold leading-snug text-blue-200">Tu</span>
<span class="text-blue-200 font-semibold text-xs leading-snug mt-1">We</span> <span class="mt-1 text-xs font-semibold leading-snug text-blue-200">We</span>
<span class="text-blue-200 font-semibold text-xs leading-snug mt-1">Th</span> <span class="mt-1 text-xs font-semibold leading-snug text-blue-200">Th</span>
<span class="text-blue-200 font-semibold text-xs leading-snug mt-1">Fr</span> <span class="mt-1 text-xs font-semibold leading-snug text-blue-200">Fr</span>
<span class="text-blue-200 font-semibold text-xs leading-snug mt-1">Sa</span> <span class="mt-1 text-xs font-semibold leading-snug text-blue-200">Sa</span>
<span class="text-blue-200 font-semibold text-xs leading-snug mt-1">Su</span> <span class="mt-1 text-xs font-semibold leading-snug text-blue-200">Su</span>
</div> </div>
<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)" style="width: calc(20px * 15); height: calc(20px * 7)"
> >
<Tooltip v-for="(day, index) in gridDays.slice(indexFirstMonday)" :key="day.timestamp"> <Tooltip v-for="(day, index) in gridDays.slice(indexFirstMonday)" :key="day.timestamp">
<template v-slot:trigger> <template v-slot:trigger>
<div <div
:class="[getCaseMargin(index), getCaseColor(day.matches)]" :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>
<template v-slot:default> <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>{{ day.date }}</div>
<div> <div>
<span class="font-bold text-teal-400">{{ day.matches }}</span> game(s) <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}, `${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')` 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 class="text-5xl">{{ record[property] }}</div>
<div> <div>
@ -23,10 +23,10 @@
</div> </div>
<div class="text-gray-500"> <div class="text-gray-500">
as as
<span class="text-white font-bold">{{ record.champion.name }}</span> <span class="font-bold text-white">{{ record.champion.name }}</span>
</div> </div>
</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> </div>
</template> </template>

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

@ -1,13 +1,13 @@
<template> <template>
<div class="ml-2 leading-none flex items-center"> <div class="flex items-center ml-2 leading-none">
<div class="ml-1 flex flex-col justify-center"> <div class="flex flex-col justify-center ml-1">
<div class="flex items-center"> <div class="flex items-center">
<div <div
ref="leagueBorder" ref="leagueBorder"
:style="{backgroundColor: colorBorder}" :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 <div
class="h-full bg-center bg-cover" class="h-full bg-center bg-cover"
:style="{backgroundImage: `url(${selectedLeague.rankImgLink})`}" :style="{backgroundImage: `url(${selectedLeague.rankImgLink})`}"
@ -15,12 +15,12 @@
</div> </div>
</div> </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> >{{ selectedLeague.fullRank }}</div>
<div class="ml-4 text-2xl font-extrabold">{{ selectedLeague.leaguePoints }} LP</div> <div class="ml-4 text-2xl font-extrabold">{{ selectedLeague.leaguePoints }} LP</div>
<div <div
v-if="selectedLeague.miniSeries" 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 <div
v-for="(result, index) in bo" v-for="(result, index) in bo"
@ -30,11 +30,11 @@
></div> ></div>
</div> </div>
</div> </div>
<div class="flex mt-2 items-center"> <div class="flex items-center mt-2">
<div class="relative inline-block text-white"> <div class="relative inline-block text-white">
<select <select
v-model="selectedKey" 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 <option
v-for="(data, leagueName) in ranked" v-for="(data, leagueName) in ranked"
@ -43,19 +43,19 @@
>{{ data.name }}</option> >{{ data.name }}</option>
</select> </select>
<div <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" /> <use xlink:href="#chevron-down" />
</svg> </svg>
</div> </div>
</div> </div>
<div class="ml-2 p-2 flex bg-blue-800 rounded items-center"> <div class="flex items-center p-2 ml-2 bg-blue-800 rounded">
<div class="text-base uppercase font-bold">Record</div> <div class="text-base font-bold uppercase">Record</div>
<div class="ml-2 text-green-400 font-bold">{{ selectedLeague.wins }}</div> <div class="ml-2 font-bold text-green-400">{{ selectedLeague.wins }}</div>
<span class="mx-1">-</span> <span class="mx-1">-</span>
<div class="text-red-400 font-bold">{{ selectedLeague.losses }}</div> <div class="font-bold text-red-400">{{ selectedLeague.losses }}</div>
<div class="ml-3 text-base uppercase font-bold">Winrate</div> <div class="ml-3 text-base font-bold 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-bold', parseFloat(selectedLeague.winrate) >= 50 ? 'text-green-400' : 'text-red-400']"
>{{ selectedLeague.winrate }}</div> >{{ selectedLeague.winrate }}</div>

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

@ -1,18 +1,18 @@
<template> <template>
<div class="relative bg-blue-900 overflow-hidden"> <div class="relative overflow-hidden bg-blue-900">
<LazyBackground <LazyBackground
:image-source="require('@/assets/img/bg-homepage-1.jpg')" :image-source="require('@/assets/img/bg-homepage-1.jpg')"
image-class="absolute inset-0 bg-center" image-class="absolute inset-0 bg-center"
transition-name="fade" transition-name="fade"
></LazyBackground> ></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="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>
<div class="absolute bottom-0 left-0"> <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>
<div class="relative flex flex-col items-center w-full max-w-lg"> <div class="relative flex flex-col items-center w-full max-w-lg">
@ -21,7 +21,7 @@
</div> </div>
<p <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. 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. <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> <template>
<div key="live-game"> <div key="live-game">
<div v-if="playing || summonerLoading"> <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>{{ gamemode.type }} {{ gamemode.name }}</div>
<div class="mx-2">-</div> <div class="mx-2">-</div>
<div>{{ displayStartTime }}</div> <div>{{ displayStartTime }}</div>
<button <button
@click="liveMatchRequest" @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> >Reload</button>
</div> </div>
<div v-else class="h-4"></div> <div v-else class="h-4"></div>
@ -16,13 +16,13 @@
<LiveTeam :team="enemyTeam" :ally="false" :gamemode="gamemode.name" class="mt-4" /> <LiveTeam :team="enemyTeam" :ally="false" :gamemode="gamemode.name" class="mt-4" />
</div> </div>
<div v-else> <div v-else>
<div class="mt-16 flex justify-center"> <div class="flex justify-center mt-16">
<div class="bg-gradient px-4 py-3 rounded-lg text-center text-lg text-blue-100 font-bold"> <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>This summoner is not in game.</div>
<div class="mt-2">🕊</div> <div class="mt-2">🕊</div>
<button <button
@click="liveMatchRequest" @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> >Reload</button>
</div> </div>
</div> </div>

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

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