Doble/LeagueStats
1
0
Fork 0
mirror of https://github.com/vkaelin/LeagueStats.git synced 2026-03-25 12:57:28 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

style: sort all tailwind classes with prettier plugin

Browse source
This commit is contained in:
Valentin Kaelin 2023-09-21 12:52:17 +02:00
parent 860a4b6617
commit a0a405dc7f
No known key found for this signature in database
GPG key ID: B389A4E3DFF8E414
45 changed files with 461 additions and 380 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
client/.prettierrc
View file

@ -1,11 +0,0 @@
{
"trailingComma": "es5",
"semi": false,
"singleQuote": true,
"useTabs": false,
"quoteProps": "consistent",
"bracketSpacing": true,
"arrowParens": "always",
"printWidth": 100,
"endOfLine": "auto"
}

12
client/.prettierrc.js Normal file
View file

@ -0,0 +1,12 @@
module.exports = {
trailingComma: 'es5',
semi: false,
singleQuote: true,
useTabs: false,
quoteProps: 'consistent',
bracketSpacing: true,
arrowParens: 'always',
printWidth: 100,
endOfLine: 'auto',
plugins: ['prettier-plugin-tailwindcss'],
}

75
client/package-lock.json generated
View file

@ -29,6 +29,8 @@
"eslint-plugin-vue": "^9.17.0", "eslint-plugin-vue": "^9.17.0",
"postcss": "^8.4.30", "postcss": "^8.4.30",
"postcss-import": "^12.0.1", "postcss-import": "^12.0.1",
"prettier": "^3.0.3",
"prettier-plugin-tailwindcss": "^0.5.4",
"tailwindcss": "^3.3.3", "tailwindcss": "^3.3.3",
"vite": "^4.4.5", "vite": "^4.4.5",
"vite-plugin-eslint": "^1.8.1" "vite-plugin-eslint": "^1.8.1"
@ -4421,7 +4423,6 @@
"resolved": "https://registry.npmjs.org/prettier/-/prettier-3.0.3.tgz", "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.0.3.tgz",
"integrity": "sha512-L/4pUDMxcNa8R/EthV08Zt42WBO4h1rarVtK0K+QJG0X187OLo7l699jWw0GKuwzkPQ//jMFA/8Xm6Fh3J/DAg==", "integrity": "sha512-L/4pUDMxcNa8R/EthV08Zt42WBO4h1rarVtK0K+QJG0X187OLo7l699jWw0GKuwzkPQ//jMFA/8Xm6Fh3J/DAg==",
"dev": true, "dev": true,
"peer": true,
"bin": { "bin": {
"prettier": "bin/prettier.cjs" "prettier": "bin/prettier.cjs"
}, },
@ -4444,6 +4445,78 @@
"node": ">=6.0.0" "node": ">=6.0.0"
} }
}, },
"node_modules/prettier-plugin-tailwindcss": {
"version": "0.5.4",
"resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.5.4.tgz",
"integrity": "sha512-QZzzB1bID6qPsKHTeA9qPo1APmmxfFrA5DD3LQ+vbTmAnY40eJI7t9Q1ocqel2EKMWNPLJqdTDWZj1hKYgqSgg==",
"dev": true,
"engines": {
"node": ">=14.21.3"
},
"peerDependencies": {
"@ianvs/prettier-plugin-sort-imports": "*",
"@prettier/plugin-pug": "*",
"@shopify/prettier-plugin-liquid": "*",
"@shufo/prettier-plugin-blade": "*",
"@trivago/prettier-plugin-sort-imports": "*",
"prettier": "^3.0",
"prettier-plugin-astro": "*",
"prettier-plugin-css-order": "*",
"prettier-plugin-import-sort": "*",
"prettier-plugin-jsdoc": "*",
"prettier-plugin-organize-attributes": "*",
"prettier-plugin-organize-imports": "*",
"prettier-plugin-style-order": "*",
"prettier-plugin-svelte": "*"
},
"peerDependenciesMeta": {
"@ianvs/prettier-plugin-sort-imports": {
"optional": true
},
"@prettier/plugin-pug": {
"optional": true
},
"@shopify/prettier-plugin-liquid": {
"optional": true
},
"@shufo/prettier-plugin-blade": {
"optional": true
},
"@trivago/prettier-plugin-sort-imports": {
"optional": true
},
"prettier-plugin-astro": {
"optional": true
},
"prettier-plugin-css-order": {
"optional": true
},
"prettier-plugin-import-sort": {
"optional": true
},
"prettier-plugin-jsdoc": {
"optional": true
},
"prettier-plugin-marko": {
"optional": true
},
"prettier-plugin-organize-attributes": {
"optional": true
},
"prettier-plugin-organize-imports": {
"optional": true
},
"prettier-plugin-style-order": {
"optional": true
},
"prettier-plugin-svelte": {
"optional": true
},
"prettier-plugin-twig-melody": {
"optional": true
}
}
},
"node_modules/proxy-from-env": { "node_modules/proxy-from-env": {
"version": "1.1.0", "version": "1.1.0",
"resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz", "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",

2
client/package.json
View file

@ -20,6 +20,8 @@
"eslint-plugin-vue": "^9.17.0", "eslint-plugin-vue": "^9.17.0",
"postcss": "^8.4.30", "postcss": "^8.4.30",
"postcss-import": "^12.0.1", "postcss-import": "^12.0.1",
"prettier": "^3.0.3",
"prettier-plugin-tailwindcss": "^0.5.4",
"tailwindcss": "^3.3.3", "tailwindcss": "^3.3.3",
"vite": "^4.4.5", "vite": "^4.4.5",
"vite-plugin-eslint": "^1.8.1" "vite-plugin-eslint": "^1.8.1"

2
client/src/App.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<div id="app" class="min-h-screen font-sans antialiased bg-blue-900"> <div id="app" class="min-h-screen bg-blue-900 font-sans antialiased">
<SVGContainer /> <SVGContainer />
<NotificationsContainer /> <NotificationsContainer />
<RunesContainer /> <RunesContainer />

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

@ -21,11 +21,11 @@
} }
::selection { ::selection {
@apply text-white bg-blue-1000; @apply bg-blue-1000 text-white;
} }
::-moz-selection { ::-moz-selection {
@apply text-white bg-blue-1000; @apply bg-blue-1000 text-white;
} }
.min-w-1200 { .min-w-1200 {
@ -74,15 +74,15 @@ button:focus {
/* Checkbox */ /* Checkbox */
.form-checkbox { .form-checkbox {
@apply w-6 h-6 border-blue-800 text-blue-1000 rounded-md; @apply h-6 w-6 rounded-md border-blue-800 text-blue-1000;
background: rgba(23, 49, 79, 0.6); background: rgba(23, 49, 79, 0.6);
} }
.form-checkbox:focus { .form-checkbox:focus {
@apply bg-blue-1000 border-blue-700 outline-none; @apply border-blue-700 bg-blue-1000 outline-none;
box-shadow: none; box-shadow: none;
} }
.form-checkbox:checked { .form-checkbox:checked {
@apply bg-blue-1000 border-transparent; @apply border-transparent bg-blue-1000;
} }

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

@ -45,11 +45,11 @@
/* Scale-fade transition */ /* Scale-fade transition */
.scale-fade-enter-active { .scale-fade-enter-active {
@apply transition-all duration-75 ease-out transform; @apply transform transition-all duration-75 ease-out;
} }
.scale-fade-leave-active { .scale-fade-leave-active {
@apply transition-all duration-75 ease-in transform; @apply transform transition-all duration-75 ease-in;
} }
.scale-fade-enter, .scale-fade-enter,

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

@ -4,10 +4,10 @@
class="relative" class="relative"
style="transform: rotateZ(45deg)" style="transform: rotateZ(45deg)"
> >
<div class="relative float-left w-1/2 cube-1 cube h-1/2"></div> <div class="cube-1 cube relative float-left h-1/2 w-1/2"></div>
<div class="relative float-left w-1/2 cube-2 cube h-1/2"></div> <div class="cube-2 cube relative float-left h-1/2 w-1/2"></div>
<div class="relative float-left w-1/2 cube-4 cube h-1/2"></div> <div class="cube-4 cube relative float-left h-1/2 w-1/2"></div>
<div class="relative float-left w-1/2 cube-3 cube h-1/2"></div> <div class="cube-3 cube relative float-left h-1/2 w-1/2"></div>
</div> </div>
</template> </template>
@ -37,7 +37,7 @@ export default {
.cube:before { .cube:before {
content: ''; content: '';
@apply absolute top-0 left-0 w-full h-full bg-blue-300; @apply absolute left-0 top-0 h-full w-full bg-blue-300;
animation: cubeAngle 2.4s infinite linear both; animation: cubeAngle 2.4s infinite linear both;
transform-origin: 100% 100%; transform-origin: 100% 100%;
} }

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

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

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

@ -1,14 +1,14 @@
<template> <template>
<div ref="container" @mousedown="addRipple" class="relative overflow-hidden cursor-pointer"> <div ref="container" @mousedown="addRipple" class="relative cursor-pointer overflow-hidden">
<transition-group <transition-group
class="absolute top-0 left-0 w-full h-full pointer-events-none" class="pointer-events-none absolute left-0 top-0 h-full w-full"
name="grow" name="grow"
tag="div" tag="div"
> >
<div <div
v-for="ripple in ripples" v-for="ripple in ripples"
:key="ripple.id" :key="ripple.id"
class="absolute w-full h-full rounded-full opacity-0 pointer-events-none" class="pointer-events-none absolute h-full w-full rounded-full opacity-0"
:style="{ :style="{
top: ripple.top, top: ripple.top,
left: ripple.left, left: ripple.left,

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

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

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

@ -7,18 +7,18 @@
type="button" type="button"
> >
<slot>Send</slot> <slot>Send</slot>
<span class="spinner absolute opacity-0 left-auto"> <span class="spinner absolute left-auto opacity-0">
<span <span
class="inline-block absolute right-0 w-4 h-4 opacity-100 border-[3px] border-white rounded-full" class="absolute right-0 inline-block h-4 w-4 rounded-full border-[3px] border-white opacity-100"
></span> ></span>
<span <span
class="inline-block absolute right-0 w-4 h-4 opacity-100 border-[3px] border-white rounded-full" class="absolute right-0 inline-block h-4 w-4 rounded-full border-[3px] border-white opacity-100"
></span> ></span>
<span <span
class="inline-block absolute right-0 w-4 h-4 opacity-100 border-[3px] border-white rounded-full" class="absolute right-0 inline-block h-4 w-4 rounded-full border-[3px] border-white opacity-100"
></span> ></span>
<span <span
class="inline-block absolute right-0 w-4 h-4 opacity-100 border-[3px] border-white rounded-full" class="absolute right-0 inline-block h-4 w-4 rounded-full border-[3px] border-white opacity-100"
></span> ></span>
</span> </span>
</button> </button>

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

@ -2,7 +2,7 @@
<form <form
@submit.prevent="formSubmit" @submit.prevent="formSubmit"
:class="{ 'max-w-lg': !homepage }" :class="{ 'max-w-lg': !homepage }"
class="flex self-start w-full h-full text-lg text-teal-100" class="flex h-full w-full self-start text-lg text-teal-100"
> >
<div <div
v-if="open" v-if="open"
@ -17,7 +17,7 @@
v-model="summoner" v-model="summoner"
@focus="open = true" @focus="open = true"
:class="dropdown ? 'bg-blue-1000' : 'input-color'" :class="dropdown ? 'bg-blue-1000' : 'input-color'"
class="relative z-30 w-full py-4 pl-6 pr-32 font-bold placeholder-teal-100 placeholder-opacity-75 rounded-lg outline-none focus:bg-blue-1000 summoner-input bypass-click" class="summoner-input bypass-click relative z-30 w-full rounded-lg py-4 pl-6 pr-32 font-bold placeholder-teal-100 placeholder-opacity-75 outline-none focus:bg-blue-1000"
spellcheck="false" spellcheck="false"
type="text" type="text"
placeholder="Search summoner" placeholder="Search summoner"
@ -25,21 +25,21 @@
<button <button
v-if="homepage" v-if="homepage"
ref="submit" ref="submit"
class="absolute right-0 z-40 w-12 h-full hover:text-teal-200" class="absolute right-0 z-40 h-full w-12 hover:text-teal-200"
type="submit" type="submit"
> >
<svg class="absolute w-4 h-4 vertical-center horizontal-center"> <svg class="vertical-center horizontal-center absolute h-4 w-4">
<use xlink:href="#search" /> <use xlink:href="#search" />
</svg> </svg>
</button> </button>
<button <button
v-if="!homepage" v-if="!homepage"
@click="open = true" @click="open = true"
class="w-full h-10 px-4 -mt-px text-base font-light text-left text-blue-200 rounded-md bg-blue-1000" class="-mt-px h-10 w-full rounded-md bg-blue-1000 px-4 text-left text-base font-light text-blue-200"
type="button" type="button"
> >
<div class="flex items-center space-x-3"> <div class="flex items-center space-x-3">
<svg class="w-4 h-4"> <svg class="h-4 w-4">
<use xlink:href="#search" /> <use xlink:href="#search" />
</svg> </svg>
<span>Search summoner (Press "/" to focus)</span> <span>Search summoner (Press "/" to focus)</span>

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

@ -1,13 +1,13 @@
<template> <template>
<div <div
:class="homepage ? 'mt-2' : 'mt-1'" :class="homepage ? 'mt-2' : 'mt-1'"
class="absolute z-30 w-full bg-blue-800 rounded-lg shadow-md" class="absolute z-30 w-full rounded-lg bg-blue-800 shadow-md"
> >
<div class="shadow"> <div class="shadow">
<div class="pt-3"> <div class="pt-3">
<div v-if="!homepage" class="relative px-3 bypass-click"> <div v-if="!homepage" class="bypass-click relative px-3">
<button class="absolute w-12 h-full text-blue-200 hover:text-white" type="submit"> <button class="absolute h-full w-12 text-blue-200 hover:text-white" type="submit">
<svg class="absolute w-4 h-4 vertical-center horizontal-center"> <svg class="vertical-center horizontal-center absolute h-4 w-4">
<use xlink:href="#search" /> <use xlink:href="#search" />
</svg> </svg>
</button> </button>
@ -15,7 +15,7 @@
ref="input" ref="input"
@input="$emit('input', $event.target.value)" @input="$emit('input', $event.target.value)"
:value="value" :value="value"
class="w-full py-2 pl-12 pr-32 placeholder-blue-200 placeholder-opacity-75 bg-blue-700 border border-blue-500 rounded-md outline-none focus:bg-blue-760 summoner-input" class="summoner-input w-full rounded-md border border-blue-500 bg-blue-700 py-2 pl-12 pr-32 placeholder-blue-200 placeholder-opacity-75 outline-none focus:bg-blue-760"
type="text" type="text"
placeholder="Search summoner" placeholder="Search summoner"
spellcheck="false" spellcheck="false"
@ -23,10 +23,10 @@
<button <button
v-if="!homepage && value.length" v-if="!homepage && value.length"
@click="$emit('input', '')" @click="$emit('input', '')"
class="absolute right-0 flex items-center justify-center p-1 mr-24 text-blue-200 rounded-full vertical-center hover:text-white" class="vertical-center absolute right-0 mr-24 flex items-center justify-center rounded-full p-1 text-blue-200 hover:text-white"
type="button" type="button"
> >
<svg class="w-4 h-4"> <svg class="h-4 w-4">
<use xlink:href="#times" /> <use xlink:href="#times" />
</svg> </svg>
</button> </button>
@ -36,12 +36,12 @@
</div> </div>
<div <div
:style="{ maxHeight: homepage ? '300px' : '480px' }" :style="{ maxHeight: homepage ? '300px' : '480px' }"
class="px-3 pb-6 overflow-y-auto light-scrollbar" class="light-scrollbar overflow-y-auto px-3 pb-6"
> >
<div :class="{ 'mt-4': !homepage }"> <div :class="{ 'mt-4': !homepage }">
<div v-if="recentSearches.length" class="text-base text-blue-100">Recent</div> <div v-if="recentSearches.length" class="text-base text-blue-100">Recent</div>
<div v-else-if="favorites.length === 0" class="flex items-center space-x-2"> <div v-else-if="favorites.length === 0" class="flex items-center space-x-2">
<svg class="w-4 h-4 text-blue-100"> <svg class="h-4 w-4 text-blue-100">
<use xlink:href="#info" /> <use xlink:href="#info" />
</svg> </svg>
<div class="text-base text-blue-100">Summoner example</div> <div class="text-base text-blue-100">Summoner example</div>
@ -99,24 +99,24 @@
</div> </div>
</div> </div>
</div> </div>
<div class="px-4 py-4 bg-blue-1000 rounded-b-md"> <div class="rounded-b-md bg-blue-1000 px-4 py-4">
<div class="flex items-center justify-between select-none text-xxs"> <div class="flex select-none items-center justify-between text-xxs">
<div class="space-x-2"> <div class="space-x-2">
<span class="text-xs font-medium text-blue-700 bg-blue-100 rounded-md key">Enter</span> <span class="key rounded-md bg-blue-100 text-xs font-medium text-blue-700">Enter</span>
<span>to select</span> <span>to select</span>
</div> </div>
<div class="space-x-2"> <div class="space-x-2">
<span class="text-xs font-medium text-blue-700 bg-blue-100 rounded-md key" <span class="key rounded-md bg-blue-100 text-xs font-medium text-blue-700"
>&darr; &uarr;</span >&darr; &uarr;</span
> >
<span>to navigate</span> <span>to navigate</span>
</div> </div>
<div class="space-x-2"> <div class="space-x-2">
<span class="text-xs font-medium text-blue-700 bg-blue-100 rounded-md key">Escape</span> <span class="key rounded-md bg-blue-100 text-xs font-medium text-blue-700">Escape</span>
<span>to close</span> <span>to close</span>
</div> </div>
<div class="space-x-2"> <div class="space-x-2">
<span class="text-xs font-medium text-blue-700 bg-blue-100 rounded-md key">CTRL K</span> <span class="key rounded-md bg-blue-100 text-xs font-medium text-blue-700">CTRL K</span>
<span>to open</span> <span>to open</span>
</div> </div>
</div> </div>
@ -282,6 +282,9 @@ export default {
<style scoped> <style scoped>
.key { .key {
padding: 0.2rem 0.45rem; padding: 0.2rem 0.45rem;
box-shadow: 0 2px 0 0 #3182ce, 0 5px 3px 0 rgba(0, 0, 0, 0.1), 0 5px 2px 0 rgba(0, 0, 0, 0.06); box-shadow:
0 2px 0 0 #3182ce,
0 5px 3px 0 rgba(0, 0, 0, 0.1),
0 5px 2px 0 rgba(0, 0, 0, 0.06);
} }
</style> </style>

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

@ -4,19 +4,19 @@
: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="selected ? 'bg-blue-760' : 'bg-blue-900'" :class="selected ? 'bg-blue-760' : 'bg-blue-900'"
class="flex items-center justify-between w-full px-4 py-3 mt-1 text-blue-200 rounded-md shadow-md cursor-pointer select-none bypass-click" class="bypass-click mt-1 flex w-full cursor-pointer select-none items-center justify-between rounded-md px-4 py-3 text-blue-200 shadow-md"
role="option" role="option"
> >
<div class="flex items-center"> <div class="flex items-center">
<svg v-if="favoritesList" class="w-5 h-5 text-yellow-400"> <svg v-if="favoritesList" class="h-5 w-5 text-yellow-400">
<use xlink:href="#star-outline" /> <use xlink:href="#star-outline" />
</svg> </svg>
<svg v-else class="w-5 h-5"> <svg v-else class="h-5 w-5">
<use xlink:href="#time" /> <use xlink:href="#time" />
</svg> </svg>
<div class="w-20"> <div class="w-20">
<div <div
class="inline-flex px-2 py-1 ml-6 text-xs font-semibold text-white uppercase bg-blue-800 rounded" class="ml-6 inline-flex rounded bg-blue-800 px-2 py-1 text-xs font-semibold uppercase text-white"
> >
{{ player.region }} {{ player.region }}
</div> </div>
@ -25,7 +25,7 @@
:style="{ :style="{
backgroundImage: `url('https://raw.communitydragon.org/latest/plugins/rcp-be-lol-game-data/global/default/v1/profile-icons/${player.icon}.jpg')`, backgroundImage: `url('https://raw.communitydragon.org/latest/plugins/rcp-be-lol-game-data/global/default/v1/profile-icons/${player.icon}.jpg')`,
}" }"
class="w-6 h-6 ml-2 bg-center bg-cover rounded-full" class="ml-2 h-6 w-6 rounded-full bg-cover bg-center"
></div> ></div>
<div class="ml-2 text-base">{{ player.name }}</div> <div class="ml-2 text-base">{{ player.name }}</div>
</div> </div>
@ -33,17 +33,17 @@
<button <button
v-if="!favoritesList" v-if="!favoritesList"
@click.prevent="favoriteClick" @click.prevent="favoriteClick"
class="flex items-center justify-center p-2 rounded-full hover:text-yellow-400 hover:bg-blue-700" class="flex items-center justify-center rounded-full p-2 hover:bg-blue-700 hover:text-yellow-400"
> >
<svg class="w-4 h-4"> <svg class="h-4 w-4">
<use xlink:href="#star" /> <use xlink:href="#star" />
</svg> </svg>
</button> </button>
<button <button
@click.prevent="closeClick" @click.prevent="closeClick"
class="p-2 rounded-full cursor-pointerhover:text-white hover:bg-blue-700" class="cursor-pointerhover:text-white rounded-full p-2 hover:bg-blue-700"
> >
<svg class="w-4 h-4"> <svg class="h-4 w-4">
<use xlink:href="#times" /> <use xlink:href="#times" />
</svg> </svg>
</button> </button>

14
client/src/components/Form/SearchFormRegion.vue
View file

@ -2,15 +2,15 @@
<div> <div>
<div <div
:class="[homepage ? 'mr-12' : 'mr-4']" :class="[homepage ? 'mr-12' : 'mr-4']"
class="absolute right-0 z-30 flex items-center h-full vertical-center" class="vertical-center absolute right-0 z-30 flex h-full items-center"
> >
<div <div
@click="toggle" @click="toggle"
:class="[selectRegionClasses]" :class="[selectRegionClasses]"
class="flex items-center transition duration-150 ease-in-out border-2 border-transparent rounded cursor-pointer hover:text-white" class="flex cursor-pointer items-center rounded border-2 border-transparent transition duration-150 ease-in-out hover:text-white"
> >
<span class="font-bold uppercase select-none selected">{{ selectedRegion }}</span> <span class="selected select-none font-bold uppercase">{{ selectedRegion }}</span>
<svg class="w-4 h-4 ml-1 -mr-1"> <svg class="-mr-1 ml-1 h-4 w-4">
<use xlink:href="#caret-down" /> <use xlink:href="#caret-down" />
</svg> </svg>
</div> </div>
@ -19,18 +19,18 @@
<div <div
v-show="dropdown" v-show="dropdown"
:class="[dropdownClasses]" :class="[dropdownClasses]"
class="absolute right-0 z-30 text-white shadow cursor-pointer" class="absolute right-0 z-30 cursor-pointer text-white shadow"
> >
<div <div
v-for="(region, index) in regions" v-for="(region, index) in regions"
:key="region" :key="region"
@click="selectRegion(region)" @click="selectRegion(region)"
:class="classRegions(index)" :class="classRegions(index)"
class="relative py-1 pl-5 pr-2 text-xs text-right select-none bg-blue-1000 hover:bg-blue-800" class="relative select-none bg-blue-1000 py-1 pl-5 pr-2 text-right text-xs hover:bg-blue-800"
> >
<svg <svg
v-if="region.toLowerCase() === selectedRegion" v-if="region.toLowerCase() === selectedRegion"
class="absolute w-3 h-3 fill-current vertical-center offsetIcon" class="vertical-center offsetIcon absolute h-3 w-3 fill-current"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512" viewBox="0 0 512 512"
> >

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

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

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="relative p-6 pr-10 mt-2 text-white rounded-lg shadow-md" class="relative mt-2 rounded-lg p-6 pr-10 text-white shadow-md"
style="min-width: 240px" style="min-width: 240px"
> >
<button <button
@click="deleteNotification" @click="deleteNotification"
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" class="absolute right-0 top-0 mx-1 my-1 block cursor-pointer rounded-full border border-transparent px-1 py-1 hover:border-white focus:outline-none"
> >
<svg class="w-3 h-3 fill-current" viewBox="0 0 20 20"> <svg class="h-3 w-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"
/> />

6
client/src/components/Layout/MainFooter.vue
View file

@ -1,7 +1,7 @@
<template> <template>
<footer class="pt-20 pb-4 text-blue-200"> <footer class="pb-4 pt-20 text-blue-200">
<p <p
class="absolute leading-tight text-center pointer-events-none horizontal-center text-xxs" class="horizontal-center pointer-events-none absolute text-center text-xxs leading-tight"
style="color: #5d80af" style="color: #5d80af"
> >
LeagueStats.gg isn't endorsed by Riot Games and doesn't reflect the views or opinions of Riot LeagueStats.gg isn't endorsed by Riot Games and doesn't reflect the views or opinions of Riot
@ -130,7 +130,7 @@
</a> </a>
</p> </p>
<a <a
class="relative text-sm github" class="github relative text-sm"
href="https://github.com/vkaelin/LeagueStats" href="https://github.com/vkaelin/LeagueStats"
target="_blank" target="_blank"
> >

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

@ -1,6 +1,6 @@
<template> <template>
<transition name="slide"> <transition name="slide">
<div v-if="data.status === 'loaded' && detailsOpen" class="bg-blue-800 rounded-b-lg"> <div v-if="data.status === 'loaded' && detailsOpen" class="rounded-b-lg bg-blue-800">
<DetailedMatchTeam <DetailedMatchTeam
:data="allyTeam" :data="allyTeam"
:all-players="[...allyTeam.players, ...enemyTeam.players]" :all-players="[...allyTeam.players, ...enemyTeam.players]"
@ -28,7 +28,7 @@
/> />
</div> </div>
<div v-else-if="data.status === 'loading' && detailsOpen"> <div v-else-if="data.status === 'loading' && detailsOpen">
<div class="py-5 bg-blue-800 rounded-b-lg"> <div class="rounded-b-lg bg-blue-800 py-5">
<CubeLoader /> <CubeLoader />
</div> </div>
</div> </div>

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

@ -10,30 +10,30 @@
<template #trigger> <template #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 border-2 rounded-full cursor-pointer ban" class="ban relative cursor-pointer rounded-full border-2"
> >
<div <div
:style="[ban.champion.id ? { backgroundImage: `url('${ban.champion.icon}')` } : '']" :style="[ban.champion.id ? { backgroundImage: `url('${ban.champion.icon}')` } : '']"
class="w-6 h-6 bg-center bg-cover rounded-full ban-img bg-blue-1000" class="ban-img h-6 w-6 rounded-full bg-blue-1000 bg-cover bg-center"
></div> ></div>
<div <div
:class="[textLightColor, bgColor]" :class="[textLightColor, bgColor]"
class="absolute flex items-center justify-center w-4 h-4 text-xs font-bold rounded-full ban-order" class="ban-order absolute flex h-4 w-4 items-center justify-center rounded-full text-xs font-bold"
> >
{{ ban.pickTurn }} {{ ban.pickTurn }}
</div> </div>
</div> </div>
</template> </template>
<template #default> <template #default>
<div class="px-2 text-xs leading-tight text-center text-white select-none"> <div class="select-none px-2 text-center text-xs leading-tight text-white">
<div>{{ ban.champion.id ? ban.champion.name : 'No ban' }}</div> <div>{{ ban.champion.id ? ban.champion.name : 'No ban' }}</div>
</div> </div>
</template> </template>
</Tooltip> </Tooltip>
</div> </div>
<div <div
:class="allyTeam ? 'text-left' : 'text-right flex-row-reverse'" :class="allyTeam ? 'text-left' : 'flex-row-reverse text-right'"
class="flex mt-2 leading-tight" class="mt-2 flex leading-tight"
> >
<div> <div>
<div :class="textColor" class="text-sm font-medium"> <div :class="textColor" class="text-sm font-medium">

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

@ -1,14 +1,14 @@
<template> <template>
<table <table
:class="[{ 'rounded-b-lg overflow-hidden': !allyTeam }, data.result]" :class="[{ 'overflow-hidden rounded-b-lg': !allyTeam }, data.result]"
class="w-full table-fixed" class="w-full table-fixed"
> >
<thead class="leading-none heading-detailed"> <thead class="heading-detailed leading-none">
<tr <tr
:style="getHeadingColor(data.result)" :style="getHeadingColor(data.result)"
class="relative font-semibold text-blue-200 heading-row" class="heading-row relative font-semibold text-blue-200"
> >
<th class="py-5 w-players"> <th class="w-players py-5">
<div class="flex justify-between"> <div class="flex justify-between">
<span :class="allyTeam ? 'text-teal-400' : 'text-red-400'" class="pl-2" <span :class="allyTeam ? 'text-teal-400' : 'text-red-400'" class="pl-2"
>{{ allyTeam ? 'Ally' : 'Enemy' }} Team</span >{{ allyTeam ? 'Ally' : 'Enemy' }} Team</span
@ -18,41 +18,41 @@
: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="items-center w-4 h-4"> <svg class="h-4 w-4 items-center">
<use xlink:href="#award" /> <use xlink:href="#award" />
</svg> </svg>
<span class="ml-0.5">VICTORY</span> <span class="ml-0.5">VICTORY</span>
</div> </div>
</div> </div>
</th> </th>
<th class="px-2 py-5 text-sm font-medium w-kda">K</th> <th class="w-kda px-2 py-5 text-sm font-medium">K</th>
<th class="px-2 py-5 text-sm font-medium w-kda">D</th> <th class="w-kda px-2 py-5 text-sm font-medium">D</th>
<th class="px-2 py-5 text-sm font-medium w-kda">A</th> <th class="w-kda px-2 py-5 text-sm font-medium">A</th>
<th class="px-2 py-5 text-sm font-medium w-minions"> <th class="w-minions px-2 py-5 text-sm font-medium">
{{ statsFormat === 'stats' ? 'Cs' : 'Cs/m' }} {{ statsFormat === 'stats' ? 'Cs' : 'Cs/m' }}
</th> </th>
<th class="px-2 py-5 text-sm font-medium w-vision"> <th class="w-vision px-2 py-5 text-sm font-medium">
{{ statsFormat === 'stats' ? 'Vs' : 'Vs/m' }} {{ statsFormat === 'stats' ? 'Vs' : 'Vs/m' }}
</th> </th>
<th class="px-2 py-5 text-sm font-medium w-gold-dmg-kp">Gold</th> <th class="w-gold-dmg-kp px-2 py-5 text-sm font-medium">Gold</th>
<th class="px-2 py-5 text-sm font-medium w-gold-dmg-kp"> <th class="w-gold-dmg-kp px-2 py-5 text-sm font-medium">
Dmg Dmg
<br />champ <br />champ
</th> </th>
<th class="px-2 py-5 text-sm font-medium w-gold-dmg-kp"> <th class="w-gold-dmg-kp px-2 py-5 text-sm font-medium">
Dmg Dmg
<br />obj <br />obj
</th> </th>
<th class="px-2 py-5 text-sm font-medium w-gold-dmg-kp"> <th class="w-gold-dmg-kp px-2 py-5 text-sm font-medium">
Dmg Dmg
<br />taken <br />taken
</th> </th>
<th class="px-2 py-5 text-sm font-medium w-gold-dmg-kp">KP</th> <th class="w-gold-dmg-kp px-2 py-5 text-sm font-medium">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="border-r border-blue-700 py-2">
<div class="flex justify-between px-1"> <div class="flex justify-between px-1">
<div class="flex"> <div class="flex">
<div class="flex items-center"> <div class="flex items-center">
@ -61,21 +61,21 @@
:style="{ :style="{
backgroundImage: `url(${'img/roles/' + player.role + '.png'})`, backgroundImage: `url(${'img/roles/' + player.role + '.png'})`,
}" }"
class="w-4 h-4 bg-center bg-cover" class="h-4 w-4 bg-cover bg-center"
></div> ></div>
</div> </div>
<div <div
:style="{ backgroundImage: `url('${player.champion.icon}')` }" :style="{ backgroundImage: `url('${player.champion.icon}')` }"
class="relative w-8 h-8 ml-2 bg-center bg-cover rounded-full bg-blue-1000" class="relative ml-2 h-8 w-8 rounded-full bg-blue-1000 bg-cover bg-center"
> >
<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 bottom-0 flex items-center justify-center w-4 h-4 rounded-full level-position text-xxs" class="level-position absolute bottom-0 flex h-4 w-4 items-center justify-center rounded-full text-xxs"
> >
<span>{{ player.level }}</span> <span>{{ player.level }}</span>
</div> </div>
</div> </div>
<div class="flex flex-col justify-around ml-1"> <div class="ml-1 flex flex-col justify-around">
<Tooltip> <Tooltip>
<template #trigger> <template #trigger>
<div <div
@ -85,16 +85,16 @@
})`, })`,
}" }"
:class="{ 'cursor-pointer': player.summonerSpell1 }" :class="{ 'cursor-pointer': player.summonerSpell1 }"
class="w-4 h-4 bg-center bg-cover rounded-md bg-blue-1000" class="h-4 w-4 rounded-md bg-blue-1000 bg-cover bg-center"
></div> ></div>
</template> </template>
<template v-if="player.summonerSpell1" #default> <template v-if="player.summonerSpell1" #default>
<div class="flex max-w-sm p-2 text-xs text-left text-white select-none"> <div class="flex max-w-sm select-none p-2 text-left text-xs text-white">
<div <div
:style="{ :style="{
backgroundImage: `url('${player.summonerSpell1.icon}')`, backgroundImage: `url('${player.summonerSpell1.icon}')`,
}" }"
class="flex-shrink-0 w-12 h-12 ml-1 bg-center bg-cover rounded-md bg-blue-1000" class="ml-1 h-12 w-12 flex-shrink-0 rounded-md bg-blue-1000 bg-cover bg-center"
></div> ></div>
<div class="ml-2 leading-tight"> <div class="ml-2 leading-tight">
<div class="text-base leading-none"> <div class="text-base leading-none">
@ -116,16 +116,16 @@
})`, })`,
}" }"
:class="{ 'cursor-pointer': player.summonerSpell2 }" :class="{ 'cursor-pointer': player.summonerSpell2 }"
class="w-4 h-4 bg-center bg-cover rounded-md bg-blue-1000" class="h-4 w-4 rounded-md bg-blue-1000 bg-cover bg-center"
></div> ></div>
</template> </template>
<template v-if="player.summonerSpell2" #default> <template v-if="player.summonerSpell2" #default>
<div class="flex max-w-sm p-2 text-xs text-left text-white select-none"> <div class="flex max-w-sm select-none p-2 text-left text-xs text-white">
<div <div
:style="{ :style="{
backgroundImage: `url('${player.summonerSpell2.icon}')`, backgroundImage: `url('${player.summonerSpell2.icon}')`,
}" }"
class="flex-shrink-0 w-12 h-12 ml-1 bg-center bg-cover rounded-md bg-blue-1000" class="ml-1 h-12 w-12 flex-shrink-0 rounded-md bg-blue-1000 bg-cover bg-center"
></div> ></div>
<div class="ml-2 leading-tight"> <div class="ml-2 leading-tight">
<div class="text-base leading-none"> <div class="text-base leading-none">
@ -144,7 +144,7 @@
<div <div
@click="selectRunes(player)" @click="selectRunes(player)"
:class="{ 'cursor-pointer': player.perks }" :class="{ 'cursor-pointer': player.perks }"
class="flex flex-col justify-around cursor-pointer ml-0.5" class="ml-0.5 flex cursor-pointer flex-col justify-around"
> >
<div <div
:style="[ :style="[
@ -154,7 +154,7 @@
} }
: '', : '',
]" ]"
class="w-4 h-4 rounded-md bg-blue-1000" class="h-4 w-4 rounded-md bg-blue-1000"
></div> ></div>
<div <div
:style="[ :style="[
@ -164,18 +164,18 @@
} }
: '', : '',
]" ]"
class="w-4 h-4 rounded-md bg-blue-1000" class="h-4 w-4 rounded-md bg-blue-1000"
></div> ></div>
</div> </div>
</template> </template>
<template v-if="player.perks" #default> <template v-if="player.perks" #default>
<div class="px-2 text-sm leading-relaxed text-center text-white select-none"> <div class="select-none px-2 text-center text-sm leading-relaxed text-white">
<p>Click to display</p> <p>Click to display</p>
<p class="font-bold text-teal-400">full runes</p> <p class="font-bold text-teal-400">full runes</p>
</div> </div>
</template> </template>
</Tooltip> </Tooltip>
<div class="flex flex-col items-start justify-center ml-1 leading-none"> <div class="ml-1 flex flex-col items-start justify-center leading-none">
<router-link <router-link
v-if="player.summonerSpell1" v-if="player.summonerSpell1"
:to="{ :to="{
@ -185,33 +185,33 @@
:class="{ :class="{
'font-semibold text-yellow-400': account.id === player.summonerId, 'font-semibold text-yellow-400': account.id === player.summonerId,
}" }"
class="overflow-hidden text-xs text-left text-white whitespace-nowrap w-[5.5rem] text-overflow hover:text-blue-200" class="text-overflow w-[5.5rem] overflow-hidden whitespace-nowrap text-left text-xs text-white hover:text-blue-200"
>{{ player.name }}</router-link >{{ player.name }}</router-link
> >
<div <div
v-else v-else
class="overflow-hidden text-xs text-left text-white whitespace-nowrap w-[5.5rem] text-overflow" class="text-overflow w-[5.5rem] overflow-hidden whitespace-nowrap text-left text-xs text-white"
> >
{{ player.name }} {{ player.name }}
</div> </div>
<div class="text-teal-500 text-xxs"> <div class="text-xxs text-teal-500">
{{ player.champion.name }} {{ player.champion.name }}
</div> </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="w-5 h-5 ml-auto"> <svg class="ml-auto h-5 w-5">
<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"> <div class="text-xxs text-blue-300">
{{ player.rank.shortName }} {{ player.rank.shortName }}
</div> </div>
</div> </div>
<div v-else-if="!ranksLoaded"> <div v-else-if="!ranksLoaded">
<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="h-5 w-5">
<div class="-mt-1 text-2xl text-blue-300">-</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" />

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

@ -1,11 +1,11 @@
<template> <template>
<div class="flex ml-4 overflow-hidden text-sm rounded-lg"> <div class="ml-4 flex overflow-hidden rounded-lg text-sm">
<div class="relative flex justify-between w-full overflow-hidden bg-blue-800 rounded-lg"> <div class="relative flex w-full justify-between overflow-hidden rounded-lg bg-blue-800">
<div class="absolute flex flex-col items-center justify-between h-full horizontal-center"> <div class="horizontal-center absolute flex h-full flex-col items-center justify-between">
<div class="text-base leading-loose text-blue-200">{{ gamemode.name }}</div> <div class="text-base leading-loose text-blue-200">{{ gamemode.name }}</div>
<div class="flex flex-col text-2xl font-bold leading-none vs"> <div class="vs flex flex-col text-2xl font-bold leading-none">
<span>V</span> <span>V</span>
<span class="ml-4 -mt-3">S</span> <span class="-mt-3 ml-4">S</span>
</div> </div>
<div :class="{ 'w-10': displayStartTime !== 'Not started yet' }" class="pb-2 text-blue-200"> <div :class="{ 'w-10': displayStartTime !== 'Not started yet' }" class="pb-2 text-blue-200">
{{ displayStartTime }} {{ displayStartTime }}
@ -22,7 +22,7 @@
:style="{ :style="{
backgroundImage: `url('https://raw.communitydragon.org/latest/plugins/rcp-be-lol-game-data/global/default/v1/champion-icons/${ally.championId}.png')`, 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-center bg-cover rounded-full bg-blue-1000" class="h-6 w-6 rounded-full bg-blue-1000 bg-cover bg-center"
></div> ></div>
<router-link <router-link
v-if="!ally.bot" v-if="!ally.bot"
@ -56,7 +56,7 @@
:style="{ :style="{
backgroundImage: `url('https://raw.communitydragon.org/latest/plugins/rcp-be-lol-game-data/global/default/v1/champion-icons/${enemy.championId}.png')`, backgroundImage: `url('https://raw.communitydragon.org/latest/plugins/rcp-be-lol-game-data/global/default/v1/champion-icons/${enemy.championId}.png')`,
}" }"
class="w-6 h-6 ml-2 bg-center bg-cover rounded-full bg-blue-1000" class="ml-2 h-6 w-6 rounded-full bg-blue-1000 bg-cover bg-center"
></div> ></div>
</li> </li>
</ul> </ul>
@ -66,10 +66,10 @@
name: 'summonerLive', name: 'summonerLive',
params: { region: $route.params.region, name: $route.params.name }, params: { region: $route.params.region, name: $route.params.name },
}" }"
class="flex items-center pl-6 pr-4 -ml-2 text-base text-blue-200 cursor-pointer live-game-link bg-gradient-x hover:bg-blue-800 hover:text-blue-100" class="live-game-link bg-gradient-x -ml-2 flex cursor-pointer items-center pl-6 pr-4 text-base text-blue-200 hover:bg-blue-800 hover:text-blue-100"
> >
<div class="-mt-0.5">more</div> <div class="-mt-0.5">more</div>
<svg class="w-4 h-4 ml-1 transition-transform duration-200 ease-in-out transform"> <svg class="ml-1 h-4 w-4 transform transition-transform duration-200 ease-in-out">
<use xlink:href="#arrow-right" /> <use xlink:href="#arrow-right" />
</svg> </svg>
</router-link> </router-link>
@ -102,7 +102,9 @@ export default {
} }
.vs { .vs {
text-shadow: 3px 2px 0px rgba(49, 130, 206, 0.8), -3px 2px 0px rgba(229, 62, 62, 0.8); text-shadow:
3px 2px 0px rgba(49, 130, 206, 0.8),
-3px 2px 0px rgba(229, 62, 62, 0.8);
} }
.live-game-link:hover svg { .live-game-link:hover svg {

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

@ -8,19 +8,19 @@
showDetails ? 'rounded-t-lg' : 'rounded-lg', showDetails ? 'rounded-t-lg' : 'rounded-lg',
{ 'mt-4': indexMatch !== 0 }, { 'mt-4': indexMatch !== 0 },
]" ]"
class="relative text-base text-white bg-blue-800 cursor-pointer match hover:shadow-xl" class="match relative cursor-pointer bg-blue-800 text-base text-white 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="absolute top-0 right-0 px-2 rounded-full new-match text-xxs" class="new-match absolute right-0 top-0 rounded-full px-2 text-xxs"
style="margin: 0.35rem 0.35rem 0 0; background-color: rgba(99, 179, 237, 0.2)" style="margin: 0.35rem 0.35rem 0 0; background-color: rgba(99, 179, 237, 0.2)"
> >
New New
</div> </div>
<div class="w-4/12 text-left first"> <div class="first w-4/12 text-left">
<div> <div>
<div class="h-6 text-lg font-extrabold leading-none text-teal-500 uppercase"> <div class="h-6 text-lg font-extrabold uppercase leading-none text-teal-500">
{{ data.champion.name }} {{ data.champion.name }}
</div> </div>
@ -29,36 +29,36 @@
<div <div
v-if="data.role !== 'NONE'" v-if="data.role !== 'NONE'"
:style="{ backgroundImage: `url(${'/img/roles/' + data.role + '.png'})` }" :style="{ backgroundImage: `url(${'/img/roles/' + data.role + '.png'})` }"
class="w-10 h-10 bg-center bg-cover" class="h-10 w-10 bg-cover bg-center"
></div> ></div>
<div class="w-10 text-xs font-extrabold text-center text-teal-500"> <div class="w-10 text-center text-xs font-extrabold text-teal-500">
LVL {{ data.level }} LVL {{ data.level }}
</div> </div>
</div> </div>
<div <div
:style="{ backgroundImage: `url('${data.champion.icon}')` }" :style="{ backgroundImage: `url('${data.champion.icon}')` }"
class="w-16 h-16 ml-2 rounded-lg crop-champion bg-blue-1000" class="crop-champion ml-2 h-16 w-16 rounded-lg bg-blue-1000"
></div> ></div>
<div class="flex flex-col justify-around ml-2"> <div class="ml-2 flex flex-col justify-around">
<div <div
v-if="data.summonerSpell1" v-if="data.summonerSpell1"
:style="{ backgroundImage: `url(${data.summonerSpell1.icon})` }" :style="{ backgroundImage: `url(${data.summonerSpell1.icon})` }"
class="w-6 h-6 bg-center bg-cover rounded-md bg-blue-1000" class="h-6 w-6 rounded-md bg-blue-1000 bg-cover bg-center"
></div> ></div>
<div v-else class="w-6 h-6 rounded-md bg-blue-1000"></div> <div v-else class="h-6 w-6 rounded-md bg-blue-1000"></div>
<div <div
v-if="data.summonerSpell2" v-if="data.summonerSpell2"
:style="{ backgroundImage: `url(${data.summonerSpell2.icon})` }" :style="{ backgroundImage: `url(${data.summonerSpell2.icon})` }"
class="w-6 h-6 bg-center bg-cover rounded-md bg-blue-1000" class="h-6 w-6 rounded-md bg-blue-1000 bg-cover bg-center"
></div> ></div>
<div v-else class="w-6 h-6 rounded-md bg-blue-1000"></div> <div v-else class="h-6 w-6 rounded-md bg-blue-1000"></div>
</div> </div>
<div class="flex flex-col justify-around ml-1"> <div class="ml-1 flex flex-col justify-around">
<div <div
:style="[ :style="[
data.primaryRune ? { background: `url(${data.primaryRune}) center/cover` } : '', data.primaryRune ? { background: `url(${data.primaryRune}) center/cover` } : '',
]" ]"
class="w-6 h-6 rounded-md bg-blue-1000" class="h-6 w-6 rounded-md bg-blue-1000"
></div> ></div>
<div <div
:style="[ :style="[
@ -66,10 +66,10 @@
? { background: `url(${data.secondaryRune}) center/cover` } ? { background: `url(${data.secondaryRune}) center/cover` }
: '', : '',
]" ]"
class="w-6 h-6 rounded-md bg-blue-1000" class="h-6 w-6 rounded-md bg-blue-1000"
></div> ></div>
</div> </div>
<div class="flex flex-col items-center justify-center mx-auto leading-none"> <div class="mx-auto flex flex-col items-center justify-center 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>
@ -84,14 +84,14 @@
</div> </div>
<div <div
class="relative z-30 flex items-end h-6 text-sm font-extrabold leading-none text-white" class="relative z-30 flex h-6 items-end text-sm font-extrabold leading-none text-white"
> >
{{ data.gamemode.name }} {{ data.gamemode.name }}
</div> </div>
</div> </div>
</div> </div>
<div class="flex items-center w-3/12 py-6 second"> <div class="second flex w-3/12 items-center py-6">
<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">
@ -108,29 +108,29 @@
<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 text-sm font-bold gold">{{ data.stats.gold | kilo }}</div> <div class="gold ml-1 text-sm font-bold">{{ 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 text-sm font-bold damage">{{ data.stats.dmgChamp | kilo }}</div> <div class="damage ml-1 text-sm font-bold">{{ 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 text-sm font-bold kp">{{ data.stats.kp | percent }}</div> <div class="kp ml-1 text-sm font-bold">{{ data.stats.kp | percent }}</div>
</div> </div>
</div> </div>
</div> </div>
<div class="flex items-center w-5/12 py-1 third"> <div class="third flex w-5/12 items-center py-1">
<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="flex items-center ml-4 leading-none" class="ml-4 flex items-center leading-none"
> >
<router-link <router-link
v-if="ally.account_id !== '0' && account.accountId !== ally.account_id" v-if="ally.account_id !== '0' && account.accountId !== ally.account_id"
@ -140,32 +140,32 @@
params: { region: $route.params.region, name: ally.name }, params: { region: $route.params.region, name: ally.name },
}" }"
:class="isSummonerProfile(ally.account_id)" :class="isSummonerProfile(ally.account_id)"
class="w-16 overflow-hidden text-xs font-medium text-right whitespace-nowrap hover:text-white text-overflow" class="text-overflow w-16 overflow-hidden whitespace-nowrap text-right text-xs font-medium hover:text-white"
>{{ ally.name }}</router-link >{{ ally.name }}</router-link
> >
<div <div
v-else v-else
:class="isSummonerProfile(ally.account_id)" :class="isSummonerProfile(ally.account_id)"
class="w-16 overflow-hidden text-xs font-medium text-right whitespace-nowrap text-overflow" class="text-overflow w-16 overflow-hidden whitespace-nowrap text-right text-xs font-medium"
> >
{{ ally.name }} {{ ally.name }}
</div> </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="w-6 h-6 ml-1 overflow-hidden bg-center bg-cover rounded-full bg-blue-1000" class="ml-1 h-6 w-6 overflow-hidden rounded-full bg-blue-1000 bg-cover bg-center"
></div> ></div>
<div <div
:style="{ :style="{
backgroundImage: backgroundImage:
data.role !== 'NONE' ? `url(${'/img/roles/' + roles[index] + '.png'})` : null, data.role !== 'NONE' ? `url(${'/img/roles/' + roles[index] + '.png'})` : null,
}" }"
class="w-4 h-4 mx-2 bg-center bg-cover" class="mx-2 h-4 w-4 bg-cover bg-center"
></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-center bg-cover rounded-full bg-blue-1000" class="h-6 w-6 rounded-full bg-blue-1000 bg-cover bg-center"
></div> ></div>
<router-link <router-link
v-if="data.enemyTeam[index].account_id !== '0'" v-if="data.enemyTeam[index].account_id !== '0'"
@ -174,19 +174,19 @@
name: 'summoner', name: 'summoner',
params: { region: $route.params.region, name: data.enemyTeam[index].name }, params: { region: $route.params.region, name: data.enemyTeam[index].name },
}" }"
class="w-16 ml-1 overflow-hidden text-xs font-medium text-left text-blue-200 whitespace-nowrap hover:text-white text-overflow" class="text-overflow ml-1 w-16 overflow-hidden whitespace-nowrap text-left text-xs font-medium text-blue-200 hover:text-white"
>{{ data.enemyTeam[index].name }}</router-link >{{ data.enemyTeam[index].name }}</router-link
> >
<div <div
v-else v-else
class="w-16 ml-1 overflow-hidden text-xs font-medium text-left text-blue-200 whitespace-nowrap text-overflow" class="text-overflow ml-1 w-16 overflow-hidden whitespace-nowrap text-left text-xs font-medium text-blue-200"
> >
{{ data.enemyTeam[index].name }} {{ data.enemyTeam[index].name }}
</div> </div>
</div> </div>
</div> </div>
<div class="flex flex-col items-center justify-center ml-auto"> <div class="ml-auto flex flex-col items-center justify-center">
<svg class="w-5 h-5 text-blue-200"> <svg class="h-5 w-5 text-blue-200">
<use xlink:href="#stopwatch" /> <use xlink:href="#stopwatch" />
</svg> </svg>
<div class="text-lg font-medium text-teal-400">{{ data.time | secToTime }}</div> <div class="text-lg font-medium text-teal-400">{{ data.time | secToTime }}</div>
@ -195,8 +195,8 @@
<div class="text-xs font-medium text-white">{{ data.date }}</div> <div class="text-xs font-medium text-white">{{ data.date }}</div>
</template> </template>
<template #default> <template #default>
<div class="px-2 text-xs leading-tight text-center text-white select-none"> <div class="select-none px-2 text-center text-xs leading-tight text-white">
<svg class="w-4 h-4 mx-auto text-teal-400"> <svg class="mx-auto h-4 w-4 text-teal-400">
<use xlink:href="#time" /> <use xlink:href="#time" />
</svg> </svg>
<div class="mt-1">{{ data.fullDate.date }}</div> <div class="mt-1">{{ data.fullDate.date }}</div>

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

@ -6,25 +6,25 @@
<div <div
:style="{ backgroundImage: itemLink(item) }" :style="{ backgroundImage: itemLink(item) }"
:class="[ :class="[
oneRow ? 'ml-0.5 w-6 h-6' : 'ml-1 w-8 h-8', oneRow ? 'ml-0.5 h-6 w-6' : 'ml-1 h-8 w-8',
{ 'cursor-pointer': item !== null }, { 'cursor-pointer': item !== null },
]" ]"
class="relative z-10 bg-center bg-cover rounded-md bg-blue-1000" class="relative z-10 rounded-md bg-blue-1000 bg-cover bg-center"
> >
<div v-if="isMythic(item)" class="w-full h-full rounded-md mythic-inside"></div> <div v-if="isMythic(item)" class="mythic-inside h-full w-full rounded-md"></div>
</div> </div>
<div <div
v-if="isMythic(item)" v-if="isMythic(item)"
class="absolute rounded-md mythic" class="mythic absolute rounded-md"
:class="oneRow ? 'mythic-sm' : 'mythic-xl'" :class="oneRow ? 'mythic-sm' : 'mythic-xl'"
></div> ></div>
</div> </div>
</template> </template>
<template v-if="item !== null" #default> <template v-if="item !== null" #default>
<div class="flex max-w-md p-2 text-xs text-left text-white select-none"> <div class="flex max-w-md select-none p-2 text-left text-xs text-white">
<div <div
:style="{ backgroundImage: itemLink(item) }" :style="{ backgroundImage: itemLink(item) }"
class="flex-shrink-0 w-12 h-12 ml-1 bg-center bg-cover rounded-md bg-blue-1000" class="ml-1 h-12 w-12 flex-shrink-0 rounded-md bg-blue-1000 bg-cover bg-center"
></div> ></div>
<div class="ml-2 leading-none"> <div class="ml-2 leading-none">
<div class="text-base">{{ itemName(item.name) }}</div> <div class="text-base">{{ itemName(item.name) }}</div>
@ -34,7 +34,7 @@
</div> </div>
<div <div
v-html="item.description" v-html="item.description"
class="mt-1 font-light text-blue-200 item-description" class="item-description mt-1 font-light text-blue-200"
></div> ></div>
</div> </div>
</div> </div>
@ -120,7 +120,7 @@ export default {
} }
.item-description >>> stats { .item-description >>> stats {
@apply text-white leading-tight; @apply leading-tight text-white;
} }
.item-description >>> br + br { .item-description >>> br + br {
@ -132,21 +132,21 @@ export default {
} }
.item-description >>> li { .item-description >>> li {
@apply block mt-2; @apply mt-2 block;
} }
.item-description >>> passive { .item-description >>> passive {
@apply text-white font-normal; @apply font-normal text-white;
} }
.item-description >>> active { .item-description >>> active {
@apply inline-block text-white font-bold mt-2; @apply mt-2 inline-block font-bold text-white;
} }
.item-description >>> unique, .item-description >>> unique,
.item-description >>> li > passive:first-child, .item-description >>> li > passive:first-child,
.item-description >>> rarityMythic { .item-description >>> rarityMythic {
@apply text-white font-bold block mt-2; @apply mt-2 block font-bold text-white;
} }
.item-description >>> font { .item-description >>> font {
@ -154,10 +154,10 @@ export default {
} }
.item-description >>> rules { .item-description >>> rules {
@apply inline-block mt-2 text-blue-400 italic; @apply mt-2 inline-block italic text-blue-400;
} }
.item-description >>> rules active { .item-description >>> rules active {
@apply inline text-white font-normal; @apply inline font-normal text-white;
} }
</style> </style>

24
client/src/components/Match/Runes/RuneStyle.vue
View file

@ -4,14 +4,14 @@
:style="{ :style="{
backgroundImage: `url('${createCategoryBorderUrl(runeStyle.name)}')`, backgroundImage: `url('${createCategoryBorderUrl(runeStyle.name)}')`,
}" }"
class="flex items-center justify-center w-24 h-24 bg-cover" class="flex h-24 w-24 items-center justify-center bg-cover"
> >
<div <div
:style="{ :style="{
backgroundImage: `url('${createCategoryUrl(runeStyle.name)}')`, backgroundImage: `url('${createCategoryUrl(runeStyle.name)}')`,
}" }"
style="filter: brightness(1.2)" style="filter: brightness(1.2)"
class="w-56 h-56 mt-4 bg-center bg-no-repeat bg-contain" class="mt-4 h-56 w-56 bg-contain bg-center bg-no-repeat"
></div> ></div>
</div> </div>
@ -26,22 +26,22 @@
backgroundImage: `url('${createCDragonAssetUrl(runes.perks[runeId].icon)}')`, backgroundImage: `url('${createCDragonAssetUrl(runes.perks[runeId].icon)}')`,
}" }"
:class="selectedRunes.selected.includes(runeId) ? 'used-rune' : 'not-used-rune'" :class="selectedRunes.selected.includes(runeId) ? 'used-rune' : 'not-used-rune'"
class="w-12 h-12 bg-center bg-cover border-2 border-gray-700 rounded-full cursor-pointer" class="h-12 w-12 cursor-pointer rounded-full border-2 border-gray-700 bg-cover bg-center"
></li> ></li>
</template> </template>
<template #default> <template #default>
<div class="flex max-w-md p-2 text-sm text-left text-white select-none"> <div class="flex max-w-md select-none p-2 text-left text-sm text-white">
<div <div
:style="{ :style="{
backgroundImage: `url('${createCDragonAssetUrl(runes.perks[runeId].icon)}')`, backgroundImage: `url('${createCDragonAssetUrl(runes.perks[runeId].icon)}')`,
}" }"
class="flex-shrink-0 w-12 h-12 ml-1 bg-center bg-cover rounded-md bg-blue-1000" class="ml-1 h-12 w-12 flex-shrink-0 rounded-md bg-blue-1000 bg-cover bg-center"
></div> ></div>
<div class="ml-2 leading-none"> <div class="ml-2 leading-none">
<div class="text-base">{{ runes.perks[runeId].name }}</div> <div class="text-base">{{ runes.perks[runeId].name }}</div>
<div <div
v-html="runes.perks[runeId].desc" v-html="runes.perks[runeId].desc"
class="mt-3 font-light leading-tight text-blue-200 rune-description" class="rune-description mt-3 font-light leading-tight text-blue-200"
></div> ></div>
</div> </div>
</div> </div>
@ -49,12 +49,12 @@
</Tooltip> </Tooltip>
</ul> </ul>
</div> </div>
<div v-if="primary && index == 0" class="w-full mt-4 bg-gray-500 bg-opacity-25 h-0.5"></div> <div v-if="primary && index == 0" class="mt-4 h-0.5 w-full bg-gray-500 bg-opacity-25"></div>
</div> </div>
<div v-if="!primary"> <div v-if="!primary">
<div class="mt-8 space-y-4"> <div class="mt-8 space-y-4">
<div v-for="(row, index) in kStats" :key="`row-${index}`" class="flex px-3 space-x-8"> <div v-for="(row, index) in kStats" :key="`row-${index}`" class="flex space-x-8 px-3">
<ul v-for="(kStat, i) in row" :key="`${kStat}-${i}`"> <ul v-for="(kStat, i) in row" :key="`${kStat}-${i}`">
<Tooltip> <Tooltip>
<template #trigger> <template #trigger>
@ -65,22 +65,22 @@
:class=" :class="
selectedRunes.selected[index + 6] === kStat ? 'used-rune' : 'not-used-rune' selectedRunes.selected[index + 6] === kStat ? 'used-rune' : 'not-used-rune'
" "
class="w-8 h-8 bg-gray-900 bg-center bg-cover border-2 border-gray-700 rounded-full cursor-pointer" class="h-8 w-8 cursor-pointer rounded-full border-2 border-gray-700 bg-gray-900 bg-cover bg-center"
></li> ></li>
</template> </template>
<template #default> <template #default>
<div class="flex max-w-md p-2 text-sm text-left text-white select-none"> <div class="flex max-w-md select-none p-2 text-left text-sm text-white">
<div <div
:style="{ :style="{
backgroundImage: `url('${createCDragonAssetUrl(runes.perks[kStat].icon)}')`, backgroundImage: `url('${createCDragonAssetUrl(runes.perks[kStat].icon)}')`,
}" }"
class="flex-shrink-0 w-8 h-8 ml-1 bg-center bg-cover rounded-md bg-blue-1000" class="ml-1 h-8 w-8 flex-shrink-0 rounded-md bg-blue-1000 bg-cover bg-center"
></div> ></div>
<div class="ml-2 leading-none"> <div class="ml-2 leading-none">
<div class="text-base">{{ runes.perks[kStat].name }}</div> <div class="text-base">{{ runes.perks[kStat].name }}</div>
<div <div
v-html="runes.perks[kStat].desc" v-html="runes.perks[kStat].desc"
class="mt-3 font-light leading-tight text-blue-200 rune-description" class="rune-description mt-3 font-light leading-tight text-blue-200"
></div> ></div>
</div> </div>
</div> </div>

4
client/src/components/Match/Runes/RunesContainer.vue
View file

@ -22,7 +22,7 @@
> >
<div <div
v-if="runesOpen" v-if="runesOpen"
class="relative overflow-hidden bg-gray-900 rounded-md shadow-lg" class="relative overflow-hidden rounded-md bg-gray-900 shadow-lg"
style="width: 800px; height: 500px" style="width: 800px; height: 500px"
> >
<LazyBackground <LazyBackground
@ -33,7 +33,7 @@
style="filter: blur(2px)" style="filter: blur(2px)"
> >
</LazyBackground> </LazyBackground>
<div class="relative flex items-start h-full px-4 py-2"> <div class="relative flex h-full items-start px-4 py-2">
<div class="w-1/2"> <div class="w-1/2">
<RuneStyle :primary="true" :rune-style="primaryStyle" /> <RuneStyle :primary="true" :rune-style="primaryStyle" />
</div> </div>

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="px-2 py-2 pl-10 rounded-lg outline-none input-color focus:bg-blue-1000" class="input-color rounded-lg px-2 py-2 pl-10 outline-none focus:bg-blue-1000"
type="text" type="text"
placeholder="Search Champions" placeholder="Search Champions"
/> />
<svg class="absolute left-0 w-4 h-4 ml-3 vertical-center"> <svg class="vertical-center absolute left-0 ml-3 h-4 w-4">
<use xlink:href="#search" /> <use xlink:href="#search" />
</svg> </svg>
</Ripple> </Ripple>

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

@ -1,11 +1,11 @@
<template> <template>
<table class="w-full leading-none text-center bg-blue-800 rounded-lg table-fixed"> <table class="w-full table-fixed rounded-lg bg-blue-800 text-center leading-none">
<thead> <thead>
<tr class="text-sm rounded-t-lg select-none heading"> <tr class="heading select-none rounded-t-lg text-sm">
<th <th
@click="sortBy('index')" @click="sortBy('index')"
:class="sortedClasses('index')" :class="sortedClasses('index')"
class="relative px-2 py-4 font-normal rounded-tl-lg cursor-pointer hover:bg-blue-700" class="relative cursor-pointer rounded-tl-lg px-2 py-4 font-normal hover:bg-blue-700"
> >
rank rank
</th> </th>
@ -22,7 +22,7 @@
}, },
sortedClasses(heading.props), sortedClasses(heading.props),
]" ]"
class="relative px-2 py-4 font-normal cursor-pointer hover:bg-blue-700" class="relative cursor-pointer px-2 py-4 font-normal hover:bg-blue-700"
></th> ></th>
</tr> </tr>
</thead> </thead>
@ -34,15 +34,15 @@
> >
<td <td
:class="{ 'rounded-bl-lg': index === championsToDisplay.length - 1 }" :class="{ 'rounded-bl-lg': index === championsToDisplay.length - 1 }"
class="relative px-2 py-3 text-sm text-white bg-blue-800 border-t-table" class="border-t-table relative bg-blue-800 px-2 py-3 text-sm text-white"
> >
{{ champion.index + 1 }} {{ champion.index + 1 }}
</td> </td>
<td class="relative px-2 py-3 text-sm text-white bg-blue-800 border-t-table"> <td class="border-t-table relative bg-blue-800 px-2 py-3 text-sm text-white">
<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="flex-shrink-0 w-6 h-6 bg-center bg-cover rounded-full bg-blue-1000" class="h-6 w-6 flex-shrink-0 rounded-full bg-blue-1000 bg-cover bg-center"
></div> ></div>
<div class="ml-2">{{ champion.champion.name }}</div> <div class="ml-2">{{ champion.champion.name }}</div>
</div> </div>
@ -61,7 +61,7 @@
</td> </td>
<td :style="bgColor(champion, 'kda')" class="px-2 py-3 text-sm text-white"> <td :style="bgColor(champion, '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-blue-200 whitespace-nowrap text-xxs"> <div class="mt-1 whitespace-nowrap text-xxs text-blue-200">
{{ (champion.kills / champion.count) | round(1) }} {{ (champion.kills / champion.count) | round(1) }}
/ /
{{ (champion.deaths / champion.count) | round(1) }} {{ (champion.deaths / champion.count) | round(1) }}

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

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

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

@ -12,7 +12,7 @@
<label for="onlyMostPlayed" class="cursor-pointer select-none">Only most played</label> <label for="onlyMostPlayed" class="cursor-pointer select-none">Only most played</label>
</template> </template>
<template #default> <template #default>
<div class="px-2 text-xs text-center text-white"> <div class="px-2 text-center text-xs text-white">
Hide champions with less than Hide champions with less than
<br /> <br />
<span class="font-bold text-teal-400">1% playrate</span> <span class="font-bold text-teal-400">1% playrate</span>

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

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

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

@ -1,17 +1,17 @@
<template> <template>
<div class="px-5 py-4 mt-2 bg-blue-800 rounded-lg"> <div class="mt-2 rounded-lg bg-blue-800 px-5 py-4">
<table <table
class="w-full leading-none text-center table-fixed" class="w-full table-fixed text-center leading-none"
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 :class="[ally ? 'text-teal-400 ' : 'text-red-400 ']" class="font-semibold w-team"> <th :class="[ally ? 'text-teal-400 ' : 'text-red-400 ']" class="w-team font-semibold">
{{ ally ? 'Ally' : 'Enemy' }} Team {{ ally ? 'Ally' : 'Enemy' }} Team
</th> </th>
<th class="text-sm font-normal text-blue-200 w-ranked">SoloQ Stats</th> <th class="w-ranked text-sm font-normal text-blue-200">SoloQ Stats</th>
<th class="text-sm font-normal text-blue-200 w-ranked">Flex Stats</th> <th class="w-ranked text-sm font-normal text-blue-200">Flex Stats</th>
<th class="px-2 text-sm font-normal text-right text-blue-200 w-bans">Bans</th> <th class="w-bans px-2 text-right text-sm font-normal text-blue-200">Bans</th>
</tr> </tr>
</thead> </thead>
<tbody v-if="liveLoaded"> <tbody v-if="liveLoaded">
@ -19,23 +19,23 @@
v-for="(player, index) in team" v-for="(player, index) in team"
:key="player.summonerId" :key="player.summonerId"
:style="getCSSVars(player.championId)" :style="getCSSVars(player.championId)"
class="relative live-team-row" class="live-team-row relative"
> >
<td class="py-1 pl-2 rounded-l-lg"> <td class="rounded-l-lg py-1 pl-2">
<div class="flex items-center"> <div class="flex items-center">
<div <div
v-if="player.perks" v-if="player.perks"
@click="selectRunes(player)" @click="selectRunes(player)"
:class="{ 'cursor-pointer': player.perks }" :class="{ 'cursor-pointer': player.perks }"
class="flex flex-col items-center runes" class="runes flex flex-col items-center"
> >
<div <div
:style="{ backgroundImage: `url('${getPrimarRune(player.perks)}')` }" :style="{ backgroundImage: `url('${getPrimarRune(player.perks)}')` }"
class="w-6 h-6 bg-center bg-cover" class="h-6 w-6 bg-cover bg-center"
></div> ></div>
<div <div
:style="{ backgroundImage: `url('${getSecondaryRune(player.perks)}')` }" :style="{ backgroundImage: `url('${getSecondaryRune(player.perks)}')` }"
class="w-3 h-3 mt-1 bg-center bg-cover" class="mt-1 h-3 w-3 bg-cover bg-center"
></div> ></div>
</div> </div>
<div v-else class="w-6"></div> <div v-else class="w-6"></div>
@ -44,31 +44,31 @@
backgroundImage: `url('https://raw.communitydragon.org/latest/plugins/rcp-be-lol-game-data/global/default/v1/champion-icons/${player.championId}.png')`, 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="relative w-12 h-12 ml-2 bg-center bg-cover border-2 rounded-full bg-blue-1000" class="relative ml-2 h-12 w-12 rounded-full border-2 bg-blue-1000 bg-cover bg-center"
> >
<div <div
v-if="player.role && player.role !== 'NONE'" v-if="player.role && player.role !== 'NONE'"
:class="borderChampion(player.summonerId)" :class="borderChampion(player.summonerId)"
class="absolute border rounded-full p-0.5 bg-blue-1000" class="absolute rounded-full border bg-blue-1000 p-0.5"
style="bottom: -5px; right: -5px" style="bottom: -5px; right: -5px"
> >
<div <div
:style="{ backgroundImage: `url(${'/img/roles/' + player.role + '.png'})` }" :style="{ backgroundImage: `url(${'/img/roles/' + player.role + '.png'})` }"
class="w-4 h-4 bg-center bg-cover" class="h-4 w-4 bg-cover bg-center"
></div> ></div>
</div> </div>
</div> </div>
<div class="flex flex-col ml-2"> <div class="ml-2 flex flex-col">
<div <div
:style="{ backgroundImage: `url(${player.summonerSpell1.icon})` }" :style="{ backgroundImage: `url(${player.summonerSpell1.icon})` }"
class="w-4 h-4 bg-center bg-cover rounded-md bg-blue-1000" class="h-4 w-4 rounded-md bg-blue-1000 bg-cover bg-center"
></div> ></div>
<div <div
:style="{ backgroundImage: `url(${player.summonerSpell2.icon})` }" :style="{ backgroundImage: `url(${player.summonerSpell2.icon})` }"
class="w-4 h-4 mt-1 bg-center bg-cover rounded-md bg-blue-1000" class="mt-1 h-4 w-4 rounded-md bg-blue-1000 bg-cover bg-center"
></div> ></div>
</div> </div>
<div class="ml-3 text-sm leading-tight text-left"> <div class="ml-3 text-left text-sm leading-tight">
<router-link <router-link
v-if="!player.bot" v-if="!player.bot"
:to="{ :to="{
@ -91,10 +91,10 @@
<div class="px-2"> <div class="px-2">
<div v-if="player.rank.soloQ" class="flex items-center"> <div v-if="player.rank.soloQ" class="flex items-center">
<div class="inline-block text-center"> <div class="inline-block text-center">
<svg class="w-5 h-5"> <svg class="h-5 w-5">
<use :xlink:href="`#rank-${player.rank.soloQ.tier.toLowerCase()}`" /> <use :xlink:href="`#rank-${player.rank.soloQ.tier.toLowerCase()}`" />
</svg> </svg>
<div class="text-xs font-semibold text-blue-300 mt-0.5"> <div class="mt-0.5 text-xs font-semibold text-blue-300">
{{ player.rank.soloQ.shortName }} {{ player.rank.soloQ.shortName }}
</div> </div>
</div> </div>
@ -105,7 +105,7 @@
</div> </div>
</div> </div>
</div> </div>
<div v-else class="w-5 h-5"> <div v-else class="h-5 w-5">
<div class="-mt-1 text-2xl text-blue-300">-</div> <div class="-mt-1 text-2xl text-blue-300">-</div>
</div> </div>
</div> </div>
@ -114,10 +114,10 @@
<div class="px-2"> <div class="px-2">
<div v-if="player.rank.flex5v5" class="flex items-center"> <div v-if="player.rank.flex5v5" class="flex items-center">
<div class="inline-block text-center"> <div class="inline-block text-center">
<svg class="w-5 h-5"> <svg class="h-5 w-5">
<use :xlink:href="`#rank-${player.rank.flex5v5.tier.toLowerCase()}`" /> <use :xlink:href="`#rank-${player.rank.flex5v5.tier.toLowerCase()}`" />
</svg> </svg>
<div class="text-xs font-semibold text-blue-300 mt-0.5"> <div class="mt-0.5 text-xs font-semibold text-blue-300">
{{ player.rank.flex5v5.shortName }} {{ player.rank.flex5v5.shortName }}
</div> </div>
</div> </div>
@ -128,17 +128,17 @@
</div> </div>
</div> </div>
</div> </div>
<div v-else class="w-5 h-5"> <div v-else class="h-5 w-5">
<div class="-mt-1 text-2xl text-blue-300">-</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="rounded-r-lg py-1 text-right">
<div class="inline-block px-2"> <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 border-2 rounded-full ban" class="ban relative rounded-full border-2"
> >
<div <div
:style="[ :style="[
@ -150,16 +150,16 @@
} }
: '', : '',
]" ]"
class="w-6 h-6 bg-center bg-cover rounded-full ban-img bg-blue-1000" class="ban-img h-6 w-6 rounded-full bg-blue-1000 bg-cover bg-center"
></div> ></div>
<div <div
:class="[ally ? 'text-teal-100 bg-teal-500' : 'text-red-100 bg-red-500']" :class="[ally ? 'bg-teal-500 text-teal-100' : 'bg-red-500 text-red-100']"
class="absolute flex items-center justify-center w-4 h-4 text-xs font-bold rounded-full ban-order" class="ban-order absolute flex h-4 w-4 items-center justify-center rounded-full text-xs font-bold"
> >
{{ banChamp(index, player.teamId).pickTurn }} {{ banChamp(index, player.teamId).pickTurn }}
</div> </div>
</div> </div>
<div v-else class="w-5 h-5 text-left"> <div v-else class="h-5 w-5 text-left">
<div class="text-2xl text-blue-300">-</div> <div class="text-2xl text-blue-300">-</div>
</div> </div>
</div> </div>

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

@ -1,5 +1,5 @@
<template> <template>
<div class="flex mt-3 text-center"> <div class="mt-3 flex text-center">
<div class="w-3/12"> <div class="w-3/12">
<div class="rounded-lg bg-blue-850" style="width: 300px; height: 339px"> <div class="rounded-lg bg-blue-850" style="width: 300px; height: 339px">
<content-loader <content-loader

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

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

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

@ -1,17 +1,17 @@
<template> <template>
<div class="mt-4 bg-blue-800 rounded-lg"> <div class="mt-4 rounded-lg bg-blue-800">
<div class="pb-2"> <div class="pb-2">
<div class="flex items-center justify-center py-4 text-blue-200 rounded-t-lg heading"> <div class="heading flex items-center justify-center rounded-t-lg py-4 text-blue-200">
<svg class="w-5 h-5" style="transform: rotate(-5deg)"> <svg class="h-5 w-5" style="transform: rotate(-5deg)">
<use xlink:href="#people" /> <use xlink:href="#people" />
</svg> </svg>
<span class="mx-4 text-lg font-semibold uppercase">FRIENDS</span> <span class="mx-4 text-lg font-semibold uppercase">FRIENDS</span>
<svg class="w-5 h-5" style="transform: rotate(5deg)"> <svg class="h-5 w-5" style="transform: rotate(5deg)">
<use xlink:href="#people" /> <use xlink:href="#people" />
</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-left text-sm">
<div class="flex items-baseline text-xs font-semibold text-blue-300 uppercase"> <div class="flex items-baseline text-xs font-semibold uppercase text-blue-300">
<div class="w-2/4 text-base text-blue-400">Summoner</div> <div class="w-2/4 text-base text-blue-400">Summoner</div>
<div class="w-1/4">Record</div> <div class="w-1/4">Record</div>
<div class="w-1/4">Winrate</div> <div class="w-1/4">Winrate</div>
@ -31,7 +31,7 @@
<div class="w-1/4"> <div class="w-1/4">
<Tooltip> <Tooltip>
<template #trigger> <template #trigger>
<div class="h-2 bg-blue-900 rounded-full cursor-pointer"> <div class="h-2 cursor-pointer rounded-full bg-blue-900">
<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)}%` }"
@ -40,7 +40,7 @@
</div> </div>
</template> </template>
<template #default> <template #default>
<div class="px-2 text-xs text-center text-white"> <div class="px-2 text-center text-xs text-white">
<div>Winrate</div> <div>Winrate</div>
<div> <div>
<span <span

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

@ -1,27 +1,27 @@
<template> <template>
<div v-if="stats.global" class="mt-4 bg-blue-800 rounded-lg"> <div v-if="stats.global" class="mt-4 rounded-lg bg-blue-800">
<div class="relative flex justify-center py-4 text-blue-200 rounded-t-lg heading"> <div class="heading relative flex justify-center rounded-t-lg py-4 text-blue-200">
<svg class="w-6 h-6"> <svg class="h-6 w-6">
<use xlink:href="#graph" /> <use xlink:href="#graph" />
</svg> </svg>
<span class="mx-4 text-lg font-semibold uppercase">STATS</span> <span class="mx-4 text-lg font-semibold uppercase">STATS</span>
<svg class="w-6 h-6" style="transform: scaleX(-1)"> <svg class="h-6 w-6" style="transform: scaleX(-1)">
<use xlink:href="#graph" /> <use xlink:href="#graph" />
</svg> </svg>
<div class="absolute top-0 right-0 mt-3 mr-2"> <div class="absolute right-0 top-0 mr-2 mt-3">
<Tooltip> <Tooltip>
<template #trigger> <template #trigger>
<svg class="w-4 h-4 cursor-pointer"> <svg class="h-4 w-4 cursor-pointer">
<use xlink:href="#info" /> <use xlink:href="#info" />
</svg> </svg>
</template> </template>
<template #default> <template #default>
<div class="px-2 text-sm text-center text-white select-none"> <div class="select-none px-2 text-center text-sm text-white">
<div>Stats based on</div> <div>Stats based on</div>
<div> <div>
<span class="font-bold text-teal-400">{{ stats.global.count }}</span> matches <span class="font-bold text-teal-400">{{ stats.global.count }}</span> matches
</div> </div>
<div class="mt-2 text-xs italic font-normal leading-tight text-blue-100"> <div class="mt-2 text-xs font-normal italic leading-tight text-blue-100">
Load more matches Load more matches
<br />to have better results. <br />to have better results.
</div> </div>
@ -30,15 +30,15 @@
</Tooltip> </Tooltip>
</div> </div>
</div> </div>
<div class="flex items-center py-2 mt-2"> <div class="mt-2 flex items-center py-2">
<div <div
v-for="(role, index) in stats.role" v-for="(role, index) in stats.role"
:key="index" :key="index"
class="flex flex-col items-center w-1/5" class="flex w-1/5 flex-col items-center"
> >
<Tooltip> <Tooltip>
<template #trigger> <template #trigger>
<div class="flex flex-col justify-end w-2 h-12 bg-blue-900 rounded-full cursor-pointer"> <div class="flex h-12 w-2 cursor-pointer flex-col justify-end rounded-full bg-blue-900">
<div <div
:style="{ :style="{
height: (((role.count * 3) / mostPlayedRole) * role.wins) / role.count + 'rem', height: (((role.count * 3) / mostPlayedRole) * role.wins) / role.count + 'rem',
@ -56,7 +56,7 @@
</div> </div>
</template> </template>
<template #default> <template #default>
<div class="px-2 text-sm text-center text-white select-none"> <div class="select-none px-2 text-center text-sm text-white">
<div>{{ role.role | capitalize }}</div> <div>{{ role.role | capitalize }}</div>
<span :class="winLossColor(role.wins, role.losses).win" class="font-bold">{{ <span :class="winLossColor(role.wins, role.losses).win" class="font-bold">{{
role.wins role.wins
@ -73,14 +73,14 @@
</Tooltip> </Tooltip>
<div <div
:style="{ backgroundImage: `url(${'/img/roles/' + role.role + '.png'})` }" :style="{ backgroundImage: `url(${'/img/roles/' + role.role + '.png'})` }"
class="w-4 h-4 mt-1 bg-center bg-cover" class="mt-1 h-4 w-4 bg-cover bg-center"
></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-center text-sm">
<div class="flex items-baseline px-4 text-xs font-semibold text-blue-300 uppercase"> <div class="flex items-baseline px-4 text-xs font-semibold uppercase text-blue-300">
<div class="w-1/4 text-base text-left text-blue-400">Stat</div> <div class="w-1/4 text-left text-base 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>
@ -97,26 +97,26 @@
<div class="w-1/4">{{ (stat / (stats.global.time / 60)) | round }}</div> <div class="w-1/4">{{ (stat / (stats.global.time / 60)) | round }}</div>
<div class="w-1/4">{{ (stat / stats.global.count) | round }}</div> <div class="w-1/4">{{ (stat / stats.global.count) | round }}</div>
</li> </li>
<li class="flex items-center justify-between px-4 py-1 leading-tight bg-blue-760"> <li class="flex items-center justify-between bg-blue-760 px-4 py-1 leading-tight">
<div class="w-1/4 text-left whitespace-nowrap">Time</div> <div class="w-1/4 whitespace-nowrap text-left">Time</div>
<div class="w-1/4">{{ stats.global.time | secToHours }}</div> <div class="w-1/4">{{ stats.global.time | secToHours }}</div>
<div class="w-1/4"></div> <div class="w-1/4"></div>
<div class="w-1/4">{{ (stats.global.time / stats.global.count) | secToTime(true) }}</div> <div class="w-1/4">{{ (stats.global.time / stats.global.count) | secToTime(true) }}</div>
</li> </li>
<li class="flex items-center justify-between px-4 py-1 leading-tight"> <li class="flex items-center justify-between px-4 py-1 leading-tight">
<div class="w-1/4 text-left whitespace-nowrap">KDA</div> <div class="w-1/4 whitespace-nowrap text-left">KDA</div>
<div class="w-1/4"> <div class="w-1/4">
{{ ((stats.global.kills + stats.global.assists) / stats.global.deaths) | round }} {{ ((stats.global.kills + stats.global.assists) / stats.global.deaths) | round }}
</div> </div>
</li> </li>
<li class="flex items-center justify-between px-4 py-1 leading-tight bg-blue-760"> <li class="flex items-center justify-between bg-blue-760 px-4 py-1 leading-tight">
<div class="w-1/4 text-left whitespace-nowrap">Kill participation</div> <div class="w-1/4 whitespace-nowrap text-left">Kill participation</div>
<div class="w-1/4">{{ stats.global.kp | percent }}</div> <div class="w-1/4">{{ stats.global.kp | percent }}</div>
</li> </li>
</ul> </ul>
<template v-if="leagueStatsByType('Ranked').length"> <template v-if="leagueStatsByType('Ranked').length">
<div class="flex items-baseline px-4 mt-3 text-xs font-semibold text-blue-300 uppercase"> <div class="mt-3 flex items-baseline px-4 text-xs font-semibold uppercase text-blue-300">
<div class="w-5/12 text-base text-left text-blue-400">Ranked</div> <div class="w-5/12 text-left text-base text-blue-400">Ranked</div>
<div class="w-3/12">Winrate</div> <div class="w-3/12">Winrate</div>
<div class="w-4/12">Record</div> <div class="w-4/12">Record</div>
</div> </div>
@ -144,8 +144,8 @@
</ul> </ul>
</template> </template>
<template v-if="leagueStatsByType('Normal').length"> <template v-if="leagueStatsByType('Normal').length">
<div class="flex items-baseline px-4 mt-3 text-xs font-semibold text-blue-300 uppercase"> <div class="mt-3 flex items-baseline px-4 text-xs font-semibold uppercase text-blue-300">
<div class="w-5/12 text-base text-left text-blue-400">Normal</div> <div class="w-5/12 text-left text-base text-blue-400">Normal</div>
<div class="w-3/12">Winrate</div> <div class="w-3/12">Winrate</div>
<div class="w-4/12">Record</div> <div class="w-4/12">Record</div>
</div> </div>
@ -173,8 +173,8 @@
</ul> </ul>
</template> </template>
<div class="flex items-baseline px-4 mt-3 text-xs font-semibold text-blue-300 uppercase"> <div class="mt-3 flex items-baseline px-4 text-xs font-semibold uppercase text-blue-300">
<div class="w-5/12 text-base text-left text-blue-400">Class</div> <div class="w-5/12 text-left text-base text-blue-400">Class</div>
<div class="w-3/12">Winrate</div> <div class="w-3/12">Winrate</div>
<div class="w-4/12">Record</div> <div class="w-4/12">Record</div>
</div> </div>

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

@ -1,14 +1,14 @@
<template> <template>
<div> <div>
<div class="inline-block bg-blue-800 rounded-lg"> <div class="inline-block rounded-lg bg-blue-800">
<div <div
class="relative flex items-center justify-center py-2 text-blue-200 rounded-t-lg heading" class="heading relative flex items-center justify-center rounded-t-lg py-2 text-blue-200"
> >
<svg class="w-4 h-4"> <svg class="h-4 w-4">
<use xlink:href="#time" /> <use xlink:href="#time" />
</svg> </svg>
<span class="mx-3 text-sm font-bold uppercase">Recent Activity</span> <span class="mx-3 text-sm font-bold uppercase">Recent Activity</span>
<svg class="w-4 h-4"> <svg class="h-4 w-4">
<use xlink:href="#time" /> <use xlink:href="#time" />
</svg> </svg>
</div> </div>
@ -19,7 +19,7 @@
<span class="ml-16 text-xs font-semibold text-blue-200">{{ gridDays[73].month }}</span> <span class="ml-16 text-xs font-semibold text-blue-200">{{ gridDays[73].month }}</span>
<span class="ml-16 text-xs font-semibold text-blue-200">{{ gridDays[104].month }}</span> <span class="ml-16 text-xs font-semibold text-blue-200">{{ gridDays[104].month }}</span>
</div> </div>
<div class="flex mt-1"> <div class="mt-1 flex">
<div class="flex flex-col"> <div class="flex flex-col">
<span class="text-xs font-semibold leading-snug text-blue-200">Mo</span> <span class="text-xs font-semibold leading-snug text-blue-200">Mo</span>
<span class="mt-1 text-xs font-semibold leading-snug text-blue-200">Tu</span> <span class="mt-1 text-xs font-semibold leading-snug text-blue-200">Tu</span>
@ -30,20 +30,20 @@
<span class="mt-1 text-xs font-semibold leading-snug text-blue-200">Su</span> <span class="mt-1 text-xs font-semibold leading-snug text-blue-200">Su</span>
</div> </div>
<div <div
class="flex flex-col flex-wrap ml-1" class="ml-1 flex flex-col flex-wrap"
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 #trigger> <template #trigger>
<div <div
:class="[getCaseMargin(index), getCaseColor(day.matches)]" :class="[getCaseMargin(index), getCaseColor(day.matches)]"
class="w-4 h-4 ml-1 cursor-pointer" class="ml-1 h-4 w-4 cursor-pointer"
/> />
</template> </template>
<template #default> <template #default>
<div class="px-2 text-xs text-center text-blue-200 leading-5"> <div class="px-2 text-center text-xs leading-5 text-blue-200">
<div> <div>
<span class="text-white font-semibold">{{ day.date }}</span> <span class="font-semibold text-white">{{ day.date }}</span>
<span>: </span> <span>: </span>
<span class="font-bold text-teal-400">{{ day.matches }}</span> <span class="font-bold text-teal-400">{{ day.matches }}</span>
<span> {{ day.matches > 1 ? 'games' : 'game' }}</span> <span> {{ day.matches > 1 ? 'games' : 'game' }}</span>

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

@ -9,7 +9,7 @@
}/${record.champion_id}000.jpg')`, }/${record.champion_id}000.jpg')`,
}" }"
:class="borderColor" :class="borderColor"
class="relative w-full p-4 mx-2 mt-6 leading-none bg-center bg-cover border rounded-lg record-card" class="record-card relative mx-2 mt-6 w-full rounded-lg border bg-cover bg-center p-4 leading-none"
> >
<div <div
:class="[ :class="[
@ -17,14 +17,14 @@
title.length > 15 ? 'text-sm' : 'text-base', title.length > 15 ? 'text-sm' : 'text-base',
]" ]"
:style="{ borderColor: hover ? color : 'transparent' }" :style="{ borderColor: hover ? color : 'transparent' }"
class="absolute top-0 left-0 px-3 py-2 mt-2 ml-2 font-medium leading-4 transition-colors duration-500 ease-in-out border border-transparent rounded-md" class="absolute left-0 top-0 ml-2 mt-2 rounded-md border border-transparent px-3 py-2 font-medium leading-4 transition-colors duration-500 ease-in-out"
> >
<span :class="textColor" class="ml-0">{{ title }}</span> <span :class="textColor" class="ml-0">{{ title }}</span>
</div> </div>
<img <img
:src="`https://raw.communitydragon.org/latest/plugins/rcp-be-lol-game-data/global/default/v1/champion-icons/${record.champion_id}.png`" :src="`https://raw.communitydragon.org/latest/plugins/rcp-be-lol-game-data/global/default/v1/champion-icons/${record.champion_id}.png`"
:class="[{ 'opacity-0 scale-125': hover }, borderColor]" :class="[{ 'scale-125 opacity-0': hover }, borderColor]"
class="block w-16 h-16 mx-auto mt-10 transition duration-500 ease-in transform border-2 rounded-full" class="mx-auto mt-10 block h-16 w-16 transform rounded-full border-2 transition duration-500 ease-in"
alt="Champion Played" alt="Champion Played"
/> />
<div :style="{ textShadow: `-2px 1px 6px ${color}` }" class="mt-6 text-4xl"> <div :style="{ textShadow: `-2px 1px 6px ${color}` }" class="mt-6 text-4xl">
@ -43,7 +43,7 @@
<span class="font-semibold text-white">{{ record.champion.name }}</span> <span class="font-semibold text-white">{{ record.champion.name }}</span>
</div> </div>
</div> </div>
<div class="mt-6 text-xs font-light text-right text-gray-200 opacity-25"> <div class="mt-6 text-right text-xs font-light text-gray-200 opacity-25">
<span v-if="hover">{{ record.id }}</span> <span v-if="hover">{{ record.id }}</span>
<span v-else>{{ gameModes[record.gamemode].name }}</span> <span v-else>{{ gameModes[record.gamemode].name }}</span>
</div> </div>

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

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

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

@ -1,5 +1,5 @@
<template> <template>
<div class="flex flex-col min-h-screen overflow-hidden bg-blue-900"> <div class="flex min-h-screen flex-col overflow-hidden bg-blue-900">
<LazyBackground <LazyBackground
image-source="/img/bg-homepage-1.jpg" image-source="/img/bg-homepage-1.jpg"
image-class="absolute z-0 w-full h-[50rem]" image-class="absolute z-0 w-full h-[50rem]"
@ -9,10 +9,10 @@
<header <header
:class="bgHeader ? 'header-scrolled' : 'bg-transparent'" :class="bgHeader ? 'header-scrolled' : 'bg-transparent'"
class="fixed left-0 right-0 z-20 px-4 text-teal-100 transition-colors duration-100 ease-in-out border-b-2 header" class="header fixed left-0 right-0 z-20 border-b-2 px-4 text-teal-100 transition-colors duration-100 ease-in-out"
style="border-color: rgba(144, 205, 244, 0.4)" style="border-color: rgba(144, 205, 244, 0.4)"
> >
<div class="flex items-center justify-between py-2 -mb-0.5"> <div class="-mb-0.5 flex items-center justify-between py-2">
<div class="flex flex-1"> <div class="flex flex-1">
<router-link to="/"> <router-link to="/">
<img class="block h-10" src="/img/Logo.svg" alt="LeagueStats logo" /> <img class="block h-10" src="/img/Logo.svg" alt="LeagueStats logo" />
@ -23,7 +23,7 @@
<div class="flex-1"> <div class="flex-1">
<div class="flex items-center justify-end"> <div class="flex items-center justify-end">
<a class="relative text-sm discord" href="https://discord.gg/RjBzjfk" target="_blank"> <a class="discord relative text-sm" href="https://discord.gg/RjBzjfk" target="_blank">
<svg <svg
class="absolute fill-current" class="absolute fill-current"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@ -44,7 +44,7 @@
</div> </div>
</header> </header>
<div class="relative z-10 flex-grow mx-auto mt-20 text-white page-wrapper"> <div class="page-wrapper relative z-10 mx-auto mt-20 flex-grow text-white">
<template v-if="summonerLoading || summonerFound"> <template v-if="summonerLoading || summonerFound">
<template v-if="summonerLoading"> <template v-if="summonerLoading">
<HeaderLoader /> <HeaderLoader />
@ -52,7 +52,7 @@
<template v-else-if="summonerFound"> <template v-else-if="summonerFound">
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<div> <div>
<div class="flex items-center mt-2"> <div class="mt-2 flex items-center">
<Tooltip> <Tooltip>
<template #trigger> <template #trigger>
<h1 class="text-4xl font-extrabold"> <h1 class="text-4xl font-extrabold">
@ -62,10 +62,10 @@
<template #default> <template #default>
<div <div
v-if="basic.account.names.length > 1" v-if="basic.account.names.length > 1"
class="px-2 text-sm text-center text-white select-none" class="select-none px-2 text-center text-sm text-white"
> >
<div>Old summoner names</div> <div>Old summoner names</div>
<ul class="pl-2 text-left list-disc list-inside"> <ul class="list-inside list-disc pl-2 text-left">
<li <li
v-for="name in basic.account.names.slice(0, -1)" v-for="name in basic.account.names.slice(0, -1)"
:key="name.date" :key="name.date"
@ -79,33 +79,33 @@
</Tooltip> </Tooltip>
<div <div
v-if="playing" v-if="playing"
class="flex items-center px-3 py-1 mt-2 ml-4 bg-teal-800 border border-teal-400 rounded-full" class="ml-4 mt-2 flex items-center rounded-full border border-teal-400 bg-teal-800 px-3 py-1"
> >
<div class="w-2 h-2 rounded-full playing-dot bg-teal-flashy"></div> <div class="playing-dot h-2 w-2 rounded-full bg-teal-flashy"></div>
<span class="ml-2 text-sm font-semibold text-teal-flashy">In Game</span> <span class="ml-2 text-sm font-semibold text-teal-flashy">In Game</span>
</div> </div>
<div <div
v-if="false" v-if="false"
class="inline-flex items-center px-2 py-1 mt-2 ml-4 leading-tight border border-teal-500 rounded" class="ml-4 mt-2 inline-flex items-center rounded border border-teal-500 px-2 py-1 leading-tight"
style="background: rgba(40, 94, 97, 0.35)" style="background: rgba(40, 94, 97, 0.35)"
> >
<svg class="w-4 h-4 text-teal-600"> <svg class="h-4 w-4 text-teal-600">
<use xlink:href="#star" /> <use xlink:href="#star" />
</svg> </svg>
<div class="ml-1 text-xs font-bold text-teal-200">Favorite</div> <div class="ml-1 text-xs font-bold text-teal-200">Favorite</div>
</div> </div>
</div> </div>
<div class="flex mt-2"> <div class="mt-2 flex">
<div :class="{ playing: playing }" class="relative w-24 h-24"> <div :class="{ playing: playing }" class="relative h-24 w-24">
<div <div
:class="{ 'border-2': !playing }" :class="{ 'border-2': !playing }"
class="relative z-10 w-24 h-24 bg-center bg-cover border-teal-400 rounded-full bg-blue-1000" class="relative z-10 h-24 w-24 rounded-full border-teal-400 bg-blue-1000 bg-cover bg-center"
:style="{ :style="{
backgroundImage: `url('https://raw.communitydragon.org/latest/plugins/rcp-be-lol-game-data/global/default/v1/profile-icons/${basic.account.profileIconId}.jpg')`, backgroundImage: `url('https://raw.communitydragon.org/latest/plugins/rcp-be-lol-game-data/global/default/v1/profile-icons/${basic.account.profileIconId}.jpg')`,
}" }"
> >
<div <div
class="absolute bottom-0 left-0 flex items-center justify-center w-8 h-8 text-xs font-extrabold text-teal-500 bg-blue-900 border-2 border-teal-400 rounded-full" class="absolute bottom-0 left-0 flex h-8 w-8 items-center justify-center rounded-full border-2 border-teal-400 bg-blue-900 text-xs font-extrabold text-teal-500"
> >
{{ basic.account.summonerLevel }} {{ basic.account.summonerLevel }}
</div> </div>
@ -132,7 +132,7 @@
params: { region: $route.params.region, name: $route.params.name }, params: { region: $route.params.region, name: $route.params.name },
}" }"
:class="isRouteActive('summoner')" :class="isRouteActive('summoner')"
class="pb-2 text-blue-300 border-b-2 border-transparent cursor-pointer hover:text-blue-100" class="cursor-pointer border-b-2 border-transparent pb-2 text-blue-300 hover:text-blue-100"
exact exact
>Overview</router-link >Overview</router-link
> >
@ -142,7 +142,7 @@
params: { region: $route.params.region, name: $route.params.name }, params: { region: $route.params.region, name: $route.params.name },
}" }"
:class="isRouteActive('summonerChampions')" :class="isRouteActive('summonerChampions')"
class="pb-2 ml-4 text-blue-300 border-b-2 border-transparent cursor-pointer hover:text-blue-100" class="ml-4 cursor-pointer border-b-2 border-transparent pb-2 text-blue-300 hover:text-blue-100"
exact exact
>Champions</router-link >Champions</router-link
> >
@ -152,7 +152,7 @@
params: { region: $route.params.region, name: $route.params.name }, params: { region: $route.params.region, name: $route.params.name },
}" }"
:class="isRouteActive('summonerRecords')" :class="isRouteActive('summonerRecords')"
class="pb-2 ml-4 text-blue-300 border-b-2 border-transparent cursor-pointer hover:text-blue-100" class="ml-4 cursor-pointer border-b-2 border-transparent pb-2 text-blue-300 hover:text-blue-100"
exact exact
>Records</router-link >Records</router-link
> >
@ -162,7 +162,7 @@
params: { region: $route.params.region, name: $route.params.name }, params: { region: $route.params.region, name: $route.params.name },
}" }"
:class="isRouteActive('summonerLive')" :class="isRouteActive('summonerLive')"
class="pb-2 ml-4 text-blue-300 border-b-2 border-transparent cursor-pointer hover:text-blue-100" class="ml-4 cursor-pointer border-b-2 border-transparent pb-2 text-blue-300 hover:text-blue-100"
exact exact
>Live game</router-link >Live game</router-link
> >
@ -182,8 +182,8 @@
</template> </template>
<template v-else-if="summonerNotFound"> <template v-else-if="summonerNotFound">
<div class="flex justify-center mt-16"> <div class="mt-16 flex justify-center">
<div class="px-4 py-3 text-lg font-bold text-center text-blue-100 rounded-lg bg-gradient"> <div class="bg-gradient rounded-lg px-4 py-3 text-center text-lg font-bold text-blue-100">
<div>Player can't be found.</div> <div>Player can't be found.</div>
<div>😕</div> <div>😕</div>
</div> </div>

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

@ -6,22 +6,22 @@
transition-name="fade" transition-name="fade"
></LazyBackground> ></LazyBackground>
<div class="flex flex-col items-center justify-center h-screen"> <div class="flex h-screen flex-col items-center justify-center">
<div class="absolute top-0 right-0"> <div class="absolute right-0 top-0">
<div class="relative w-20 h-2 mt-4 mr-4 line line-top"></div> <div class="line line-top relative mr-4 mt-4 h-2 w-20"></div>
</div> </div>
<div class="absolute bottom-0 left-0"> <div class="absolute bottom-0 left-0">
<div class="relative w-20 h-2 mb-4 ml-4 line line-bottom"></div> <div class="line line-bottom relative mb-4 ml-4 h-2 w-20"></div>
</div> </div>
<div class="relative flex flex-col items-center w-full max-w-lg"> <div class="relative flex w-full max-w-lg flex-col items-center">
<img class="absolute logo" src="/img/Logo.svg" alt="logo" /> <img class="logo absolute" src="/img/Logo.svg" alt="logo" />
<SearchForm @formSubmit="redirect" :homepage="true" /> <SearchForm @formSubmit="redirect" :homepage="true" />
</div> </div>
<p <p
class="absolute bottom-0 pb-4 leading-tight text-center text-blue-300 horizontal-center text-xxs" class="horizontal-center absolute bottom-0 pb-4 text-center text-xxs leading-tight text-blue-300"
> >
LeagueStats.gg isn't endorsed by Riot Games and doesn't reflect the views or opinions of 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. Riot Games or anyone officially involved in producing or managing Riot Games properties.

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

@ -2,12 +2,12 @@
<div <div
v-if="overviewLoaded" v-if="overviewLoaded"
key="overview" key="overview"
class="relative flex items-start justify-between mt-3 text-center vue-sticky-container" class="vue-sticky-container relative mt-3 flex items-start justify-between text-center"
> >
<VueStickySidebar <VueStickySidebar
:top-spacing="48" :top-spacing="48"
:bottom-spacing="123" :bottom-spacing="123"
class="z-40 sidebar" class="sidebar z-40"
container-selector=".vue-sticky-container" container-selector=".vue-sticky-container"
> >
<SummonerChampions /> <SummonerChampions />
@ -37,7 +37,7 @@
</div> </div>
<div v-else> <div v-else>
<div class="flex justify-center"> <div class="flex justify-center">
<div class="px-4 py-3 text-lg font-bold text-center text-blue-100 rounded-lg bg-gradient"> <div class="bg-gradient rounded-lg px-4 py-3 text-center text-lg font-bold text-blue-100">
<div>No matches found.</div> <div>No matches found.</div>
<div>😕</div> <div>😕</div>
</div> </div>

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

@ -1,7 +1,7 @@
<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="flex items-center justify-end -mt-4 text-base text-blue-200"> <div v-if="liveLoaded" class="-mt-4 flex items-center justify-end 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 :class="{ 'w-12': displayStartTime !== 'Not started yet' }"> <div :class="{ 'w-12': displayStartTime !== 'Not started yet' }">
@ -9,7 +9,7 @@
</div> </div>
<button <button
@click="liveMatchRequest" @click="liveMatchRequest"
class="px-3 py-1 ml-4 text-blue-100 bg-blue-800 rounded-md shadow-md hover:bg-blue-760" class="ml-4 rounded-md bg-blue-800 px-3 py-1 text-blue-100 shadow-md hover:bg-blue-760"
> >
Reload Reload
</button> </button>
@ -20,13 +20,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="flex justify-center mt-16"> <div class="mt-16 flex justify-center">
<div class="px-4 py-3 text-lg font-bold text-center text-blue-100 rounded-lg bg-gradient"> <div class="bg-gradient rounded-lg px-4 py-3 text-center text-lg font-bold text-blue-100">
<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="px-3 py-1 my-4 text-sm text-blue-100 bg-blue-800 rounded-md shadow-md hover:bg-blue-760" class="my-4 rounded-md bg-blue-800 px-3 py-1 text-sm text-blue-100 shadow-md hover:bg-blue-760"
> >
Reload Reload
</button> </button>

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

@ -2,11 +2,11 @@
<div key="records"> <div key="records">
<template v-if="!recordsLoaded || (recordsLoaded && records.assists)"> <template v-if="!recordsLoaded || (recordsLoaded && records.assists)">
<div <div
class="relative pl-6 text-2xl text-blue-200 border-b-2 border-blue-800 category blue-900" class="category blue-900 relative border-b-2 border-blue-800 pl-6 text-2xl text-blue-200"
> >
Basics Basics
</div> </div>
<div class="flex flex-wrap -mx-2"> <div class="-mx-2 flex flex-wrap">
<template v-if="recordsLoaded"> <template v-if="recordsLoaded">
<RecordCard <RecordCard
color="#63b3ed" color="#63b3ed"
@ -71,11 +71,11 @@
</template> </template>
</div> </div>
<div <div
class="relative pl-6 mt-3 text-2xl text-blue-200 border-b-2 border-blue-800 blue-900 category" class="blue-900 category relative mt-3 border-b-2 border-blue-800 pl-6 text-2xl text-blue-200"
> >
Game impact Game impact
</div> </div>
<div class="flex flex-wrap -mx-2"> <div class="-mx-2 flex flex-wrap">
<template v-if="recordsLoaded"> <template v-if="recordsLoaded">
<RecordCard <RecordCard
color="#FC8181" color="#FC8181"
@ -140,10 +140,10 @@
</div> </div>
</template> </template>
</div> </div>
<div class="relative pl-6 mt-3 text-2xl text-blue-200 border-b-2 border-blue-800 category"> <div class="category relative mt-3 border-b-2 border-blue-800 pl-6 text-2xl text-blue-200">
Miscellaneous Miscellaneous
</div> </div>
<div class="flex flex-wrap -mx-2"> <div class="-mx-2 flex flex-wrap">
<template v-if="recordsLoaded"> <template v-if="recordsLoaded">
<RecordCard <RecordCard
color="#4299E1" color="#4299E1"
@ -193,10 +193,10 @@
</div> </div>
</template> </template>
</div> </div>
<div class="relative pl-6 mt-3 text-2xl text-blue-200 border-b-2 border-blue-800 category"> <div class="category relative mt-3 border-b-2 border-blue-800 pl-6 text-2xl text-blue-200">
Multi kills Multi kills
</div> </div>
<div class="flex flex-wrap -mx-2"> <div class="-mx-2 flex flex-wrap">
<template v-if="recordsLoaded"> <template v-if="recordsLoaded">
<RecordCard <RecordCard
color="#FEFCBF" color="#FEFCBF"
@ -255,7 +255,7 @@
</div> </div>
</template> </template>
<template v-if="recordsLoaded && !records.assists"> <template v-if="recordsLoaded && !records.assists">
<div class="flex flex-col items-center mt-4"> <div class="mt-4 flex flex-col items-center">
<div>No records have been found.</div> <div>No records have been found.</div>
<div>😕</div> <div>😕</div>
</div> </div>
@ -314,7 +314,7 @@ export default {
<style scoped> <style scoped>
.category:before { .category:before {
@apply w-2 h-2 bg-blue-200 absolute block left-0 ml-1; @apply absolute left-0 ml-1 block h-2 w-2 bg-blue-200;
content: ''; content: '';
top: 35%; top: 35%;
transform: rotate(45deg); transform: rotate(45deg);