63 lines
1.9 KiB
Vue
63 lines
1.9 KiB
Vue
<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>
|