feat(champions): add checkbox to display only most played champions

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

@@ -143,6 +143,10 @@ export default {
       type: Array,
       required: true
     },
+    onlyMostPlayed: {
+      type: Boolean,
+      default: false
+    },
     search: {
       type: String,
       default: ''
@@ -214,7 +218,9 @@ export default {
   computed: {
     championsToDisplay() {
       return this.championsFull.filter(c => {
-        return c.champion.name.toLowerCase().includes(this.search.toLowerCase())
+        const playedEnough = this.onlyMostPlayed ? c.playrate >= 1 : true
+        const searched = c.champion.name.toLowerCase().includes(this.search.toLowerCase())
+        return playedEnough && searched
       })
     },
     totalGames() {

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

@@ -4,6 +4,7 @@
       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;"
     >
       <option v-for="(key) in Object.keys(choices)" :key="key" :value="key">{{ choices[key].name }}</option>
     </select>

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

@@ -0,0 +1,48 @@
+<template>
+  <div class="flex items-center space-x-2 text-base">
+    <input
+      @change="change"
+      id="onlyMostPlayed"
+      :checked="value"
+      class="form-checkbox"
+      type="checkbox"
+    />
+    <Tooltip>
+      <template v-slot:trigger>
+        <label for="onlyMostPlayed" class="cursor-pointer select-none">Only most played</label>
+      </template>
+      <template v-slot:default>
+        <div class="px-2 text-xs text-center text-white">
+          Hide champions with less than
+          <br />
+          <span class="font-bold text-teal-400">1% playrate</span>
+          to be able to compare
+          <br />statistics more easily.
+        </div>
+      </template>
+    </Tooltip>
+  </div>
+</template>
+
+<script>
+import Tooltip from '@/components/Common/Tooltip.vue'
+
+export default {
+  components: {
+    Tooltip,
+  },
+
+  props: {
+    value: {
+      type: Boolean,
+      default: false
+    }
+  },
+
+  methods: {
+    change(e) {
+      this.$emit('input', e.target.checked)
+    }
+  }
+}
+</script>

client/src/views/SummonerChampions.vue

@@ -1,10 +1,16 @@
 <template>
   <div key="champions" class="mt-3">
-    <div class="flex items-center">
+    <div class="flex items-center space-x-4">
       <ChampionsSearch @search-champions="updateSearch" />
-      <FilterQueue @filter-queue="filterByQueue" :choices="queues" class="ml-4" />
+      <FilterQueue @filter-queue="filterByQueue" :choices="queues" />
+      <OnlyMostPlayed v-model="onlyMostPlayed" />
     </div>
-    <ChampionsTable :champions="champions" :search="searchChampions" class="mt-6" />
+    <ChampionsTable
+      :champions="champions"
+      :search="searchChampions"
+      :only-most-played="onlyMostPlayed"
+      class="mt-6"
+    />
   </div>
 </template>
 
@@ -14,16 +20,19 @@ import { gameModes } from '@/data/data.js'
 import ChampionsSearch from '@/components/Summoner/Champions/ChampionsSearch.vue'
 import ChampionsTable from '@/components/Summoner/Champions/ChampionsTable.vue'
 import FilterQueue from '@/components/Summoner/Champions/FilterQueue.vue'
+import OnlyMostPlayed from '@/components/Summoner/Champions/OnlyMostPlayed.vue'
 
 export default {
   components: {
     ChampionsSearch,
     ChampionsTable,
     FilterQueue,
+    OnlyMostPlayed,
   },
 
   data() {
     return {
+      onlyMostPlayed: false,
       queue: null,
       searchChampions: ''
     }