55 lines
1.6 KiB
Vue
55 lines
1.6 KiB
Vue
<script setup>
|
|
const {data: champions} = await useFetch(CDRAGON_BASE + "plugins/rcp-be-lol-game-data/global/default/v1/champion-summary.json")
|
|
const filteredChampions = ref(champions.value.slice(1))
|
|
|
|
const searchBar = ref(null)
|
|
watch(searchBar, (newS, oldS) => {searchBar.value.focus()})
|
|
const searchText = ref("")
|
|
watch(searchText, (newT, oldT) => {
|
|
filteredChampions.value = champions.value.slice(1).filter((champion) => champion.name.toLowerCase().includes(searchText.value.toLowerCase()))
|
|
})
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<div style="width: fit-content; margin: auto;">
|
|
<input v-model="searchText" ref="searchBar" class="search-bar" type="text" placeholder="Search a champion"/>
|
|
</div>
|
|
<div class="champion-container" style="margin-top: 20px;">
|
|
<RouterLink style="margin-left: 5px; margin-right: 5px;" v-for="champion in filteredChampions" :to="'/champion/' + champion.alias.toLowerCase()">
|
|
<img :src="CDRAGON_BASE + mapPath(champion.squarePortraitPath)" :alt="champion.name"/>
|
|
</RouterLink>
|
|
</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: 1390px;
|
|
height: auto;
|
|
|
|
overflow-x: hidden;
|
|
overflow-y: scroll;
|
|
scrollbar-color: var(--color-on-surface) var(--color-surface-darker);
|
|
scrollbar-width: thin;
|
|
|
|
margin: auto;
|
|
}
|
|
</style> |