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>

frontend/components/LaneFilter.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+const emit = defineEmits<{
+    filterChange: [value: number]
+}>()
+
+const POSITIONS = ["top", "jungle", "middle", "bottom", "utility"]
+const LANE_IMAGES = Array(5).fill("").map((_, index) => "/img/lanes/icon-position-" + POSITIONS[index] + ".png")
+const LANE_IMAGES_HOVER = Array(5).fill("").map((_, index) => "/img/lanes/icon-position-" + POSITIONS[index] + "-hover.png")
+const LANE_IMAGES_SELECTED = Array(5).fill("").map((_, index) => "/img/lanes/icon-position-" + POSITIONS[index] + "-blue.png")
+
+const laneImgs = Array(5).fill(ref("")).map((_, index) => ref(LANE_IMAGES[index]))
+const laneFilter = ref(-1)
+
+function selectLaneFilter(index: number) {
+    // Unselect previous filter
+    if(laneFilter.value != -1) {
+        laneImgs[laneFilter.value].value = LANE_IMAGES[laneFilter.value]
+
+        // This is a deselection.
+        if(laneFilter.value == index) {
+            laneFilter.value = -1;
+            emit('filterChange', laneFilter.value)
+            return;
+        }
+    }
+
+    // Select new one
+    laneImgs[index].value = LANE_IMAGES_SELECTED[index]
+    laneFilter.value = index
+    emit('filterChange', laneFilter.value)
+}
+
+function handleMouseOut(laneImg: Ref<string>, index: number) {
+    if(laneImg.value == LANE_IMAGES_HOVER[index]) 
+        laneImg.value = LANE_IMAGES[index]
+}
+function handleHover(laneImg: Ref<string>, index: number) {
+    if(laneImg.value == LANE_IMAGES[index])
+        laneImg.value = LANE_IMAGES_HOVER[index]
+}
+</script>
+
+<template>
+<div style="width: fit-content; margin: auto;">
+    <img v-for="(laneImg, index) in laneImgs" 
+    class="lane-img" :src="laneImg.value" 
+    @mouseout="handleMouseOut(laneImg, index)"
+    @mouseover="handleHover(laneImg, index)"
+    @click="selectLaneFilter(index)"/>
+</div>
+</template>
+
+<style>
+.lane-img {
+    width: 64px;
+    margin-left: 5px;
+    margin-right: 5px;
+}
+.lane-img:hover {
+    cursor: pointer;
+}
+</style>