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",
"postcss": "^8.4.30",
"postcss-import": "^12.0.1",
"prettier": "^3.0.3",
"prettier-plugin-tailwindcss": "^0.5.4",
"tailwindcss": "^3.3.3",
"vite": "^4.4.5",
"vite-plugin-eslint": "^1.8.1"
@ -4421,7 +4423,6 @@
"resolved": "https://registry.npmjs.org/prettier/-/prettier-3.0.3.tgz",
"integrity": "sha512-L/4pUDMxcNa8R/EthV08Zt42WBO4h1rarVtK0K+QJG0X187OLo7l699jWw0GKuwzkPQ//jMFA/8Xm6Fh3J/DAg==",
"dev": true,
"peer": true,
"bin": {
"prettier": "bin/prettier.cjs"
},
@ -4444,6 +4445,78 @@
"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": {
"version": "1.1.0",
"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",
"postcss": "^8.4.30",
"postcss-import": "^12.0.1",
"prettier": "^3.0.3",
"prettier-plugin-tailwindcss": "^0.5.4",
"tailwindcss": "^3.3.3",
"vite": "^4.4.5",
"vite-plugin-eslint": "^1.8.1"

2
client/src/App.vue
View file

@ -1,5 +1,5 @@
<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 />
<NotificationsContainer />
<RunesContainer />

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

@ -21,11 +21,11 @@
}
::selection {
@apply text-white bg-blue-1000;
@apply bg-blue-1000 text-white;
}
::-moz-selection {
@apply text-white bg-blue-1000;
@apply bg-blue-1000 text-white;
}
.min-w-1200 {
@ -74,15 +74,15 @@ button:focus {
/* 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);
}
.form-checkbox:focus {
@apply bg-blue-1000 border-blue-700 outline-none;
@apply border-blue-700 bg-blue-1000 outline-none;
box-shadow: none;
}
.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-enter-active {
@apply transition-all duration-75 ease-out transform;
@apply transform transition-all duration-75 ease-out;
}
.scale-fade-leave-active {
@apply transition-all duration-75 ease-in transform;
@apply transform transition-all duration-75 ease-in;
}
.scale-fade-enter,

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

@ -4,10 +4,10 @@
class="relative"
style="transform: rotateZ(45deg)"
>
<div class="relative float-left w-1/2 cube-1 cube h-1/2"></div>
<div class="relative float-left w-1/2 cube-2 cube h-1/2"></div>
<div class="relative float-left w-1/2 cube-4 cube h-1/2"></div>
<div class="relative float-left w-1/2 cube-3 cube h-1/2"></div>
<div class="cube-1 cube relative float-left h-1/2 w-1/2"></div>
<div class="cube-2 cube relative float-left h-1/2 w-1/2"></div>
<div class="cube-4 cube relative float-left h-1/2 w-1/2"></div>
<div class="cube-3 cube relative float-left h-1/2 w-1/2"></div>
</div>
</template>
@ -37,7 +37,7 @@ export default {
.cube:before {
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;
transform-origin: 100% 100%;
}

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

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

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

@ -1,14 +1,14 @@
<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
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"
tag="div"
>
<div
v-for="ripple in ripples"
: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="{
top: ripple.top,
left: ripple.left,

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

@ -17,7 +17,7 @@
<div
v-show="isOpen"
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 }"
>
<slot></slot>

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

@ -7,18 +7,18 @@
type="button"
>
<slot>Send</slot>
<span class="spinner absolute opacity-0 left-auto">
<span class="spinner absolute left-auto opacity-0">
<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
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
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
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>
</button>

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

@ -2,7 +2,7 @@
<form
@submit.prevent="formSubmit"
: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
v-if="open"
@ -17,7 +17,7 @@
v-model="summoner"
@focus="open = true"
: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"
type="text"
placeholder="Search summoner"
@ -25,21 +25,21 @@
<button
v-if="homepage"
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"
>
<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" />
</svg>
</button>
<button
v-if="!homepage"
@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"
>
<div class="flex items-center space-x-3">
<svg class="w-4 h-4">
<svg class="h-4 w-4">
<use xlink:href="#search" />
</svg>
<span>Search summoner (Press "/" to focus)</span>

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

@ -1,13 +1,13 @@
<template>
<div
: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="pt-3">
<div v-if="!homepage" class="relative px-3 bypass-click">
<button class="absolute w-12 h-full text-blue-200 hover:text-white" type="submit">
<svg class="absolute w-4 h-4 vertical-center horizontal-center">
<div v-if="!homepage" class="bypass-click relative px-3">
<button class="absolute h-full w-12 text-blue-200 hover:text-white" type="submit">
<svg class="vertical-center horizontal-center absolute h-4 w-4">
<use xlink:href="#search" />
</svg>
</button>
@ -15,7 +15,7 @@
ref="input"
@input="$emit('input', $event.target.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"
placeholder="Search summoner"
spellcheck="false"
@ -23,10 +23,10 @@
<button
v-if="!homepage && value.length"
@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"
>
<svg class="w-4 h-4">
<svg class="h-4 w-4">
<use xlink:href="#times" />
</svg>
</button>
@ -36,12 +36,12 @@
</div>
<div
: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 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">
<svg class="w-4 h-4 text-blue-100">
<svg class="h-4 w-4 text-blue-100">
<use xlink:href="#info" />
</svg>
<div class="text-base text-blue-100">Summoner example</div>
@ -99,24 +99,24 @@
</div>
</div>
</div>
<div class="px-4 py-4 bg-blue-1000 rounded-b-md">
<div class="flex items-center justify-between select-none text-xxs">
<div class="rounded-b-md bg-blue-1000 px-4 py-4">
<div class="flex select-none items-center justify-between text-xxs">
<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>
</div>
<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
>
<span>to navigate</span>
</div>
<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>
</div>
<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>
</div>
</div>
@ -282,6 +282,9 @@ export default {
<style scoped>
.key {
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>

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

@ -4,19 +4,19 @@
:to="{ name: 'summoner', params: { region: player.region, name: player.name } }"
:title="player.name"
: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"
>
<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" />
</svg>
<svg v-else class="w-5 h-5">
<svg v-else class="h-5 w-5">
<use xlink:href="#time" />
</svg>
<div class="w-20">
<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 }}
</div>
@ -25,7 +25,7 @@
:style="{
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 class="ml-2 text-base">{{ player.name }}</div>
</div>
@ -33,17 +33,17 @@
<button
v-if="!favoritesList"
@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" />
</svg>
</button>
<button
@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" />
</svg>
</button>

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

@ -2,15 +2,15 @@
<div>
<div
: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
@click="toggle"
: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>
<svg class="w-4 h-4 ml-1 -mr-1">
<span class="selected select-none font-bold uppercase">{{ selectedRegion }}</span>
<svg class="-mr-1 ml-1 h-4 w-4">
<use xlink:href="#caret-down" />
</svg>
</div>
@ -19,18 +19,18 @@
<div
v-show="dropdown"
: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
v-for="(region, index) in regions"
:key="region"
@click="selectRegion(region)"
: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
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"
viewBox="0 0 512 512"
>

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

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

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

@ -5,14 +5,14 @@
'bg-red-500': notification.type === 'error',
'bg-green-500': notification.type === 'success',
}"
class="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"
>
<button
@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
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>
<footer class="pt-20 pb-4 text-blue-200">
<footer class="pb-4 pt-20 text-blue-200">
<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"
>
LeagueStats.gg isn't endorsed by Riot Games and doesn't reflect the views or opinions of Riot
@ -130,7 +130,7 @@
</a>
</p>
<a
class="relative text-sm github"
class="github relative text-sm"
href="https://github.com/vkaelin/LeagueStats"
target="_blank"
>

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

@ -1,6 +1,6 @@
<template>
<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
:data="allyTeam"
:all-players="[...allyTeam.players, ...enemyTeam.players]"
@ -28,7 +28,7 @@
/>
</div>
<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 />
</div>
</div>

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

@ -10,30 +10,30 @@
<template #trigger>
<div
: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
: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
: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 }}
</div>
</div>
</template>
<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>
</template>
</Tooltip>
</div>
<div
:class="allyTeam ? 'text-left' : 'text-right flex-row-reverse'"
class="flex mt-2 leading-tight"
:class="allyTeam ? 'text-left' : 'flex-row-reverse text-right'"
class="mt-2 flex leading-tight"
>
<div>
<div :class="textColor" class="text-sm font-medium">

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

@ -1,14 +1,14 @@
<template>
<table
:class="[{ 'rounded-b-lg overflow-hidden': !allyTeam }, data.result]"
:class="[{ 'overflow-hidden rounded-b-lg': !allyTeam }, data.result]"
class="w-full table-fixed"
>
<thead class="leading-none heading-detailed">
<thead class="heading-detailed leading-none">
<tr
: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">
<span :class="allyTeam ? 'text-teal-400' : 'text-red-400'" class="pl-2"
>{{ allyTeam ? 'Ally' : 'Enemy' }} Team</span
@ -18,41 +18,41 @@
:class="allyTeam ? 'text-teal-400' : 'text-red-400'"
class="flex pr-2"
>
<svg class="items-center w-4 h-4">
<svg class="h-4 w-4 items-center">
<use xlink:href="#award" />
</svg>
<span class="ml-0.5">VICTORY</span>
</div>
</div>
</th>
<th class="px-2 py-5 text-sm font-medium w-kda">K</th>
<th class="px-2 py-5 text-sm font-medium w-kda">D</th>
<th class="px-2 py-5 text-sm font-medium w-kda">A</th>
<th class="px-2 py-5 text-sm font-medium w-minions">
<th class="w-kda px-2 py-5 text-sm font-medium">K</th>
<th class="w-kda px-2 py-5 text-sm font-medium">D</th>
<th class="w-kda px-2 py-5 text-sm font-medium">A</th>
<th class="w-minions px-2 py-5 text-sm font-medium">
{{ statsFormat === 'stats' ? 'Cs' : 'Cs/m' }}
</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' }}
</th>
<th class="px-2 py-5 text-sm font-medium w-gold-dmg-kp">Gold</th>
<th class="px-2 py-5 text-sm font-medium w-gold-dmg-kp">
<th class="w-gold-dmg-kp px-2 py-5 text-sm font-medium">Gold</th>
<th class="w-gold-dmg-kp px-2 py-5 text-sm font-medium">
Dmg
<br />champ
</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
<br />obj
</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
<br />taken
</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>
</thead>
<tbody :class="{ 'border-b border-blue-700': allyTeam }" class="leading-none">
<tr v-for="(player, index) in data.players" :key="player.name + index">
<td class="py-2 border-r border-blue-700">
<td class="border-r border-blue-700 py-2">
<div class="flex justify-between px-1">
<div class="flex">
<div class="flex items-center">
@ -61,21 +61,21 @@
: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
: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
: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>
</div>
</div>
<div class="flex flex-col justify-around ml-1">
<div class="ml-1 flex flex-col justify-around">
<Tooltip>
<template #trigger>
<div
@ -85,16 +85,16 @@
})`,
}"
: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>
</template>
<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
:style="{
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 class="ml-2 leading-tight">
<div class="text-base leading-none">
@ -116,16 +116,16 @@
})`,
}"
: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>
</template>
<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
:style="{
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 class="ml-2 leading-tight">
<div class="text-base leading-none">
@ -144,7 +144,7 @@
<div
@click="selectRunes(player)"
: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
: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
: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>
</template>
<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 class="font-bold text-teal-400">full runes</p>
</div>
</template>
</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
v-if="player.summonerSpell1"
:to="{
@ -185,33 +185,33 @@
:class="{
'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
>
<div
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 }}
</div>
<div class="text-teal-500 text-xxs">
<div class="text-xxs text-teal-500">
{{ player.champion.name }}
</div>
</div>
</div>
<div class="flex items-center">
<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()}`" />
</svg>
<div class="text-blue-300 text-xxs">
<div class="text-xxs text-blue-300">
{{ player.rank.shortName }}
</div>
</div>
<div v-else-if="!ranksLoaded">
<DotsLoader width="30px" dot-width="10px" />
</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>
<MatchItems :items="player.items" :one-row="true" />

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

@ -1,11 +1,11 @@
<template>
<div class="flex ml-4 overflow-hidden text-sm rounded-lg">
<div class="relative flex justify-between w-full overflow-hidden bg-blue-800 rounded-lg">
<div class="absolute flex flex-col items-center justify-between h-full horizontal-center">
<div class="ml-4 flex overflow-hidden rounded-lg text-sm">
<div class="relative flex w-full justify-between overflow-hidden rounded-lg bg-blue-800">
<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="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 class="ml-4 -mt-3">S</span>
<span class="-mt-3 ml-4">S</span>
</div>
<div :class="{ 'w-10': displayStartTime !== 'Not started yet' }" class="pb-2 text-blue-200">
{{ displayStartTime }}
@ -22,7 +22,7 @@
:style="{
backgroundImage: `url('https://raw.communitydragon.org/latest/plugins/rcp-be-lol-game-data/global/default/v1/champion-icons/${ally.championId}.png')`,
}"
class="w-6 h-6 bg-center bg-cover rounded-full bg-blue-1000"
class="h-6 w-6 rounded-full bg-blue-1000 bg-cover bg-center"
></div>
<router-link
v-if="!ally.bot"
@ -56,7 +56,7 @@
:style="{
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>
</li>
</ul>
@ -66,10 +66,10 @@
name: 'summonerLive',
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>
<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" />
</svg>
</router-link>
@ -102,7 +102,9 @@ export default {
}
.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 {

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

@ -8,19 +8,19 @@
showDetails ? 'rounded-t-lg' : 'rounded-lg',
{ '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
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)"
>
New
</div>
<div class="w-4/12 text-left first">
<div class="first w-4/12 text-left">
<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 }}
</div>
@ -29,36 +29,36 @@
<div
v-if="data.role !== 'NONE'"
: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 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 }}
</div>
</div>
<div
: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 class="flex flex-col justify-around ml-2">
<div class="ml-2 flex flex-col justify-around">
<div
v-if="data.summonerSpell1"
: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 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
v-if="data.summonerSpell2"
: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 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 class="flex flex-col justify-around ml-1">
<div class="ml-1 flex flex-col justify-around">
<div
:style="[
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
:style="[
@ -66,10 +66,10 @@
? { 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 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">
<span class>{{ data.stats.kills }}</span>
<span class>/</span>
@ -84,14 +84,14 @@
</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 }}
</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" />
<div class="relative z-30 ml-4 leading-none">
@ -108,29 +108,29 @@
<svg style="width: 15px; height: 15px">
<use xlink:href="#gold" />
</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 class="flex items-center">
<svg style="width: 15px; height: 15px">
<use xlink:href="#damage" />
</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 class="flex items-center">
<svg style="width: 15px; height: 15px">
<use xlink:href="#kill-participation" />
</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 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-for="(ally, index) in data.allyTeam"
:key="'player-' + index"
class="flex items-center ml-4 leading-none"
class="ml-4 flex items-center leading-none"
>
<router-link
v-if="ally.account_id !== '0' && account.accountId !== ally.account_id"
@ -140,32 +140,32 @@
params: { region: $route.params.region, name: ally.name },
}"
: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
>
<div
v-else
: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 }}
</div>
<div
:class="index !== 0 ? '-mt-1' : ''"
: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
:style="{
backgroundImage:
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
:class="index !== 0 ? '-mt-1' : ''"
: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>
<router-link
v-if="data.enemyTeam[index].account_id !== '0'"
@ -174,19 +174,19 @@
name: 'summoner',
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
>
<div
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 }}
</div>
</div>
</div>
<div class="flex flex-col items-center justify-center ml-auto">
<svg class="w-5 h-5 text-blue-200">
<div class="ml-auto flex flex-col items-center justify-center">
<svg class="h-5 w-5 text-blue-200">
<use xlink:href="#stopwatch" />
</svg>
<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>
</template>
<template #default>
<div class="px-2 text-xs leading-tight text-center text-white select-none">
<svg class="w-4 h-4 mx-auto text-teal-400">
<div class="select-none px-2 text-center text-xs leading-tight text-white">
<svg class="mx-auto h-4 w-4 text-teal-400">
<use xlink:href="#time" />
</svg>
<div class="mt-1">{{ data.fullDate.date }}</div>

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

@ -6,25 +6,25 @@
<div
:style="{ backgroundImage: itemLink(item) }"
: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 },
]"
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
v-if="isMythic(item)"
class="absolute rounded-md mythic"
class="mythic absolute rounded-md"
:class="oneRow ? 'mythic-sm' : 'mythic-xl'"
></div>
</div>
</template>
<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
: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 class="ml-2 leading-none">
<div class="text-base">{{ itemName(item.name) }}</div>
@ -34,7 +34,7 @@
</div>
<div
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>
@ -120,7 +120,7 @@ export default {
}
.item-description >>> stats {
@apply text-white leading-tight;
@apply leading-tight text-white;
}
.item-description >>> br + br {
@ -132,21 +132,21 @@ export default {
}
.item-description >>> li {
@apply block mt-2;
@apply mt-2 block;
}
.item-description >>> passive {
@apply text-white font-normal;
@apply font-normal text-white;
}
.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 >>> li > passive:first-child,
.item-description >>> rarityMythic {
@apply text-white font-bold block mt-2;
@apply mt-2 block font-bold text-white;
}
.item-description >>> font {
@ -154,10 +154,10 @@ export default {
}
.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 {
@apply inline text-white font-normal;
@apply inline font-normal text-white;
}
</style>

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

@ -4,14 +4,14 @@
:style="{
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
:style="{
backgroundImage: `url('${createCategoryUrl(runeStyle.name)}')`,
}"
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>
@ -26,22 +26,22 @@
backgroundImage: `url('${createCDragonAssetUrl(runes.perks[runeId].icon)}')`,
}"
: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>
</template>
<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
:style="{
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 class="ml-2 leading-none">
<div class="text-base">{{ runes.perks[runeId].name }}</div>
<div
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>
@ -49,12 +49,12 @@
</Tooltip>
</ul>
</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 v-if="!primary">
<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}`">
<Tooltip>
<template #trigger>
@ -65,22 +65,22 @@
:class="
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>
</template>
<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
:style="{
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 class="ml-2 leading-none">
<div class="text-base">{{ runes.perks[kStat].name }}</div>
<div
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>

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

@ -22,7 +22,7 @@
>
<div
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"
>
<LazyBackground
@ -33,7 +33,7 @@
style="filter: blur(2px)"
>
</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">
<RuneStyle :primary="true" :rune-style="primaryStyle" />
</div>

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

@ -3,11 +3,11 @@
<input
v-model="championName"
@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"
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" />
</svg>
</Ripple>

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

@ -1,11 +1,11 @@
<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>
<tr class="text-sm rounded-t-lg select-none heading">
<tr class="heading select-none rounded-t-lg text-sm">
<th
@click="sortBy('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
</th>
@ -22,7 +22,7 @@
},
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>
</tr>
</thead>
@ -34,15 +34,15 @@
>
<td
:class="{ 'rounded-bl-lg': index === championsToDisplay.length - 1 }"
class="relative px-2 py-3 text-sm text-white bg-blue-800 border-t-table"
class="border-t-table relative bg-blue-800 px-2 py-3 text-sm text-white"
>
{{ champion.index + 1 }}
</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
: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 class="ml-2">{{ champion.champion.name }}</div>
</div>
@ -61,7 +61,7 @@
</td>
<td :style="bgColor(champion, 'kda')" class="px-2 py-3 text-sm text-white">
<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.deaths / champion.count) | round(1) }}

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

@ -3,7 +3,7 @@
<select
v-model="queue"
@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"
>
<option v-for="key in Object.keys(choices)" :key="key" :value="key">
@ -11,9 +11,9 @@
</option>
</select>
<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" />
</svg>
</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>
</template>
<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
<br />
<span class="font-bold text-teal-400">1% playrate</span>

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

@ -1,10 +1,10 @@
<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
v-model="season"
@change="filterSeason"
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 v-for="(s, index) in sortedSeasons" :key="index" :value="s" class="bg-blue-800">
@ -14,9 +14,9 @@
</option>
</select>
<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" />
</svg>
</div>

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

@ -1,17 +1,17 @@
<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
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"
>
<thead>
<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
</th>
<th class="text-sm font-normal text-blue-200 w-ranked">SoloQ Stats</th>
<th class="text-sm font-normal text-blue-200 w-ranked">Flex Stats</th>
<th class="px-2 text-sm font-normal text-right text-blue-200 w-bans">Bans</th>
<th class="w-ranked text-sm font-normal text-blue-200">SoloQ Stats</th>
<th class="w-ranked text-sm font-normal text-blue-200">Flex Stats</th>
<th class="w-bans px-2 text-right text-sm font-normal text-blue-200">Bans</th>
</tr>
</thead>
<tbody v-if="liveLoaded">
@ -19,23 +19,23 @@
v-for="(player, index) in team"
:key="player.summonerId"
: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
v-if="player.perks"
@click="selectRunes(player)"
:class="{ 'cursor-pointer': player.perks }"
class="flex flex-col items-center runes"
class="runes flex flex-col items-center"
>
<div
: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
: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 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')`,
}"
: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
v-if="player.role && player.role !== 'NONE'"
: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"
>
<div
: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 class="flex flex-col ml-2">
<div class="ml-2 flex flex-col">
<div
: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
: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 class="ml-3 text-sm leading-tight text-left">
<div class="ml-3 text-left text-sm leading-tight">
<router-link
v-if="!player.bot"
:to="{
@ -91,10 +91,10 @@
<div class="px-2">
<div v-if="player.rank.soloQ" class="flex items-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()}`" />
</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 }}
</div>
</div>
@ -105,7 +105,7 @@
</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>
</div>
@ -114,10 +114,10 @@
<div class="px-2">
<div v-if="player.rank.flex5v5" class="flex items-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()}`" />
</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 }}
</div>
</div>
@ -128,17 +128,17 @@
</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>
</div>
</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
v-if="live.bannedChampions.length"
: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
: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
:class="[ally ? 'text-teal-100 bg-teal-500' : 'text-red-100 bg-red-500']"
class="absolute flex items-center justify-center w-4 h-4 text-xs font-bold rounded-full ban-order"
:class="[ally ? 'bg-teal-500 text-teal-100' : 'bg-red-500 text-red-100']"
class="ban-order absolute flex h-4 w-4 items-center justify-center rounded-full text-xs font-bold"
>
{{ banChamp(index, player.teamId).pickTurn }}
</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>
</div>

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

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

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

@ -1,22 +1,22 @@
<template>
<div class="bg-blue-800 rounded-lg">
<div class="relative flex items-center justify-center py-4 text-blue-200 rounded-t-lg heading">
<svg class="w-5 h-5" style="transform: rotate(-5deg)">
<div class="rounded-lg bg-blue-800">
<div class="heading relative flex items-center justify-center rounded-t-lg py-4 text-blue-200">
<svg class="h-5 w-5" style="transform: rotate(-5deg)">
<use xlink:href="#layers" />
</svg>
<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" />
</svg>
<div class="absolute top-0 right-0 mt-3 mr-2">
<div class="absolute right-0 top-0 mr-2 mt-3">
<Tooltip>
<template #trigger>
<svg class="w-4 h-4 cursor-pointer">
<svg class="h-4 w-4 cursor-pointer">
<use xlink:href="#info" />
</svg>
</template>
<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>
<span class="font-bold text-teal-400">{{
@ -24,7 +24,7 @@
}}</span>
matches
</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
<br />to have better results.
</div>
@ -35,14 +35,14 @@
</div>
<div v-if="stats.champion.length">
<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-winrate">Winrate</div>
<div class="w-kda">KDA</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
v-for="(champion, index) in stats.champion"
:key="index"
@ -53,10 +53,10 @@
class="relative flex items-center px-4 py-2 leading-tight"
>
<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
: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 class="mx-1 truncate">{{ champion.champion.name }}</div>
</div>
@ -64,7 +64,7 @@
<div class="text-xs text-purple-400">{{ champion.count }}</div>
<div
: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 class="w-winrate">
@ -73,7 +73,7 @@
</div>
<div
: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 class="w-kda">
@ -84,7 +84,7 @@
:style="{
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>
</li>

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

@ -1,17 +1,17 @@
<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="flex items-center justify-center py-4 text-blue-200 rounded-t-lg heading">
<svg class="w-5 h-5" style="transform: rotate(-5deg)">
<div class="heading flex items-center justify-center rounded-t-lg py-4 text-blue-200">
<svg class="h-5 w-5" style="transform: rotate(-5deg)">
<use xlink:href="#people" />
</svg>
<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" />
</svg>
</div>
<div v-if="hasMates" class="px-4 py-2 text-sm text-left">
<div class="flex items-baseline text-xs font-semibold text-blue-300 uppercase">
<div v-if="hasMates" class="px-4 py-2 text-left text-sm">
<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-1/4">Record</div>
<div class="w-1/4">Winrate</div>
@ -31,7 +31,7 @@
<div class="w-1/4">
<Tooltip>
<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
:class="getWinrateColor(mate.wins, mate.count)"
:style="{ width: `${winrate(mate.wins, mate.count)}%` }"
@ -40,7 +40,7 @@
</div>
</template>
<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>
<span

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

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

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

@ -1,14 +1,14 @@
<template>
<div>
<div class="inline-block bg-blue-800 rounded-lg">
<div class="inline-block rounded-lg bg-blue-800">
<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" />
</svg>
<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" />
</svg>
</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[104].month }}</span>
</div>
<div class="flex mt-1">
<div class="mt-1 flex">
<div class="flex flex-col">
<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>
@ -30,20 +30,20 @@
<span class="mt-1 text-xs font-semibold leading-snug text-blue-200">Su</span>
</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)"
>
<Tooltip v-for="(day, index) in gridDays.slice(indexFirstMonday)" :key="day.timestamp">
<template #trigger>
<div
: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 #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>
<span class="text-white font-semibold">{{ day.date }}</span>
<span class="font-semibold text-white">{{ day.date }}</span>
<span>: </span>
<span class="font-bold text-teal-400">{{ day.matches }}</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')`,
}"
: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
:class="[
@ -17,14 +17,14 @@
title.length > 15 ? 'text-sm' : 'text-base',
]"
: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>
</div>
<img
: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="block w-16 h-16 mx-auto mt-10 transition duration-500 ease-in transform border-2 rounded-full"
:class="[{ 'scale-125 opacity-0': hover }, borderColor]"
class="mx-auto mt-10 block h-16 w-16 transform rounded-full border-2 transition duration-500 ease-in"
alt="Champion Played"
/>
<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>
</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-else>{{ gameModes[record.gamemode].name }}</span>
</div>

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

@ -1,54 +1,54 @@
<template>
<div class="flex items-center ml-2 leading-none">
<div class="flex flex-col justify-center ml-1">
<div class="ml-2 flex items-center leading-none">
<div class="ml-1 flex flex-col justify-center">
<div class="flex items-center">
<div
ref="leagueBorder"
: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
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})` }"
></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 }}
</div>
<div class="ml-4 text-2xl font-bold">{{ selectedLeague.leaguePoints }} LP</div>
<div
v-if="selectedLeague.miniSeries"
class="flex items-center p-2 ml-2 bg-blue-800 rounded"
class="ml-2 flex items-center rounded bg-blue-800 p-2"
>
<div
v-for="(result, index) in bo"
:key="index + 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 class="flex items-center mt-2">
<div class="mt-2 flex items-center">
<div class="relative inline-block text-white">
<select
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">
{{ data.name }}
</option>
</select>
<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" />
</svg>
</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="ml-2 font-semibold text-green-400">{{ selectedLeague.wins }}</div>
<span class="mx-1">-</span>
@ -56,7 +56,7 @@
<div class="ml-3 text-base font-semibold uppercase">Winrate</div>
<div
: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',
]"
>

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

@ -1,5 +1,5 @@
<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
image-source="/img/bg-homepage-1.jpg"
image-class="absolute z-0 w-full h-[50rem]"
@ -9,10 +9,10 @@
<header
: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)"
>
<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">
<router-link to="/">
<img class="block h-10" src="/img/Logo.svg" alt="LeagueStats logo" />
@ -23,7 +23,7 @@
<div class="flex-1">
<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
class="absolute fill-current"
xmlns="http://www.w3.org/2000/svg"
@ -44,7 +44,7 @@
</div>
</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">
<HeaderLoader />
@ -52,7 +52,7 @@
<template v-else-if="summonerFound">
<div class="flex items-center justify-between">
<div>
<div class="flex items-center mt-2">
<div class="mt-2 flex items-center">
<Tooltip>
<template #trigger>
<h1 class="text-4xl font-extrabold">
@ -62,10 +62,10 @@
<template #default>
<div
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>
<ul class="pl-2 text-left list-disc list-inside">
<ul class="list-inside list-disc pl-2 text-left">
<li
v-for="name in basic.account.names.slice(0, -1)"
:key="name.date"
@ -79,33 +79,33 @@
</Tooltip>
<div
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>
</div>
<div
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)"
>
<svg class="w-4 h-4 text-teal-600">
<svg class="h-4 w-4 text-teal-600">
<use xlink:href="#star" />
</svg>
<div class="ml-1 text-xs font-bold text-teal-200">Favorite</div>
</div>
</div>
<div class="flex mt-2">
<div :class="{ playing: playing }" class="relative w-24 h-24">
<div class="mt-2 flex">
<div :class="{ playing: playing }" class="relative h-24 w-24">
<div
: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="{
backgroundImage: `url('https://raw.communitydragon.org/latest/plugins/rcp-be-lol-game-data/global/default/v1/profile-icons/${basic.account.profileIconId}.jpg')`,
}"
>
<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 }}
</div>
@ -132,7 +132,7 @@
params: { region: $route.params.region, name: $route.params.name },
}"
: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
>Overview</router-link
>
@ -142,7 +142,7 @@
params: { region: $route.params.region, name: $route.params.name },
}"
:class="isRouteActive('summonerChampions')"
class="pb-2 ml-4 text-blue-300 border-b-2 border-transparent cursor-pointer hover:text-blue-100"
class="ml-4 cursor-pointer border-b-2 border-transparent pb-2 text-blue-300 hover:text-blue-100"
exact
>Champions</router-link
>
@ -152,7 +152,7 @@
params: { region: $route.params.region, name: $route.params.name },
}"
:class="isRouteActive('summonerRecords')"
class="pb-2 ml-4 text-blue-300 border-b-2 border-transparent cursor-pointer hover:text-blue-100"
class="ml-4 cursor-pointer border-b-2 border-transparent pb-2 text-blue-300 hover:text-blue-100"
exact
>Records</router-link
>
@ -162,7 +162,7 @@
params: { region: $route.params.region, name: $route.params.name },
}"
:class="isRouteActive('summonerLive')"
class="pb-2 ml-4 text-blue-300 border-b-2 border-transparent cursor-pointer hover:text-blue-100"
class="ml-4 cursor-pointer border-b-2 border-transparent pb-2 text-blue-300 hover:text-blue-100"
exact
>Live game</router-link
>
@ -182,8 +182,8 @@
</template>
<template v-else-if="summonerNotFound">
<div class="flex justify-center mt-16">
<div class="px-4 py-3 text-lg font-bold text-center text-blue-100 rounded-lg bg-gradient">
<div class="mt-16 flex justify-center">
<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>😕</div>
</div>

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

@ -6,22 +6,22 @@
transition-name="fade"
></LazyBackground>
<div class="flex flex-col items-center justify-center h-screen">
<div class="absolute top-0 right-0">
<div class="relative w-20 h-2 mt-4 mr-4 line line-top"></div>
<div class="flex h-screen flex-col items-center justify-center">
<div class="absolute right-0 top-0">
<div class="line line-top relative mr-4 mt-4 h-2 w-20"></div>
</div>
<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 class="relative flex flex-col items-center w-full max-w-lg">
<img class="absolute logo" src="/img/Logo.svg" alt="logo" />
<div class="relative flex w-full max-w-lg flex-col items-center">
<img class="logo absolute" src="/img/Logo.svg" alt="logo" />
<SearchForm @formSubmit="redirect" :homepage="true" />
</div>
<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
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
v-if="overviewLoaded"
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
:top-spacing="48"
:bottom-spacing="123"
class="z-40 sidebar"
class="sidebar z-40"
container-selector=".vue-sticky-container"
>
<SummonerChampions />
@ -37,7 +37,7 @@
</div>
<div v-else>
<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>😕</div>
</div>

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

@ -1,7 +1,7 @@
<template>
<div key="live-game">
<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 class="mx-2">-</div>
<div :class="{ 'w-12': displayStartTime !== 'Not started yet' }">
@ -9,7 +9,7 @@
</div>
<button
@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
</button>
@ -20,13 +20,13 @@
<LiveTeam :team="enemyTeam" :ally="false" :gamemode="gamemode.name" class="mt-4" />
</div>
<div v-else>
<div class="flex justify-center mt-16">
<div class="px-4 py-3 text-lg font-bold text-center text-blue-100 rounded-lg bg-gradient">
<div class="mt-16 flex justify-center">
<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 class="mt-2">🕊</div>
<button
@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
</button>

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

@ -2,11 +2,11 @@
<div key="records">
<template v-if="!recordsLoaded || (recordsLoaded && records.assists)">
<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
</div>
<div class="flex flex-wrap -mx-2">
<div class="-mx-2 flex flex-wrap">
<template v-if="recordsLoaded">
<RecordCard
color="#63b3ed"
@ -71,11 +71,11 @@
</template>
</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
</div>
<div class="flex flex-wrap -mx-2">
<div class="-mx-2 flex flex-wrap">
<template v-if="recordsLoaded">
<RecordCard
color="#FC8181"
@ -140,10 +140,10 @@
</div>
</template>
</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
</div>
<div class="flex flex-wrap -mx-2">
<div class="-mx-2 flex flex-wrap">
<template v-if="recordsLoaded">
<RecordCard
color="#4299E1"
@ -193,10 +193,10 @@
</div>
</template>
</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
</div>
<div class="flex flex-wrap -mx-2">
<div class="-mx-2 flex flex-wrap">
<template v-if="recordsLoaded">
<RecordCard
color="#FEFCBF"
@ -255,7 +255,7 @@
</div>
</template>
<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>😕</div>
</div>
@ -314,7 +314,7 @@ export default {
<style scoped>
.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: '';
top: 35%;
transform: rotate(45deg);