buildpath/frontend/components/ChampionSelector.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 class="search-lanefilter-container">
        <LaneFilter id="cs-lanefilter" @filter-change="(value : number) => onLaneFilterChange(value)"/>
        <input @keyup.enter="submit" v-model="searchText" ref="searchBar" class="search-bar" type="text" placeholder="Search a champion"/>
    </div>
    <div class="champion-container">
        <NuxtLink style="width: fit-content; height: fit-content;" v-for="champion in filteredChampions" :to="'/champion/' + champion.alias.toLowerCase()">
        <div class="cs-champion-img-container">
        <NuxtImg class="cs-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: 1.75rem;

    border-radius: 12px;
    border: none;
    padding-left: 10px;
}
.search-bar:focus {
    border: 2px solid var(--color-on-surface);
    outline: none;
}

#cs-lanefilter {
    margin: auto;
    margin-right: 20px;
}

.search-lanefilter-container {
    width: fit-content; 
    margin: auto; 
    display: flex; 
    align-items: center;
}

.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;
}
.cs-champion-img-container {
    overflow: hidden; width: 120px; height: 120px;
    border: 1px solid var(--color-surface);
}
.cs-champion-img-container:hover {
    border: 1px solid var(--color-on-surface);
}
.cs-champion-img {
    width: 116px;
    height: 116px;
    transform: translate(4px, 4px) scale(1.2, 1.2);

    user-select: none;
}

@media only screen and (max-width: 920px) {
    .search-lanefilter-container {
        flex-direction: column;
    }
    #cs-lanefilter {
        margin-right: auto;
    }
    .champion-container {
        width: 100%;
    }
}
@media only screen and (max-width: 450px) {
    .search-bar {
        width: 92%;
        height: 40px;
    }
    .cs-champion-img-container {
        width: 80px; 
        height: 80px;
    }
    .cs-champion-img {
        width: 76px;
        height: 76px;
    }
    .champion-container {
        grid-template-columns: repeat(auto-fit, 80px);
    }
    .search-lanefilter-container {
        margin-top: 10px;
    }
}
</style>