style: format all frontend with prettier

client-new/src/assets/css/base.css

@@ -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;
 }
 

client-new/src/assets/css/match.css

@@ -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%;

client-new/src/assets/css/transition.css

@@ -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;
 }
 

client-new/src/components/Common/CubeLoader.vue

@@ -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%;

client-new/src/components/Common/DotsLoader.vue

@@ -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>
 

client-new/src/components/Common/LazyBackgroundImage.vue

@@ -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>

client-new/src/components/Common/Ripple.vue

@@ -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>

client-new/src/components/Common/Tooltip.vue

@@ -25,7 +25,7 @@
     </portal>
   </div>
 </template>
- 
+
 <script>
 export default {
   data() {
@@ -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>
+</script>

client-new/src/components/Form/LoadingButton.vue

@@ -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>
 

client-new/src/components/Form/SearchForm.vue

@@ -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>
 

client-new/src/components/Form/SearchFormDropdown.vue

@@ -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>

client-new/src/components/Form/SearchFormDropdownPlayer.vue

@@ -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>

client-new/src/components/Form/SearchFormRegion.vue

@@ -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>
 

client-new/src/components/Form/SwitchToggle.vue

@@ -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);
 }
 

client-new/src/components/Global/NotificationsContainer.vue

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

client-new/src/components/Global/PopupNotification.vue

@@ -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>

client-new/src/components/Layout/MainFooter.vue

@@ -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>

client-new/src/components/Match/DetailedMatch.vue

@@ -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>
 

client-new/src/components/Match/DetailedMatchGlobalStats.vue

@@ -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>

client-new/src/components/Match/DetailedMatchTeam.vue

@@ -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}')`,
@@ -162,8 +150,8 @@
                       :style="[
                         player.primaryRune
                           ? {
-                            background: `url(${player.primaryRune}) center/cover`,
-                          }
+                              background: `url(${player.primaryRune}) center/cover`,
+                            }
                           : '',
                       ]"
                       class="w-4 h-4 rounded-md bg-blue-1000"
@@ -172,8 +160,8 @@
                       :style="[
                         player.secondaryRune
                           ? {
-                            background: `url(${player.secondaryRune}) center/cover`,
-                          }
+                              background: `url(${player.secondaryRune}) center/cover`,
+                            }
                           : '',
                       ]"
                       class="w-4 h-4 rounded-md bg-blue-1000"
@@ -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;

client-new/src/components/Match/LiveMatch.vue

@@ -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>

client-new/src/components/Match/Match.vue

@@ -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>
 

client-new/src/components/Match/MatchItems.vue

@@ -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>
 

client-new/src/components/Match/Runes/RuneStyle.vue

@@ -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>
 

client-new/src/components/Match/Runes/RunesContainer.vue

@@ -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>

client-new/src/components/Summoner/Champions/ChampionsSearch.vue

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

client-new/src/components/Summoner/Champions/ChampionsTable.vue

@@ -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,
-             'w-name': heading.name === 'Name',
-             'w-kda': heading.name === 'KDA'}, 
-            sortedClasses(heading.props)
+            {
+              'rounded-tr-lg': index === headings.length - 1,
+              'w-name': heading.name === 'Name',
+              '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;

client-new/src/components/Summoner/Champions/FilterQueue.vue

@@ -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>

client-new/src/components/Summoner/Champions/OnlyMostPlayed.vue

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

client-new/src/components/Summoner/FilterSeason.vue

@@ -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>

client-new/src/components/Summoner/HeaderLoader.vue

@@ -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>

client-new/src/components/Summoner/Live/LiveTeam.vue

@@ -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']),
-  }
+    ...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;

client-new/src/components/Summoner/Overview/OverviewLoader.vue

@@ -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>

client-new/src/components/Summoner/Overview/SummonerChampions.vue

@@ -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>
 

client-new/src/components/Summoner/Overview/SummonerMates.vue

@@ -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>

client-new/src/components/Summoner/Overview/SummonerStats.vue

@@ -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>

client-new/src/components/Summoner/RecentActivity.vue

@@ -51,12 +51,12 @@
                   <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>
                       <span class="font-bold text-green-400">{{ day.wins }}</span>
-                      <span> - </span> 
+                      <span> - </span>
                       <span class="font-bold text-red-400">{{ day.losses }}</span>
                     </div>
                   </template>
@@ -87,21 +87,21 @@ export default {
       options: {
         year: 'numeric',
         month: '2-digit',
-        day: 'numeric'
-      }
+        day: 'numeric',
+      },
     }
   },
 
   computed: {
-  ...mapState({
-      recentActivity: state => state.summoner.basic.recentActivity
+    ...mapState({
+      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>

client-new/src/components/Summoner/Records/RecordCard.vue

@@ -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>
 

client-new/src/components/Summoner/SummonerRanked.vue

@@ -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>

client-new/src/data/data.js

@@ -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 ========= */

client-new/src/helpers/functions.js

@@ -1,6 +1,6 @@
 /**
  *  Return the relative time betweeen a chosen moment and the current time
- * @param previous : time we want to get difference 
+ * @param previous : time we want to get difference
  */
 export function timeDifference(previous) {
   const current = new Date()
@@ -26,13 +26,13 @@ export function timeDifference(previous) {
 
 /**
  * Convert seconds to a readable string
- * @param {Number} seconds 
+ * @param {Number} seconds
  */
 export function secToTime(seconds) {
   const min = Math.floor(seconds / 60)
   let newSec = Math.floor(seconds - min * 60)
   newSec = newSec < 10 ? '0' + newSec : newSec
-  
+
   return `${min}:${newSec}`
 }
 
@@ -46,7 +46,7 @@ export function sortTeamByRole(a, b) {
 
 /**
  *  Give the full CDragon image path from the iconPath field
- * @param {String} iconPath 
+ * @param {String} iconPath
  */
 export function createCDragonAssetUrl(iconPath) {
   const name = iconPath.split('/assets/')[1].toLowerCase()

client-new/src/helpers/summoner.js

@@ -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
 }
 
@@ -17,7 +19,7 @@ export function getPrimarRune(perks) {
  */
 export function getSecondaryRune(perks) {
   const secondaryRune = store.state.cdragon.runes.perkstyles[perks.secondaryStyle]
-  return  secondaryRune ? createCDragonAssetUrl(secondaryRune.icon) : null
+  return secondaryRune ? createCDragonAssetUrl(secondaryRune.icon) : null
 }
 
 /**
@@ -33,7 +35,10 @@ export function createMatchData(matches) {
     const date = new Date(match.date)
     const 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',
     }
   }
 
@@ -88,7 +93,7 @@ export function createRecordsData(recordsDto) {
   }, {})
 
   records.game_duration.amount = secToTime(records.game_duration.amount)
-  records.gold.amount =  records.gold.amount.toLocaleString()
+  records.gold.amount = records.gold.amount.toLocaleString()
   records.damage_taken.amount = records.damage_taken.amount.toLocaleString()
   records.damage_dealt_champions.amount = records.damage_dealt_champions.amount.toLocaleString()
   records.damage_dealt_objectives.amount = records.damage_dealt_objectives.amount.toLocaleString()
@@ -101,8 +106,8 @@ export function createRecordsData(recordsDto) {
 
 /**
  * Add rank img and ranked data
- * @param {Object} leagueData 
- * @param {String} leagueName 
+ * @param {Object} leagueData
+ * @param {String} leagueName
  */
 function getLeagueData(leagueData, leagueName) {
   if (!leagueData) return null

client-new/src/layouts/Default.vue

@@ -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;
 }
 

client-new/src/main.js

@@ -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')
@@ -48,7 +48,7 @@ Vue.filter('secToHours', (sec) => {
     if (h > 0) {
       result.push(h + 'h')
     }
-  
+
     if (m > 0) {
       result.push(m + 'm')
     }
@@ -70,5 +70,5 @@ Vue.filter('round', (value, decimals = 2) => {
 new Vue({
   router,
   store,
-  render: h => h(App),
+  render: (h) => h(App),
 }).$mount('#app')

client-new/src/mixins/liveGame.js

@@ -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,
+  },
 }

client-new/src/plugins/axios.js

@@ -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
-  }
+  },
 }

client-new/src/plugins/plausible.js

@@ -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
-  }
+  },
 }

client-new/src/router.js

@@ -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) => {
@@ -69,4 +69,4 @@ router.beforeEach((to, from, next) => {
   next()
 })
 
-export default router
+export default router

client-new/src/store/index.js

@@ -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,
 })

client-new/src/store/modules/cdragon.js

@@ -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,
 }

client-new/src/store/modules/detailedMatch.js

@@ -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]
@@ -43,7 +43,7 @@ export const mutations = {
     for (const player of match.redTeam.players) {
       const ranks = ranksByPlayer[player.id]
       if (!ranks) continue
-      Vue.set(player, 'rank', ranks[420]) 
+      Vue.set(player, 'rank', ranks[420])
     }
 
     match.ranksLoaded = true
@@ -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),
 }

client-new/src/store/modules/notification.js

@@ -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)
-  }
+  },
 }

client-new/src/store/modules/settings.js

@@ -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', {
-          type: 'error',
-          message: 'Too many favorite summoners.'
-        }, { root: true })
+        return dispatch(
+          'notification/add',
+          {
+            type: 'error',
+            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 })
-  }
+  },
 }

client-new/src/store/modules/summoner.js

@@ -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', {
-          type: 'error',
-          message: 'Summoner not found.'
-        }, { root: true })
+        dispatch(
+          'notification/add',
+          {
+            type: 'error',
+            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', {
-        name: infos.account.name,
-        icon: infos.account.profileIconId,
-        region,
-      }, { root: true })
+      dispatch(
+        'settings/addRecentSearch',
+        {
+          name: infos.account.name,
+          icon: infos.account.profileIconId,
+          region,
+        },
+        { root: true }
+      )
     } catch (error) {
       if (error.response && error.response.status === 422) {
-        dispatch('notification/add', {
-          type: 'error',
-          message: 'Summoner not found.'
-        }, { root: true })
+        dispatch(
+          'notification/add',
+          {
+            type: 'error',
+            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',
 }

client-new/src/style.css

@@ -1,3 +1,3 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
+@tailwind utilities;

client-new/src/views/Home.vue

@@ -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;

client-new/src/views/Summoner.vue

@@ -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>
 

client-new/src/views/SummonerChampions.vue

@@ -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>

client-new/src/views/SummonerLive.vue

@@ -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>

client-new/src/views/SummonerRecords.vue

@@ -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);
 }

client-new/tailwind.config.js

@@ -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,