diff --git a/src/views/GameView.vue b/src/views/GameView.vue
index 43cc341..a5af62b 100644
--- a/src/views/GameView.vue
+++ b/src/views/GameView.vue
@@ -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)"
>
- {{ hoveredChoice === i ? '▶' : ' ' }}
+ ▶
{{ choice.text }}
@@ -152,7 +149,6 @@ const showLog = ref(false)
const statusText = ref('')
const resetConfirm = ref(false)
const logRef = ref()
-const hoveredChoice = ref(-1)
const mapData = ref(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;
}