Added lanes (first try)

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>