77 lines
1.7 KiB
Vue
77 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"
|
|
:key="index"
|
|
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: 450px) {
|
|
.lane-img {
|
|
width: 48px;
|
|
}
|
|
}
|
|
</style>
|