86 lines
2.3 KiB
Vue
86 lines
2.3 KiB
Vue
<script setup>
|
|
const {data: championsData} = 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 filteredChampions = ref(champions)
|
|
|
|
const searchBar = ref(null)
|
|
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()))
|
|
})
|
|
|
|
async function submit() {
|
|
await navigateTo("/champion/" + filteredChampions.value[0].alias.toLowerCase())
|
|
}
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<div style="width: fit-content; margin: auto;">
|
|
<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: 40px;
|
|
|
|
background-color: var(--color-surface-darker);
|
|
|
|
font-size: 20px;
|
|
|
|
border-radius: 12px;
|
|
border: none;
|
|
padding-left: 5px;
|
|
}
|
|
.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);
|
|
}
|
|
</style> |