fix: remove JS hover on choices to fix double-tap issue on tablet

This commit is contained in:
hyoseung 2026-05-29 12:55:33 +09:00
parent e29226059c
commit 3dc9cdd7b2

View File

@ -108,12 +108,9 @@
v-for="(choice, i) in choices"
:key="i"
class="choice-row"
:class="{ hovered: hoveredChoice === i }"
@mouseenter="hoveredChoice = i"
@mouseleave="hoveredChoice = -1"
@click="selectChoice(i + 1)"
>
<span class="choice-cursor">{{ hoveredChoice === i ? '▶' : ' ' }}</span>
<span class="choice-cursor"></span>
<span class="choice-label">{{ choice.text }}</span>
</div>
</div>
@ -152,7 +149,6 @@ const showLog = ref(false)
const statusText = ref('')
const resetConfirm = ref(false)
const logRef = ref<HTMLElement>()
const hoveredChoice = ref(-1)
const mapData = ref<RpgResult['mapData'] | null>(null)
const HISTORY_KEY = `rpg_history_${username.value}`
@ -700,11 +696,12 @@ onMounted(resumeGame)
cursor: pointer;
transition: background 0.1s;
min-height: 44px;
-webkit-tap-highlight-color: transparent;
}
.choice-row:last-child { border-bottom: none; }
.choice-row.hovered,
.choice-row:hover,
.choice-row:active {
background: rgba(180,140,60,0.1);
}
@ -714,7 +711,13 @@ onMounted(resumeGame)
color: #d4a830;
width: 16px;
flex-shrink: 0;
transition: color 0.1s;
opacity: 0;
transition: opacity 0.1s;
}
.choice-row:hover .choice-cursor,
.choice-row:active .choice-cursor {
opacity: 1;
}
.choice-label {
@ -723,7 +726,8 @@ onMounted(resumeGame)
line-height: 1.4;
}
.choice-row.hovered .choice-label {
.choice-row:hover .choice-label,
.choice-row:active .choice-label {
color: #ffd870;
}