hyoseung/stigmata-rpg
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
hyoseung 2026-05-29 12:55:33 +09:00
parent e29226059c
commit 3dc9cdd7b2
1 changed files with 12 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/views/GameView.vue
View File

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