68 lines
1.7 KiB
Vue
68 lines
1.7 KiB
Vue
<script setup lang="ts">
|
|
import { LANE_IMAGES, LANE_IMAGES_HOVER, LANE_IMAGES_SELECTED, POSITIONS_STR } from '~/utils/cdragon';
|
|
|
|
const emit = defineEmits<{
|
|
filterChange: [value: number]
|
|
}>()
|
|
|
|
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;">
|
|
<NuxtImg v-for="(laneImg, index) in laneImgs"
|
|
format="webp"
|
|
:alt="POSITIONS_STR[index]"
|
|
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;
|
|
}
|
|
|
|
@media only screen and (max-width: 400px) {
|
|
.lane-img {
|
|
width: 48px;
|
|
}
|
|
}
|
|
</style>
|