Added lanes (first try)

frontend/components/ChampionSelector.vue

@@ -1,20 +1,68 @@
-<script setup>
-const {data: championsData} = await useFetch(CDRAGON_BASE + "plugins/rcp-be-lol-game-data/global/default/v1/champion-summary.json")
+<script setup lang="ts">
+type ChampionResponse = {
+    data: Ref<Array<Champion>>
+}
+type Champion = {
+    name: string
+    alias: string
+    squarePortraitPath: string
+}
+const {data: championsData} : ChampionResponse = 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<any>} = await useFetch("/api/champions")
+const lanesMap = new Map()
+for(let champion of championsLanes.value) {
+    lanesMap.set(champion.alias, champion.lanes)
+}
+console.log(lanesMap)
+
 const filteredChampions = ref(champions)
 
-const searchBar = ref(null)
-watch(searchBar, (newS, oldS) => {searchBar.value.focus()})
+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<any> = 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())
 }
@@ -23,7 +71,8 @@ async function submit() {
 
 <template>
     <div>
-    <div style="width: fit-content; margin: auto;">
+    <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">
@@ -39,15 +88,15 @@ async function submit() {
 <style>
 .search-bar {
     width: 400px;
-    height: 40px;
+    height: 60px;
 
     background-color: var(--color-surface-darker);
     
-    font-size: 20px;
+    font-size: 28px;
 
     border-radius: 12px;
     border: none;
-    padding-left: 5px;
+    padding-left: 10px;
 }
 .search-bar:focus {
     border: 2px solid var(--color-on-surface);
@@ -82,7 +131,7 @@ async function submit() {
     width: 116px;
     height: 116px;
     transform: translate(4px, 4px) scale(1.2, 1.2);
-    
+
     user-select: none;
 }
 </style>