Initial commit

frontend/components/ChampionSelector.vue

@@ -0,0 +1,50 @@
+<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"/>
+    </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.id">
+        <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;
+}
+.search-bar:focus {
+    border: 2px solid var(--color-on-surface);
+    outline: none;
+}
+.champion-container {
+    width: 1385px;
+    height: 660px;
+    overflow: scroll;
+    
+    margin: auto;
+}
+</style>