fix: remove JS hover on choices to fix double-tap issue on tablet
This commit is contained in:
parent
e29226059c
commit
3dc9cdd7b2
@ -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;
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user