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: format all frontend with prettier

Browse source
This commit is contained in:
Valentin Kaelin 2023-09-20 21:56:19 +02:00
parent 20c69a3943
commit ae0d317b90
61 changed files with 1100 additions and 988 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
client-new/src/assets/css/base.css
View file

@ -2,12 +2,12 @@
::-webkit-scrollbar { ::-webkit-scrollbar {
width: 8px; width: 8px;
height: 8px height: 8px;
} }
::-webkit-scrollbar, ::-webkit-scrollbar,
::-webkit-scrollbar-track { ::-webkit-scrollbar-track {
background: rgba(23, 49, 79, .6); background: rgba(23, 49, 79, 0.6);
} }
.light-scrollbar::-webkit-scrollbar, .light-scrollbar::-webkit-scrollbar,
@ -16,8 +16,8 @@
} }
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
background-color: rgba(194, 217, 254, .6); background-color: rgba(194, 217, 254, 0.6);
border-radius: 8px border-radius: 8px;
} }
::selection { ::selection {
@ -29,7 +29,7 @@
} }
.min-w-1200 { .min-w-1200 {
min-width: 1200px;; min-width: 1200px;
} }
.page-wrapper { .page-wrapper {
@ -52,11 +52,11 @@ button:focus {
} }
.bg-gradient { .bg-gradient {
background: linear-gradient(180deg, #2C5282 0%, rgba(44, 82, 130, 0) 100%); background: linear-gradient(180deg, #2c5282 0%, rgba(44, 82, 130, 0) 100%);
} }
.bg-gradient-x { .bg-gradient-x {
background: linear-gradient(270deg, rgba(44,82,130,1) 0%, rgba(44,82,130,0) 100%); background: linear-gradient(270deg, rgba(44, 82, 130, 1) 0%, rgba(44, 82, 130, 0) 100%);
} }
.text-overflow { .text-overflow {
@ -64,11 +64,7 @@ button:focus {
} }
.heading { .heading {
background: linear-gradient( background: linear-gradient(to top, rgb(34, 92, 155) 0%, rgb(34, 92, 135) 100%);
to top,
rgb(34, 92, 155) 0%,
rgb(34, 92, 135) 100%
);
box-shadow: rgba(235, 248, 255, 0.1) 0px -1px inset; box-shadow: rgba(235, 248, 255, 0.1) 0px -1px inset;
} }

20
client-new/src/assets/css/match.css
View file

@ -1,30 +1,18 @@
/* purgecss start ignore */ /* purgecss start ignore */
.Win { .Win {
background-image: linear-gradient( background-image: linear-gradient(90deg, rgba(1, 97, 28, 0.3) 0%, rgba(44, 82, 130, 0) 45%);
90deg,
rgba(1, 97, 28, 0.3) 0%,
rgba(44, 82, 130, 0) 45%
);
} }
.Fail { .Fail {
background-image: linear-gradient( background-image: linear-gradient(90deg, rgba(140, 0, 0, 0.3) 0%, rgba(44, 82, 130, 0) 45%);
90deg,
rgba(140, 0, 0, 0.3) 0%,
rgba(44, 82, 130, 0) 45%
);
} }
.Remake { .Remake {
background-image: linear-gradient( background-image: linear-gradient(90deg, rgba(233, 169, 75, 0.3) 0%, rgba(44, 82, 130, 0) 45%);
90deg,
rgba(233, 169, 75, 0.3) 0%,
rgba(44, 82, 130, 0) 45%
);
} }
.ban::after { .ban::after {
content: ""; content: '';
position: absolute; position: absolute;
left: 0px; left: 0px;
top: 50%; top: 50%;

20
client-new/src/assets/css/transition.css
View file

@ -1,16 +1,20 @@
/* purgecss start ignore */ /* purgecss start ignore */
/* Fade transitions */ /* Fade transitions */
.fade-enter-active, .fade-leave-active { .fade-enter-active,
.fade-leave-active {
transition: opacity 2s; transition: opacity 2s;
} }
.fade-fast-enter-active, .fade-fast-leave-active { .fade-fast-enter-active,
transition: opacity .3s; .fade-fast-leave-active {
transition: opacity 0.3s;
} }
.fade-fast-enter, .fade-fast-leave-to, .fade-fast-enter,
.fade-enter, .fade-leave-to { .fade-fast-leave-to,
.fade-enter,
.fade-leave-to {
opacity: 0; opacity: 0;
} }
@ -31,11 +35,13 @@
@apply transition duration-500 ease-in-out; @apply transition duration-500 ease-in-out;
} }
.tab-enter, .tab-enter-leave-to { .tab-enter,
.tab-enter-leave-to {
@apply opacity-0; @apply opacity-0;
} }
.tab-enter-to, .tab-enter-leave { .tab-enter-to,
.tab-enter-leave {
@apply opacity-100; @apply opacity-100;
} }

14
client-new/src/components/Common/CubeLoader.vue
View file

@ -2,7 +2,7 @@
<div <div
:style="{ width: size, height: size, margin }" :style="{ width: size, height: size, margin }"
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="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-2 cube h-1/2"></div>
@ -16,17 +16,17 @@ export default {
props: { props: {
color: { color: {
type: String, type: String,
default: '#bee3f8' default: '#bee3f8',
}, },
size: { size: {
type: String, type: String,
default: '30px' default: '30px',
}, },
margin: { margin: {
type: String, type: String,
default: '0 auto' default: '0 auto',
} },
} },
} }
</script> </script>
@ -36,7 +36,7 @@ export default {
} }
.cube:before { .cube:before {
content: ""; content: '';
@apply absolute top-0 left-0 w-full h-full bg-blue-300; @apply absolute top-0 left-0 w-full h-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%;

16
client-new/src/components/Common/DotsLoader.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<div :style="{width: width}" class="text-center spinner"> <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 bounce1"></div>
<div :style="dotStyle" class="inline-block rounded-full bounce2"></div> <div :style="dotStyle" class="inline-block rounded-full bounce2"></div>
<div :style="dotStyle" class="inline-block rounded-full bounce3"></div> <div :style="dotStyle" class="inline-block rounded-full bounce3"></div>
@ -11,16 +11,16 @@ export default {
props: { props: {
color: { color: {
type: String, type: String,
default: '#90cdf4' default: '#90cdf4',
}, },
dotWidth: { dotWidth: {
type: String, type: String,
default: '18px' default: '18px',
}, },
width: { width: {
type: String, type: String,
default: '70px' default: '70px',
} },
}, },
computed: { computed: {
@ -28,10 +28,10 @@ export default {
return { return {
backgroundColor: this.color, backgroundColor: this.color,
height: this.dotWidth, height: this.dotWidth,
width: this.dotWidth width: this.dotWidth,
} }
} },
} },
} }
</script> </script>

20
client-new/src/components/Common/LazyBackgroundImage.vue
View file

@ -14,34 +14,34 @@ export default {
props: { props: {
imageSource: { imageSource: {
type: String, type: String,
required: true required: true,
}, },
imageClass: { imageClass: {
type: String, type: String,
required: false, required: false,
default: '' default: '',
}, },
backgroundSize: { backgroundSize: {
type: String, type: String,
required: false, required: false,
default: 'cover' default: 'cover',
}, },
moreBackgrounds: { moreBackgrounds: {
type: String, type: String,
required: false, required: false,
default: '' default: '',
}, },
transitionName: { transitionName: {
type: String, type: String,
required: false, required: false,
default: '' default: '',
} },
}, },
data() { data() {
return { return {
imageState: 'loading', imageState: 'loading',
asyncImage: new Image() asyncImage: new Image(),
} }
}, },
@ -51,7 +51,7 @@ export default {
return `background-image: ${this.moreBackgrounds} url(${this.asyncImage.src}); background-size: ${this.backgroundSize}` return `background-image: ${this.moreBackgrounds} url(${this.asyncImage.src}); background-size: ${this.backgroundSize}`
} }
return '' return ''
} },
}, },
mounted() { mounted() {
@ -68,7 +68,7 @@ export default {
}, },
imageOnLoad() { imageOnLoad() {
this.imageState = 'loaded' this.imageState = 'loaded'
} },
} },
} }
</script> </script>

14
client-new/src/components/Common/Ripple.vue
View file

@ -14,7 +14,7 @@
left: ripple.left, left: ripple.left,
width: ripple.width, width: ripple.width,
height: ripple.height, height: ripple.height,
background: color background: color,
}" }"
></div> ></div>
</transition-group> </transition-group>
@ -27,8 +27,8 @@ export default {
props: { props: {
color: { color: {
type: String, type: String,
default: 'rgba(255, 255, 255, 0.3)' default: 'rgba(255, 255, 255, 0.3)',
} },
}, },
data() { data() {
@ -61,17 +61,17 @@ export default {
height: `${this.rippleWidth}px`, height: `${this.rippleWidth}px`,
left: `${e.clientX - left - this.halfRippleWidth}px`, left: `${e.clientX - left - this.halfRippleWidth}px`,
top: `${e.clientY - top - this.halfRippleWidth}px`, top: `${e.clientY - top - this.halfRippleWidth}px`,
id: rippleId id: rippleId,
}) })
// Remove ripple // Remove ripple
setTimeout(() => { setTimeout(() => {
this.ripples = this.ripples.filter(r => r.id !== rippleId) this.ripples = this.ripples.filter((r) => r.id !== rippleId)
}, 400) }, 400)
}, },
purgeRipples() { purgeRipples() {
this.ripples = [] this.ripples = []
} },
} },
} }
</script> </script>

16
client-new/src/components/Common/Tooltip.vue
View file

@ -37,19 +37,21 @@ export default {
directionBottom: true, directionBottom: true,
directionRight: true, directionRight: true,
directionChecked: false, directionChecked: false,
width: 0 width: 0,
} }
}, },
computed: { computed: {
position() { position() {
const valuetoRemove = this.directionBottom ? 0 : this.height() const valuetoRemove = this.directionBottom ? 0 : this.height()
const leftValue = this.directionRight ? this.left + this.offset : this.left - this.width - this.offset / 2 const leftValue = this.directionRight
? this.left + this.offset
: this.left - this.width - this.offset / 2
return { return {
left: `${leftValue}px`, left: `${leftValue}px`,
top: `${this.top + this.offset - valuetoRemove}px`, top: `${this.top + this.offset - valuetoRemove}px`,
} }
} },
}, },
created() { created() {
@ -67,8 +69,8 @@ export default {
this.width = contentRect.width this.width = contentRect.width
const viewHeight = Math.max(document.documentElement.clientHeight, window.innerHeight) const viewHeight = Math.max(document.documentElement.clientHeight, window.innerHeight)
const viewWidth = Math.max(document.documentElement.clientWidth, window.innerWidth) const viewWidth = Math.max(document.documentElement.clientWidth, window.innerWidth)
this.directionBottom = (contentRect.bottom + this.offset) < viewHeight this.directionBottom = contentRect.bottom + this.offset < viewHeight
this.directionRight = (this.left + this.width + triggerRect.width + this.offset) < viewWidth this.directionRight = this.left + this.width + triggerRect.width + this.offset < viewWidth
}, },
handleScroll() { handleScroll() {
this.isOpen = false this.isOpen = false
@ -100,7 +102,7 @@ export default {
this.left = event.clientX this.left = event.clientX
this.top = event.clientY this.top = event.clientY
this.isOpen = true this.isOpen = true
} },
} },
} }
</script> </script>

12
client-new/src/components/Form/LoadingButton.vue
View file

@ -1,7 +1,7 @@
<template> <template>
<button <button
@click="btnClicked" @click="btnClicked"
:class="[btnClass, {'loading': loading}, {'pr-12': loading}]" :class="[btnClass, { loading: loading }, { 'pr-12': loading }]"
:disabled="loading" :disabled="loading"
class="relative select-none" class="relative select-none"
type="button" type="button"
@ -30,20 +30,20 @@ export default {
btnClass: { btnClass: {
type: String, type: String,
required: false, required: false,
default: '' default: '',
}, },
loading: { loading: {
type: Boolean, type: Boolean,
required: false, required: false,
default: false default: false,
} },
}, },
methods: { methods: {
btnClicked() { btnClicked() {
this.$emit('clicked') this.$emit('clicked')
} },
} },
} }
</script> </script>

18
client-new/src/components/Form/SearchForm.vue
View file

@ -1,13 +1,13 @@
<template> <template>
<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 self-start w-full h-full text-lg text-teal-100"
> >
<div <div
v-if="open" v-if="open"
@click="open = false" @click="open = false"
:style="{opacity: homepage ? 0 : 0.9}" :style="{ opacity: homepage ? 0 : 0.9 }"
class="fixed inset-0 z-20 bg-gray-900" class="fixed inset-0 z-20 bg-gray-900"
></div> ></div>
<div class="relative w-full"> <div class="relative w-full">
@ -76,14 +76,14 @@ import SearchFormRegion from '@/components/Form/SearchFormRegion.vue'
export default { export default {
components: { components: {
SearchFormDropdown, SearchFormDropdown,
SearchFormRegion SearchFormRegion,
}, },
props: { props: {
homepage: { homepage: {
type: Boolean, type: Boolean,
default: false default: false,
} },
}, },
data() { data() {
@ -96,7 +96,7 @@ export default {
computed: { computed: {
...mapState({ ...mapState({
selectedRegion: state => state.settings.region selectedRegion: (state) => state.settings.region,
}), }),
}, },
@ -113,7 +113,7 @@ export default {
this.summoner = newRoute.params.name this.summoner = newRoute.params.name
this.dropdown = false this.dropdown = false
this.open = false this.open = false
} },
}, },
created() { created() {
@ -162,7 +162,7 @@ export default {
const inner = document.createElement('div') const inner = document.createElement('div')
outer.appendChild(inner) outer.appendChild(inner)
const scrollbarWidth = (outer.offsetWidth - inner.offsetWidth) const scrollbarWidth = outer.offsetWidth - inner.offsetWidth
outer.parentNode.removeChild(outer) outer.parentNode.removeChild(outer)
@ -181,7 +181,7 @@ export default {
windowBlur() { windowBlur() {
this.open = false this.open = false
}, },
} },
} }
</script> </script>

46
client-new/src/components/Form/SearchFormDropdown.vue
View file

@ -35,10 +35,10 @@
</div> </div>
</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="px-3 pb-6 overflow-y-auto light-scrollbar"
> >
<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="w-4 h-4 text-blue-100">
@ -69,14 +69,14 @@
<SearchFormDropdownPlayer <SearchFormDropdownPlayer
@close="close" @close="close"
@mousemove.native="onHover(1)" @mousemove.native="onHover(1)"
:player="{name: 'KC Rekkles', icon: 7, region: 'euw'}" :player="{ name: 'KC Rekkles', icon: 7, region: 'euw' }"
:selected="selected === 1" :selected="selected === 1"
:favorites-list="false" :favorites-list="false"
/> />
</template> </template>
</div> </div>
</div> </div>
<div v-if="favorites.length" :class="{'mt-4': recentSearches.length}"> <div v-if="favorites.length" :class="{ 'mt-4': recentSearches.length }">
<div class="text-base text-blue-100">Favorites</div> <div class="text-base text-blue-100">Favorites</div>
<div <div
ref="favorites" ref="favorites"
@ -106,7 +106,9 @@
<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">&darr; &uarr;</span> <span class="text-xs font-medium text-blue-700 bg-blue-100 rounded-md key"
>&darr; &uarr;</span
>
<span>to navigate</span> <span>to navigate</span>
</div> </div>
<div class="space-x-2"> <div class="space-x-2">
@ -137,16 +139,16 @@ export default {
props: { props: {
dropdown: { dropdown: {
type: Boolean, type: Boolean,
default: false default: false,
}, },
homepage: { homepage: {
type: Boolean, type: Boolean,
default: false default: false,
}, },
value: { value: {
type: String, type: String,
required: true required: true,
} },
}, },
data() { data() {
@ -166,7 +168,7 @@ export default {
recentSearchesSliced() { recentSearchesSliced() {
return this.recentSearches.slice(0, 4) return this.recentSearches.slice(0, 4)
}, },
...mapState('settings', ['favorites', 'recentSearches']) ...mapState('settings', ['favorites', 'recentSearches']),
}, },
created() { created() {
@ -206,9 +208,12 @@ export default {
} }
// Click outside to close region dropdown // Click outside to close region dropdown
if (this.$refs['region-dropdown'] && if (
this.$refs['region-dropdown'] &&
e.target !== this.$refs['region-dropdown'] && e.target !== this.$refs['region-dropdown'] &&
!this.$refs['region-dropdown'].contains(e.target) && this.dropdown) { !this.$refs['region-dropdown'].contains(e.target) &&
this.dropdown
) {
this.toggle() this.toggle()
} }
@ -226,17 +231,18 @@ export default {
} }
} }
if (this.bypassKeys.includes(e.key) || if (this.bypassKeys.includes(e.key) || (e.key === 'k' && (e.ctrlKey || e.metaKey))) {
(e.key === 'k' && (e.ctrlKey || e.metaKey))) {
return return
} }
const input = document.querySelector('.summoner-input') const input = document.querySelector('.summoner-input')
input.focus() input.focus()
}, },
onArrow() { onArrow() {
const scrollIntoBlock = this.selected === 1 ? 'end' : (this.selected >= 7 ? 'start' : 'nearest') const scrollIntoBlock = this.selected === 1 ? 'end' : this.selected >= 7 ? 'start' : 'nearest'
if (this.selected > this.recentSearchesCount) { if (this.selected > this.recentSearchesCount) {
this.$refs.favorites.children[this.selected - this.recentSearchesCount - 1].scrollIntoView({ block: scrollIntoBlock }) this.$refs.favorites.children[this.selected - this.recentSearchesCount - 1].scrollIntoView({
block: scrollIntoBlock,
})
} else { } else {
this.$refs.searches.children[this.selected - 1].scrollIntoView({ block: scrollIntoBlock }) this.$refs.searches.children[this.selected - 1].scrollIntoView({ block: scrollIntoBlock })
} }
@ -263,20 +269,22 @@ export default {
return return
} }
const player = this.allPlayers[this.selected - 1] const player = this.allPlayers[this.selected - 1]
this.$router.push(`/summoner/${player.region}/${player.name}`).catch(() => { }) this.$router.push(`/summoner/${player.region}/${player.name}`).catch(() => {})
this.close() this.close()
}, },
toggle() { toggle() {
this.$emit('toggle') this.$emit('toggle')
}, },
} },
} }
</script> </script>
<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), 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); 0 5px 2px 0 rgba(0, 0, 0, 0.06);
} }
</style> </style>

16
client-new/src/components/Form/SearchFormDropdownPlayer.vue
View file

@ -1,7 +1,7 @@
<template> <template>
<router-link <router-link
@click.native="close" @click.native="close"
: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="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"
@ -17,10 +17,14 @@
<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="inline-flex px-2 py-1 ml-6 text-xs font-semibold text-white uppercase bg-blue-800 rounded"
>{{ player.region }}</div> >
{{ player.region }}
</div>
</div> </div>
<div <div
:style="{backgroundImage: `url('https://raw.communitydragon.org/latest/plugins/rcp-be-lol-game-data/global/default/v1/profile-icons/${player.icon}.jpg')`}" :style="{
backgroundImage: `url('https://raw.communitydragon.org/latest/plugins/rcp-be-lol-game-data/global/default/v1/profile-icons/${player.icon}.jpg')`,
}"
class="w-6 h-6 ml-2 bg-center bg-cover rounded-full" class="w-6 h-6 ml-2 bg-center bg-cover rounded-full"
></div> ></div>
<div class="ml-2 text-base">{{ player.name }}</div> <div class="ml-2 text-base">{{ player.name }}</div>
@ -62,8 +66,8 @@ export default {
}, },
selected: { selected: {
type: Boolean, type: Boolean,
default: false default: false,
} },
}, },
methods: { methods: {
@ -80,7 +84,7 @@ export default {
favoriteClick() { favoriteClick() {
this.updateFavorite(this.player) this.updateFavorite(this.player)
}, },
...mapActions('settings', ['removeRecentSearch', 'updateFavorite']) ...mapActions('settings', ['removeRecentSearch', 'updateFavorite']),
}, },
} }
</script> </script>

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

@ -52,12 +52,12 @@ export default {
props: { props: {
dropdown: { dropdown: {
type: Boolean, type: Boolean,
default: false default: false,
}, },
homepage: { homepage: {
type: Boolean, type: Boolean,
default: false default: false,
} },
}, },
data() { data() {
@ -87,7 +87,7 @@ export default {
dropdownClasses() { dropdownClasses() {
return { return {
'offsetDropDown mr-4 rounded': !this.homepage, 'offsetDropDown mr-4 rounded': !this.homepage,
'offsetDropDownXl rounded-b': this.homepage 'offsetDropDownXl rounded-b': this.homepage,
} }
}, },
selectRegionClasses() { selectRegionClasses() {
@ -99,7 +99,7 @@ export default {
} }
}, },
...mapState({ ...mapState({
selectedRegion: state => state.settings.region selectedRegion: (state) => state.settings.region,
}), }),
}, },
@ -107,7 +107,7 @@ export default {
classRegions(index) { classRegions(index) {
return { return {
'rounded-t': index === 0, 'rounded-t': index === 0,
'rounded-b': index === this.regions.length - 1 'rounded-b': index === this.regions.length - 1,
} }
}, },
selectRegion(region) { selectRegion(region) {
@ -118,7 +118,7 @@ export default {
this.$emit('toggle') this.$emit('toggle')
}, },
...mapActions('settings', ['updateSettings']), ...mapActions('settings', ['updateSettings']),
} },
} }
</script> </script>

17
client-new/src/components/Form/SwitchToggle.vue
View file

@ -8,10 +8,11 @@
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 py-1 border-t-2 border-b-2 border-l-2 border-r border-teal-500 rounded-l-full cursor-pointer"
>{{ leftLabel }}</label> >{{ leftLabel }}</label
>
<input <input
v-model="selected" v-model="selected"
id="toggle-off" id="toggle-off"
@ -20,10 +21,11 @@
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 py-1 border-t-2 border-b-2 border-l border-r-2 border-teal-500 rounded-r-full cursor-pointer"
>{{ rightLabel }}</label> >{{ rightLabel }}</label
>
<div <div
:class="selected ? 'left-checked' : 'right-checked'" :class="selected ? 'left-checked' : 'right-checked'"
class="absolute inset-0 w-1/2 bg-teal-500 selector" class="absolute inset-0 w-1/2 bg-teal-500 selector"
@ -45,7 +47,7 @@ export default {
value: { value: {
type: Boolean, type: Boolean,
required: true, required: true,
} },
}, },
computed: { computed: {
selected: { selected: {
@ -54,7 +56,7 @@ export default {
}, },
set(value) { set(value) {
this.$emit('updateValue', value) this.$emit('updateValue', value)
} },
}, },
}, },
} }
@ -73,7 +75,8 @@ export default {
.selector { .selector {
z-index: -1; z-index: -1;
transition: left 200ms cubic-bezier(0.77, 0, 0.175, 1), transition:
left 200ms cubic-bezier(0.77, 0, 0.175, 1),
border-radius 200ms cubic-bezier(0.77, 0, 0.175, 1); border-radius 200ms cubic-bezier(0.77, 0, 0.175, 1);
} }

6
client-new/src/components/Global/NotificationsContainer.vue
View file

@ -14,11 +14,11 @@ import { mapState } from 'vuex'
export default { export default {
components: { components: {
PopupNotification PopupNotification,
}, },
computed: { computed: {
...mapState('notification', ['notifications']) ...mapState('notification', ['notifications']),
} },
} }
</script> </script>

12
client-new/src/components/Global/PopupNotification.vue
View file

@ -3,7 +3,7 @@
<div <div
:class="{ :class="{
'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 p-6 pr-10 mt-2 text-white rounded-lg shadow-md"
style="min-width: 240px" style="min-width: 240px"
@ -42,13 +42,13 @@ export default {
props: { props: {
notification: { notification: {
type: Object, type: Object,
required: true required: true,
} },
}, },
data() { data() {
return { return {
timeout: null timeout: null,
} }
}, },
@ -63,7 +63,7 @@ export default {
deleteNotification() { deleteNotification() {
this.remove(this.notification) this.remove(this.notification)
}, },
...mapActions('notification', ['remove']) ...mapActions('notification', ['remove']),
} },
} }
</script> </script>

8
client-new/src/components/Layout/MainFooter.vue
View file

@ -2,10 +2,12 @@
<footer class="pt-20 pb-4 text-blue-200"> <footer class="pt-20 pb-4 text-blue-200">
<p <p
class="absolute leading-tight text-center pointer-events-none horizontal-center text-xxs" class="absolute leading-tight text-center pointer-events-none horizontal-center text-xxs"
style="color: #5d80af;" style="color: #5d80af"
> >
LeagueStats.gg isn't endorsed by Riot Games and doesn't reflect the views or opinions of Riot Games or anyone officially involved in producing or managing Riot Games properties. LeagueStats.gg isn't endorsed by Riot Games and doesn't reflect the views or opinions of Riot
<br />Riot Games, and all associated properties are trademarks or registered trademarks of Riot Games, Inc. Games or anyone officially involved in producing or managing Riot Games properties.
<br />Riot Games, and all associated properties are trademarks or registered trademarks of
Riot Games, Inc.
</p> </p>
<div class="flex items-center justify-between px-6"> <div class="flex items-center justify-between px-6">
<p> <p>

20
client-new/src/components/Match/DetailedMatch.vue
View file

@ -52,30 +52,34 @@ export default {
props: { props: {
data: { data: {
type: Object, type: Object,
required: true required: true,
}, },
detailsOpen: { detailsOpen: {
type: Boolean, type: Boolean,
required: true required: true,
} },
}, },
computed: { computed: {
allyTeam() { allyTeam() {
return this.data.blueTeam.players.some(p => p.summonerId === this.account.id) ? this.data.blueTeam : this.data.redTeam return this.data.blueTeam.players.some((p) => p.summonerId === this.account.id)
? this.data.blueTeam
: this.data.redTeam
}, },
enemyTeam() { enemyTeam() {
return this.data.blueTeam.players.some(p => p.summonerId === this.account.id) ? this.data.redTeam : this.data.blueTeam return this.data.blueTeam.players.some((p) => p.summonerId === this.account.id)
? this.data.redTeam
: this.data.blueTeam
}, },
...mapState({ ...mapState({
account: state => state.summoner.basic.account, account: (state) => state.summoner.basic.account,
percentSettings: state => state.settings.percent percentSettings: (state) => state.settings.percent,
}), }),
}, },
methods: { methods: {
...mapActions('settings', ['updatePercent']), ...mapActions('settings', ['updatePercent']),
} },
} }
</script> </script>

39
client-new/src/components/Match/DetailedMatchGlobalStats.vue
View file

@ -4,7 +4,7 @@
<Tooltip <Tooltip
v-for="ban in team.bans" v-for="ban in team.bans"
:key="'ban-' + ban.pickTurn" :key="'ban-' + ban.pickTurn"
:class="{'ml-2': ban.pickTurn !== 6 && ban.pickTurn !== 1}" :class="{ 'ml-2': ban.pickTurn !== 6 && ban.pickTurn !== 1 }"
class="inline-block" class="inline-block"
> >
<template #trigger> <template #trigger>
@ -13,13 +13,15 @@
class="relative border-2 rounded-full cursor-pointer ban" class="relative border-2 rounded-full cursor-pointer ban"
> >
<div <div
:style="[ban.champion.id ? {backgroundImage: `url('${ban.champion.icon}')`} : '']" :style="[ban.champion.id ? { backgroundImage: `url('${ban.champion.icon}')` } : '']"
class="w-6 h-6 bg-center bg-cover rounded-full ban-img bg-blue-1000" class="w-6 h-6 bg-center bg-cover rounded-full ban-img bg-blue-1000"
></div> ></div>
<div <div
:class="[textLightColor, bgColor]" :class="[textLightColor, bgColor]"
class="absolute flex items-center justify-center w-4 h-4 text-xs font-bold rounded-full ban-order" class="absolute flex items-center justify-center w-4 h-4 text-xs font-bold rounded-full ban-order"
>{{ ban.pickTurn }}</div> >
{{ ban.pickTurn }}
</div>
</div> </div>
</template> </template>
<template #default> <template #default>
@ -34,24 +36,21 @@
class="flex mt-2 leading-tight" class="flex mt-2 leading-tight"
> >
<div> <div>
<div <div :class="textColor" class="text-sm font-medium">
:class="textColor" {{ `${team.teamStats.kills}/${team.teamStats.deaths}/${team.teamStats.assists}` }}
class="text-sm font-medium" </div>
>{{ `${team.teamStats.kills}/${team.teamStats.deaths}/${team.teamStats.assists}` }}</div>
<div class="text-xs text-white">K / D / A</div> <div class="text-xs text-white">K / D / A</div>
</div> </div>
<div :class="allyTeam ? 'ml-3' : 'mr-3'"> <div :class="allyTeam ? 'ml-3' : 'mr-3'">
<div <div :class="textColor" class="text-sm font-medium">
:class="textColor" {{ +(team.teamStats.gold / 1000).toFixed(1) + 'k' }}
class="text-sm font-medium" </div>
>{{ +(team.teamStats.gold / 1000).toFixed(1) + 'k' }}</div>
<div class="text-xs text-white">Gold</div> <div class="text-xs text-white">Gold</div>
</div> </div>
<div :class="allyTeam ? 'ml-3' : 'mr-3'"> <div :class="allyTeam ? 'ml-3' : 'mr-3'">
<div <div :class="textColor" class="text-sm font-medium">
:class="textColor" {{ +(team.teamStats.dmgChamp / 1000).toFixed(1) + 'k' }}
class="text-sm font-medium" </div>
>{{ +(team.teamStats.dmgChamp / 1000).toFixed(1) + 'k' }}</div>
<div class="text-xs text-white">Dmg</div> <div class="text-xs text-white">Dmg</div>
</div> </div>
<div :class="allyTeam ? 'ml-3' : 'mr-3'" class="flex flex-col justify-end"> <div :class="allyTeam ? 'ml-3' : 'mr-3'" class="flex flex-col justify-end">
@ -83,12 +82,12 @@ export default {
props: { props: {
team: { team: {
type: Object, type: Object,
required: true required: true,
}, },
allyTeam: { allyTeam: {
type: Boolean, type: Boolean,
default: false default: false,
} },
}, },
computed: { computed: {
@ -100,7 +99,7 @@ export default {
}, },
bgColor() { bgColor() {
return this.allyTeam ? 'bg-teal-500' : 'bg-red-500' return this.allyTeam ? 'bg-teal-500' : 'bg-red-500'
} },
} },
} }
</script> </script>

75
client-new/src/components/Match/DetailedMatchTeam.vue
View file

@ -10,10 +10,9 @@
> >
<th class="py-5 w-players"> <th class="py-5 w-players">
<div class="flex justify-between"> <div class="flex justify-between">
<span <span :class="allyTeam ? 'text-teal-400' : 'text-red-400'" class="pl-2"
:class="allyTeam ? 'text-teal-400' : 'text-red-400'" >{{ allyTeam ? 'Ally' : 'Enemy' }} Team</span
class="pl-2" >
>{{ allyTeam ? "Ally" : "Enemy" }} Team</span>
<div <div
v-if="data.result === 'Win'" v-if="data.result === 'Win'"
:class="allyTeam ? 'text-teal-400' : 'text-red-400'" :class="allyTeam ? 'text-teal-400' : 'text-red-400'"
@ -30,10 +29,10 @@
<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">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-kda">A</th>
<th class="px-2 py-5 text-sm font-medium w-minions"> <th class="px-2 py-5 text-sm font-medium w-minions">
{{ 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="px-2 py-5 text-sm font-medium w-vision">
{{ 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="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="px-2 py-5 text-sm font-medium w-gold-dmg-kp">
@ -51,10 +50,7 @@
<th class="px-2 py-5 text-sm font-medium w-gold-dmg-kp">KP</th> <th class="px-2 py-5 text-sm font-medium w-gold-dmg-kp">KP</th>
</tr> </tr>
</thead> </thead>
<tbody <tbody :class="{ 'border-b border-blue-700': allyTeam }" class="leading-none">
:class="{ 'border-b border-blue-700': allyTeam }"
class="leading-none"
>
<tr v-for="(player, index) in data.players" :key="player.name + index"> <tr v-for="(player, index) in data.players" :key="player.name + index">
<td class="py-2 border-r border-blue-700"> <td class="py-2 border-r border-blue-700">
<div class="flex justify-between px-1"> <div class="flex justify-between px-1">
@ -73,11 +69,7 @@
class="relative w-8 h-8 ml-2 bg-center bg-cover rounded-full bg-blue-1000" class="relative w-8 h-8 ml-2 bg-center bg-cover rounded-full bg-blue-1000"
> >
<div <div
:class=" :class="allyTeam ? 'bg-teal-500 text-teal-100' : 'bg-red-500 text-red-100'"
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="absolute bottom-0 flex items-center justify-center w-4 h-4 rounded-full level-position text-xxs"
> >
<span>{{ player.level }}</span> <span>{{ player.level }}</span>
@ -97,9 +89,7 @@
></div> ></div>
</template> </template>
<template v-if="player.summonerSpell1" #default> <template v-if="player.summonerSpell1" #default>
<div <div class="flex max-w-sm p-2 text-xs text-left text-white select-none">
class="flex max-w-sm p-2 text-xs text-left text-white select-none"
>
<div <div
:style="{ :style="{
backgroundImage: `url('${player.summonerSpell1.icon}')`, backgroundImage: `url('${player.summonerSpell1.icon}')`,
@ -130,9 +120,7 @@
></div> ></div>
</template> </template>
<template v-if="player.summonerSpell2" #default> <template v-if="player.summonerSpell2" #default>
<div <div class="flex max-w-sm p-2 text-xs text-left text-white select-none">
class="flex max-w-sm p-2 text-xs text-left text-white select-none"
>
<div <div
:style="{ :style="{
backgroundImage: `url('${player.summonerSpell2.icon}')`, backgroundImage: `url('${player.summonerSpell2.icon}')`,
@ -162,8 +150,8 @@
:style="[ :style="[
player.primaryRune player.primaryRune
? { ? {
background: `url(${player.primaryRune}) center/cover`, background: `url(${player.primaryRune}) center/cover`,
} }
: '', : '',
]" ]"
class="w-4 h-4 rounded-md bg-blue-1000" class="w-4 h-4 rounded-md bg-blue-1000"
@ -172,8 +160,8 @@
:style="[ :style="[
player.secondaryRune player.secondaryRune
? { ? {
background: `url(${player.secondaryRune}) center/cover`, background: `url(${player.secondaryRune}) center/cover`,
} }
: '', : '',
]" ]"
class="w-4 h-4 rounded-md bg-blue-1000" class="w-4 h-4 rounded-md bg-blue-1000"
@ -181,17 +169,13 @@
</div> </div>
</template> </template>
<template v-if="player.perks" #default> <template v-if="player.perks" #default>
<div <div class="px-2 text-sm leading-relaxed text-center text-white select-none">
class="px-2 text-sm leading-relaxed text-center text-white select-none"
>
<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 <div class="flex flex-col items-start justify-center ml-1 leading-none">
class="flex flex-col items-start justify-center ml-1 leading-none"
>
<router-link <router-link
v-if="player.summonerSpell1" v-if="player.summonerSpell1"
:to="{ :to="{
@ -199,11 +183,11 @@
params: { region: $route.params.region, name: player.name }, params: { region: $route.params.region, name: player.name },
}" }"
:class="{ :class="{
'font-semibold text-yellow-400': 'font-semibold text-yellow-400': account.id === player.summonerId,
account.id === player.summonerId,
}" }"
class="overflow-hidden text-xs text-left text-white whitespace-no-wrap w-22 text-overflow hover:text-blue-200" class="overflow-hidden text-xs text-left text-white whitespace-no-wrap w-22 text-overflow hover:text-blue-200"
>{{ player.name }}</router-link> >{{ player.name }}</router-link
>
<div <div
v-else v-else
class="overflow-hidden text-xs text-left text-white whitespace-no-wrap w-22 text-overflow" class="overflow-hidden text-xs text-left text-white whitespace-no-wrap w-22 text-overflow"
@ -218,9 +202,7 @@
<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="w-5 h-5 ml-auto">
<use <use :xlink:href="`#rank-${player.rank.tier.toLowerCase()}`" />
:xlink:href="`#rank-${player.rank.tier.toLowerCase()}`"
/>
</svg> </svg>
<div class="text-blue-300 text-xxs"> <div class="text-blue-300 text-xxs">
{{ player.rank.shortName }} {{ player.rank.shortName }}
@ -350,8 +332,8 @@ export default {
}, },
ranksLoaded: { ranksLoaded: {
type: Boolean, type: Boolean,
default: false default: false,
} },
}, },
computed: { computed: {
@ -367,18 +349,14 @@ export default {
methods: { methods: {
bgColor(player, stats) { bgColor(player, stats) {
const value = parseFloat(player.stats[stats]) const value = parseFloat(player.stats[stats])
const biggestValue = Math.max( const biggestValue = Math.max(...this.allPlayers.map((p) => parseFloat(p.stats[stats])), 0)
...this.allPlayers.map((p) => parseFloat(p.stats[stats])),
0
)
const opacity = (value / biggestValue).toFixed(2) const opacity = (value / biggestValue).toFixed(2)
const biggestValueStyle = {} const biggestValueStyle = {}
if (value === biggestValue && value !== 0) { if (value === biggestValue && value !== 0) {
biggestValueStyle.boxShadow = 'rgba(181, 160, 122, 0.5) 0px 0px 10px' biggestValueStyle.boxShadow = 'rgba(181, 160, 122, 0.5) 0px 0px 10px'
biggestValueStyle.border = '2px solid' biggestValueStyle.border = '2px solid'
biggestValueStyle.borderImageSlice = '1' biggestValueStyle.borderImageSlice = '1'
biggestValueStyle.borderImageSource = biggestValueStyle.borderImageSource = 'linear-gradient(to top, #edb457, #f9e9ce)'
'linear-gradient(to top, #edb457, #f9e9ce)'
biggestValueStyle.borderCollapse = 'separate' biggestValueStyle.borderCollapse = 'separate'
} }
@ -431,19 +409,18 @@ export default {
} }
.heading-row th:first-child:before { .heading-row th:first-child:before {
content: ""; content: '';
position: absolute; position: absolute;
z-index: -10; z-index: -10;
top: 0; top: 0;
left: 0; left: 0;
height: 67px; height: 67px;
width: 884px; width: 884px;
background-image: var(--bg-img), background-image: var(--bg-img), linear-gradient(#2a4365 0%, #2b4c77 55%, #235a93 100%);
linear-gradient(#2a4365 0%, #2b4c77 55%, #235a93 100%);
} }
.heading-row th:first-child:after { .heading-row th:first-child:after {
content: ""; content: '';
position: absolute; position: absolute;
right: -1px; right: -1px;
top: 0; top: 0;

63
client-new/src/components/Match/LiveMatch.vue
View file

@ -7,10 +7,7 @@
<span>V</span> <span>V</span>
<span class="ml-4 -mt-3">S</span> <span class="ml-4 -mt-3">S</span>
</div> </div>
<div <div :class="{ 'w-10': displayStartTime !== 'Not started yet' }" class="pb-2 text-blue-200">
:class="{'w-10': displayStartTime !== 'Not started yet'}"
class="pb-2 text-blue-200"
>
{{ displayStartTime }} {{ displayStartTime }}
</div> </div>
</div> </div>
@ -22,15 +19,21 @@
class="flex items-center px-5 py-1 leading-loose" class="flex items-center px-5 py-1 leading-loose"
> >
<div <div
:style="{backgroundImage: `url('https://raw.communitydragon.org/latest/plugins/rcp-be-lol-game-data/global/default/v1/champion-icons/${ally.championId}.png')`}" :style="{
backgroundImage: `url('https://raw.communitydragon.org/latest/plugins/rcp-be-lol-game-data/global/default/v1/champion-icons/${ally.championId}.png')`,
}"
class="w-6 h-6 bg-center bg-cover rounded-full bg-blue-1000" class="w-6 h-6 bg-center bg-cover rounded-full bg-blue-1000"
></div> ></div>
<router-link <router-link
v-if="!ally.bot" v-if="!ally.bot"
:to="{ name: 'summoner', params: { region: $route.params.region, name: ally.summonerName }}" :to="{
name: 'summoner',
params: { region: $route.params.region, name: ally.summonerName },
}"
:class="[ally.summonerId === account.id ? 'text-white' : 'text-blue-200']" :class="[ally.summonerId === account.id ? 'text-white' : 'text-blue-200']"
class="relative ml-2 hover:text-white" class="relative ml-2 hover:text-white"
>{{ ally.summonerName }}</router-link> >{{ ally.summonerName }}</router-link
>
</li> </li>
</ul> </ul>
<ul class="w-1/2 text-right"> <ul class="w-1/2 text-right">
@ -42,18 +45,27 @@
> >
<router-link <router-link
v-if="!enemy.bot" v-if="!enemy.bot"
:to="{ name: 'summoner', params: { region: $route.params.region, name: enemy.summonerName }}" :to="{
name: 'summoner',
params: { region: $route.params.region, name: enemy.summonerName },
}"
class="relative text-red-200 hover:text-white" class="relative text-red-200 hover:text-white"
>{{ enemy.summonerName }}</router-link> >{{ enemy.summonerName }}</router-link
>
<div <div
:style="{backgroundImage: `url('https://raw.communitydragon.org/latest/plugins/rcp-be-lol-game-data/global/default/v1/champion-icons/${enemy.championId}.png')`}" :style="{
backgroundImage: `url('https://raw.communitydragon.org/latest/plugins/rcp-be-lol-game-data/global/default/v1/champion-icons/${enemy.championId}.png')`,
}"
class="w-6 h-6 ml-2 bg-center bg-cover rounded-full bg-blue-1000" class="w-6 h-6 ml-2 bg-center bg-cover rounded-full bg-blue-1000"
></div> ></div>
</li> </li>
</ul> </ul>
</div> </div>
<router-link <router-link
:to="{ name: 'summonerLive', params: { region: $route.params.region, name: $route.params.name }}" :to="{
name: 'summonerLive',
params: { region: $route.params.region, name: $route.params.name },
}"
class="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="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"
> >
<div class="-mt-2px">more</div> <div class="-mt-2px">more</div>
@ -74,43 +86,28 @@ export default {
<style scoped> <style scoped>
.accent-ally { .accent-ally {
background-image: linear-gradient( background-image: linear-gradient(90deg, rgba(49, 130, 206, 0.7) 0%, rgba(44, 82, 130, 0) 100%);
90deg,
rgba(49, 130, 206, 0.7) 0%,
rgba(44, 82, 130, 0) 100%
);
} }
.ally { .ally {
background-image: linear-gradient( background-image: linear-gradient(90deg, rgba(49, 130, 206, 0.3) 0%, rgba(44, 82, 130, 0) 90%);
90deg,
rgba(49, 130, 206, 0.3) 0%,
rgba(44, 82, 130, 0) 90%
);
} }
.accent-enemy { .accent-enemy {
background-image: linear-gradient( background-image: linear-gradient(90deg, rgba(44, 82, 130, 0) 0%, rgba(140, 0, 0, 0.4) 100%);
90deg,
rgba(44, 82, 130, 0) 0%,
rgba(140, 0, 0, 0.4) 100%
);
} }
.enemy { .enemy {
background-image: linear-gradient( background-image: linear-gradient(90deg, rgba(44, 82, 130, 0) 10%, rgba(140, 0, 0, 0.3) 100%);
90deg,
rgba(44, 82, 130, 0) 10%,
rgba(140, 0, 0, 0.3) 100%
);
} }
.vs { .vs {
text-shadow: 3px 2px 0px rgba(49, 130, 206, 0.8), text-shadow:
3px 2px 0px rgba(49, 130, 206, 0.8),
-3px 2px 0px rgba(229, 62, 62, 0.8); -3px 2px 0px rgba(229, 62, 62, 0.8);
} }
.live-game-link:hover svg { .live-game-link:hover svg {
@apply translate-x-1 @apply translate-x-1;
} }
</style> </style>

127
client-new/src/components/Match/Match.vue
View file

@ -3,63 +3,69 @@
<Ripple <Ripple
@click.native="displayDetails" @click.native="displayDetails"
color="rgba(43, 108, 176, 0.7)" color="rgba(43, 108, 176, 0.7)"
:class="[data.result, showDetails ? 'rounded-t-lg' : 'rounded-lg', {'mt-4': indexMatch !== 0 }]" :class="[
data.result,
showDetails ? 'rounded-t-lg' : 'rounded-lg',
{ 'mt-4': indexMatch !== 0 },
]"
class="relative text-base text-white bg-blue-800 cursor-pointer match hover:shadow-xl" class="relative text-base text-white bg-blue-800 cursor-pointer match hover:shadow-xl"
> >
<div class="relative flex flex-wrap px-5 py-3"> <div class="relative flex flex-wrap px-5 py-3">
<div <div
v-if="data.newMatch" v-if="data.newMatch"
class="absolute top-0 right-0 px-2 rounded-full new-match text-xxs" class="absolute top-0 right-0 px-2 rounded-full new-match text-xxs"
style="margin: 0.35rem 0.35rem 0 0; background-color: rgba(99,179,237, .2);" style="margin: 0.35rem 0.35rem 0 0; background-color: rgba(99, 179, 237, 0.2)"
>New</div> >
New
</div>
<div class="w-4/12 text-left first"> <div class="w-4/12 text-left first">
<div> <div>
<div <div class="h-6 text-lg font-extrabold leading-none text-teal-500 uppercase">
class="h-6 text-lg font-extrabold leading-none text-teal-500 uppercase" {{ data.champion.name }}
>{{ data.champion.name }}</div> </div>
<div class="flex"> <div class="flex">
<div class="flex flex-col items-center justify-end"> <div class="flex flex-col items-center justify-end">
<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="w-10 h-10 bg-center bg-cover"
></div> ></div>
<div <div class="w-10 text-xs font-extrabold text-center text-teal-500">
class="w-10 text-xs font-extrabold text-center 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="w-16 h-16 ml-2 rounded-lg crop-champion bg-blue-1000"
></div> ></div>
<div class="flex flex-col justify-around ml-2"> <div class="flex flex-col justify-around ml-2">
<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="w-6 h-6 bg-center bg-cover rounded-md bg-blue-1000"
></div> ></div>
<div <div v-else class="w-6 h-6 rounded-md bg-blue-1000"></div>
v-else
class="w-6 h-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="w-6 h-6 bg-center bg-cover rounded-md bg-blue-1000"
></div> ></div>
<div <div v-else class="w-6 h-6 rounded-md bg-blue-1000"></div>
v-else
class="w-6 h-6 rounded-md bg-blue-1000"
></div>
</div> </div>
<div class="flex flex-col justify-around ml-1"> <div class="flex flex-col justify-around ml-1">
<div <div
:style="[data.primaryRune ? {background: `url(${data.primaryRune}) center/cover`} : '']" :style="[
data.primaryRune ? { background: `url(${data.primaryRune}) center/cover` } : '',
]"
class="w-6 h-6 rounded-md bg-blue-1000" class="w-6 h-6 rounded-md bg-blue-1000"
></div> ></div>
<div <div
:style="[data.secondaryRune ? {background: `url(${data.secondaryRune}) center/cover`} : '']" :style="[
data.secondaryRune
? { background: `url(${data.secondaryRune}) center/cover` }
: '',
]"
class="w-6 h-6 rounded-md bg-blue-1000" class="w-6 h-6 rounded-md bg-blue-1000"
></div> ></div>
</div> </div>
@ -71,15 +77,17 @@
<span class>/</span> <span class>/</span>
<span class>{{ data.stats.assists }}</span> <span class>{{ data.stats.assists }}</span>
</div> </div>
<div <div class="relative z-30 mt-2 text-xs font-extrabold text-white">
class="relative z-30 mt-2 text-xs font-extrabold text-white" {{ data.stats.kda }} KDA
>{{ data.stats.kda }} KDA</div> </div>
</div> </div>
</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 items-end h-6 text-sm font-extrabold leading-none text-white"
>{{ data.gamemode.name }}</div> >
{{ data.gamemode.name }}
</div>
</div> </div>
</div> </div>
@ -88,7 +96,7 @@
<div class="relative z-30 ml-4 leading-none"> <div class="relative z-30 ml-4 leading-none">
<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="#creeps" /> <use xlink:href="#creeps" />
</svg> </svg>
<div class="ml-1 text-sm font-bold text-teal-300"> <div class="ml-1 text-sm font-bold text-teal-300">
@ -97,22 +105,22 @@
</div> </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="#gold" /> <use xlink:href="#gold" />
</svg> </svg>
<div class="ml-1 text-sm font-bold gold">{{ data.stats.gold|kilo }}</div> <div class="ml-1 text-sm font-bold gold">{{ data.stats.gold | kilo }}</div>
</div> </div>
<div class="flex items-center"> <div class="flex items-center">
<svg style="width: 15px; height: 15px;"> <svg style="width: 15px; height: 15px">
<use xlink:href="#damage" /> <use xlink:href="#damage" />
</svg> </svg>
<div class="ml-1 text-sm font-bold damage">{{ data.stats.dmgChamp|kilo }}</div> <div class="ml-1 text-sm font-bold damage">{{ data.stats.dmgChamp | kilo }}</div>
</div> </div>
<div class="flex items-center"> <div class="flex items-center">
<svg style="width: 15px; height: 15px;"> <svg style="width: 15px; height: 15px">
<use xlink:href="#kill-participation" /> <use xlink:href="#kill-participation" />
</svg> </svg>
<div class="ml-1 text-sm font-bold kp">{{ data.stats.kp|percent }}</div> <div class="ml-1 text-sm font-bold kp">{{ data.stats.kp | percent }}</div>
</div> </div>
</div> </div>
</div> </div>
@ -127,46 +135,61 @@
<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"
@click.native="$event.stopImmediatePropagation()" @click.native="$event.stopImmediatePropagation()"
:to="{ name: 'summoner', params: { region: $route.params.region, name: ally.name }}" :to="{
name: 'summoner',
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-no-wrap hover:text-white text-overflow" class="w-16 overflow-hidden text-xs font-medium text-right whitespace-no-wrap hover:text-white text-overflow"
>{{ 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-no-wrap text-overflow" class="w-16 overflow-hidden text-xs font-medium text-right whitespace-no-wrap text-overflow"
>{{ ally.name }}</div> >
{{ ally.name }}
</div>
<div <div
:class="index !== 0 ? '-mt-1': ''" :class="index !== 0 ? '-mt-1' : ''"
:style="{backgroundImage: `url('${ally.champion.icon}')`}" :style="{ backgroundImage: `url('${ally.champion.icon}')` }"
class="w-6 h-6 ml-1 overflow-hidden bg-center bg-cover rounded-full bg-blue-1000" class="w-6 h-6 ml-1 overflow-hidden bg-center bg-cover rounded-full bg-blue-1000"
></div> ></div>
<div <div
:style="{backgroundImage: data.role !== 'NONE' ? `url(${'/img/roles/' + roles[index] + '.png'})` : null}" :style="{
backgroundImage:
data.role !== 'NONE' ? `url(${'/img/roles/' + roles[index] + '.png'})` : null,
}"
class="w-4 h-4 mx-2 bg-center bg-cover" class="w-4 h-4 mx-2 bg-center bg-cover"
></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="w-6 h-6 bg-center bg-cover rounded-full bg-blue-1000"
></div> ></div>
<router-link <router-link
v-if="data.enemyTeam[index].account_id !== '0'" v-if="data.enemyTeam[index].account_id !== '0'"
@click.native="$event.stopImmediatePropagation()" @click.native="$event.stopImmediatePropagation()"
:to="{ name: 'summoner', params: { region: $route.params.region, name: data.enemyTeam[index].name }}" :to="{
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-no-wrap hover:text-white text-overflow" class="w-16 ml-1 overflow-hidden text-xs font-medium text-left text-blue-200 whitespace-no-wrap hover:text-white text-overflow"
>{{ 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-no-wrap text-overflow" class="w-16 ml-1 overflow-hidden text-xs font-medium text-left text-blue-200 whitespace-no-wrap text-overflow"
>{{ data.enemyTeam[index].name }}</div> >
{{ data.enemyTeam[index].name }}
</div>
</div> </div>
</div> </div>
<div class="flex flex-col items-center justify-center ml-auto"> <div class="flex flex-col items-center justify-center ml-auto">
<svg class="w-5 h-5 text-blue-200"> <svg class="w-5 h-5 text-blue-200">
<use xlink:href="#stopwatch" /> <use xlink:href="#stopwatch" />
</svg> </svg>
<div class="text-lg font-medium text-teal-400">{{ (data.time)|secToTime }}</div> <div class="text-lg font-medium text-teal-400">{{ data.time | secToTime }}</div>
<Tooltip> <Tooltip>
<template #trigger> <template #trigger>
<div class="text-xs font-medium text-white">{{ data.date }}</div> <div class="text-xs font-medium text-white">{{ data.date }}</div>
@ -207,24 +230,24 @@ export default {
props: { props: {
data: { data: {
type: Object, type: Object,
required: true required: true,
}, },
indexMatch: { indexMatch: {
type: Number, type: Number,
default: -1, default: -1,
} },
}, },
data() { data() {
return { return {
showDetails: false showDetails: false,
} }
}, },
computed: { computed: {
...mapState({ ...mapState({
account: state => state.summoner.basic.account, account: (state) => state.summoner.basic.account,
roles: state => state.roles roles: (state) => state.roles,
}), }),
...mapGetters('detailedMatch', ['getMatchDetails']), ...mapGetters('detailedMatch', ['getMatchDetails']),
}, },
@ -240,11 +263,11 @@ export default {
isSummonerProfile(account_id) { isSummonerProfile(account_id) {
return { return {
'font-bold text-white': this.account.accountId === account_id, 'font-bold text-white': this.account.accountId === account_id,
'text-blue-200': this.account.accountId !== account_id 'text-blue-200': this.account.accountId !== account_id,
} }
}, },
...mapActions('detailedMatch', ['matchDetails']), ...mapActions('detailedMatch', ['matchDetails']),
} },
} }
</script> </script>

30
client-new/src/components/Match/MatchItems.vue
View file

@ -1,8 +1,5 @@
<template> <template>
<div <div :class="oneRow ? 'ml-2 items-center' : 'items-2-rows flex-wrap'" class="flex">
:class="oneRow ? 'ml-2 items-center' : 'items-2-rows flex-wrap'"
class="flex"
>
<Tooltip v-for="(item, index) in items" :key="index"> <Tooltip v-for="(item, index) in items" :key="index">
<template #trigger> <template #trigger>
<div class="relative"> <div class="relative">
@ -14,10 +11,7 @@
]" ]"
class="relative z-10 bg-center bg-cover rounded-md bg-blue-1000" class="relative z-10 bg-center bg-cover rounded-md bg-blue-1000"
> >
<div <div v-if="isMythic(item)" class="w-full h-full rounded-md mythic-inside"></div>
v-if="isMythic(item)"
class="w-full h-full rounded-md mythic-inside"
></div>
</div> </div>
<div <div
v-if="isMythic(item)" v-if="isMythic(item)"
@ -36,9 +30,7 @@
<div class="text-base">{{ itemName(item.name) }}</div> <div class="text-base">{{ itemName(item.name) }}</div>
<div class="mt-1"> <div class="mt-1">
<span class="text-blue-200">Price:</span> <span class="text-blue-200">Price:</span>
<span class="ml-1 text-sm font-semibold text-yellow-500">{{ <span class="ml-1 text-sm font-semibold text-yellow-500">{{ item.price }}</span>
item.price
}}</span>
</div> </div>
<div <div
v-html="item.description" v-html="item.description"
@ -56,18 +48,18 @@ import Tooltip from '@/components/Common/Tooltip.vue'
export default { export default {
components: { components: {
Tooltip Tooltip,
}, },
props: { props: {
oneRow: { oneRow: {
type: Boolean, type: Boolean,
default: false default: false,
}, },
items: { items: {
type: Array, type: Array,
required: true required: true,
} },
}, },
methods: { methods: {
@ -81,14 +73,16 @@ export default {
// Fix to still make work the old items links (before season 11) // Fix to still make work the old items links (before season 11)
const originalUrl = item.image const originalUrl = item.image
const newUrl = originalUrl.includes('/global/default/assets/items/') ? originalUrl : originalUrl.replace('latest', '10.22') const newUrl = originalUrl.includes('/global/default/assets/items/')
? originalUrl
: originalUrl.replace('latest', '10.22')
return `url('${newUrl}')` return `url('${newUrl}')`
}, },
itemName(name) { itemName(name) {
// Remove placeholders in item names (e.g.: for Ornn items) // Remove placeholders in item names (e.g.: for Ornn items)
return name.replace(/%[^%]*%/, '') return name.replace(/%[^%]*%/, '')
} },
} },
} }
</script> </script>

67
client-new/src/components/Match/Runes/RuneStyle.vue
View file

@ -16,38 +16,24 @@
</div> </div>
<div class="mt-24 space-y-4"> <div class="mt-24 space-y-4">
<div <div v-for="(category, index) in slots" :key="`secondary-category-${index}`" class="">
v-for="(category, index) in slots"
:key="`secondary-category-${index}`"
class=""
>
<div class="flex space-x-4"> <div class="flex space-x-4">
<ul v-for="runeId in category" :key="`slot-${runeId}`"> <ul v-for="runeId in category" :key="`slot-${runeId}`">
<Tooltip> <Tooltip>
<template #trigger> <template #trigger>
<li <li
:style="{ :style="{
backgroundImage: `url('${createCDragonAssetUrl( backgroundImage: `url('${createCDragonAssetUrl(runes.perks[runeId].icon)}')`,
runes.perks[runeId].icon
)}')`,
}" }"
:class=" :class="selectedRunes.selected.includes(runeId) ? 'used-rune' : 'not-used-rune'"
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="w-12 h-12 bg-center bg-cover border-2 border-gray-700 rounded-full cursor-pointer"
></li> ></li>
</template> </template>
<template #default> <template #default>
<div <div class="flex max-w-md p-2 text-sm text-left text-white select-none">
class="flex max-w-md p-2 text-sm text-left text-white select-none"
>
<div <div
:style="{ :style="{
backgroundImage: `url('${createCDragonAssetUrl( backgroundImage: `url('${createCDragonAssetUrl(runes.perks[runeId].icon)}')`,
runes.perks[runeId].icon
)}')`,
}" }"
class="flex-shrink-0 w-12 h-12 ml-1 bg-center bg-cover rounded-md bg-blue-1000" class="flex-shrink-0 w-12 h-12 ml-1 bg-center bg-cover rounded-md bg-blue-1000"
></div> ></div>
@ -63,45 +49,30 @@
</Tooltip> </Tooltip>
</ul> </ul>
</div> </div>
<div <div v-if="primary && index == 0" class="w-full mt-4 bg-gray-500 bg-opacity-25 h-2px"></div>
v-if="primary && index == 0"
class="w-full mt-4 bg-gray-500 bg-opacity-25 h-2px"
></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 <div v-for="(row, index) in kStats" :key="`row-${index}`" class="flex px-3 space-x-8">
v-for="(row, index) in kStats"
:key="`row-${index}`"
class="flex px-3 space-x-8"
>
<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>
<li <li
:style="{ :style="{
backgroundImage: `url('${createCDragonAssetUrl( backgroundImage: `url('${createCDragonAssetUrl(runes.perks[kStat].icon)}')`,
runes.perks[kStat].icon
)}')`,
}" }"
:class=" :class="
selectedRunes.selected[index + 6] === kStat selectedRunes.selected[index + 6] === kStat ? 'used-rune' : 'not-used-rune'
? '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="w-8 h-8 bg-gray-900 bg-center bg-cover border-2 border-gray-700 rounded-full cursor-pointer"
></li> ></li>
</template> </template>
<template #default> <template #default>
<div <div class="flex max-w-md p-2 text-sm text-left text-white select-none">
class="flex max-w-md p-2 text-sm text-left text-white select-none"
>
<div <div
:style="{ :style="{
backgroundImage: `url('${createCDragonAssetUrl( backgroundImage: `url('${createCDragonAssetUrl(runes.perks[kStat].icon)}')`,
runes.perks[kStat].icon
)}')`,
}" }"
class="flex-shrink-0 w-8 h-8 ml-1 bg-center bg-cover rounded-md bg-blue-1000" class="flex-shrink-0 w-8 h-8 ml-1 bg-center bg-cover rounded-md bg-blue-1000"
></div> ></div>
@ -136,12 +107,12 @@ export default {
props: { props: {
primary: { primary: {
type: Boolean, type: Boolean,
default: false default: false,
}, },
runeStyle: { runeStyle: {
type: Object, type: Object,
required: true required: true,
} },
}, },
computed: { computed: {
@ -149,10 +120,10 @@ export default {
return this.primary ? this.runeStyle.slots : this.runeStyle.slots.slice(1) return this.primary ? this.runeStyle.slots : this.runeStyle.slots.slice(1)
}, },
...mapState({ ...mapState({
kStats: state => state.cdragon.kStats, kStats: (state) => state.cdragon.kStats,
runes: state => state.cdragon.runes, runes: (state) => state.cdragon.runes,
runesOpen: state => state.cdragon.runesOpen, runesOpen: (state) => state.cdragon.runesOpen,
selectedRunes: state => state.cdragon.selectedRunes selectedRunes: (state) => state.cdragon.selectedRunes,
}), }),
}, },
@ -166,7 +137,7 @@ export default {
return `https://raw.communitydragon.org/latest/plugins/rcp-fe-lol-collections/global/default/perks/images/${lower}/icon-${lower[0]}.png` return `https://raw.communitydragon.org/latest/plugins/rcp-fe-lol-collections/global/default/perks/images/${lower}/icon-${lower[0]}.png`
}, },
createCDragonAssetUrl, createCDragonAssetUrl,
} },
} }
</script> </script>

21
client-new/src/components/Match/Runes/RunesContainer.vue
View file

@ -1,9 +1,6 @@
<template> <template>
<transition leave-active-class="duration-300"> <transition leave-active-class="duration-300">
<div <div v-show="runesOpen" class="fixed inset-0 z-50 flex items-center justify-center">
v-show="runesOpen"
class="fixed inset-0 z-50 flex items-center justify-center"
>
<transition <transition
enter-active-class="transition duration-300 ease-out" enter-active-class="transition duration-300 ease-out"
enter-class="transform opacity-0" enter-class="transform opacity-0"
@ -12,11 +9,7 @@
leave-class="transform opacity-100" leave-class="transform opacity-100"
leave-to-class="transform opacity-0" leave-to-class="transform opacity-0"
> >
<div <div v-if="runesOpen" @click="close" class="fixed inset-0 bg-gray-900 bg-opacity-75"></div>
v-if="runesOpen"
@click="close"
class="fixed inset-0 bg-gray-900 bg-opacity-75"
></div>
</transition> </transition>
<transition <transition
@ -74,9 +67,9 @@ export default {
return this.runes.perkstyles[this.selectedRunes.secondaryStyle] return this.runes.perkstyles[this.selectedRunes.secondaryStyle]
}, },
...mapState({ ...mapState({
runes: state => state.cdragon.runes, runes: (state) => state.cdragon.runes,
runesOpen: state => state.cdragon.runesOpen, runesOpen: (state) => state.cdragon.runesOpen,
selectedRunes: state => state.cdragon.selectedRunes selectedRunes: (state) => state.cdragon.selectedRunes,
}), }),
}, },
@ -98,7 +91,7 @@ export default {
} }
}, },
createCDragonAssetUrl, createCDragonAssetUrl,
...mapActions('cdragon', ['displayOrHideRunes']) ...mapActions('cdragon', ['displayOrHideRunes']),
} },
} }
</script> </script>

6
client-new/src/components/Summoner/Champions/ChampionsSearch.vue
View file

@ -23,15 +23,15 @@ export default {
data() { data() {
return { return {
championName: '' championName: '',
} }
}, },
methods: { methods: {
search() { search() {
this.$emit('search-champions', this.championName) this.$emit('search-champions', this.championName)
} },
} },
} }
</script> </script>

184
client-new/src/components/Summoner/Champions/ChampionsTable.vue
View file

@ -6,17 +6,21 @@
@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 px-2 py-4 font-normal rounded-tl-lg cursor-pointer hover:bg-blue-700"
>rank</th> >
rank
</th>
<th <th
v-for="(heading, index) in headings" v-for="(heading, index) in headings"
:key="`champHeading-${index}`" :key="`champHeading-${index}`"
@click="sortBy(heading.props)" @click="sortBy(heading.props)"
v-html="heading.name" v-html="heading.name"
:class="[ :class="[
{'rounded-tr-lg': index === headings.length - 1, {
'w-name': heading.name === 'Name', 'rounded-tr-lg': index === headings.length - 1,
'w-kda': heading.name === 'KDA'}, 'w-name': heading.name === 'Name',
sortedClasses(heading.props) 'w-kda': heading.name === 'KDA',
},
sortedClasses(heading.props),
]" ]"
class="relative px-2 py-4 font-normal cursor-pointer hover:bg-blue-700" class="relative px-2 py-4 font-normal cursor-pointer hover:bg-blue-700"
></th> ></th>
@ -26,75 +30,69 @@
<tr <tr
v-for="(champion, index) in championsToDisplay" v-for="(champion, index) in championsToDisplay"
:key="champion._id" :key="champion._id"
:class="{'rounded-b-lg': index === championsToDisplay.length - 1}" :class="{ 'rounded-b-lg': index === championsToDisplay.length - 1 }"
> >
<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="relative px-2 py-3 text-sm text-white bg-blue-800 border-t-table"
>{{ champion.index + 1 }}</td> >
{{ champion.index + 1 }}
</td>
<td class="relative px-2 py-3 text-sm text-white bg-blue-800 border-t-table"> <td class="relative px-2 py-3 text-sm text-white bg-blue-800 border-t-table">
<div class="flex items-center"> <div class="flex items-center">
<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="flex-shrink-0 w-6 h-6 bg-center bg-cover rounded-full bg-blue-1000"
></div> ></div>
<div class="ml-2">{{ champion.champion.name }}</div> <div class="ml-2">{{ champion.champion.name }}</div>
</div> </div>
</td> </td>
<td <td :style="bgColor(champion, 'winrate')" class="px-2 py-3 text-sm text-white">
:style="bgColor(champion, 'winrate')" {{ champion.winrate | percent }}
class="px-2 py-3 text-sm text-white" </td>
>{{ champion.winrate|percent }}</td> <td :style="bgColor(champion, 'playrate')" class="px-2 py-3 text-sm text-white">
<td {{ champion.playrate | percent }}
:style="bgColor(champion, 'playrate')" </td>
class="px-2 py-3 text-sm text-white" <td :style="bgColor(champion, 'wins')" class="px-2 py-3 text-sm text-white">
>{{ champion.playrate|percent }}</td> {{ champion.wins }}
<td </td>
:style="bgColor(champion, 'wins')" <td :style="bgColor(champion, 'count')" class="px-2 py-3 text-sm text-white">
class="px-2 py-3 text-sm text-white" {{ champion.count }}
>{{ champion.wins }}</td> </td>
<td
:style="bgColor(champion, 'count')"
class="px-2 py-3 text-sm text-white"
>{{ champion.count }}</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-no-wrap text-xxs"> <div class="mt-1 text-blue-200 whitespace-no-wrap text-xxs">
{{ champion.kills/champion.count|round(1) }} {{ (champion.kills / champion.count) | round(1) }}
/ /
{{ champion.deaths/champion.count|round(1) }} {{ (champion.deaths / champion.count) | round(1) }}
/ /
{{ champion.assists/champion.count|round(1) }} {{ (champion.assists / champion.count) | round(1) }}
</div> </div>
</td> </td>
<td :style="bgColor(champion, 'kp')" class="px-2 py-3 text-sm text-white">
{{ champion.kp | percent }}
</td>
<td :style="bgColor(champion, 'minions')" class="px-2 py-3 text-sm text-white">
{{ champion.minions | round(0) }}
</td>
<td :style="bgColor(champion, 'gold')" class="px-2 py-3 text-sm text-white">
{{ champion.gold | kilo }}
</td>
<td :style="bgColor(champion, 'dmgChamp')" class="px-2 py-3 text-sm text-white">
{{ champion.dmgChamp | kilo }}
</td>
<td :style="bgColor(champion, 'dmgTaken')" class="px-2 py-3 text-sm text-white">
{{ champion.dmgTaken | kilo }}
</td>
<td :style="bgColor(champion, 'gameLength')" class="px-2 py-3 text-sm text-white">
{{ champion.gameLength | secToTime }}
</td>
<td <td
:style="bgColor(champion, 'kp')" :class="{ 'rounded-br-lg': index === championsToDisplay.length - 1 }"
class="px-2 py-3 text-sm text-white"
>{{ champion.kp|percent }}</td>
<td
:style="bgColor(champion, 'minions')"
class="px-2 py-3 text-sm text-white"
>{{ champion.minions|round(0) }}</td>
<td
:style="bgColor(champion, 'gold')"
class="px-2 py-3 text-sm text-white"
>{{ champion.gold|kilo }}</td>
<td
:style="bgColor(champion, 'dmgChamp')"
class="px-2 py-3 text-sm text-white"
>{{ champion.dmgChamp|kilo }}</td>
<td
:style="bgColor(champion, 'dmgTaken')"
class="px-2 py-3 text-sm text-white"
>{{ champion.dmgTaken|kilo }}</td>
<td
:style="bgColor(champion, 'gameLength')"
class="px-2 py-3 text-sm text-white"
>{{ champion.gameLength|secToTime }}</td>
<td
:class="{'rounded-br-lg': index === championsToDisplay.length - 1}"
class="px-2 py-3 text-xs text-white" class="px-2 py-3 text-xs text-white"
>{{ champion.lastPlayed }}</td> >
{{ champion.lastPlayed }}
</td>
</tr> </tr>
</tbody> </tbody>
<tbody v-else> <tbody v-else>
@ -143,16 +141,16 @@ export default {
props: { props: {
champions: { champions: {
type: Array, type: Array,
required: true required: true,
}, },
onlyMostPlayed: { onlyMostPlayed: {
type: Boolean, type: Boolean,
default: false default: false,
}, },
search: { search: {
type: String, type: String,
default: '' default: '',
} },
}, },
data() { data() {
@ -160,66 +158,66 @@ export default {
headings: [ headings: [
{ {
name: 'Name', name: 'Name',
props: 'champion.name' props: 'champion.name',
}, },
{ {
name: 'Win <br> rate', name: 'Win <br> rate',
props: 'winrate' props: 'winrate',
}, },
{ {
name: 'Play <br> rate', name: 'Play <br> rate',
props: 'playrate' props: 'playrate',
}, },
{ {
name: 'Wins', name: 'Wins',
props: 'wins' props: 'wins',
}, },
{ {
name: 'Plays', name: 'Plays',
props: 'count' props: 'count',
}, },
{ {
name: 'KDA', name: 'KDA',
props: 'kda' props: 'kda',
}, },
{ {
name: 'KP', name: 'KP',
props: 'kp' props: 'kp',
}, },
{ {
name: 'Minions', name: 'Minions',
props: 'minions' props: 'minions',
}, },
{ {
name: 'Gold', name: 'Gold',
props: 'gold' props: 'gold',
}, },
{ {
name: 'Dmg <br> champ', name: 'Dmg <br> champ',
props: 'dmgChamp' props: 'dmgChamp',
}, },
{ {
name: 'Dmg <br> taken', name: 'Dmg <br> taken',
props: 'dmgTaken' props: 'dmgTaken',
}, },
{ {
name: 'Game <br> length', name: 'Game <br> length',
props: 'gameLength' props: 'gameLength',
}, },
{ {
name: 'Last <br> played', name: 'Last <br> played',
props: 'date' props: 'date',
} },
], ],
championsFull: [], championsFull: [],
sortProps: 'index', sortProps: 'index',
order: -1 order: -1,
} }
}, },
computed: { computed: {
championsToDisplay() { championsToDisplay() {
return this.championsFull.filter(c => { return this.championsFull.filter((c) => {
const playedEnough = this.onlyMostPlayed ? c.playrate >= 1 : true const playedEnough = this.onlyMostPlayed ? c.playrate >= 1 : true
const searched = c.champion.name.toLowerCase().includes(this.search.toLowerCase()) const searched = c.champion.name.toLowerCase().includes(this.search.toLowerCase())
return playedEnough && searched return playedEnough && searched
@ -227,7 +225,7 @@ export default {
}, },
totalGames() { totalGames() {
return this.champions.reduce((agg, champ) => agg + champ.count, 0) return this.champions.reduce((agg, champ) => agg + champ.count, 0)
} },
}, },
watch: { watch: {
@ -236,7 +234,7 @@ export default {
}, },
championsToDisplay() { championsToDisplay() {
this.reApplySorts() this.reApplySorts()
} },
}, },
created() { created() {
@ -247,15 +245,16 @@ export default {
bgColor(champion, stats) { bgColor(champion, stats) {
const biggestValue = Math.max( const biggestValue = Math.max(
...this.championsToDisplay ...this.championsToDisplay
.filter(c => c[stats] !== Infinity) .filter((c) => c[stats] !== Infinity)
.map(c => parseFloat(c[stats])) .map((c) => parseFloat(c[stats])),
, 0) 0
)
// Take the second biggest Value if it's an Infinity KDA // Take the second biggest Value if it's an Infinity KDA
const value = champion[stats] === Infinity ? biggestValue : parseFloat(champion[stats]) const value = champion[stats] === Infinity ? biggestValue : parseFloat(champion[stats])
const opacity = (value / biggestValue).toFixed(2) const opacity = (value / biggestValue).toFixed(2)
return { return {
backgroundColor: `rgba(${colors[stats]}, ${opacity})` backgroundColor: `rgba(${colors[stats]}, ${opacity})`,
} }
}, },
sortBy(props) { sortBy(props) {
@ -271,8 +270,7 @@ export default {
const bProp = props.split('.').reduce((p, c) => p && p[c], b) const bProp = props.split('.').reduce((p, c) => p && p[c], b)
let order = typeof aProp === 'string' ? aProp.localeCompare(bProp) : aProp - bProp let order = typeof aProp === 'string' ? aProp.localeCompare(bProp) : aProp - bProp
if (this.order == -1) if (this.order == -1) order *= -1
order *= -1
// Revert order for rank and champion name // Revert order for rank and champion name
if (props === 'index' || props === 'champion.name') { if (props === 'index' || props === 'champion.name') {
@ -297,20 +295,22 @@ export default {
}, },
updateChampionsList() { updateChampionsList() {
this.championsFull = this.champions.map((champ, index) => { this.championsFull = this.champions.map((champ, index) => {
let kda = champ.kills === 0 && champ.assists === 0 && champ.deaths === 0 ? 0 : (champ.kills + champ.assists) / champ.deaths let kda =
champ.kills === 0 && champ.assists === 0 && champ.deaths === 0
? 0
: (champ.kills + champ.assists) / champ.deaths
return { return {
...champ, ...champ,
winrate: champ.wins * 100 / champ.count, winrate: (champ.wins * 100) / champ.count,
playrate: champ.count * 100 / this.totalGames, playrate: (champ.count * 100) / this.totalGames,
kda, kda,
index, index,
lastPlayed: timeDifference(champ.date), lastPlayed: timeDifference(champ.date),
show: true show: true,
} }
}) })
} },
} },
} }
</script> </script>
@ -320,7 +320,7 @@ export default {
} }
.border-t-table::after { .border-t-table::after {
content: ""; content: '';
position: absolute; position: absolute;
right: 0; right: 0;
top: 0; top: 0;
@ -330,7 +330,7 @@ export default {
} }
.sorted::after { .sorted::after {
content: ""; content: '';
position: absolute; position: absolute;
top: -15px; top: -15px;
left: 0; left: 0;

17
client-new/src/components/Summoner/Champions/FilterQueue.vue
View file

@ -4,9 +4,11 @@
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 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"
style="width: 144px;" style="width: 144px"
> >
<option v-for="(key) in Object.keys(choices)" :key="key" :value="key">{{ choices[key].name }}</option> <option v-for="key in Object.keys(choices)" :key="key" :value="key">
{{ choices[key].name }}
</option>
</select> </select>
<div <div
class="absolute inset-y-0 right-0 flex items-center px-2 text-gray-700 pointer-events-none" class="absolute inset-y-0 right-0 flex items-center px-2 text-gray-700 pointer-events-none"
@ -25,12 +27,12 @@ export default {
props: { props: {
choices: { choices: {
type: Object, type: Object,
required: true required: true,
} },
}, },
data() { data() {
return { return {
queue: '' queue: '',
} }
}, },
@ -41,8 +43,7 @@ export default {
destroyed() { destroyed() {
// Reload all champions stats for next user visit of the champions tab // Reload all champions stats for next user visit of the champions tab
if (this.queue !== 0) if (this.queue !== 0) this.championsNotLoaded()
this.championsNotLoaded()
}, },
methods: { methods: {
@ -50,6 +51,6 @@ export default {
this.$emit('filter-queue', this.queue) this.$emit('filter-queue', this.queue)
}, },
...mapActions('summoner', ['championsNotLoaded']), ...mapActions('summoner', ['championsNotLoaded']),
} },
} }
</script> </script>

8
client-new/src/components/Summoner/Champions/OnlyMostPlayed.vue
View file

@ -35,14 +35,14 @@ export default {
props: { props: {
value: { value: {
type: Boolean, type: Boolean,
default: false default: false,
} },
}, },
methods: { methods: {
change(e) { change(e) {
this.$emit('input', e.target.checked) this.$emit('input', e.target.checked)
} },
} },
} }
</script> </script>

17
client-new/src/components/Summoner/FilterSeason.vue
View file

@ -7,12 +7,7 @@
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 px-4 pr-8 bg-transparent rounded-md appearance-none cursor-pointer focus:outline-none group-hover:text-white"
> >
<option :value="null" class="bg-blue-800">All seasons</option> <option :value="null" class="bg-blue-800">All seasons</option>
<option <option v-for="(s, index) in sortedSeasons" :key="index" :value="s" class="bg-blue-800">
v-for="(s, index) in sortedSeasons"
:key="index"
:value="s"
class="bg-blue-800"
>
<template v-if="Number.isInteger(s)">Season {{ s }}</template> <template v-if="Number.isInteger(s)">Season {{ s }}</template>
<!-- Preseason numbers are stored in this format: 10.5 for Preseason 11 --> <!-- Preseason numbers are stored in this format: 10.5 for Preseason 11 -->
<template v-else>Preseason {{ s + 0.5 }}</template> <template v-else>Preseason {{ s + 0.5 }}</template>
@ -34,7 +29,7 @@ import { mapActions, mapState } from 'vuex'
export default { export default {
data() { data() {
return { return {
season: null season: null,
} }
}, },
@ -43,8 +38,8 @@ export default {
return [...this.seasons].sort((a, b) => b - a) return [...this.seasons].sort((a, b) => b - a)
}, },
...mapState({ ...mapState({
currentseason: state => state.summoner.basic.currentSeason, currentseason: (state) => state.summoner.basic.currentSeason,
seasons: state => state.summoner.basic.seasons, seasons: (state) => state.summoner.basic.seasons,
}), }),
}, },
@ -56,7 +51,7 @@ export default {
filterSeason() { filterSeason() {
this.updateSeason(this.season) this.updateSeason(this.season)
}, },
...mapActions('summoner', ['updateSeason']) ...mapActions('summoner', ['updateSeason']),
} },
} }
</script> </script>

8
client-new/src/components/Summoner/HeaderLoader.vue
View file

@ -1,7 +1,7 @@
<template> <template>
<div class="pb-2 text-white"> <div class="pb-2 text-white">
<div class="flex justify-between"> <div class="flex justify-between">
<div style="width: 520px; height: 239px;"> <div style="width: 520px; height: 239px">
<content-loader <content-loader
:height="239" :height="239"
:width="520" :width="520"
@ -23,7 +23,7 @@
</content-loader> </content-loader>
</div> </div>
<div class="rounded-lg bg-blue-850" style="width: 347px; height: 215px;"> <div class="rounded-lg bg-blue-850" style="width: 347px; height: 215px">
<content-loader <content-loader
:height="215" :height="215"
:width="347" :width="347"
@ -157,7 +157,7 @@ import { ContentLoader } from 'vue-content-loader'
export default { export default {
components: { components: {
ContentLoader ContentLoader,
} },
} }
</script> </script>

110
client-new/src/components/Summoner/Live/LiveTeam.vue
View file

@ -2,14 +2,13 @@
<div class="px-5 py-4 mt-2 bg-blue-800 rounded-lg"> <div class="px-5 py-4 mt-2 bg-blue-800 rounded-lg">
<table <table
class="w-full leading-none text-center table-fixed" class="w-full leading-none text-center table-fixed"
style="border-collapse:separate; border-spacing:0 0.5rem;" style="border-collapse: separate; border-spacing: 0 0.5rem"
> >
<thead> <thead>
<tr class="text-left"> <tr class="text-left">
<th <th :class="[ally ? 'text-teal-400 ' : 'text-red-400 ']" class="font-semibold w-team">
:class="[ally ? 'text-teal-400 ' : 'text-red-400 ']" {{ ally ? 'Ally' : 'Enemy' }} Team
class="font-semibold w-team" </th>
>{{ 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">SoloQ Stats</th>
<th class="text-sm font-normal text-blue-200 w-ranked">Flex 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="px-2 text-sm font-normal text-right text-blue-200 w-bans">Bans</th>
@ -31,17 +30,19 @@
class="flex flex-col items-center runes" class="flex flex-col items-center runes"
> >
<div <div
:style="{backgroundImage: `url('${getPrimarRune(player.perks)}')`}" :style="{ backgroundImage: `url('${getPrimarRune(player.perks)}')` }"
class="w-6 h-6 bg-center bg-cover" class="w-6 h-6 bg-center bg-cover"
></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="w-3 h-3 mt-1 bg-center bg-cover"
></div> ></div>
</div> </div>
<div v-else class="w-6"></div> <div v-else class="w-6"></div>
<div <div
:style="{backgroundImage: `url('https://raw.communitydragon.org/latest/plugins/rcp-be-lol-game-data/global/default/v1/champion-icons/${player.championId}.png')`}" :style="{
backgroundImage: `url('https://raw.communitydragon.org/latest/plugins/rcp-be-lol-game-data/global/default/v1/champion-icons/${player.championId}.png')`,
}"
:class="borderChampion(player.summonerId)" :class="borderChampion(player.summonerId)"
class="relative w-12 h-12 ml-2 bg-center bg-cover border-2 rounded-full bg-blue-1000" class="relative w-12 h-12 ml-2 bg-center bg-cover border-2 rounded-full bg-blue-1000"
> >
@ -49,35 +50,39 @@
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-2px bg-blue-1000" class="absolute border rounded-full p-2px bg-blue-1000"
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="w-4 h-4 bg-center bg-cover"
></div> ></div>
</div> </div>
</div> </div>
<div class="flex flex-col ml-2"> <div class="flex flex-col ml-2">
<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="w-4 h-4 bg-center bg-cover rounded-md bg-blue-1000"
></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="w-4 h-4 mt-1 bg-center bg-cover rounded-md bg-blue-1000"
></div> ></div>
</div> </div>
<div class="ml-3 text-sm leading-tight text-left"> <div class="ml-3 text-sm leading-tight text-left">
<router-link <router-link
v-if="!player.bot" v-if="!player.bot"
:to="{ name: 'summoner', params: { region: $route.params.region, name: player.summonerName }}" :to="{
:class="[player.summonerId === account.id ? 'text-yellow-500' : 'hover:text-blue-200']" name: 'summoner',
params: { region: $route.params.region, name: player.summonerName },
}"
:class="[
player.summonerId === account.id ? 'text-yellow-500' : 'hover:text-blue-200',
]"
class="font-semibold" class="font-semibold"
>{{ player.summonerName }}</router-link> >{{ player.summonerName }}</router-link
<div >
:class="[ally ? 'text-teal-300 ' : 'text-red-400 ']" <div :class="[ally ? 'text-teal-300 ' : 'text-red-400 ']" class="text-xs">
class="text-xs" {{ player.champion.name }}
>{{ player.champion.name }}
</div> </div>
</div> </div>
</div> </div>
@ -89,15 +94,15 @@
<svg class="w-5 h-5"> <svg class="w-5 h-5">
<use :xlink:href="`#rank-${player.rank.soloQ.tier.toLowerCase()}`" /> <use :xlink:href="`#rank-${player.rank.soloQ.tier.toLowerCase()}`" />
</svg> </svg>
<div <div class="text-xs font-semibold text-blue-300 mt-2px">
class="text-xs font-semibold text-blue-300 mt-2px" {{ player.rank.soloQ.shortName }}
>{{ player.rank.soloQ.shortName }}</div> </div>
</div> </div>
<div class="ml-5 text-center"> <div class="ml-5 text-center">
<div class="font-semibold">{{ player.rank.soloQ.winrate }}</div> <div class="font-semibold">{{ player.rank.soloQ.winrate }}</div>
<div <div class="mt-1 text-xs text-blue-300">
class="mt-1 text-xs text-blue-300" {{ player.rank.soloQ.wins + player.rank.soloQ.losses }} games
>{{ player.rank.soloQ.wins + player.rank.soloQ.losses }} games</div> </div>
</div> </div>
</div> </div>
<div v-else class="w-5 h-5"> <div v-else class="w-5 h-5">
@ -112,15 +117,15 @@
<svg class="w-5 h-5"> <svg class="w-5 h-5">
<use :xlink:href="`#rank-${player.rank.flex5v5.tier.toLowerCase()}`" /> <use :xlink:href="`#rank-${player.rank.flex5v5.tier.toLowerCase()}`" />
</svg> </svg>
<div <div class="text-xs font-semibold text-blue-300 mt-2px">
class="text-xs font-semibold text-blue-300 mt-2px" {{ player.rank.flex5v5.shortName }}
>{{ player.rank.flex5v5.shortName }}</div> </div>
</div> </div>
<div class="ml-5 text-center"> <div class="ml-5 text-center">
<div class="font-semibold">{{ player.rank.flex5v5.winrate }}</div> <div class="font-semibold">{{ player.rank.flex5v5.winrate }}</div>
<div <div class="mt-1 text-xs text-blue-300">
class="mt-1 text-xs text-blue-300" {{ player.rank.flex5v5.wins + player.rank.flex5v5.losses }} games
>{{ player.rank.flex5v5.wins + player.rank.flex5v5.losses }} games</div> </div>
</div> </div>
</div> </div>
<div v-else class="w-5 h-5"> <div v-else class="w-5 h-5">
@ -137,16 +142,22 @@
> >
<div <div
:style="[ :style="[
banChamp(index, player.teamId) ? banChamp(index, player.teamId)
{backgroundImage: `url('https://raw.communitydragon.org/latest/plugins/rcp-be-lol-game-data/global/default/v1/champion-icons/${banChamp(index, player.teamId).championId}.png')`} ? {
: '' backgroundImage: `url('https://raw.communitydragon.org/latest/plugins/rcp-be-lol-game-data/global/default/v1/champion-icons/${
banChamp(index, player.teamId).championId
}.png')`,
}
: '',
]" ]"
class="w-6 h-6 bg-center bg-cover rounded-full ban-img bg-blue-1000" class="w-6 h-6 bg-center bg-cover rounded-full ban-img bg-blue-1000"
></div> ></div>
<div <div
:class="[ally ? 'text-teal-100 bg-teal-500' : 'text-red-100 bg-red-500']" :class="[ally ? 'text-teal-100 bg-teal-500' : 'text-red-100 bg-red-500']"
class="absolute flex items-center justify-center w-4 h-4 text-xs font-bold rounded-full ban-order" class="absolute flex items-center justify-center w-4 h-4 text-xs font-bold rounded-full ban-order"
>{{ banChamp(index, player.teamId).pickTurn }}</div> >
{{ banChamp(index, player.teamId).pickTurn }}
</div>
</div> </div>
<div v-else class="w-5 h-5 text-left"> <div v-else class="w-5 h-5 text-left">
<div class="text-2xl text-blue-300">-</div> <div class="text-2xl text-blue-300">-</div>
@ -202,7 +213,7 @@ export default {
props: { props: {
team: { team: {
type: Array, type: Array,
required: true required: true,
}, },
ally: { ally: {
type: Boolean, type: Boolean,
@ -211,19 +222,19 @@ export default {
gamemode: { gamemode: {
type: String, type: String,
default: '', default: '',
} },
}, },
data() { data() {
return { return {
clashGameBanOrder: { clashGameBanOrder: {
100: [1, 3, 5, 8, 10], 100: [1, 3, 5, 8, 10],
200: [2, 4, 6, 7, 9] 200: [2, 4, 6, 7, 9],
}, },
customGameBanOrder: { customGameBanOrder: {
100: [1, 3, 5, 2, 4], 100: [1, 3, 5, 2, 4],
200: [2, 4, 6, 1, 3] 200: [2, 4, 6, 1, 3],
} },
} }
}, },
@ -235,10 +246,10 @@ export default {
return this.gamemode === 'Custom Game' return this.gamemode === 'Custom Game'
}, },
...mapState({ ...mapState({
account: state => state.summoner.basic.account, account: (state) => state.summoner.basic.account,
live: state => state.summoner.live.match, live: (state) => state.summoner.live.match,
liveLoaded: state => state.summoner.live.liveLoaded, liveLoaded: (state) => state.summoner.live.liveLoaded,
}) }),
}, },
methods: { methods: {
@ -254,7 +265,7 @@ export default {
toFind = this.customGameBanOrder[teamId][index] toFind = this.customGameBanOrder[teamId][index]
} }
return this.live.bannedChampions.find(b => b.pickTurn === toFind && b.teamId === teamId) return this.live.bannedChampions.find((b) => b.pickTurn === toFind && b.teamId === teamId)
}, },
borderChampion(id) { borderChampion(id) {
if (id === this.account.id) { if (id === this.account.id) {
@ -270,14 +281,13 @@ export default {
} }
}, },
selectRunes(player) { selectRunes(player) {
if(!player.perks) if (!player.perks) return
return
this.displayOrHideRunes(player.perks) this.displayOrHideRunes(player.perks)
}, },
getPrimarRune, getPrimarRune,
getSecondaryRune, getSecondaryRune,
...mapActions('cdragon', ['displayOrHideRunes']), ...mapActions('cdragon', ['displayOrHideRunes']),
} },
} }
</script> </script>
@ -299,7 +309,7 @@ export default {
} }
.live-team-row td:first-child:before { .live-team-row td:first-child:before {
content: ""; content: '';
position: absolute; position: absolute;
z-index: -10; z-index: -10;
top: 0; top: 0;

16
client-new/src/components/Summoner/Overview/OverviewLoader.vue
View file

@ -1,7 +1,7 @@
<template> <template>
<div class="flex mt-3 text-center"> <div class="flex mt-3 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
:height="339" :height="339"
:width="300" :width="300"
@ -41,7 +41,7 @@
<rect x="246" y="308" rx="3" ry="3" width="42" height="16" /> <rect x="246" y="308" rx="3" ry="3" width="42" height="16" />
</content-loader> </content-loader>
</div> </div>
<div class="mt-4 rounded-lg bg-blue-850" style="width: 300px; height: 828px;"> <div class="mt-4 rounded-lg bg-blue-850" style="width: 300px; height: 828px">
<content-loader <content-loader
:height="828" :height="828"
:width="300" :width="300"
@ -133,7 +133,7 @@
</content-loader> </content-loader>
</div> </div>
<div class="mt-4 rounded-lg bg-blue-850" style="width: 300px; height: 384px;"> <div class="mt-4 rounded-lg bg-blue-850" style="width: 300px; height: 384px">
<content-loader <content-loader
:height="384" :height="384"
:width="300" :width="300"
@ -191,9 +191,9 @@
<div <div
v-for="index in 10" v-for="index in 10"
:key="index" :key="index"
:class="{'mt-4': index !== 1}" :class="{ 'mt-4': index !== 1 }"
class="ml-4 rounded-lg bg-blue-850" class="ml-4 rounded-lg bg-blue-850"
style="width: 884px; height: 144px;" style="width: 884px; height: 144px"
> >
<content-loader <content-loader
:height="144" :height="144"
@ -242,7 +242,7 @@
<rect x="803" y="90" rx="3" ry="3" width="59" height="14" /> <rect x="803" y="90" rx="3" ry="3" width="59" height="14" />
</content-loader> </content-loader>
</div> </div>
<div class="mx-auto mt-4" style="width: 135px; height: 40px;"> <div class="mx-auto mt-4" style="width: 135px; height: 40px">
<content-loader <content-loader
:height="40" :height="40"
:width="135" :width="135"
@ -262,7 +262,7 @@ import { ContentLoader } from 'vue-content-loader'
export default { export default {
components: { components: {
ContentLoader ContentLoader,
} },
} }
</script> </script>

54
client-new/src/components/Summoner/Overview/SummonerChampions.vue
View file

@ -1,11 +1,11 @@
<template> <template>
<div class="bg-blue-800 rounded-lg"> <div class="bg-blue-800 rounded-lg">
<div class="relative flex items-center justify-center py-4 text-blue-200 rounded-t-lg heading"> <div class="relative flex items-center justify-center py-4 text-blue-200 rounded-t-lg heading">
<svg class="w-5 h-5" style="transform: rotate(-5deg);"> <svg class="w-5 h-5" style="transform: rotate(-5deg)">
<use xlink:href="#layers" /> <use xlink:href="#layers" />
</svg> </svg>
<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="w-5 h-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 top-0 right-0 mt-3 mr-2">
@ -19,7 +19,10 @@
<div class="px-2 text-sm text-center text-white select-none"> <div class="px-2 text-sm text-center text-white select-none">
<div>Stats based on</div> <div>Stats based on</div>
<div> <div>
<span class="font-bold text-teal-400">{{ stats.global ? stats.global.count : 0 }}</span> matches <span class="font-bold text-teal-400">{{
stats.global ? stats.global.count : 0
}}</span>
matches
</div> </div>
<div class="mt-2 text-xs italic font-normal leading-tight text-blue-100"> <div class="mt-2 text-xs italic font-normal leading-tight text-blue-100">
Load more matches Load more matches
@ -31,7 +34,9 @@
</div> </div>
</div> </div>
<div v-if="stats.champion.length"> <div v-if="stats.champion.length">
<div class="flex items-baseline px-4 mt-3 text-xs font-semibold text-left text-blue-300 uppercase"> <div
class="flex items-baseline px-4 mt-3 text-xs font-semibold text-left text-blue-300 uppercase"
>
<div class="ml-2 text-base text-blue-400 w-champion">Champion</div> <div class="ml-2 text-base text-blue-400 w-champion">Champion</div>
<div class="w-plays">Plays</div> <div class="w-plays">Plays</div>
<div class="w-winrate">Winrate</div> <div class="w-winrate">Winrate</div>
@ -41,13 +46,16 @@
<li <li
v-for="(champion, index) in stats.champion" v-for="(champion, index) in stats.champion"
:key="index" :key="index"
:class="[{'rounded-b-lg': index === stats.champion.length - 1}, {'bg-blue-760': index % 2 === 0}]" :class="[
{ 'rounded-b-lg': index === stats.champion.length - 1 },
{ 'bg-blue-760': index % 2 === 0 },
]"
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="flex items-center ml-2 w-champion">
<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="flex-shrink-0 w-8 h-8 bg-center bg-cover rounded-full bg-blue-1000"
></div> ></div>
<div class="mx-1 truncate">{{ champion.champion.name }}</div> <div class="mx-1 truncate">{{ champion.champion.name }}</div>
@ -55,23 +63,27 @@
<div class="w-plays"> <div class="w-plays">
<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-2px" class="h-1 bg-purple-400 rounded-full mt-2px"
></div> ></div>
</div> </div>
<div class="w-winrate"> <div class="w-winrate">
<div class="text-xs text-green-400">{{ champion.wins * 100 / champion.count|percent }}</div> <div class="text-xs text-green-400">
{{ ((champion.wins * 100) / champion.count) | percent }}
</div>
<div <div
:style="{width: widthBar(champion.wins, champion.count)}" :style="{ width: widthBar(champion.wins, champion.count) }"
class="h-1 bg-green-400 rounded-full mt-2px" class="h-1 bg-green-400 rounded-full mt-2px"
></div> ></div>
</div> </div>
<div class="w-kda"> <div class="w-kda">
<div class="text-xs text-blue-400">
{{ kda(champion.kills, champion.deaths, champion.assists) }}
</div>
<div <div
class="text-xs text-blue-400" :style="{
>{{ kda(champion.kills, champion.deaths, champion.assists) }}</div> width: widthBar(kda(champion.kills, champion.deaths, champion.assists), bestKda),
<div }"
:style="{width: widthBar(kda(champion.kills, champion.deaths, champion.assists), bestKda)}"
class="h-1 bg-blue-400 rounded-full mt-2px" class="h-1 bg-blue-400 rounded-full mt-2px"
></div> ></div>
</div> </div>
@ -97,15 +109,17 @@ export default {
computed: { computed: {
bestKda() { bestKda() {
const bestChamp = this.stats.champion.reduce((a, b) => { const bestChamp = this.stats.champion.reduce((a, b) => {
return this.kda(a.kills, a.deaths, a.assists) > this.kda(b.kills, b.deaths, b.assists) ? a : b return this.kda(a.kills, a.deaths, a.assists) > this.kda(b.kills, b.deaths, b.assists)
? a
: b
}) })
return this.kda(bestChamp.kills, bestChamp.deaths, bestChamp.assists) return this.kda(bestChamp.kills, bestChamp.deaths, bestChamp.assists)
}, },
mostPlayed() { mostPlayed() {
return this.stats.champion.reduce((a, b) => a.count > b.count ? a : b).count return this.stats.champion.reduce((a, b) => (a.count > b.count ? a : b)).count
}, },
...mapState({ ...mapState({
stats: state => state.summoner.overview.stats stats: (state) => state.summoner.overview.stats,
}), }),
}, },
@ -117,9 +131,9 @@ export default {
return this.$options.filters.round((kills + assists) / deaths) return this.$options.filters.round((kills + assists) / deaths)
}, },
widthBar(value, total) { widthBar(value, total) {
return `${value * 36 / total}px` return `${(value * 36) / total}px`
} },
} },
} }
</script> </script>

24
client-new/src/components/Summoner/Overview/SummonerMates.vue
View file

@ -2,11 +2,11 @@
<div class="mt-4 bg-blue-800 rounded-lg"> <div class="mt-4 bg-blue-800 rounded-lg">
<div class="pb-2"> <div class="pb-2">
<div class="flex items-center justify-center py-4 text-blue-200 rounded-t-lg heading"> <div class="flex items-center justify-center py-4 text-blue-200 rounded-t-lg heading">
<svg class="w-5 h-5" style="transform: rotate(-5deg);"> <svg class="w-5 h-5" style="transform: rotate(-5deg)">
<use xlink:href="#people" /> <use xlink:href="#people" />
</svg> </svg>
<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="w-5 h-5" style="transform: rotate(5deg)">
<use xlink:href="#people" /> <use xlink:href="#people" />
</svg> </svg>
</div> </div>
@ -23,9 +23,10 @@
class="flex items-center justify-between" class="flex items-center justify-between"
> >
<router-link <router-link
:to="{ name: 'summoner', params: { region: $route.params.region, name: mate.name }}" :to="{ name: 'summoner', params: { region: $route.params.region, name: mate.name } }"
class="w-2/4 truncate hover:text-teal-200" class="w-2/4 truncate hover:text-teal-200"
>{{ mate.name }}</router-link> >{{ mate.name }}</router-link
>
<div class="w-1/4">{{ mate.wins }} / {{ mate.losses }}</div> <div class="w-1/4">{{ mate.wins }} / {{ mate.losses }}</div>
<div class="w-1/4"> <div class="w-1/4">
<Tooltip> <Tooltip>
@ -33,7 +34,7 @@
<div class="h-2 bg-blue-900 rounded-full cursor-pointer"> <div class="h-2 bg-blue-900 rounded-full cursor-pointer">
<div <div
:class="getWinrateColor(mate.wins, mate.count)" :class="getWinrateColor(mate.wins, mate.count)"
:style="{width: `${winrate(mate.wins, mate.count)}%`}" :style="{ width: `${winrate(mate.wins, mate.count)}%` }"
class="h-full rounded-full" class="h-full rounded-full"
></div> ></div>
</div> </div>
@ -45,7 +46,8 @@
<span <span
:class="getWinrateColor(mate.wins, mate.count, false)" :class="getWinrateColor(mate.wins, mate.count, false)"
class="font-bold" class="font-bold"
>{{ winrate(mate.wins, mate.count)|percent }}</span> >{{ winrate(mate.wins, mate.count) | percent }}</span
>
</div> </div>
</div> </div>
</template> </template>
@ -73,7 +75,7 @@ export default {
data() { data() {
return { return {
maxMates: 15 maxMates: 15,
} }
}, },
@ -82,7 +84,7 @@ export default {
return this.mates.length > 0 return this.mates.length > 0
}, },
...mapState({ ...mapState({
mates: state => state.summoner.overview.stats.mates mates: (state) => state.summoner.overview.stats.mates,
}), }),
}, },
@ -99,8 +101,8 @@ export default {
return background ? 'bg-teal-200' : 'text-teal-200' return background ? 'bg-teal-200' : 'text-teal-200'
}, },
winrate(wins, count) { winrate(wins, count) {
return wins * 100 / count return (wins * 100) / count
} },
} },
} }
</script> </script>

153
client-new/src/components/Summoner/Overview/SummonerStats.vue
View file

@ -5,7 +5,7 @@
<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="w-6 h-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 top-0 right-0 mt-3 mr-2">
@ -40,12 +40,16 @@
<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 flex-col justify-end w-2 h-12 bg-blue-900 rounded-full cursor-pointer">
<div <div
:style="{height: (role.count * 3 / mostPlayedRole) * role.wins / role.count + 'rem'}" :style="{
height: (((role.count * 3) / mostPlayedRole) * role.wins) / role.count + 'rem',
}"
:class="roundedRoleWins(role.wins, role.count)" :class="roundedRoleWins(role.wins, role.count)"
class="bg-green-400" class="bg-green-400"
></div> ></div>
<div <div
:style="{height: (role.count * 3 / mostPlayedRole) * role.losses / role.count + 'rem'}" :style="{
height: (((role.count * 3) / mostPlayedRole) * role.losses) / role.count + 'rem',
}"
:class="roundedRoleLosses(role.losses, role.count)" :class="roundedRoleLosses(role.losses, role.count)"
class="bg-red-400" class="bg-red-400"
></div> ></div>
@ -53,25 +57,22 @@
</template> </template>
<template #default> <template #default>
<div class="px-2 text-sm text-center text-white select-none"> <div class="px-2 text-sm text-center text-white select-none">
<div>{{ role.role|capitalize }}</div> <div>{{ role.role | capitalize }}</div>
<span <span :class="winLossColor(role.wins, role.losses).win" class="font-bold">{{
:class="winLossColor(role.wins, role.losses).win" role.wins
class="font-bold" }}</span>
>{{ role.wins }}</span>
<span class="mx-1 font-bold text-gray-400">-</span> <span class="mx-1 font-bold text-gray-400">-</span>
<span <span :class="winLossColor(role.wins, role.losses).loss" class="font-bold">{{
:class="winLossColor(role.wins, role.losses).loss" role.losses
class="font-bold" }}</span>
>{{ role.losses }}</span> <div :class="calculateWinrate(role.wins, role.count).color" class="mt-1 font-bold">
<div {{ calculateWinrate(role.wins, role.count).winrate | round }}%
:class="calculateWinrate(role.wins, role.count).color" </div>
class="mt-1 font-bold"
>{{ calculateWinrate(role.wins, role.count).winrate|round }}%</div>
</div> </div>
</template> </template>
</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="w-4 h-4 mt-1 bg-center bg-cover"
></div> ></div>
<div class="text-xs text-blue-200">{{ role.count }}</div> <div class="text-xs text-blue-200">{{ role.count }}</div>
@ -88,29 +89,29 @@
<li <li
v-for="(stat, name, index) in globalStatsKeys" v-for="(stat, name, index) in globalStatsKeys"
:key="index" :key="index"
:class="{'bg-blue-760': index % 2 !== 0}" :class="{ 'bg-blue-760': index % 2 !== 0 }"
class="flex items-center justify-between px-4 py-1 leading-tight" class="flex items-center justify-between px-4 py-1 leading-tight"
> >
<div class="w-1/4 text-left capitalize">{{ name }}</div> <div class="w-1/4 text-left capitalize">{{ name }}</div>
<div class="w-1/4">{{ stat|kilo(false) }}</div> <div class="w-1/4">{{ stat | kilo(false) }}</div>
<div class="w-1/4">{{ stat / (stats.global.time / 60)|round }}</div> <div class="w-1/4">{{ (stat / (stats.global.time / 60)) | round }}</div>
<div class="w-1/4">{{ stat / stats.global.count|round }}</div> <div class="w-1/4">{{ (stat / stats.global.count) | round }}</div>
</li> </li>
<li class="flex items-center justify-between px-4 py-1 leading-tight bg-blue-760"> <li class="flex items-center justify-between px-4 py-1 leading-tight bg-blue-760">
<div class="w-1/4 text-left whitespace-no-wrap">Time</div> <div class="w-1/4 text-left whitespace-no-wrap">Time</div>
<div class="w-1/4">{{ stats.global.time|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-no-wrap">KDA</div> <div class="w-1/4 text-left whitespace-no-wrap">KDA</div>
<div <div class="w-1/4">
class="w-1/4" {{ ((stats.global.kills + stats.global.assists) / stats.global.deaths) | round }}
>{{ (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 px-4 py-1 leading-tight bg-blue-760">
<div class="w-1/4 text-left whitespace-no-wrap">Kill participation</div> <div class="w-1/4 text-left whitespace-no-wrap">Kill participation</div>
<div class="w-1/4">{{ stats.global.kp|percent }}</div> <div class="w-1/4">{{ stats.global.kp | percent }}</div>
</li> </li>
</ul> </ul>
<template v-if="leagueStatsByType('Ranked').length"> <template v-if="leagueStatsByType('Ranked').length">
@ -123,24 +124,21 @@
<li <li
v-for="(league, index) in leagueStatsByType('Ranked')" v-for="(league, index) in leagueStatsByType('Ranked')"
:key="index" :key="index"
:class="{'bg-blue-760': index % 2 !== 0}" :class="{ 'bg-blue-760': index % 2 !== 0 }"
class="flex items-center justify-between px-4 py-1 leading-tight" class="flex items-center justify-between px-4 py-1 leading-tight"
> >
<div class="w-5/12 text-left capitalize">{{ league.name.toLowerCase() }}</div> <div class="w-5/12 text-left capitalize">{{ league.name.toLowerCase() }}</div>
<div <div :class="calculateWinrate(league.wins, league.count).color" class="w-3/12">
:class="calculateWinrate(league.wins, league.count).color" {{ calculateWinrate(league.wins, league.count).winrate | percent }}
class="w-3/12" </div>
>{{ calculateWinrate(league.wins, league.count).winrate|percent }}</div>
<div class="w-4/12"> <div class="w-4/12">
<span <span :class="winLossColor(league.wins, league.losses).win" class="font-semibold">{{
:class="winLossColor(league.wins, league.losses).win" league.wins
class="font-semibold" }}</span>
>{{ league.wins }}</span>
<span class="mx-1 font-semibold text-gray-400">-</span> <span class="mx-1 font-semibold text-gray-400">-</span>
<span <span :class="winLossColor(league.wins, league.losses).loss" class="font-semibold">{{
:class="winLossColor(league.wins, league.losses).loss" league.losses
class="font-semibold" }}</span>
>{{ league.losses }}</span>
</div> </div>
</li> </li>
</ul> </ul>
@ -155,24 +153,21 @@
<li <li
v-for="(league, index) in leagueStatsByType('Normal')" v-for="(league, index) in leagueStatsByType('Normal')"
:key="index" :key="index"
:class="{'bg-blue-760': index % 2 !== 0}" :class="{ 'bg-blue-760': index % 2 !== 0 }"
class="flex items-center justify-between px-4 py-1 leading-tight" class="flex items-center justify-between px-4 py-1 leading-tight"
> >
<div class="w-5/12 text-left capitalize">{{ league.name.toLowerCase() }}</div> <div class="w-5/12 text-left capitalize">{{ league.name.toLowerCase() }}</div>
<div <div :class="calculateWinrate(league.wins, league.count).color" class="w-3/12">
:class="calculateWinrate(league.wins, league.count).color" {{ calculateWinrate(league.wins, league.count).winrate | percent }}
class="w-3/12" </div>
>{{ calculateWinrate(league.wins, league.count).winrate|percent }}</div>
<div class="w-4/12"> <div class="w-4/12">
<span <span :class="winLossColor(league.wins, league.losses).win" class="font-semibold">{{
:class="winLossColor(league.wins, league.losses).win" league.wins
class="font-semibold" }}</span>
>{{ league.wins }}</span>
<span class="mx-1 font-semibold text-gray-400">-</span> <span class="mx-1 font-semibold text-gray-400">-</span>
<span <span :class="winLossColor(league.wins, league.losses).loss" class="font-semibold">{{
:class="winLossColor(league.wins, league.losses).loss" league.losses
class="font-semibold" }}</span>
>{{ league.losses }}</span>
</div> </div>
</li> </li>
</ul> </ul>
@ -187,43 +182,45 @@
<li <li
v-for="(championClass, index) in stats.class" v-for="(championClass, index) in stats.class"
:key="index" :key="index"
:class="{'bg-blue-760': index % 2 !== 0}" :class="{ 'bg-blue-760': index % 2 !== 0 }"
class="flex items-center justify-between px-4 py-1 leading-tight" class="flex items-center justify-between px-4 py-1 leading-tight"
> >
<div class="w-5/12 text-left capitalize">{{ championClass.id }}</div> <div class="w-5/12 text-left capitalize">{{ championClass.id }}</div>
<div <div
:class="calculateWinrate(championClass.wins, championClass.count).color" :class="calculateWinrate(championClass.wins, championClass.count).color"
class="w-3/12" class="w-3/12"
>{{ calculateWinrate(championClass.wins, championClass.count).winrate|percent }}</div> >
{{ calculateWinrate(championClass.wins, championClass.count).winrate | percent }}
</div>
<div class="w-4/12"> <div class="w-4/12">
<span <span
:class="winLossColor(championClass.wins, championClass.losses).win" :class="winLossColor(championClass.wins, championClass.losses).win"
class="font-semibold" class="font-semibold"
>{{ championClass.wins }}</span> >{{ championClass.wins }}</span
>
<span class="mx-1 font-semibold text-gray-400">-</span> <span class="mx-1 font-semibold text-gray-400">-</span>
<span <span
:class="winLossColor(championClass.wins, championClass.losses).loss" :class="winLossColor(championClass.wins, championClass.losses).loss"
class="font-semibold" class="font-semibold"
>{{ championClass.losses }}</span> >{{ championClass.losses }}</span
>
</div> </div>
</li> </li>
</ul> </ul>
</div> </div>
<div class="flex flex-col items-center pb-2 leading-snug"> <div class="flex flex-col items-center pb-2 leading-snug">
<div <div class="text-xl text-teal-400">
class="text-xl text-teal-400" {{ calculateWinrate(stats.global.wins, stats.global.count).winrate | percent }}
>{{ calculateWinrate(stats.global.wins, stats.global.count).winrate|percent }}</div> </div>
<div class="flex text-sm"> <div class="flex text-sm">
<span <span :class="winLossColor(stats.global.wins, stats.global.losses).win" class>{{
:class="winLossColor(stats.global.wins, stats.global.losses).win" stats.global.wins
class }}</span>
>{{ stats.global.wins }}</span>
<span class="mx-1 font-bold text-gray-400">-</span> <span class="mx-1 font-bold text-gray-400">-</span>
<span <span :class="winLossColor(stats.global.wins, stats.global.losses).loss" class>{{
:class="winLossColor(stats.global.wins, stats.global.losses).loss" stats.global.losses
class }}</span>
>{{ stats.global.losses }}</span>
</div> </div>
<span class="text-xs">Global winrate</span> <span class="text-xs">Global winrate</span>
</div> </div>
@ -242,7 +239,7 @@ export default {
computed: { computed: {
mostPlayedRole() { mostPlayedRole() {
return Math.max(...this.stats.role.map(r => r.count), 0) return Math.max(...this.stats.role.map((r) => r.count), 0)
}, },
globalStatsKeys() { globalStatsKeys() {
// eslint-disable-next-line no-unused-vars // eslint-disable-next-line no-unused-vars
@ -250,25 +247,25 @@ export default {
return rest return rest
}, },
...mapState({ ...mapState({
stats: state => state.summoner.overview.stats stats: (state) => state.summoner.overview.stats,
}), }),
}, },
methods: { methods: {
calculateWinrate(wins, count) { calculateWinrate(wins, count) {
const winrate = count !== 0 ? wins / count * 100 : 0 const winrate = count !== 0 ? (wins / count) * 100 : 0
const color = winrate >= 50 ? 'text-green-400' : 'text-red-400' const color = winrate >= 50 ? 'text-green-400' : 'text-red-400'
return { return {
winrate, winrate,
color color,
} }
}, },
leagueStatsByType(typeName) { leagueStatsByType(typeName) {
return this.stats.league return this.stats.league
.map(l => { .map((l) => {
return { ...l, ...gameModes[l.id] } return { ...l, ...gameModes[l.id] }
}) })
.filter(l => l.type === typeName) .filter((l) => l.type === typeName)
}, },
roundedRoleLosses(win, count) { roundedRoleLosses(win, count) {
return win === count ? 'rounded-full' : 'rounded-b-full' return win === count ? 'rounded-full' : 'rounded-b-full'
@ -279,11 +276,11 @@ export default {
winLossColor(win, loss) { winLossColor(win, loss) {
const colors = { const colors = {
win: 'text-gray-200', win: 'text-gray-200',
loss: 'text-gray-200' loss: 'text-gray-200',
} }
win >= loss ? colors.win = 'text-green-400' : colors.loss = 'text-red-400' win >= loss ? (colors.win = 'text-green-400') : (colors.loss = 'text-red-400')
return colors return colors
} },
} },
} }
</script> </script>

24
client-new/src/components/Summoner/RecentActivity.vue
View file

@ -51,7 +51,7 @@
<template v-if="day.matches > 0"> <template v-if="day.matches > 0">
<div> <div>
<span>time played: </span> <span>time played: </span>
<span class="font-semibold text-white">{{ day.time|secToHours }}</span> <span class="font-semibold text-white">{{ day.time | secToHours }}</span>
</div> </div>
<div> <div>
<span>record: </span> <span>record: </span>
@ -87,21 +87,21 @@ export default {
options: { options: {
year: 'numeric', year: 'numeric',
month: '2-digit', month: '2-digit',
day: 'numeric' day: 'numeric',
} },
} }
}, },
computed: { computed: {
...mapState({ ...mapState({
recentActivity: state => state.summoner.basic.recentActivity recentActivity: (state) => state.summoner.basic.recentActivity,
}), }),
}, },
watch: { watch: {
recentActivity() { recentActivity() {
this.fillGrid() this.fillGrid()
} },
}, },
created() { created() {
@ -125,7 +125,7 @@ export default {
wins: 0, wins: 0,
losses: 0, losses: 0,
day: day.toLocaleString('en', { weekday: 'long' }).substring(0, 2), day: day.toLocaleString('en', { weekday: 'long' }).substring(0, 2),
month: day.toLocaleString('en', { month: 'long' }).substring(0, 3) month: day.toLocaleString('en', { month: 'long' }).substring(0, 3),
}) })
} }
@ -137,9 +137,7 @@ export default {
const matchTime = new Date(match.day) const matchTime = new Date(match.day)
const formattedTime = matchTime.toLocaleString(undefined, this.options) const formattedTime = matchTime.toLocaleString(undefined, this.options)
const dayOfTheMatch = this.gridDays.filter( const dayOfTheMatch = this.gridDays.filter((e) => e.date === formattedTime)
e => e.date === formattedTime
)
if (dayOfTheMatch.length > 0) { if (dayOfTheMatch.length > 0) {
dayOfTheMatch[0].time = match.time dayOfTheMatch[0].time = match.time
dayOfTheMatch[0].matches = match.wins + match.losses dayOfTheMatch[0].matches = match.wins + match.losses
@ -149,7 +147,7 @@ export default {
} }
// Get the index of the first Monday // Get the index of the first Monday
this.indexFirstMonday = this.gridDays.findIndex(d => d.day === 'Mo') this.indexFirstMonday = this.gridDays.findIndex((d) => d.day === 'Mo')
}, },
getCaseColor(nbMatches) { getCaseColor(nbMatches) {
/* TODO: change this */ /* TODO: change this */
@ -168,7 +166,7 @@ export default {
if (index % 7 !== 0) { if (index % 7 !== 0) {
return 'mt-1' return 'mt-1'
} }
} },
} },
} }
</script> </script>

45
client-new/src/components/Summoner/Records/RecordCard.vue
View file

@ -3,36 +3,39 @@
@mouseenter="hover = true" @mouseenter="hover = true"
@mouseleave="hover = false" @mouseleave="hover = false"
:style="{ :style="{
backgroundImage: backgroundImage: `${hover ? gradientHover : gradient},
`${hover ? gradientHover : gradient}, url('https://raw.communitydragon.org/latest/plugins/rcp-be-lol-game-data/global/default/v1/champion-splashes/${
url('https://raw.communitydragon.org/latest/plugins/rcp-be-lol-game-data/global/default/v1/champion-splashes/${record.champion_id}/${record.champion_id}000.jpg')` record.champion_id
}/${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="relative w-full p-4 mx-2 mt-6 leading-none bg-center bg-cover border rounded-lg record-card"
> >
<div <div
:class="[ :class="[
{'bg-blue-1000 bg-opacity-75': hover}, { 'bg-blue-1000 bg-opacity-75': hover },
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 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"
> >
<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="[{ '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="block w-16 h-16 mx-auto mt-10 transition duration-500 ease-in transform border-2 rounded-full"
alt="Champion Played" alt="Champion Played"
/> />
<div :style="{textShadow: `-2px 1px 6px ${color}`}" class="mt-6 text-4xl">{{ record.amount }}</div> <div :style="{ textShadow: `-2px 1px 6px ${color}` }" class="mt-6 text-4xl">
{{ record.amount }}
</div>
<div class="text-sm"> <div class="text-sm">
<div class="mt-6"> <div class="mt-6">
<span <span :class="record.result ? 'text-green-400' : 'text-red-400'">{{
:class="record.result ? 'text-green-400' : 'text-red-400'" record.result ? 'Won' : 'Lost'
>{{ record.result ? 'Won' : 'Lost' }}</span> }}</span>
<span class="ml-1 font-semibold">{{ timeDifference(record.date) }}</span> <span class="ml-1 font-semibold">{{ timeDifference(record.date) }}</span>
</div> </div>
<div class="mt-2 text-gray-500"> <div class="mt-2 text-gray-500">
@ -55,38 +58,40 @@ export default {
props: { props: {
borderColor: { borderColor: {
type: String, type: String,
required: true required: true,
}, },
color: { color: {
type: String, type: String,
required: true required: true,
}, },
textColor: { textColor: {
type: String, type: String,
required: true required: true,
}, },
record: { record: {
type: Object, type: Object,
required: true required: true,
}, },
title: { title: {
type: String, type: String,
required: true required: true,
}, },
}, },
data() { data() {
return { return {
gradient: 'linear-gradient(180deg, rgba(42, 67, 101, 0.8) 0%, rgba(42, 67, 101, 0.95) 60%, rgba(42, 67, 101, 1) 100%)', gradient:
gradientHover: 'linear-gradient(rgba(42, 67, 101, 0.1) 0%, rgba(42, 67, 101, 0.3) 60%, rgba(42, 67, 101, 0.5) 100%)', 'linear-gradient(180deg, rgba(42, 67, 101, 0.8) 0%, rgba(42, 67, 101, 0.95) 60%, rgba(42, 67, 101, 1) 100%)',
gradientHover:
'linear-gradient(rgba(42, 67, 101, 0.1) 0%, rgba(42, 67, 101, 0.3) 60%, rgba(42, 67, 101, 0.5) 100%)',
hover: false, hover: false,
gameModes, gameModes,
} }
}, },
methods: { methods: {
timeDifference timeDifference,
} },
} }
</script> </script>

79
client-new/src/components/Summoner/SummonerRanked.vue
View file

@ -4,19 +4,19 @@
<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="relative flex items-center justify-center w-12 h-12 rounded-full percentage-circle"
> >
<div class="relative p-1 bg-blue-900 rounded-full w-11 h-11"> <div class="relative p-1 bg-blue-900 rounded-full w-11 h-11">
<div <div
class="h-full bg-center bg-cover mt-2px" class="h-full bg-center bg-cover mt-2px"
:style="{backgroundImage: `url(${selectedLeague.rankImgLink})`}" :style="{ backgroundImage: `url(${selectedLeague.rankImgLink})` }"
></div> ></div>
</div> </div>
</div> </div>
<div <div class="ml-2 text-3xl font-bold text-teal-500 uppercase">
class="ml-2 text-3xl font-bold text-teal-500 uppercase" {{ 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"
@ -25,7 +25,7 @@
<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="w-3 h-3 rounded-full"
></div> ></div>
</div> </div>
@ -36,11 +36,9 @@
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 px-4 py-2 pr-8 text-lg font-bold leading-tight bg-blue-800 rounded-md appearance-none cursor-pointer hover:bg-blue-700 focus:outline-none"
> >
<option <option v-for="(data, leagueName) in ranked" :key="leagueName" :value="leagueName">
v-for="(data, leagueName) in ranked" {{ data.name }}
:key="leagueName" </option>
:value="leagueName"
>{{ data.name }}</option>
</select> </select>
<div <div
class="absolute inset-y-0 right-0 flex items-center px-2 text-gray-700 pointer-events-none" class="absolute inset-y-0 right-0 flex items-center px-2 text-gray-700 pointer-events-none"
@ -57,8 +55,13 @@
<div class="font-semibold text-red-400">{{ selectedLeague.losses }}</div> <div class="font-semibold text-red-400">{{ selectedLeague.losses }}</div>
<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="['ml-2 text-base leading-tight font-semibold', parseFloat(selectedLeague.winrate) >= 50 ? 'text-green-400' : 'text-red-400']" :class="[
>{{ selectedLeague.winrate }}</div> 'ml-2 text-base leading-tight font-semibold',
parseFloat(selectedLeague.winrate) >= 50 ? 'text-green-400' : 'text-red-400',
]"
>
{{ selectedLeague.winrate }}
</div>
</div> </div>
</div> </div>
</div> </div>
@ -70,24 +73,24 @@ export default {
props: { props: {
ranked: { ranked: {
type: Object, type: Object,
required: true required: true,
} },
}, },
data() { data() {
return { return {
currentDegree: 0, currentDegree: 0,
rankColors: { rankColors: {
'iron': '#574D4F', iron: '#574D4F',
'bronze': '#8C523A', bronze: '#8C523A',
'silver': '#80989D', silver: '#80989D',
'gold': '#CD8837', gold: '#CD8837',
'platinum': '#4E9996', platinum: '#4E9996',
'diamond': '#576BCE', diamond: '#576BCE',
'master': '#9D48E0', master: '#9D48E0',
'grandmaster': '#CD4545', grandmaster: '#CD4545',
'challenger': '#F4C874', challenger: '#F4C874',
}, },
selectedKey: Object.keys(this.ranked)[0] selectedKey: Object.keys(this.ranked)[0],
} }
}, },
@ -102,11 +105,14 @@ export default {
return this.rankColors[this.selectedLeague.tier.toLowerCase()] return this.rankColors[this.selectedLeague.tier.toLowerCase()]
}, },
leagueDegrees() { leagueDegrees() {
return (this.selectedLeague.leaguePoints <= 100 ? this.selectedLeague.leaguePoints : 100) * 360 / 100 return (
((this.selectedLeague.leaguePoints <= 100 ? this.selectedLeague.leaguePoints : 100) * 360) /
100
)
}, },
selectedLeague() { selectedLeague() {
return this.ranked[this.selectedKey] return this.ranked[this.selectedKey]
} },
}, },
watch: { watch: {
@ -114,7 +120,7 @@ export default {
this.currentDegree = 0 this.currentDegree = 0
this.$refs.leagueBorder.style.backgroundImage = null this.$refs.leagueBorder.style.backgroundImage = null
this.triggerAnimation() this.triggerAnimation()
} },
}, },
mounted() { mounted() {
@ -124,10 +130,14 @@ export default {
methods: { methods: {
animateLeagueDegrees(stop = false) { animateLeagueDegrees(stop = false) {
if (stop || !this.$refs.leagueBorder) return if (stop || !this.$refs.leagueBorder) return
this.selectedLeague.leaguePoints > 50 ? this.currentDegree += 2 : this.currentDegree++ this.selectedLeague.leaguePoints > 50 ? (this.currentDegree += 2) : this.currentDegree++
const linearGradient =
const linearGradient = this.currentDegree <= 180 ? `linear-gradient(${90 + this.currentDegree}deg, transparent 50%, #2c5282 50%)` : `linear-gradient(${this.currentDegree - 90}deg, transparent 50%, ${this.colorBorder} 50%)` this.currentDegree <= 180
? `linear-gradient(${90 + this.currentDegree}deg, transparent 50%, #2c5282 50%)`
: `linear-gradient(${this.currentDegree - 90}deg, transparent 50%, ${
this.colorBorder
} 50%)`
this.$refs.leagueBorder.style.backgroundImage = `${linearGradient}, linear-gradient(90deg, #2c5282 50%, transparent 50%)` this.$refs.leagueBorder.style.backgroundImage = `${linearGradient}, linear-gradient(90deg, #2c5282 50%, transparent 50%)`
this.triggerAnimation() this.triggerAnimation()
@ -146,10 +156,9 @@ export default {
setTimeout(() => { setTimeout(() => {
if (this.currentDegree < 360 && this.currentDegree < this.leagueDegrees) if (this.currentDegree < 360 && this.currentDegree < this.leagueDegrees)
this.animateLeagueDegrees() this.animateLeagueDegrees()
else else this.animateLeagueDegrees(true)
this.animateLeagueDegrees(true)
}, 1) }, 1)
} },
} },
} }
</script> </script>

10
client-new/src/data/data.js
View file

@ -3,7 +3,7 @@ export const maps = { 10: 'The Twisted Treeline', 11: "Summoner's Rift", 12: 'Ho
export const gameModes = { export const gameModes = {
0: { 0: {
type: 'Custom', type: 'Custom',
name: 'Custom Game' name: 'Custom Game',
}, },
900: { 900: {
type: 'Normal', type: 'Normal',
@ -75,20 +75,20 @@ export const gameModes = {
}, },
1020: { 1020: {
type: 'Normal', type: 'Normal',
name: 'One for All' name: 'One for All',
}, },
1300: { 1300: {
type: 'Normal', type: 'Normal',
name: 'Nexus Blitz' name: 'Nexus Blitz',
}, },
1400: { 1400: {
type: 'Normal', type: 'Normal',
name: 'Ultimate Spellbook' name: 'Ultimate Spellbook',
}, },
1900: { 1900: {
type: 'Normal', type: 'Normal',
name: 'URF', name: 'URF',
} },
} }
/* ========= OLD 5 COLORS ========= */ /* ========= OLD 5 COLORS ========= */

15
client-new/src/helpers/summoner.js
View file

@ -7,7 +7,9 @@ import store from '@/store'
* @param {Object} perks : from the API * @param {Object} perks : from the API
*/ */
export function getPrimarRune(perks) { export function getPrimarRune(perks) {
const primaryRune = perks.selected.length ? store.state.cdragon.runes.perks[perks.selected[0]] : null const primaryRune = perks.selected.length
? store.state.cdragon.runes.perks[perks.selected[0]]
: null
return primaryRune ? createCDragonAssetUrl(primaryRune.icon) : null return primaryRune ? createCDragonAssetUrl(primaryRune.icon) : null
} }
@ -17,7 +19,7 @@ export function getPrimarRune(perks) {
*/ */
export function getSecondaryRune(perks) { export function getSecondaryRune(perks) {
const secondaryRune = store.state.cdragon.runes.perkstyles[perks.secondaryStyle] const secondaryRune = store.state.cdragon.runes.perkstyles[perks.secondaryStyle]
return secondaryRune ? createCDragonAssetUrl(secondaryRune.icon) : null return secondaryRune ? createCDragonAssetUrl(secondaryRune.icon) : null
} }
/** /**
@ -33,7 +35,10 @@ export function createMatchData(matches) {
const date = new Date(match.date) const date = new Date(match.date)
const dateOptions = { day: '2-digit', month: '2-digit', year: 'numeric' } const dateOptions = { day: '2-digit', month: '2-digit', year: 'numeric' }
const timeOptions = { hour12: false, hour: '2-digit', minute: '2-digit' } const timeOptions = { hour12: false, hour: '2-digit', minute: '2-digit' }
match.fullDate = { date: date.toLocaleString(undefined, dateOptions), time: date.toLocaleString(undefined, timeOptions) } match.fullDate = {
date: date.toLocaleString(undefined, dateOptions),
time: date.toLocaleString(undefined, timeOptions),
}
match.date = timeDifference(match.date) match.date = timeDifference(match.date)
match.map = maps[match.map] match.map = maps[match.map]
@ -70,7 +75,7 @@ export function createBasicSummonerData(summonerBasic) {
wins: 0, wins: 0,
losses: 0, losses: 0,
winrate: '0%', winrate: '0%',
name: 'Solo/Duo' name: 'Solo/Duo',
} }
} }
@ -88,7 +93,7 @@ export function createRecordsData(recordsDto) {
}, {}) }, {})
records.game_duration.amount = secToTime(records.game_duration.amount) records.game_duration.amount = secToTime(records.game_duration.amount)
records.gold.amount = records.gold.amount.toLocaleString() records.gold.amount = records.gold.amount.toLocaleString()
records.damage_taken.amount = records.damage_taken.amount.toLocaleString() records.damage_taken.amount = records.damage_taken.amount.toLocaleString()
records.damage_dealt_champions.amount = records.damage_dealt_champions.amount.toLocaleString() records.damage_dealt_champions.amount = records.damage_dealt_champions.amount.toLocaleString()
records.damage_dealt_objectives.amount = records.damage_dealt_objectives.amount.toLocaleString() records.damage_dealt_objectives.amount = records.damage_dealt_objectives.amount.toLocaleString()

89
client-new/src/layouts/Default.vue
View file

@ -10,7 +10,7 @@
<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="fixed left-0 right-0 z-20 px-4 text-teal-100 transition-colors duration-100 ease-in-out border-b-2 header"
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-2px"> <div class="flex items-center justify-between py-2 -mb-2px">
<div class="flex flex-1"> <div class="flex flex-1">
@ -70,7 +70,9 @@
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"
class="text-teal-400" class="text-teal-400"
>{{ name.name }}</li> >
{{ name.name }}
</li>
</ul> </ul>
</div> </div>
</template> </template>
@ -85,7 +87,7 @@
<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="inline-flex items-center px-2 py-1 mt-2 ml-4 leading-tight border border-teal-500 rounded"
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="w-4 h-4 text-teal-600">
<use xlink:href="#star" /> <use xlink:href="#star" />
@ -94,15 +96,19 @@
</div> </div>
</div> </div>
<div class="flex mt-2"> <div class="flex mt-2">
<div :class="{'playing': playing}" class="relative w-24 h-24"> <div :class="{ playing: playing }" class="relative w-24 h-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 w-24 h-24 bg-center bg-cover border-teal-400 rounded-full bg-blue-1000"
:style="{backgroundImage: `url('https://raw.communitydragon.org/latest/plugins/rcp-be-lol-game-data/global/default/v1/profile-icons/${basic.account.profileIconId}.jpg')`}" :style="{
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 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"
>{{ basic.account.summonerLevel }}</div> >
{{ basic.account.summonerLevel }}
</div>
</div> </div>
</div> </div>
@ -121,29 +127,45 @@
<!-- NAVIGATION --> <!-- NAVIGATION -->
<div class="pb-2"> <div class="pb-2">
<router-link <router-link
:to="{ name: 'summoner', params: { region: $route.params.region, name: $route.params.name }}" :to="{
name: 'summoner',
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="pb-2 text-blue-300 border-b-2 border-transparent cursor-pointer hover:text-blue-100"
exact exact
>Overview</router-link> >Overview</router-link
>
<router-link <router-link
:to="{ name: 'summonerChampions', params: { region: $route.params.region, name: $route.params.name }}" :to="{
name: 'summonerChampions',
params: { region: $route.params.region, name: $route.params.name },
}"
:class="isRouteActive('summonerChampions')" :class="isRouteActive('summonerChampions')"
class="pb-2 ml-4 text-blue-300 border-b-2 border-transparent cursor-pointer hover:text-blue-100" class="pb-2 ml-4 text-blue-300 border-b-2 border-transparent cursor-pointer hover:text-blue-100"
exact exact
>Champions</router-link> >Champions</router-link
>
<router-link <router-link
:to="{ name: 'summonerRecords', params: { region: $route.params.region, name: $route.params.name }}" :to="{
name: 'summonerRecords',
params: { region: $route.params.region, name: $route.params.name },
}"
:class="isRouteActive('summonerRecords')" :class="isRouteActive('summonerRecords')"
class="pb-2 ml-4 text-blue-300 border-b-2 border-transparent cursor-pointer hover:text-blue-100" class="pb-2 ml-4 text-blue-300 border-b-2 border-transparent cursor-pointer hover:text-blue-100"
exact exact
>Records</router-link> >Records</router-link
>
<router-link <router-link
:to="{ name: 'summonerLive', params: { region: $route.params.region, name: $route.params.name }}" :to="{
name: 'summonerLive',
params: { region: $route.params.region, name: $route.params.name },
}"
:class="isRouteActive('summonerLive')" :class="isRouteActive('summonerLive')"
class="pb-2 ml-4 text-blue-300 border-b-2 border-transparent cursor-pointer hover:text-blue-100" class="pb-2 ml-4 text-blue-300 border-b-2 border-transparent cursor-pointer hover:text-blue-100"
exact exact
>Live game</router-link> >Live game</router-link
>
</div> </div>
<!-- Select Season --> <!-- Select Season -->
@ -193,12 +215,12 @@ export default {
SearchForm, SearchForm,
HeaderLoader, HeaderLoader,
SummonerRanked, SummonerRanked,
Tooltip Tooltip,
}, },
data() { data() {
return { return {
bgHeader: false bgHeader: false,
} }
}, },
@ -207,17 +229,22 @@ export default {
return this.summonerFound && this.overviewLoaded ? 'tab' : 'none' return this.summonerFound && this.overviewLoaded ? 'tab' : 'none'
}, },
...mapState({ ...mapState({
basic: state => state.summoner.basic basic: (state) => state.summoner.basic,
}), }),
...mapGetters('summoner', ['playing', 'overviewLoaded', 'summonerFound', 'summonerNotFound', 'summonerLoading']) ...mapGetters('summoner', [
'playing',
'overviewLoaded',
'summonerFound',
'summonerNotFound',
'summonerLoading',
]),
}, },
watch: { watch: {
$route(to, from) { $route(to, from) {
if (from.params.region === to.params.region && from.params.name === to.params.name) if (from.params.region === to.params.region && from.params.name === to.params.name) return
return
this.apiCall() this.apiCall()
} },
}, },
created() { created() {
@ -239,11 +266,11 @@ export default {
}, },
isRouteActive(currentRoute) { isRouteActive(currentRoute) {
return { return {
'router-link-active': this.$route.name === currentRoute 'router-link-active': this.$route.name === currentRoute,
} }
}, },
redirect(summoner, region) { redirect(summoner, region) {
this.$router.push(`/summoner/${region}/${summoner}`).catch(() => { }) this.$router.push(`/summoner/${region}/${summoner}`).catch(() => {})
}, },
...mapActions('settings', ['updateSettings']), ...mapActions('settings', ['updateSettings']),
...mapActions('summoner', ['basicRequest']), ...mapActions('summoner', ['basicRequest']),
@ -251,9 +278,11 @@ export default {
metaInfo() { metaInfo() {
return { return {
titleTemplate: this.summonerFound ? `${this.basic.account.name} | LeagueStats.gg %s` : 'LeagueStats.gg %s', titleTemplate: this.summonerFound
? `${this.basic.account.name} | LeagueStats.gg %s`
: 'LeagueStats.gg %s',
} }
} },
} }
</script> </script>
@ -290,7 +319,7 @@ export default {
.playing::before, .playing::before,
.playing::after { .playing::after {
content: ""; content: '';
position: absolute; position: absolute;
height: 100px; height: 100px;
width: 100px; width: 100px;
@ -303,11 +332,7 @@ export default {
.playing::after { .playing::after {
z-index: 0; z-index: 0;
background: linear-gradient( background: linear-gradient(to top, rgba(0, 0, 0, 0) 30%, rgb(36, 232, 204) 100%);
to top,
rgba(0, 0, 0, 0) 30%,
rgb(36, 232, 204) 100%
);
animation: 0.75s linear 0s infinite normal none running rotate; animation: 0.75s linear 0s infinite normal none running rotate;
} }

6
client-new/src/main.js
View file

@ -39,8 +39,8 @@ Vue.filter('secToHours', (sec) => {
const result = [] const result = []
const d = Math.floor(sec / (3600 * 24)) const d = Math.floor(sec / (3600 * 24))
const h = Math.floor(sec % (3600 * 24) / 3600) const h = Math.floor((sec % (3600 * 24)) / 3600)
const m = Math.floor(sec % 3600 / 60) const m = Math.floor((sec % 3600) / 60)
if (d > 0) { if (d > 0) {
result.push(d + ' days') result.push(d + ' days')
@ -70,5 +70,5 @@ Vue.filter('round', (value, decimals = 2) => {
new Vue({ new Vue({
router, router,
store, store,
render: h => h(App), render: (h) => h(App),
}).$mount('#app') }).$mount('#app')

30
client-new/src/mixins/liveGame.js
View file

@ -5,7 +5,7 @@ import { mapState } from 'vuex'
export const liveGame = { export const liveGame = {
data() { data() {
return { return {
gameLength: 0 gameLength: 0,
} }
}, },
@ -14,7 +14,9 @@ export const liveGame = {
if (!this.current || !this.current.participants) { if (!this.current || !this.current.participants) {
return [] return []
} }
return this.current.participants.filter(p => p.teamId === this.teamColor).sort(this.sortTeamByRole) return this.current.participants
.filter((p) => p.teamId === this.teamColor)
.sort(this.sortTeamByRole)
}, },
displayStartTime() { displayStartTime() {
if (this.current.gameStartTime === 0) { if (this.current.gameStartTime === 0) {
@ -26,11 +28,15 @@ export const liveGame = {
if (!this.current || !this.current.participants) { if (!this.current || !this.current.participants) {
return [] return []
} }
return this.current.participants.filter(p => p.teamId !== this.teamColor).sort(this.sortTeamByRole) return this.current.participants
.filter((p) => p.teamId !== this.teamColor)
.sort(this.sortTeamByRole)
}, },
gamemode() { gamemode() {
if (this.current.participants) { if (this.current.participants) {
return this.current.gameType === 'CUSTOM_GAME' ? { type: '', name: 'Custom Game' } : gameModes[this.current.gameQueueConfigId] return this.current.gameType === 'CUSTOM_GAME'
? { type: '', name: 'Custom Game' }
: gameModes[this.current.gameQueueConfigId]
} else { } else {
return { type: '', name: '' } return { type: '', name: '' }
} }
@ -39,12 +45,12 @@ export const liveGame = {
return this.current ? this.current.gameStartTime : 0 return this.current ? this.current.gameStartTime : 0
}, },
teamColor() { teamColor() {
return this.current.participants.find(p => p.summonerId === this.account.id).teamId return this.current.participants.find((p) => p.summonerId === this.account.id).teamId
}, },
...mapState({ ...mapState({
account: state => state.summoner.basic.account, account: (state) => state.summoner.basic.account,
current: state => state.summoner.live.match, current: (state) => state.summoner.live.match,
}) }),
}, },
created() { created() {
@ -58,17 +64,17 @@ export const liveGame = {
watch: { watch: {
gameStartTime() { gameStartTime() {
this.updateGameLength() this.updateGameLength()
} },
}, },
methods: { methods: {
updateGameLength() { updateGameLength() {
if (this.gameStartTime === 0) { if (this.gameStartTime === 0) {
return this.gameLength = 0 return (this.gameLength = 0)
} }
this.gameLength = (new Date() - new Date(this.gameStartTime)) / 1000 this.gameLength = (new Date() - new Date(this.gameStartTime)) / 1000
}, },
sortTeamByRole sortTeamByRole,
} },
} }

12
client-new/src/plugins/axios.js
View file

@ -6,7 +6,9 @@ export const axios = axiosHttp
axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest' axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest'
axios.defaults.headers.common['Content-Type'] = 'application/json' axios.defaults.headers.common['Content-Type'] = 'application/json'
axios.defaults.baseURL = import.meta.env.DEV ? 'http://localhost:3333/' : 'https://api.leaguestats.gg/' axios.defaults.baseURL = import.meta.env.DEV
? 'http://localhost:3333/'
: 'https://api.leaguestats.gg/'
const CancelToken = axios.CancelToken const CancelToken = axios.CancelToken
const axiosSource = CancelToken.source() const axiosSource = CancelToken.source()
@ -15,7 +17,11 @@ axios.defaults.cancelToken = axiosSource.token
// Add season number to data if the route need it // Add season number to data if the route need it
axios.interceptors.request.use(function (config) { axios.interceptors.request.use(function (config) {
if (config.method === 'post' && config.url !== 'summoner/basic' && router.currentRoute.meta.season) { if (
config.method === 'post' &&
config.url !== 'summoner/basic' &&
router.currentRoute.meta.season
) {
config.data.season = store.state.summoner.basic.currentSeason config.data.season = store.state.summoner.basic.currentSeason
} }
return config return config
@ -24,5 +30,5 @@ axios.interceptors.request.use(function (config) {
export default { export default {
install(Vue) { install(Vue) {
Vue.prototype.$axios = axiosHttp Vue.prototype.$axios = axiosHttp
} },
} }

4
client-new/src/plugins/plausible.js
View file

@ -5,11 +5,11 @@ export default {
const options = { const options = {
domain: 'leaguestats.gg', domain: 'leaguestats.gg',
trackLocalhost: false, trackLocalhost: false,
apiHost: 'https://stats.leaguestats.gg' apiHost: 'https://stats.leaguestats.gg',
} }
const plausible = Plausible(options) const plausible = Plausible(options)
plausible.enableAutoPageviews() plausible.enableAutoPageviews()
Vue.prototype.$plausible = plausible Vue.prototype.$plausible = plausible
} },
} }

20
client-new/src/router.js
View file

@ -19,39 +19,39 @@ const router = new Router({
name: 'home', name: 'home',
component: Home, component: Home,
meta: { meta: {
layout: 'Home' layout: 'Home',
} },
}, },
{ {
path: '/summoner/:region/:name', path: '/summoner/:region/:name',
name: 'summoner', name: 'summoner',
component: Summoner, component: Summoner,
meta: { meta: {
season: true season: true,
} },
}, },
{ {
path: '/summoner/:region/:name/champions', path: '/summoner/:region/:name/champions',
name: 'summonerChampions', name: 'summonerChampions',
component: SummonerChampions, component: SummonerChampions,
meta: { meta: {
season: true season: true,
} },
}, },
{ {
path: '/summoner/:region/:name/records', path: '/summoner/:region/:name/records',
name: 'summonerRecords', name: 'summonerRecords',
component: SummonerRecords, component: SummonerRecords,
meta: { meta: {
season: true season: true,
} },
}, },
{ {
path: '/summoner/:region/:name/live', path: '/summoner/:region/:name/live',
name: 'summonerLive', name: 'summonerLive',
component: SummonerLive component: SummonerLive,
}, },
] ],
}) })
router.beforeEach((to, from, next) => { router.beforeEach((to, from, next) => {

38
client-new/src/store/index.js
View file

@ -16,28 +16,28 @@ export default new Vuex.Store({
detailedMatch, detailedMatch,
notification, notification,
settings, settings,
summoner summoner,
}, },
state: { state: {
regionsList: { regionsList: {
'br': 'br1', br: 'br1',
'eune': 'eun1', eune: 'eun1',
'euw': 'euw1', euw: 'euw1',
'jp': 'jp1', jp: 'jp1',
'kr': 'kr', kr: 'kr',
'lan': 'la1', lan: 'la1',
'las': 'la2', las: 'la2',
'na': 'na1', na: 'na1',
'oce': 'oc1', oce: 'oc1',
'tr': 'tr1', tr: 'tr1',
'ru': 'ru', ru: 'ru',
'ph': 'ph2', ph: 'ph2',
'sg': 'sg2', sg: 'sg2',
'th': 'th2', th: 'th2',
'tw': 'tw2', tw: 'tw2',
'vn': 'vn2', vn: 'vn2',
}, },
roles: ['TOP', 'JUNGLE', 'MIDDLE', 'BOTTOM', 'UTILITY'] roles: ['TOP', 'JUNGLE', 'MIDDLE', 'BOTTOM', 'UTILITY'],
}, },
strict: debug strict: debug,
}) })

10
client-new/src/store/modules/cdragon.js
View file

@ -28,14 +28,18 @@ export const actions = {
commit('DISPLAY_HIDE_RUNES', selectedRunes) commit('DISPLAY_HIDE_RUNES', selectedRunes)
}, },
async getRunes({ commit, getters }) { async getRunes({ commit, getters }) {
if (getters.runesLoaded) { return } if (getters.runesLoaded) {
return
}
const { data } = await axios.get('cdragon/runes').catch((e) => { console.log(e) }) const { data } = await axios.get('cdragon/runes').catch((e) => {
console.log(e)
})
console.log(data) console.log(data)
commit('SET_RUNES', data) commit('SET_RUNES', data)
}, },
} }
export const getters = { export const getters = {
runesLoaded: state => state.runes, runesLoaded: (state) => state.runes,
} }

28
client-new/src/store/modules/detailedMatch.js
View file

@ -4,17 +4,17 @@ import { axios } from '@/plugins/axios'
export const namespaced = true export const namespaced = true
export const state = { export const state = {
matches: [] matches: [],
} }
export const mutations = { export const mutations = {
MATCH_LOADING(state, matchId) { MATCH_LOADING(state, matchId) {
const alreadyIn = state.matches.find(m => m.matchId === matchId) const alreadyIn = state.matches.find((m) => m.matchId === matchId)
if (!alreadyIn) { if (!alreadyIn) {
state.matches.push({ matchId, status: 'loading' }) state.matches.push({ matchId, status: 'loading' })
} }
}, },
MATCH_FOUND(state, {matchDetails, ranksLoaded }) { MATCH_FOUND(state, { matchDetails, ranksLoaded }) {
matchDetails.status = 'loaded' matchDetails.status = 'loaded'
matchDetails.ranksLoaded = ranksLoaded matchDetails.ranksLoaded = ranksLoaded
@ -28,11 +28,11 @@ export const mutations = {
} }
} }
const index = state.matches.findIndex(m => m.matchId === matchDetails.matchId) const index = state.matches.findIndex((m) => m.matchId === matchDetails.matchId)
Vue.set(state.matches, index, matchDetails) Vue.set(state.matches, index, matchDetails)
}, },
MATCH_RANKS_FOUND(state, { matchId, ranksByPlayer }) { MATCH_RANKS_FOUND(state, { matchId, ranksByPlayer }) {
const match = state.matches.find(m => m.matchId === matchId) const match = state.matches.find((m) => m.matchId === matchId)
for (const player of match.blueTeam.players) { for (const player of match.blueTeam.players) {
const ranks = ranksByPlayer[player.id] const ranks = ranksByPlayer[player.id]
@ -55,23 +55,29 @@ export const actions = {
commit('MATCH_LOADING', matchId) commit('MATCH_LOADING', matchId)
console.log('MATCH DETAILS STORE', matchId) console.log('MATCH DETAILS STORE', matchId)
const resp = await axios(({ url: 'match/details', data: { matchId }, method: 'POST' })).catch(() => { }) const resp = await axios({ url: 'match/details', data: { matchId }, method: 'POST' }).catch(
() => {}
)
console.log('--- DETAILS INFOS ---') console.log('--- DETAILS INFOS ---')
console.log(resp.data) console.log(resp.data)
const {matchDetails, ranksLoaded} = resp.data const { matchDetails, ranksLoaded } = resp.data
commit('MATCH_FOUND', {matchDetails, ranksLoaded }) commit('MATCH_FOUND', { matchDetails, ranksLoaded })
// If the ranks of the players are not yet known // If the ranks of the players are not yet known
if (!ranksLoaded) { if (!ranksLoaded) {
const ranks = await axios(({ url: 'match/details/ranks', data: { matchId }, method: 'POST' })).catch(() => { }) const ranks = await axios({
url: 'match/details/ranks',
data: { matchId },
method: 'POST',
}).catch(() => {})
if (!ranks) return if (!ranks) return
console.log('--- RANK OF MATCH DETAILS ---') console.log('--- RANK OF MATCH DETAILS ---')
console.log(ranks.data) console.log(ranks.data)
commit('MATCH_RANKS_FOUND', { matchId, ranksByPlayer: ranks.data }) commit('MATCH_RANKS_FOUND', { matchId, ranksByPlayer: ranks.data })
} }
} },
} }
export const getters = { export const getters = {
getMatchDetails: state => matchId => state.matches.find(m => m.matchId === matchId), getMatchDetails: (state) => (matchId) => state.matches.find((m) => m.matchId === matchId),
} }

10
client-new/src/store/modules/notification.js
View file

@ -1,7 +1,7 @@
export const namespaced = true export const namespaced = true
export const state = { export const state = {
notifications: [] notifications: [],
} }
let nextId = 1 let nextId = 1
@ -10,14 +10,14 @@ export const mutations = {
PUSH(state, notification) { PUSH(state, notification) {
state.notifications.push({ state.notifications.push({
...notification, ...notification,
id: nextId++ id: nextId++,
}) })
}, },
DELETE(state, notificationToRemove) { DELETE(state, notificationToRemove) {
state.notifications = state.notifications.filter( state.notifications = state.notifications.filter(
notification => notification.id !== notificationToRemove.id (notification) => notification.id !== notificationToRemove.id
) )
} },
} }
export const actions = { export const actions = {
@ -26,5 +26,5 @@ export const actions = {
}, },
remove({ commit }, notificationToRemove) { remove({ commit }, notificationToRemove) {
commit('DELETE', notificationToRemove) commit('DELETE', notificationToRemove)
} },
} }

54
client-new/src/store/modules/settings.js
View file

@ -12,14 +12,18 @@ export const mutations = {
state.favorites.push(summoner) state.favorites.push(summoner)
}, },
ADD_SEARCH(state, summoner) { ADD_SEARCH(state, summoner) {
const alreadyFav = state.favorites.find(s => s.name === summoner.name && s.region === summoner.region) const alreadyFav = state.favorites.find(
(s) => s.name === summoner.name && s.region === summoner.region
)
if (alreadyFav) { if (alreadyFav) {
return return
} }
let searches = state.recentSearches let searches = state.recentSearches
const alreadySearch = searches.find(s => s.name === summoner.name && s.region === summoner.region) const alreadySearch = searches.find(
(s) => s.name === summoner.name && s.region === summoner.region
)
if (alreadySearch) { if (alreadySearch) {
alreadySearch.date = Date.now() alreadySearch.date = Date.now()
searches.sort((a, b) => b.date - a.date) searches.sort((a, b) => b.date - a.date)
@ -34,39 +38,59 @@ export const mutations = {
searches.unshift(summoner) searches.unshift(summoner)
}, },
REMOVE_FAVORITE(state, summoner) { REMOVE_FAVORITE(state, summoner) {
state.favorites = state.favorites.filter(s => s.name !== summoner.name || s.region !== summoner.region) state.favorites = state.favorites.filter(
(s) => s.name !== summoner.name || s.region !== summoner.region
)
}, },
REMOVE_SEARCH(state, summoner) { REMOVE_SEARCH(state, summoner) {
state.recentSearches = state.recentSearches.filter(s => s.name !== summoner.name || s.region !== summoner.region) state.recentSearches = state.recentSearches.filter(
(s) => s.name !== summoner.name || s.region !== summoner.region
)
}, },
UPDATE_SETTING(state, { name, value }) { UPDATE_SETTING(state, { name, value }) {
state[name] = value state[name] = value
} },
} }
export const actions = { export const actions = {
addRecentSearch({ commit, dispatch, state }, summoner) { addRecentSearch({ commit, dispatch, state }, summoner) {
commit('ADD_SEARCH', summoner) commit('ADD_SEARCH', summoner)
dispatch('updateSettings', { name: 'recentSearches', value: state.recentSearches, isJson: true }) dispatch('updateSettings', {
name: 'recentSearches',
value: state.recentSearches,
isJson: true,
})
}, },
removeRecentSearch({ commit, dispatch }, summoner) { removeRecentSearch({ commit, dispatch }, summoner) {
commit('REMOVE_SEARCH', summoner) commit('REMOVE_SEARCH', summoner)
dispatch('updateSettings', { name: 'recentSearches', value: state.recentSearches, isJson: true }) dispatch('updateSettings', {
name: 'recentSearches',
value: state.recentSearches,
isJson: true,
})
}, },
updateFavorite({ commit, dispatch, state }, summoner) { updateFavorite({ commit, dispatch, state }, summoner) {
const alreadyFav = state.favorites.find(s => s.name === summoner.name && s.region === summoner.region) const alreadyFav = state.favorites.find(
(s) => s.name === summoner.name && s.region === summoner.region
)
if (alreadyFav) { if (alreadyFav) {
commit('REMOVE_FAVORITE', summoner) commit('REMOVE_FAVORITE', summoner)
} else { } else {
if (state.favorites.length >= 6) { if (state.favorites.length >= 6) {
// Display error message // Display error message
return dispatch('notification/add', { return dispatch(
type: 'error', 'notification/add',
message: 'Too many favorite summoners.' {
}, { root: true }) type: 'error',
message: 'Too many favorite summoners.',
},
{ root: true }
)
} }
commit('ADD_FAVORITE', summoner) commit('ADD_FAVORITE', summoner)
const searched = state.recentSearches.find(s => s.name === summoner.name && s.region === summoner.region) const searched = state.recentSearches.find(
(s) => s.name === summoner.name && s.region === summoner.region
)
if (searched) { if (searched) {
dispatch('removeRecentSearch', summoner) dispatch('removeRecentSearch', summoner)
} }
@ -75,7 +99,7 @@ export const actions = {
dispatch('updateSettings', { name: 'favorites', value: state.favorites, isJson: true }) dispatch('updateSettings', { name: 'favorites', value: state.favorites, isJson: true })
}, },
updatePercent({ commit }, percent) { updatePercent({ commit }, percent) {
if (typeof (percent) !== 'boolean') { if (typeof percent !== 'boolean') {
percent = localStorage.getItem('settings-percent') === 'true' percent = localStorage.getItem('settings-percent') === 'true'
} else { } else {
localStorage.setItem('settings-percent', percent) localStorage.setItem('settings-percent', percent)
@ -91,5 +115,5 @@ export const actions = {
localStorage.setItem(name, isJson ? JSON.stringify(value) : value) localStorage.setItem(name, isJson ? JSON.stringify(value) : value)
} }
commit('UPDATE_SETTING', { name, value }) commit('UPDATE_SETTING', { name, value })
} },
} }

100
client-new/src/store/modules/summoner.js
View file

@ -19,15 +19,15 @@ export const state = {
stats: {}, stats: {},
loaded: false, loaded: false,
matchesLoading: false, matchesLoading: false,
moreMatchesToFetch: true moreMatchesToFetch: true,
}, },
champions: { champions: {
list: [], list: [],
championsLoaded: false championsLoaded: false,
}, },
records: { records: {
list: {}, list: {},
recordsLoaded: false recordsLoaded: false,
}, },
live: { live: {
match: {}, match: {},
@ -124,12 +124,20 @@ export const actions = {
const regionId = rootState.regionsList[region] const regionId = rootState.regionsList[region]
commit('BASIC_REQUEST') commit('BASIC_REQUEST')
try { try {
const resp = await axios(({ url: 'summoner/basic', data: { summoner, region: regionId }, method: 'POST' })) const resp = await axios({
url: 'summoner/basic',
data: { summoner, region: regionId },
method: 'POST',
})
if (!resp.data) { if (!resp.data) {
dispatch('notification/add', { dispatch(
type: 'error', 'notification/add',
message: 'Summoner not found.' {
}, { root: true }) type: 'error',
message: 'Summoner not found.',
},
{ root: true }
)
return commit('SUMMONER_NOT_FOUND') return commit('SUMMONER_NOT_FOUND')
} }
@ -139,17 +147,25 @@ export const actions = {
commit('SUMMONER_FOUND', infos) commit('SUMMONER_FOUND', infos)
// Add summoner to recent searches // Add summoner to recent searches
dispatch('settings/addRecentSearch', { dispatch(
name: infos.account.name, 'settings/addRecentSearch',
icon: infos.account.profileIconId, {
region, name: infos.account.name,
}, { root: true }) icon: infos.account.profileIconId,
region,
},
{ root: true }
)
} catch (error) { } catch (error) {
if (error.response && error.response.status === 422) { if (error.response && error.response.status === 422) {
dispatch('notification/add', { dispatch(
type: 'error', 'notification/add',
message: 'Summoner not found.' {
}, { root: true }) type: 'error',
message: 'Summoner not found.',
},
{ root: true }
)
} }
if (error.message !== 'Summoner changed') { if (error.message !== 'Summoner changed') {
commit('SUMMONER_NOT_FOUND') commit('SUMMONER_NOT_FOUND')
@ -160,7 +176,11 @@ export const actions = {
commit('CHAMPIONS_NOT_FOUND') commit('CHAMPIONS_NOT_FOUND')
}, },
async championsRequest({ commit }, queue = null) { async championsRequest({ commit }, queue = null) {
const resp = await axios(({ url: 'summoner/champions', data: { puuid: state.basic.account.puuid, queue: queue }, method: 'POST' })).catch(() => { }) const resp = await axios({
url: 'summoner/champions',
data: { puuid: state.basic.account.puuid, queue: queue },
method: 'POST',
}).catch(() => {})
console.log('---CHAMPIONS---') console.log('---CHAMPIONS---')
console.log(resp.data) console.log(resp.data)
@ -168,14 +188,14 @@ export const actions = {
}, },
async liveMatchRequest({ commit, rootState }) { async liveMatchRequest({ commit, rootState }) {
commit('LIVE_LOADING') commit('LIVE_LOADING')
const resp = await axios(({ const resp = await axios({
url: 'summoner/live', url: 'summoner/live',
data: { data: {
id: state.basic.account.id, id: state.basic.account.id,
region: rootState.regionsList[rootState.settings.region] region: rootState.regionsList[rootState.settings.region],
}, },
method: 'POST' method: 'POST',
})).catch(() => { }) }).catch(() => {})
console.log('---LIVE---') console.log('---LIVE---')
console.log(resp.data) console.log(resp.data)
@ -191,37 +211,41 @@ export const actions = {
if (!state.overview.matches.length) return if (!state.overview.matches.length) return
const lastMatchId = state.overview.matches[state.overview.matches.length - 1].matchId const lastMatchId = state.overview.matches[state.overview.matches.length - 1].matchId
const resp = await axios(({ const resp = await axios({
url: 'match', url: 'match',
data: { data: {
puuid: state.basic.account.puuid, puuid: state.basic.account.puuid,
region: rootState.regionsList[rootState.settings.region], region: rootState.regionsList[rootState.settings.region],
lastMatchId lastMatchId,
}, },
method: 'POST' method: 'POST',
})).catch(() => { }) }).catch(() => {})
console.log('---MATCHES INFOS---') console.log('---MATCHES INFOS---')
console.log(resp.data) console.log(resp.data)
const newMatches = createMatchData(resp.data.matches) const newMatches = createMatchData(resp.data.matches)
commit('MATCHES_FOUND', { newMatches, stats: resp.data.stats }) commit('MATCHES_FOUND', { newMatches, stats: resp.data.stats })
}, },
async overviewRequest({ commit, rootState }) { async overviewRequest({ commit, rootState }) {
const resp = await axios(({ const resp = await axios({
url: 'summoner/overview', url: 'summoner/overview',
data: { data: {
puuid: state.basic.account.puuid, puuid: state.basic.account.puuid,
accountId: state.basic.account.accountId, accountId: state.basic.account.accountId,
region: rootState.regionsList[rootState.settings.region], region: rootState.regionsList[rootState.settings.region],
}, },
method: 'POST' method: 'POST',
})).catch(() => { }) }).catch(() => {})
console.log('---OVERVIEW---') console.log('---OVERVIEW---')
console.log(resp.data) console.log(resp.data)
resp.data.matches = createMatchData(resp.data.matchesDetails) resp.data.matches = createMatchData(resp.data.matchesDetails)
commit('OVERVIEW_FOUND', resp.data) commit('OVERVIEW_FOUND', resp.data)
}, },
async recordsRequest({ commit }) { async recordsRequest({ commit }) {
const resp = await axios(({ url: 'summoner/records', data: { puuid: state.basic.account.puuid }, method: 'POST' })).catch(() => { }) const resp = await axios({
url: 'summoner/records',
data: { puuid: state.basic.account.puuid },
method: 'POST',
}).catch(() => {})
console.log('---RECORDS---') console.log('---RECORDS---')
console.log(resp.data) console.log(resp.data)
const records = resp.data.length ? createRecordsData(resp.data) : {} const records = resp.data.length ? createRecordsData(resp.data) : {}
@ -233,15 +257,15 @@ export const actions = {
}, },
updateSeason({ commit }, season) { updateSeason({ commit }, season) {
commit('UPDATE_SEASON', { season }) commit('UPDATE_SEASON', { season })
} },
} }
export const getters = { export const getters = {
matchesLoading: state => state.overview.matchesLoading, matchesLoading: (state) => state.overview.matchesLoading,
overviewLoaded: state => state.overview.loaded, overviewLoaded: (state) => state.overview.loaded,
playing: state => state.live.playing, playing: (state) => state.live.playing,
regionFilterApplied: state => !!state.basic.currentSeason, regionFilterApplied: (state) => !!state.basic.currentSeason,
summonerFound: state => state.basic.status === 'found', summonerFound: (state) => state.basic.status === 'found',
summonerNotFound: state => state.basic.status === 'error', summonerNotFound: (state) => state.basic.status === 'error',
summonerLoading: state => state.basic.status === 'loading', summonerLoading: (state) => state.basic.status === 'loading',
} }

12
client-new/src/views/Home.vue
View file

@ -23,8 +23,10 @@
<p <p
class="absolute bottom-0 pb-4 leading-tight text-center text-blue-300 horizontal-center text-xxs" class="absolute bottom-0 pb-4 leading-tight text-center text-blue-300 horizontal-center text-xxs"
> >
LeagueStats.gg isn't endorsed by Riot Games and doesn't reflect the views or opinions of Riot Games or anyone officially involved in producing or managing Riot Games properties. LeagueStats.gg isn't endorsed by Riot Games and doesn't reflect the views or opinions of
<br />Riot Games, and all associated properties are trademarks or registered trademarks of Riot Games, Inc. Riot Games or anyone officially involved in producing or managing Riot Games properties.
<br />Riot Games, and all associated properties are trademarks or registered trademarks of
Riot Games, Inc.
</p> </p>
</div> </div>
</div> </div>
@ -37,7 +39,7 @@ import SearchForm from '@/components/Form/SearchForm.vue'
export default { export default {
components: { components: {
LazyBackground, LazyBackground,
SearchForm SearchForm,
}, },
methods: { methods: {
@ -50,7 +52,7 @@ export default {
return { return {
title: 'LeagueStats.gg', title: 'LeagueStats.gg',
} }
} },
} }
</script> </script>
@ -60,7 +62,7 @@ export default {
} }
.line::after { .line::after {
content: ""; content: '';
position: absolute; position: absolute;
width: 4.5rem; width: 4.5rem;
height: 0.5rem; height: 0.5rem;

16
client-new/src/views/Summoner.vue
View file

@ -32,7 +32,8 @@
@clicked="moreMatches" @clicked="moreMatches"
:loading="matchesLoading" :loading="matchesLoading"
btn-class="block px-4 py-2 mx-auto mt-4 font-semibold bg-blue-800 rounded-md shadow-lg hover:bg-blue-1000" btn-class="block px-4 py-2 mx-auto mt-4 font-semibold bg-blue-800 rounded-md shadow-lg hover:bg-blue-1000"
>More matches</LoadingButton> >More matches</LoadingButton
>
</div> </div>
<div v-else> <div v-else>
<div class="flex justify-center"> <div class="flex justify-center">
@ -49,7 +50,6 @@
</div> </div>
</template> </template>
<script> <script>
import { mapState, mapActions, mapGetters } from 'vuex' import { mapState, mapActions, mapGetters } from 'vuex'
import LiveMatch from '@/components/Match/LiveMatch.vue' import LiveMatch from '@/components/Match/LiveMatch.vue'
@ -70,15 +70,15 @@ export default {
SummonerChampions, SummonerChampions,
SummonerMates, SummonerMates,
SummonerStats, SummonerStats,
VueStickySidebar VueStickySidebar,
}, },
computed: { computed: {
...mapState({ ...mapState({
current: state => state.summoner.live.match, current: (state) => state.summoner.live.match,
overview: state => state.summoner.overview, overview: (state) => state.summoner.overview,
}), }),
...mapGetters('summoner', ['matchesLoading', 'overviewLoaded', 'summonerFound']) ...mapGetters('summoner', ['matchesLoading', 'overviewLoaded', 'summonerFound']),
}, },
watch: { watch: {
@ -87,7 +87,7 @@ export default {
}, },
summonerFound() { summonerFound() {
this.fetchData() this.fetchData()
} },
}, },
created() { created() {
@ -114,7 +114,7 @@ export default {
return { return {
title: 'Summoner Overview', title: 'Summoner Overview',
} }
} },
} }
</script> </script>

24
client-new/src/views/SummonerChampions.vue
View file

@ -34,7 +34,7 @@ export default {
return { return {
onlyMostPlayed: false, onlyMostPlayed: false,
queue: null, queue: null,
searchChampions: '' searchChampions: '',
} }
}, },
@ -42,24 +42,24 @@ export default {
queues() { queues() {
// Only keep the gameModes the summoner has played // Only keep the gameModes the summoner has played
const queues = Object.keys(gameModes) const queues = Object.keys(gameModes)
.filter(gameMode => .filter(
gameModes[gameMode].type !== 'Bot' && (gameMode) =>
this.gamemodes.includes(Number(gameMode)) gameModes[gameMode].type !== 'Bot' && this.gamemodes.includes(Number(gameMode))
) )
.reduce((obj, key) => { .reduce((obj, key) => {
return { return {
...obj, ...obj,
[key]: gameModes[key] [key]: gameModes[key],
} }
}, {}) }, {})
return { '0': { type: 'Normal', name: 'All queues' }, ...queues } return { 0: { type: 'Normal', name: 'All queues' }, ...queues }
}, },
...mapGetters('summoner', ['summonerFound']), ...mapGetters('summoner', ['summonerFound']),
...mapState({ ...mapState({
champions: state => state.summoner.champions.list, champions: (state) => state.summoner.champions.list,
championsLoaded: state => state.summoner.champions.championsLoaded, championsLoaded: (state) => state.summoner.champions.championsLoaded,
gamemodes: state => state.summoner.basic.gamemodes gamemodes: (state) => state.summoner.basic.gamemodes,
}) }),
}, },
watch: { watch: {
@ -68,7 +68,7 @@ export default {
}, },
summonerFound() { summonerFound() {
this.fetchData() this.fetchData()
} },
}, },
created() { created() {
@ -96,6 +96,6 @@ export default {
return { return {
title: 'Summoner Champions', title: 'Summoner Champions',
} }
} },
} }
</script> </script>

24
client-new/src/views/SummonerLive.vue
View file

@ -4,11 +4,15 @@
<div v-if="liveLoaded" class="flex items-center justify-end -mt-4 text-base text-blue-200"> <div v-if="liveLoaded" class="flex items-center justify-end -mt-4 text-base text-blue-200">
<div>{{ gamemode.type }} {{ gamemode.name }}</div> <div>{{ gamemode.type }} {{ gamemode.name }}</div>
<div class="mx-2">-</div> <div class="mx-2">-</div>
<div :class="{'w-12': displayStartTime !== 'Not started yet'}">{{ displayStartTime }}</div> <div :class="{ 'w-12': displayStartTime !== 'Not started yet' }">
{{ displayStartTime }}
</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="px-3 py-1 ml-4 text-blue-100 bg-blue-800 rounded-md shadow-md hover:bg-blue-760"
>Reload</button> >
Reload
</button>
</div> </div>
<div v-else class="h-4"></div> <div v-else class="h-4"></div>
@ -23,7 +27,9 @@
<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="px-3 py-1 my-4 text-sm text-blue-100 bg-blue-800 rounded-md shadow-md hover:bg-blue-760"
>Reload</button> >
Reload
</button>
</div> </div>
</div> </div>
</div> </div>
@ -45,16 +51,16 @@ export default {
computed: { computed: {
...mapGetters('summoner', ['summonerLoading', 'summonerFound']), ...mapGetters('summoner', ['summonerLoading', 'summonerFound']),
...mapState({ ...mapState({
live: state => state.summoner.live.match, live: (state) => state.summoner.live.match,
liveLoaded: state => state.summoner.live.liveLoaded, liveLoaded: (state) => state.summoner.live.liveLoaded,
playing: state => state.summoner.live.playing, playing: (state) => state.summoner.live.playing,
}) }),
}, },
watch: { watch: {
summonerFound() { summonerFound() {
this.fetchData() this.fetchData()
} },
}, },
created() { created() {
@ -77,6 +83,6 @@ export default {
return { return {
title: 'Summoner Live Game', title: 'Summoner Live Game',
} }
} },
} }
</script> </script>

38
client-new/src/views/SummonerRecords.vue
View file

@ -3,7 +3,9 @@
<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="relative pl-6 text-2xl text-blue-200 border-b-2 border-blue-800 category blue-900"
>Basics</div> >
Basics
</div>
<div class="flex flex-wrap -mx-2"> <div class="flex flex-wrap -mx-2">
<template v-if="recordsLoaded"> <template v-if="recordsLoaded">
<RecordCard <RecordCard
@ -53,7 +55,7 @@
<div <div
v-for="index in 6" v-for="index in 6"
:key="index" :key="index"
style="width: 176px; height: 294px;" style="width: 176px; height: 294px"
class="mx-2 mt-6" class="mx-2 mt-6"
> >
<content-loader <content-loader
@ -68,7 +70,11 @@
</div> </div>
</template> </template>
</div> </div>
<div class="relative pl-6 mt-3 text-2xl text-blue-200 border-b-2 border-blue-800 blue-900 category">Game impact</div> <div
class="relative pl-6 mt-3 text-2xl text-blue-200 border-b-2 border-blue-800 blue-900 category"
>
Game impact
</div>
<div class="flex flex-wrap -mx-2"> <div class="flex flex-wrap -mx-2">
<template v-if="recordsLoaded"> <template v-if="recordsLoaded">
<RecordCard <RecordCard
@ -119,7 +125,7 @@
<div <div
v-for="index in 6" v-for="index in 6"
:key="index" :key="index"
style="width: 176px; height: 294px;" style="width: 176px; height: 294px"
class="mx-2 mt-6" class="mx-2 mt-6"
> >
<content-loader <content-loader
@ -134,7 +140,9 @@
</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">Miscellaneous</div> <div class="relative pl-6 mt-3 text-2xl text-blue-200 border-b-2 border-blue-800 category">
Miscellaneous
</div>
<div class="flex flex-wrap -mx-2"> <div class="flex flex-wrap -mx-2">
<template v-if="recordsLoaded"> <template v-if="recordsLoaded">
<RecordCard <RecordCard
@ -170,7 +178,7 @@
<div <div
v-for="index in 4" v-for="index in 4"
:key="index" :key="index"
style="width: 176px; height: 294px;" style="width: 176px; height: 294px"
class="mx-2 mt-6" class="mx-2 mt-6"
> >
<content-loader <content-loader
@ -185,7 +193,9 @@
</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">Multi kills</div> <div class="relative pl-6 mt-3 text-2xl text-blue-200 border-b-2 border-blue-800 category">
Multi kills
</div>
<div class="flex flex-wrap -mx-2"> <div class="flex flex-wrap -mx-2">
<template v-if="recordsLoaded"> <template v-if="recordsLoaded">
<RecordCard <RecordCard
@ -228,7 +238,7 @@
<div <div
v-for="index in 5" v-for="index in 5"
:key="index" :key="index"
style="width: 176px; height: 294px;" style="width: 176px; height: 294px"
class="mx-2 mt-6" class="mx-2 mt-6"
> >
<content-loader <content-loader
@ -267,9 +277,9 @@ export default {
computed: { computed: {
...mapGetters('summoner', ['summonerFound']), ...mapGetters('summoner', ['summonerFound']),
...mapState({ ...mapState({
records: state => state.summoner.records.list, records: (state) => state.summoner.records.list,
recordsLoaded: state => state.summoner.records.recordsLoaded, recordsLoaded: (state) => state.summoner.records.recordsLoaded,
}) }),
}, },
watch: { watch: {
@ -278,7 +288,7 @@ export default {
}, },
summonerFound() { summonerFound() {
this.fetchData() this.fetchData()
} },
}, },
created() { created() {
@ -298,14 +308,14 @@ export default {
return { return {
title: 'Summoner Records', title: 'Summoner Records',
} }
} },
} }
</script> </script>
<style scoped> <style scoped>
.category:before { .category:before {
@apply w-2 h-2 bg-blue-200 absolute block left-0 ml-1; @apply w-2 h-2 bg-blue-200 absolute block left-0 ml-1;
content: ""; content: '';
top: 35%; top: 35%;
transform: rotate(45deg); transform: rotate(45deg);
} }

46
client-new/tailwind.config.js
View file

@ -1,21 +1,21 @@
/* /*
** TailwindCSS Configuration File ** TailwindCSS Configuration File
** **
** Docs: https://tailwindcss.com/docs/configuration ** Docs: https://tailwindcss.com/docs/configuration
** Default: https://github.com/tailwindcss/tailwindcss/blob/master/stubs/defaultConfig.stub.js ** Default: https://github.com/tailwindcss/tailwindcss/blob/master/stubs/defaultConfig.stub.js
*/ */
const defaultTheme = require('tailwindcss/defaultTheme') const defaultTheme = require('tailwindcss/defaultTheme')
module.exports = { module.exports = {
theme: { theme: {
customForms: theme => ({ customForms: (theme) => ({
default: { default: {
checkbox: { checkbox: {
width: theme('spacing.6'), 'width': theme('spacing.6'),
height: theme('spacing.6'), 'height': theme('spacing.6'),
backgroundColor: 'rgba(23, 49, 79, 0.6)', 'backgroundColor': 'rgba(23, 49, 79, 0.6)',
borderColor: theme('colors.blue.800'), 'borderColor': theme('colors.blue.800'),
textColor: theme('colors.blue.1000'), 'textColor': theme('colors.blue.1000'),
'&:focus': { '&:focus': {
backgroundColor: theme('colors.blue.1000'), backgroundColor: theme('colors.blue.1000'),
borderColor: theme('colors.blue.700'), borderColor: theme('colors.blue.700'),
@ -24,21 +24,21 @@ module.exports = {
'&:checked': { '&:checked': {
backgroundColor: theme('colors.blue.1000'), backgroundColor: theme('colors.blue.1000'),
borderColor: 'transparent', borderColor: 'transparent',
} },
} },
} },
}), }),
extend: { extend: {
colors: { colors: {
teal: { teal: {
...defaultTheme.colors.teal, ...defaultTheme.colors.teal,
'flashy': '#24e8cc', flashy: '#24e8cc',
}, },
blue: { blue: {
...defaultTheme.colors.blue, ...defaultTheme.colors.blue,
760: '#2C5C94', 760: '#2C5C94',
850: '#2B4B74', 850: '#2B4B74',
1000: '#17314f' 1000: '#17314f',
}, },
}, },
spacing: { spacing: {
@ -48,7 +48,7 @@ module.exports = {
'11': '2.75rem', '11': '2.75rem',
}, },
borderWidth: { borderWidth: {
'3': '3px', 3: '3px',
}, },
fontFamily: { fontFamily: {
sans: ['Inter', ...defaultTheme.fontFamily.sans], sans: ['Inter', ...defaultTheme.fontFamily.sans],
@ -61,24 +61,20 @@ module.exports = {
'1/2': '50%', '1/2': '50%',
}, },
maxWidth: { maxWidth: {
'12': '3rem', 12: '3rem',
}, },
width: { width: {
'22': '5.5rem', 22: '5.5rem',
}, },
}, },
}, },
variants: { variants: {
textColor: ['responsive', 'hover', 'focus', 'group-hover'], textColor: ['responsive', 'hover', 'focus', 'group-hover'],
}, },
plugins: [ plugins: [require('@tailwindcss/custom-forms')],
require('@tailwindcss/custom-forms'),
],
purge: { purge: {
enabled: process.env.NODE_ENV === 'production', enabled: process.env.NODE_ENV === 'production',
content: [ content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
'./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'
]
}, },
future: { future: {
removeDeprecatedGapUtilities: true, removeDeprecatedGapUtilities: true,