diff --git a/client/src/components/Summoner/Champions/ChampionsTable.vue b/client/src/components/Summoner/Champions/ChampionsTable.vue index 11e7d45..12df5a6 100644 --- a/client/src/components/Summoner/Champions/ChampionsTable.vue +++ b/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() { diff --git a/client/src/components/Summoner/Champions/FilterQueue.vue b/client/src/components/Summoner/Champions/FilterQueue.vue index 721bf89..bff3e0a 100644 --- a/client/src/components/Summoner/Champions/FilterQueue.vue +++ b/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;" > diff --git a/client/src/components/Summoner/Champions/OnlyMostPlayed.vue b/client/src/components/Summoner/Champions/OnlyMostPlayed.vue new file mode 100644 index 0000000..8e30651 --- /dev/null +++ b/client/src/components/Summoner/Champions/OnlyMostPlayed.vue @@ -0,0 +1,48 @@ + + + diff --git a/client/src/views/SummonerChampions.vue b/client/src/views/SummonerChampions.vue index 73d5416..e5eee67 100644 --- a/client/src/views/SummonerChampions.vue +++ b/client/src/views/SummonerChampions.vue @@ -1,10 +1,16 @@ @@ -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: '' }