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 {
width: 8px;
height: 8px
height: 8px;
}
::-webkit-scrollbar,
::-webkit-scrollbar-track {
background: rgba(23, 49, 79, .6);
background: rgba(23, 49, 79, 0.6);
}
.light-scrollbar::-webkit-scrollbar,
@ -16,8 +16,8 @@
}
::-webkit-scrollbar-thumb {
background-color: rgba(194, 217, 254, .6);
border-radius: 8px
background-color: rgba(194, 217, 254, 0.6);
border-radius: 8px;
}
::selection {
@ -29,7 +29,7 @@
}
.min-w-1200 {
min-width: 1200px;;
min-width: 1200px;
}
.page-wrapper {
@ -52,11 +52,11 @@ button:focus {
}
.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 {
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 {
@ -64,11 +64,7 @@ button:focus {
}
.heading {
background: linear-gradient(
to top,
rgb(34, 92, 155) 0%,
rgb(34, 92, 135) 100%
);
background: linear-gradient(to top, rgb(34, 92, 155) 0%, rgb(34, 92, 135) 100%);
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 */
.Win {
background-image: linear-gradient(
90deg,
rgba(1, 97, 28, 0.3) 0%,
rgba(44, 82, 130, 0) 45%
);
background-image: linear-gradient(90deg, rgba(1, 97, 28, 0.3) 0%, rgba(44, 82, 130, 0) 45%);
}
.Fail {
background-image: linear-gradient(
90deg,
rgba(140, 0, 0, 0.3) 0%,
rgba(44, 82, 130, 0) 45%
);
background-image: linear-gradient(90deg, rgba(140, 0, 0, 0.3) 0%, rgba(44, 82, 130, 0) 45%);
}
.Remake {
background-image: linear-gradient(
90deg,
rgba(233, 169, 75, 0.3) 0%,
rgba(44, 82, 130, 0) 45%
);
background-image: linear-gradient(90deg, rgba(233, 169, 75, 0.3) 0%, rgba(44, 82, 130, 0) 45%);
}
.ban::after {
content: "";
content: '';
position: absolute;
left: 0px;
top: 50%;

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

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

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

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

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

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

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

@ -14,34 +14,34 @@ export default {
props: {
imageSource: {
type: String,
required: true
required: true,
},
imageClass: {
type: String,
required: false,
default: ''
default: '',
},
backgroundSize: {
type: String,
required: false,
default: 'cover'
default: 'cover',
},
moreBackgrounds: {
type: String,
required: false,
default: ''
default: '',
},
transitionName: {
type: String,
required: false,
default: ''
}
default: '',
},
},
data() {
return {
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 ''
}
},
},
mounted() {
@ -68,7 +68,7 @@ export default {
},
imageOnLoad() {
this.imageState = 'loaded'
}
}
},
},
}
</script>

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

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

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

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

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

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

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

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

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

@ -35,10 +35,10 @@
</div>
</div>
<div
:style="{maxHeight: homepage ? '300px' : '480px'}"
:style="{ maxHeight: homepage ? '300px' : '480px' }"
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-else-if="favorites.length === 0" class="flex items-center space-x-2">
<svg class="w-4 h-4 text-blue-100">
@ -69,14 +69,14 @@
<SearchFormDropdownPlayer
@close="close"
@mousemove.native="onHover(1)"
:player="{name: 'KC Rekkles', icon: 7, region: 'euw'}"
:player="{ name: 'KC Rekkles', icon: 7, region: 'euw' }"
:selected="selected === 1"
:favorites-list="false"
/>
</template>
</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
ref="favorites"
@ -106,7 +106,9 @@
<span>to select</span>
</div>
<div class="space-x-2">
<span class="text-xs font-medium text-blue-700 bg-blue-100 rounded-md key">&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>
</div>
<div class="space-x-2">
@ -137,16 +139,16 @@ export default {
props: {
dropdown: {
type: Boolean,
default: false
default: false,
},
homepage: {
type: Boolean,
default: false
default: false,
},
value: {
type: String,
required: true
}
required: true,
},
},
data() {
@ -166,7 +168,7 @@ export default {
recentSearchesSliced() {
return this.recentSearches.slice(0, 4)
},
...mapState('settings', ['favorites', 'recentSearches'])
...mapState('settings', ['favorites', 'recentSearches']),
},
created() {
@ -206,9 +208,12 @@ export default {
}
// Click outside to close region dropdown
if (this.$refs['region-dropdown'] &&
if (
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()
}
@ -226,17 +231,18 @@ export default {
}
}
if (this.bypassKeys.includes(e.key) ||
(e.key === 'k' && (e.ctrlKey || e.metaKey))) {
if (this.bypassKeys.includes(e.key) || (e.key === 'k' && (e.ctrlKey || e.metaKey))) {
return
}
const input = document.querySelector('.summoner-input')
input.focus()
},
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) {
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 {
this.$refs.searches.children[this.selected - 1].scrollIntoView({ block: scrollIntoBlock })
}
@ -263,20 +269,22 @@ export default {
return
}
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()
},
toggle() {
this.$emit('toggle')
},
}
},
}
</script>
<style scoped>
.key {
padding: 0.2rem 0.45rem;
box-shadow: 0 2px 0 0 #3182ce, 0 5px 3px 0 rgba(0, 0, 0, 0.1),
box-shadow:
0 2px 0 0 #3182ce,
0 5px 3px 0 rgba(0, 0, 0, 0.1),
0 5px 2px 0 rgba(0, 0, 0, 0.06);
}
</style>

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

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

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

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

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

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

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

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

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

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

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

@ -2,10 +2,12 @@
<footer class="pt-20 pb-4 text-blue-200">
<p
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.
<br />Riot Games, and all associated properties are trademarks or registered trademarks of Riot Games, Inc.
LeagueStats.gg isn't endorsed by Riot Games and doesn't reflect the views or opinions of Riot
Games or anyone officially involved in producing or managing Riot Games properties.
<br />Riot Games, and all associated properties are trademarks or registered trademarks of
Riot Games, Inc.
</p>
<div class="flex items-center justify-between px-6">
<p>

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

@ -52,30 +52,34 @@ export default {
props: {
data: {
type: Object,
required: true
required: true,
},
detailsOpen: {
type: Boolean,
required: true
}
required: true,
},
},
computed: {
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() {
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({
account: state => state.summoner.basic.account,
percentSettings: state => state.settings.percent
account: (state) => state.summoner.basic.account,
percentSettings: (state) => state.settings.percent,
}),
},
methods: {
...mapActions('settings', ['updatePercent']),
}
},
}
</script>

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

@ -4,7 +4,7 @@
<Tooltip
v-for="ban in team.bans"
: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"
>
<template #trigger>
@ -13,13 +13,15 @@
class="relative border-2 rounded-full cursor-pointer ban"
>
<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"
></div>
<div
:class="[textLightColor, bgColor]"
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>
</template>
<template #default>
@ -34,24 +36,21 @@
class="flex mt-2 leading-tight"
>
<div>
<div
:class="textColor"
class="text-sm font-medium"
>{{ `${team.teamStats.kills}/${team.teamStats.deaths}/${team.teamStats.assists}` }}</div>
<div :class="textColor" class="text-sm font-medium">
{{ `${team.teamStats.kills}/${team.teamStats.deaths}/${team.teamStats.assists}` }}
</div>
<div class="text-xs text-white">K / D / A</div>
</div>
<div :class="allyTeam ? 'ml-3' : 'mr-3'">
<div
:class="textColor"
class="text-sm font-medium"
>{{ +(team.teamStats.gold / 1000).toFixed(1) + 'k' }}</div>
<div :class="textColor" class="text-sm font-medium">
{{ +(team.teamStats.gold / 1000).toFixed(1) + 'k' }}
</div>
<div class="text-xs text-white">Gold</div>
</div>
<div :class="allyTeam ? 'ml-3' : 'mr-3'">
<div
:class="textColor"
class="text-sm font-medium"
>{{ +(team.teamStats.dmgChamp / 1000).toFixed(1) + 'k' }}</div>
<div :class="textColor" class="text-sm font-medium">
{{ +(team.teamStats.dmgChamp / 1000).toFixed(1) + 'k' }}
</div>
<div class="text-xs text-white">Dmg</div>
</div>
<div :class="allyTeam ? 'ml-3' : 'mr-3'" class="flex flex-col justify-end">
@ -83,12 +82,12 @@ export default {
props: {
team: {
type: Object,
required: true
required: true,
},
allyTeam: {
type: Boolean,
default: false
}
default: false,
},
},
computed: {
@ -100,7 +99,7 @@ export default {
},
bgColor() {
return this.allyTeam ? 'bg-teal-500' : 'bg-red-500'
}
}
},
},
}
</script>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -4,9 +4,11 @@
v-model="queue"
@change="filterQueue"
class="block w-full px-4 py-2 pr-8 font-semibold capitalize bg-blue-800 rounded-md appearance-none cursor-pointer hover:bg-blue-700 focus:outline-none"
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>
<div
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: {
choices: {
type: Object,
required: true
}
required: true,
},
},
data() {
return {
queue: ''
queue: '',
}
},
@ -41,8 +43,7 @@ export default {
destroyed() {
// Reload all champions stats for next user visit of the champions tab
if (this.queue !== 0)
this.championsNotLoaded()
if (this.queue !== 0) this.championsNotLoaded()
},
methods: {
@ -50,6 +51,6 @@ export default {
this.$emit('filter-queue', this.queue)
},
...mapActions('summoner', ['championsNotLoaded']),
}
},
}
</script>

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

@ -35,14 +35,14 @@ export default {
props: {
value: {
type: Boolean,
default: false
}
default: false,
},
},
methods: {
change(e) {
this.$emit('input', e.target.checked)
}
}
},
},
}
</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"
>
<option :value="null" class="bg-blue-800">All seasons</option>
<option
v-for="(s, index) in sortedSeasons"
:key="index"
:value="s"
class="bg-blue-800"
>
<option v-for="(s, index) in sortedSeasons" :key="index" :value="s" class="bg-blue-800">
<template v-if="Number.isInteger(s)">Season {{ s }}</template>
<!-- Preseason numbers are stored in this format: 10.5 for Preseason 11 -->
<template v-else>Preseason {{ s + 0.5 }}</template>
@ -34,7 +29,7 @@ import { mapActions, mapState } from 'vuex'
export default {
data() {
return {
season: null
season: null,
}
},
@ -43,8 +38,8 @@ export default {
return [...this.seasons].sort((a, b) => b - a)
},
...mapState({
currentseason: state => state.summoner.basic.currentSeason,
seasons: state => state.summoner.basic.seasons,
currentseason: (state) => state.summoner.basic.currentSeason,
seasons: (state) => state.summoner.basic.seasons,
}),
},
@ -56,7 +51,7 @@ export default {
filterSeason() {
this.updateSeason(this.season)
},
...mapActions('summoner', ['updateSeason'])
}
...mapActions('summoner', ['updateSeason']),
},
}
</script>

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

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

108
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">
<table
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>
<tr class="text-left">
<th
:class="[ally ? 'text-teal-400 ' : 'text-red-400 ']"
class="font-semibold w-team"
>{{ ally ? 'Ally' : 'Enemy' }} Team</th>
<th :class="[ally ? 'text-teal-400 ' : 'text-red-400 ']" class="font-semibold w-team">
{{ ally ? 'Ally' : 'Enemy' }} Team
</th>
<th class="text-sm font-normal text-blue-200 w-ranked">SoloQ Stats</th>
<th class="text-sm font-normal text-blue-200 w-ranked">Flex Stats</th>
<th class="px-2 text-sm font-normal text-right text-blue-200 w-bans">Bans</th>
@ -31,17 +30,19 @@
class="flex flex-col items-center runes"
>
<div
:style="{backgroundImage: `url('${getPrimarRune(player.perks)}')`}"
:style="{ backgroundImage: `url('${getPrimarRune(player.perks)}')` }"
class="w-6 h-6 bg-center bg-cover"
></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"
></div>
</div>
<div v-else class="w-6"></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="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'"
:class="borderChampion(player.summonerId)"
class="absolute border rounded-full p-2px bg-blue-1000"
style="bottom: -5px; right: -5px;"
style="bottom: -5px; right: -5px"
>
<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"
></div>
</div>
</div>
<div class="flex flex-col ml-2">
<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"
></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"
></div>
</div>
<div class="ml-3 text-sm leading-tight text-left">
<router-link
v-if="!player.bot"
:to="{ name: 'summoner', params: { region: $route.params.region, name: player.summonerName }}"
:class="[player.summonerId === account.id ? 'text-yellow-500' : 'hover:text-blue-200']"
:to="{
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"
>{{ player.summonerName }}</router-link>
<div
:class="[ally ? 'text-teal-300 ' : 'text-red-400 ']"
class="text-xs"
>{{ player.champion.name }}
>{{ player.summonerName }}</router-link
>
<div :class="[ally ? 'text-teal-300 ' : 'text-red-400 ']" class="text-xs">
{{ player.champion.name }}
</div>
</div>
</div>
@ -89,15 +94,15 @@
<svg class="w-5 h-5">
<use :xlink:href="`#rank-${player.rank.soloQ.tier.toLowerCase()}`" />
</svg>
<div
class="text-xs font-semibold text-blue-300 mt-2px"
>{{ player.rank.soloQ.shortName }}</div>
<div class="text-xs font-semibold text-blue-300 mt-2px">
{{ player.rank.soloQ.shortName }}
</div>
</div>
<div class="ml-5 text-center">
<div class="font-semibold">{{ player.rank.soloQ.winrate }}</div>
<div
class="mt-1 text-xs text-blue-300"
>{{ player.rank.soloQ.wins + player.rank.soloQ.losses }} games</div>
<div class="mt-1 text-xs text-blue-300">
{{ player.rank.soloQ.wins + player.rank.soloQ.losses }} games
</div>
</div>
</div>
<div v-else class="w-5 h-5">
@ -112,15 +117,15 @@
<svg class="w-5 h-5">
<use :xlink:href="`#rank-${player.rank.flex5v5.tier.toLowerCase()}`" />
</svg>
<div
class="text-xs font-semibold text-blue-300 mt-2px"
>{{ player.rank.flex5v5.shortName }}</div>
<div class="text-xs font-semibold text-blue-300 mt-2px">
{{ player.rank.flex5v5.shortName }}
</div>
</div>
<div class="ml-5 text-center">
<div class="font-semibold">{{ player.rank.flex5v5.winrate }}</div>
<div
class="mt-1 text-xs text-blue-300"
>{{ player.rank.flex5v5.wins + player.rank.flex5v5.losses }} games</div>
<div class="mt-1 text-xs text-blue-300">
{{ player.rank.flex5v5.wins + player.rank.flex5v5.losses }} games
</div>
</div>
</div>
<div v-else class="w-5 h-5">
@ -137,16 +142,22 @@
>
<div
:style="[
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')`}
: ''
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')`,
}
: '',
]"
class="w-6 h-6 bg-center bg-cover rounded-full ban-img bg-blue-1000"
></div>
<div
:class="[ally ? 'text-teal-100 bg-teal-500' : 'text-red-100 bg-red-500']"
class="absolute 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 v-else class="w-5 h-5 text-left">
<div class="text-2xl text-blue-300">-</div>
@ -202,7 +213,7 @@ export default {
props: {
team: {
type: Array,
required: true
required: true,
},
ally: {
type: Boolean,
@ -211,19 +222,19 @@ export default {
gamemode: {
type: String,
default: '',
}
},
},
data() {
return {
clashGameBanOrder: {
100: [1, 3, 5, 8, 10],
200: [2, 4, 6, 7, 9]
200: [2, 4, 6, 7, 9],
},
customGameBanOrder: {
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'
},
...mapState({
account: state => state.summoner.basic.account,
live: state => state.summoner.live.match,
liveLoaded: state => state.summoner.live.liveLoaded,
})
account: (state) => state.summoner.basic.account,
live: (state) => state.summoner.live.match,
liveLoaded: (state) => state.summoner.live.liveLoaded,
}),
},
methods: {
@ -254,7 +265,7 @@ export default {
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) {
if (id === this.account.id) {
@ -270,14 +281,13 @@ export default {
}
},
selectRunes(player) {
if(!player.perks)
return
if (!player.perks) return
this.displayOrHideRunes(player.perks)
},
getPrimarRune,
getSecondaryRune,
...mapActions('cdragon', ['displayOrHideRunes']),
}
},
}
</script>
@ -299,7 +309,7 @@ export default {
}
.live-team-row td:first-child:before {
content: "";
content: '';
position: absolute;
z-index: -10;
top: 0;

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

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

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

@ -1,11 +1,11 @@
<template>
<div class="bg-blue-800 rounded-lg">
<div class="relative flex items-center justify-center py-4 text-blue-200 rounded-t-lg heading">
<svg class="w-5 h-5" style="transform: rotate(-5deg);">
<svg class="w-5 h-5" style="transform: rotate(-5deg)">
<use xlink:href="#layers" />
</svg>
<span class="mx-4 text-lg font-semibold uppercase">CHAMPIONS</span>
<svg class="w-5 h-5" style="transform: rotate(5deg);">
<svg class="w-5 h-5" style="transform: rotate(5deg)">
<use xlink:href="#layers" />
</svg>
<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>Stats based on</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 class="mt-2 text-xs italic font-normal leading-tight text-blue-100">
Load more matches
@ -31,7 +34,9 @@
</div>
</div>
<div v-if="stats.champion.length">
<div class="flex items-baseline px-4 mt-3 text-xs font-semibold text-left text-blue-300 uppercase">
<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="w-plays">Plays</div>
<div class="w-winrate">Winrate</div>
@ -41,13 +46,16 @@
<li
v-for="(champion, index) in stats.champion"
: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"
>
<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
: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"
></div>
<div class="mx-1 truncate">{{ champion.champion.name }}</div>
@ -55,23 +63,27 @@
<div class="w-plays">
<div class="text-xs text-purple-400">{{ champion.count }}</div>
<div
:style="{width: widthBar(champion.count, mostPlayed)}"
:style="{ width: widthBar(champion.count, mostPlayed) }"
class="h-1 bg-purple-400 rounded-full mt-2px"
></div>
</div>
<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
:style="{width: widthBar(champion.wins, champion.count)}"
:style="{ width: widthBar(champion.wins, champion.count) }"
class="h-1 bg-green-400 rounded-full mt-2px"
></div>
</div>
<div class="w-kda">
<div class="text-xs text-blue-400">
{{ kda(champion.kills, champion.deaths, champion.assists) }}
</div>
<div
class="text-xs text-blue-400"
>{{ kda(champion.kills, champion.deaths, champion.assists) }}</div>
<div
:style="{width: widthBar(kda(champion.kills, champion.deaths, champion.assists), bestKda)}"
:style="{
width: widthBar(kda(champion.kills, champion.deaths, champion.assists), bestKda),
}"
class="h-1 bg-blue-400 rounded-full mt-2px"
></div>
</div>
@ -97,15 +109,17 @@ export default {
computed: {
bestKda() {
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)
},
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({
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)
},
widthBar(value, total) {
return `${value * 36 / total}px`
}
}
return `${(value * 36) / total}px`
},
},
}
</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="pb-2">
<div class="flex items-center justify-center py-4 text-blue-200 rounded-t-lg heading">
<svg class="w-5 h-5" style="transform: rotate(-5deg);">
<svg class="w-5 h-5" style="transform: rotate(-5deg)">
<use xlink:href="#people" />
</svg>
<span class="mx-4 text-lg font-semibold uppercase">FRIENDS</span>
<svg class="w-5 h-5" style="transform: rotate(5deg);">
<svg class="w-5 h-5" style="transform: rotate(5deg)">
<use xlink:href="#people" />
</svg>
</div>
@ -23,9 +23,10 @@
class="flex items-center justify-between"
>
<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"
>{{ mate.name }}</router-link>
>{{ mate.name }}</router-link
>
<div class="w-1/4">{{ mate.wins }} / {{ mate.losses }}</div>
<div class="w-1/4">
<Tooltip>
@ -33,7 +34,7 @@
<div class="h-2 bg-blue-900 rounded-full cursor-pointer">
<div
:class="getWinrateColor(mate.wins, mate.count)"
:style="{width: `${winrate(mate.wins, mate.count)}%`}"
:style="{ width: `${winrate(mate.wins, mate.count)}%` }"
class="h-full rounded-full"
></div>
</div>
@ -45,7 +46,8 @@
<span
:class="getWinrateColor(mate.wins, mate.count, false)"
class="font-bold"
>{{ winrate(mate.wins, mate.count)|percent }}</span>
>{{ winrate(mate.wins, mate.count) | percent }}</span
>
</div>
</div>
</template>
@ -73,7 +75,7 @@ export default {
data() {
return {
maxMates: 15
maxMates: 15,
}
},
@ -82,7 +84,7 @@ export default {
return this.mates.length > 0
},
...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'
},
winrate(wins, count) {
return wins * 100 / count
}
}
return (wins * 100) / count
},
},
}
</script>

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

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

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

@ -51,7 +51,7 @@
<template v-if="day.matches > 0">
<div>
<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>
<span>record: </span>
@ -87,21 +87,21 @@ export default {
options: {
year: 'numeric',
month: '2-digit',
day: 'numeric'
}
day: 'numeric',
},
}
},
computed: {
...mapState({
recentActivity: state => state.summoner.basic.recentActivity
recentActivity: (state) => state.summoner.basic.recentActivity,
}),
},
watch: {
recentActivity() {
this.fillGrid()
}
},
},
created() {
@ -125,7 +125,7 @@ export default {
wins: 0,
losses: 0,
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 formattedTime = matchTime.toLocaleString(undefined, this.options)
const dayOfTheMatch = this.gridDays.filter(
e => e.date === formattedTime
)
const dayOfTheMatch = this.gridDays.filter((e) => e.date === formattedTime)
if (dayOfTheMatch.length > 0) {
dayOfTheMatch[0].time = match.time
dayOfTheMatch[0].matches = match.wins + match.losses
@ -149,7 +147,7 @@ export default {
}
// 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) {
/* TODO: change this */
@ -168,7 +166,7 @@ export default {
if (index % 7 !== 0) {
return 'mt-1'
}
}
}
},
},
}
</script>

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

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

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

@ -4,19 +4,19 @@
<div class="flex items-center">
<div
ref="leagueBorder"
:style="{backgroundColor: colorBorder}"
:style="{ backgroundColor: colorBorder }"
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="h-full bg-center bg-cover mt-2px"
:style="{backgroundImage: `url(${selectedLeague.rankImgLink})`}"
:style="{ backgroundImage: `url(${selectedLeague.rankImgLink})` }"
></div>
</div>
</div>
<div
class="ml-2 text-3xl font-bold text-teal-500 uppercase"
>{{ selectedLeague.fullRank }}</div>
<div class="ml-2 text-3xl font-bold text-teal-500 uppercase">
{{ selectedLeague.fullRank }}
</div>
<div class="ml-4 text-2xl font-bold">{{ selectedLeague.leaguePoints }} LP</div>
<div
v-if="selectedLeague.miniSeries"
@ -25,7 +25,7 @@
<div
v-for="(result, index) in bo"
:key="index + result"
:class="[{'ml-1': index !== 0}, boGame(result)]"
:class="[{ 'ml-1': index !== 0 }, boGame(result)]"
class="w-3 h-3 rounded-full"
></div>
</div>
@ -36,11 +36,9 @@
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"
>
<option
v-for="(data, leagueName) in ranked"
:key="leagueName"
:value="leagueName"
>{{ data.name }}</option>
<option v-for="(data, leagueName) in ranked" :key="leagueName" :value="leagueName">
{{ data.name }}
</option>
</select>
<div
class="absolute inset-y-0 right-0 flex items-center px-2 text-gray-700 pointer-events-none"
@ -57,8 +55,13 @@
<div class="font-semibold text-red-400">{{ selectedLeague.losses }}</div>
<div class="ml-3 text-base font-semibold uppercase">Winrate</div>
<div
:class="['ml-2 text-base leading-tight font-semibold', parseFloat(selectedLeague.winrate) >= 50 ? 'text-green-400' : 'text-red-400']"
>{{ selectedLeague.winrate }}</div>
:class="[
'ml-2 text-base leading-tight font-semibold',
parseFloat(selectedLeague.winrate) >= 50 ? 'text-green-400' : 'text-red-400',
]"
>
{{ selectedLeague.winrate }}
</div>
</div>
</div>
</div>
@ -70,24 +73,24 @@ export default {
props: {
ranked: {
type: Object,
required: true
}
required: true,
},
},
data() {
return {
currentDegree: 0,
rankColors: {
'iron': '#574D4F',
'bronze': '#8C523A',
'silver': '#80989D',
'gold': '#CD8837',
'platinum': '#4E9996',
'diamond': '#576BCE',
'master': '#9D48E0',
'grandmaster': '#CD4545',
'challenger': '#F4C874',
iron: '#574D4F',
bronze: '#8C523A',
silver: '#80989D',
gold: '#CD8837',
platinum: '#4E9996',
diamond: '#576BCE',
master: '#9D48E0',
grandmaster: '#CD4545',
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()]
},
leagueDegrees() {
return (this.selectedLeague.leaguePoints <= 100 ? this.selectedLeague.leaguePoints : 100) * 360 / 100
return (
((this.selectedLeague.leaguePoints <= 100 ? this.selectedLeague.leaguePoints : 100) * 360) /
100
)
},
selectedLeague() {
return this.ranked[this.selectedKey]
}
},
},
watch: {
@ -114,7 +120,7 @@ export default {
this.currentDegree = 0
this.$refs.leagueBorder.style.backgroundImage = null
this.triggerAnimation()
}
},
},
mounted() {
@ -124,10 +130,14 @@ export default {
methods: {
animateLeagueDegrees(stop = false) {
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 = this.currentDegree <= 180 ? `linear-gradient(${90 + this.currentDegree}deg, transparent 50%, #2c5282 50%)` : `linear-gradient(${this.currentDegree - 90}deg, transparent 50%, ${this.colorBorder} 50%)`
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.$refs.leagueBorder.style.backgroundImage = `${linearGradient}, linear-gradient(90deg, #2c5282 50%, transparent 50%)`
this.triggerAnimation()
@ -146,10 +156,9 @@ export default {
setTimeout(() => {
if (this.currentDegree < 360 && this.currentDegree < this.leagueDegrees)
this.animateLeagueDegrees()
else
this.animateLeagueDegrees(true)
else this.animateLeagueDegrees(true)
}, 1)
}
}
},
},
}
</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 = {
0: {
type: 'Custom',
name: 'Custom Game'
name: 'Custom Game',
},
900: {
type: 'Normal',
@ -75,20 +75,20 @@ export const gameModes = {
},
1020: {
type: 'Normal',
name: 'One for All'
name: 'One for All',
},
1300: {
type: 'Normal',
name: 'Nexus Blitz'
name: 'Nexus Blitz',
},
1400: {
type: 'Normal',
name: 'Ultimate Spellbook'
name: 'Ultimate Spellbook',
},
1900: {
type: 'Normal',
name: 'URF',
}
},
}
/* ========= OLD 5 COLORS ========= */

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

@ -7,7 +7,9 @@ import store from '@/store'
* @param {Object} perks : from the API
*/
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
}
@ -33,7 +35,10 @@ export function createMatchData(matches) {
const date = new Date(match.date)
const dateOptions = { day: '2-digit', month: '2-digit', year: 'numeric' }
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.map = maps[match.map]
@ -70,7 +75,7 @@ export function createBasicSummonerData(summonerBasic) {
wins: 0,
losses: 0,
winrate: '0%',
name: 'Solo/Duo'
name: 'Solo/Duo',
}
}

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

@ -10,7 +10,7 @@
<header
:class="bgHeader ? 'header-scrolled' : 'bg-transparent'"
class="fixed left-0 right-0 z-20 px-4 text-teal-100 transition-colors duration-100 ease-in-out border-b-2 header"
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 flex-1">
@ -70,7 +70,9 @@
v-for="name in basic.account.names.slice(0, -1)"
:key="name.date"
class="text-teal-400"
>{{ name.name }}</li>
>
{{ name.name }}
</li>
</ul>
</div>
</template>
@ -85,7 +87,7 @@
<div
v-if="false"
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">
<use xlink:href="#star" />
@ -94,15 +96,19 @@
</div>
</div>
<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
: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"
: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
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>
@ -121,29 +127,45 @@
<!-- NAVIGATION -->
<div class="pb-2">
<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="pb-2 text-blue-300 border-b-2 border-transparent cursor-pointer hover:text-blue-100"
exact
>Overview</router-link>
>Overview</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="pb-2 ml-4 text-blue-300 border-b-2 border-transparent cursor-pointer hover:text-blue-100"
exact
>Champions</router-link>
>Champions</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="pb-2 ml-4 text-blue-300 border-b-2 border-transparent cursor-pointer hover:text-blue-100"
exact
>Records</router-link>
>Records</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="pb-2 ml-4 text-blue-300 border-b-2 border-transparent cursor-pointer hover:text-blue-100"
exact
>Live game</router-link>
>Live game</router-link
>
</div>
<!-- Select Season -->
@ -193,12 +215,12 @@ export default {
SearchForm,
HeaderLoader,
SummonerRanked,
Tooltip
Tooltip,
},
data() {
return {
bgHeader: false
bgHeader: false,
}
},
@ -207,17 +229,22 @@ export default {
return this.summonerFound && this.overviewLoaded ? 'tab' : 'none'
},
...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: {
$route(to, from) {
if (from.params.region === to.params.region && from.params.name === to.params.name)
return
if (from.params.region === to.params.region && from.params.name === to.params.name) return
this.apiCall()
}
},
},
created() {
@ -239,11 +266,11 @@ export default {
},
isRouteActive(currentRoute) {
return {
'router-link-active': this.$route.name === currentRoute
'router-link-active': this.$route.name === currentRoute,
}
},
redirect(summoner, region) {
this.$router.push(`/summoner/${region}/${summoner}`).catch(() => { })
this.$router.push(`/summoner/${region}/${summoner}`).catch(() => {})
},
...mapActions('settings', ['updateSettings']),
...mapActions('summoner', ['basicRequest']),
@ -251,9 +278,11 @@ export default {
metaInfo() {
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>
@ -290,7 +319,7 @@ export default {
.playing::before,
.playing::after {
content: "";
content: '';
position: absolute;
height: 100px;
width: 100px;
@ -303,11 +332,7 @@ export default {
.playing::after {
z-index: 0;
background: linear-gradient(
to top,
rgba(0, 0, 0, 0) 30%,
rgb(36, 232, 204) 100%
);
background: linear-gradient(to top, rgba(0, 0, 0, 0) 30%, rgb(36, 232, 204) 100%);
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 d = Math.floor(sec / (3600 * 24))
const h = Math.floor(sec % (3600 * 24) / 3600)
const m = Math.floor(sec % 3600 / 60)
const h = Math.floor((sec % (3600 * 24)) / 3600)
const m = Math.floor((sec % 3600) / 60)
if (d > 0) {
result.push(d + ' days')
@ -70,5 +70,5 @@ Vue.filter('round', (value, decimals = 2) => {
new Vue({
router,
store,
render: h => h(App),
render: (h) => h(App),
}).$mount('#app')

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

@ -5,7 +5,7 @@ import { mapState } from 'vuex'
export const liveGame = {
data() {
return {
gameLength: 0
gameLength: 0,
}
},
@ -14,7 +14,9 @@ export const liveGame = {
if (!this.current || !this.current.participants) {
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() {
if (this.current.gameStartTime === 0) {
@ -26,11 +28,15 @@ export const liveGame = {
if (!this.current || !this.current.participants) {
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() {
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 {
return { type: '', name: '' }
}
@ -39,12 +45,12 @@ export const liveGame = {
return this.current ? this.current.gameStartTime : 0
},
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({
account: state => state.summoner.basic.account,
current: state => state.summoner.live.match,
})
account: (state) => state.summoner.basic.account,
current: (state) => state.summoner.live.match,
}),
},
created() {
@ -58,17 +64,17 @@ export const liveGame = {
watch: {
gameStartTime() {
this.updateGameLength()
}
},
},
methods: {
updateGameLength() {
if (this.gameStartTime === 0) {
return this.gameLength = 0
return (this.gameLength = 0)
}
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['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 axiosSource = CancelToken.source()
@ -15,7 +17,11 @@ axios.defaults.cancelToken = axiosSource.token
// Add season number to data if the route need it
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
}
return config
@ -24,5 +30,5 @@ axios.interceptors.request.use(function (config) {
export default {
install(Vue) {
Vue.prototype.$axios = axiosHttp
}
},
}

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

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

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

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

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

@ -16,28 +16,28 @@ export default new Vuex.Store({
detailedMatch,
notification,
settings,
summoner
summoner,
},
state: {
regionsList: {
'br': 'br1',
'eune': 'eun1',
'euw': 'euw1',
'jp': 'jp1',
'kr': 'kr',
'lan': 'la1',
'las': 'la2',
'na': 'na1',
'oce': 'oc1',
'tr': 'tr1',
'ru': 'ru',
'ph': 'ph2',
'sg': 'sg2',
'th': 'th2',
'tw': 'tw2',
'vn': 'vn2',
br: 'br1',
eune: 'eun1',
euw: 'euw1',
jp: 'jp1',
kr: 'kr',
lan: 'la1',
las: 'la2',
na: 'na1',
oce: 'oc1',
tr: 'tr1',
ru: 'ru',
ph: 'ph2',
sg: 'sg2',
th: 'th2',
tw: 'tw2',
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)
},
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)
commit('SET_RUNES', data)
},
}
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 state = {
matches: []
matches: [],
}
export const mutations = {
MATCH_LOADING(state, matchId) {
const alreadyIn = state.matches.find(m => m.matchId === matchId)
const alreadyIn = state.matches.find((m) => m.matchId === matchId)
if (!alreadyIn) {
state.matches.push({ matchId, status: 'loading' })
}
},
MATCH_FOUND(state, {matchDetails, ranksLoaded }) {
MATCH_FOUND(state, { matchDetails, ranksLoaded }) {
matchDetails.status = 'loaded'
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)
},
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) {
const ranks = ranksByPlayer[player.id]
@ -55,23 +55,29 @@ export const actions = {
commit('MATCH_LOADING', 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(resp.data)
const {matchDetails, ranksLoaded} = resp.data
commit('MATCH_FOUND', {matchDetails, ranksLoaded })
const { matchDetails, ranksLoaded } = resp.data
commit('MATCH_FOUND', { matchDetails, ranksLoaded })
// If the ranks of the players are not yet known
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
console.log('--- RANK OF MATCH DETAILS ---')
console.log(ranks.data)
commit('MATCH_RANKS_FOUND', { matchId, ranksByPlayer: ranks.data })
}
}
},
}
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 state = {
notifications: []
notifications: [],
}
let nextId = 1
@ -10,14 +10,14 @@ export const mutations = {
PUSH(state, notification) {
state.notifications.push({
...notification,
id: nextId++
id: nextId++,
})
},
DELETE(state, notificationToRemove) {
state.notifications = state.notifications.filter(
notification => notification.id !== notificationToRemove.id
(notification) => notification.id !== notificationToRemove.id
)
}
},
}
export const actions = {
@ -26,5 +26,5 @@ export const actions = {
},
remove({ commit }, notificationToRemove) {
commit('DELETE', notificationToRemove)
}
},
}

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

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

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

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

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

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

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

@ -32,7 +32,8 @@
@clicked="moreMatches"
: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"
>More matches</LoadingButton>
>More matches</LoadingButton
>
</div>
<div v-else>
<div class="flex justify-center">
@ -49,7 +50,6 @@
</div>
</template>
<script>
import { mapState, mapActions, mapGetters } from 'vuex'
import LiveMatch from '@/components/Match/LiveMatch.vue'
@ -70,15 +70,15 @@ export default {
SummonerChampions,
SummonerMates,
SummonerStats,
VueStickySidebar
VueStickySidebar,
},
computed: {
...mapState({
current: state => state.summoner.live.match,
overview: state => state.summoner.overview,
current: (state) => state.summoner.live.match,
overview: (state) => state.summoner.overview,
}),
...mapGetters('summoner', ['matchesLoading', 'overviewLoaded', 'summonerFound'])
...mapGetters('summoner', ['matchesLoading', 'overviewLoaded', 'summonerFound']),
},
watch: {
@ -87,7 +87,7 @@ export default {
},
summonerFound() {
this.fetchData()
}
},
},
created() {
@ -114,7 +114,7 @@ export default {
return {
title: 'Summoner Overview',
}
}
},
}
</script>

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

@ -34,7 +34,7 @@ export default {
return {
onlyMostPlayed: false,
queue: null,
searchChampions: ''
searchChampions: '',
}
},
@ -42,24 +42,24 @@ export default {
queues() {
// Only keep the gameModes the summoner has played
const queues = Object.keys(gameModes)
.filter(gameMode =>
gameModes[gameMode].type !== 'Bot' &&
this.gamemodes.includes(Number(gameMode))
.filter(
(gameMode) =>
gameModes[gameMode].type !== 'Bot' && this.gamemodes.includes(Number(gameMode))
)
.reduce((obj, key) => {
return {
...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']),
...mapState({
champions: state => state.summoner.champions.list,
championsLoaded: state => state.summoner.champions.championsLoaded,
gamemodes: state => state.summoner.basic.gamemodes
})
champions: (state) => state.summoner.champions.list,
championsLoaded: (state) => state.summoner.champions.championsLoaded,
gamemodes: (state) => state.summoner.basic.gamemodes,
}),
},
watch: {
@ -68,7 +68,7 @@ export default {
},
summonerFound() {
this.fetchData()
}
},
},
created() {
@ -96,6 +96,6 @@ export default {
return {
title: 'Summoner Champions',
}
}
},
}
</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>{{ gamemode.type }} {{ gamemode.name }}</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
@click="liveMatchRequest"
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 v-else class="h-4"></div>
@ -23,7 +27,9 @@
<button
@click="liveMatchRequest"
class="px-3 py-1 my-4 text-sm text-blue-100 bg-blue-800 rounded-md shadow-md hover:bg-blue-760"
>Reload</button>
>
Reload
</button>
</div>
</div>
</div>
@ -45,16 +51,16 @@ export default {
computed: {
...mapGetters('summoner', ['summonerLoading', 'summonerFound']),
...mapState({
live: state => state.summoner.live.match,
liveLoaded: state => state.summoner.live.liveLoaded,
playing: state => state.summoner.live.playing,
})
live: (state) => state.summoner.live.match,
liveLoaded: (state) => state.summoner.live.liveLoaded,
playing: (state) => state.summoner.live.playing,
}),
},
watch: {
summonerFound() {
this.fetchData()
}
},
},
created() {
@ -77,6 +83,6 @@ export default {
return {
title: 'Summoner Live Game',
}
}
},
}
</script>

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

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

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

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