125 lines
3.6 KiB
Vue
125 lines
3.6 KiB
Vue
<script setup lang="ts">
|
|
const {data: championsData} : ChampionsResponse = await useFetch(CDRAGON_BASE + "plugins/rcp-be-lol-game-data/global/default/v1/champion-summary.json")
|
|
const champions = championsData.value.slice(1).sort((a, b) => {
|
|
if(a.name < b.name) return -1;
|
|
if(a.name > b.name) return 1;
|
|
return 0;
|
|
})
|
|
|
|
const {data: championsLanes} : {data: Ref<Array<ChampionData>>} = await useFetch("/api/champions")
|
|
const lanesMap : Map<string, Array<LaneData>> = new Map()
|
|
for(let champion of championsLanes.value) {
|
|
lanesMap.set(champion.alias, champion.lanes)
|
|
}
|
|
|
|
const filteredChampions = ref(champions)
|
|
|
|
const searchBar = useTemplateRef("searchBar")
|
|
watch(searchBar, (newS, oldS) => {searchBar.value?.focus()})
|
|
const searchText = ref("")
|
|
watch(searchText, (newT, oldT) => {
|
|
filteredChampions.value = champions.filter((champion) => champion.name.toLowerCase().includes(searchText.value.toLowerCase()))
|
|
})
|
|
|
|
function filterToLane(filter: number) {
|
|
switch(filter) {
|
|
case 0:
|
|
return "TOP";
|
|
case 1:
|
|
return "JUNGLE";
|
|
case 2:
|
|
return "MIDDLE";
|
|
case 3:
|
|
return "BOTTOM";
|
|
case 4:
|
|
return "UTILITY";
|
|
}
|
|
}
|
|
|
|
function onLaneFilterChange(newValue: number) {
|
|
if(newValue != -1) {
|
|
filteredChampions.value = champions.filter((champion) => {
|
|
const lanes : Array<LaneData> | undefined = lanesMap.get(champion.alias.toLowerCase())
|
|
if(lanes == undefined) return false;
|
|
|
|
return lanes.reduce((acc : boolean, current : {data:string, count:number}) =>
|
|
acc || (current.data == filterToLane(newValue)), false)
|
|
})
|
|
}
|
|
else {
|
|
filteredChampions.value = champions
|
|
}
|
|
}
|
|
|
|
async function submit() {
|
|
await navigateTo("/champion/" + filteredChampions.value[0].alias.toLowerCase())
|
|
}
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<div style="width: fit-content; margin: auto; display: flex; align-items: center;">
|
|
<LaneFilter @filter-change="(value : number) => onLaneFilterChange(value)" style="margin-right: 20px;"/>
|
|
<input @keyup.enter="submit" v-model="searchText" ref="searchBar" class="search-bar" type="text" placeholder="Search a champion"/>
|
|
</div>
|
|
<div class="champion-container">
|
|
<NuxtLink v-for="champion in filteredChampions" :to="'/champion/' + champion.alias.toLowerCase()">
|
|
<div class="champion-img-container">
|
|
<NuxtImg class="champion-img" :src="CDRAGON_BASE + mapPath(champion.squarePortraitPath)" :alt="champion.name"/>
|
|
</div>
|
|
</NuxtLink>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style>
|
|
.search-bar {
|
|
width: 400px;
|
|
height: 60px;
|
|
|
|
background-color: var(--color-surface-darker);
|
|
|
|
font-size: 28px;
|
|
|
|
border-radius: 12px;
|
|
border: none;
|
|
padding-left: 10px;
|
|
}
|
|
.search-bar:focus {
|
|
border: 2px solid var(--color-on-surface);
|
|
outline: none;
|
|
}
|
|
.champion-container {
|
|
width: 90%;
|
|
height: auto;
|
|
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, 128px);
|
|
grid-gap: 10px;
|
|
justify-content: center;
|
|
|
|
/* overflow-x: hidden;
|
|
overflow-y: scroll;
|
|
scrollbar-color: var(--color-on-surface) var(--color-surface-darker);
|
|
scrollbar-width: thin; */
|
|
|
|
margin: auto;
|
|
margin-top: 20px;
|
|
margin-bottom: 20px;
|
|
}
|
|
.champion-img-container {
|
|
overflow: hidden; width: 120px; height: 120px;
|
|
border: 1px solid var(--color-surface);
|
|
}
|
|
.champion-img-container:hover {
|
|
border: 1px solid var(--color-on-surface);
|
|
}
|
|
.champion-img {
|
|
width: 116px;
|
|
height: 116px;
|
|
transform: translate(4px, 4px) scale(1.2, 1.2);
|
|
|
|
user-select: none;
|
|
}
|
|
</style> |