From 3dc9cdd7b25eaff7831c90d3d59079a64618caa8 Mon Sep 17 00:00:00 2001
From: hyoseung <hyoseung930@gmail.com>
Date: Fri, 29 May 2026 12:55:33 +0900
Subject: [PATCH] fix: remove JS hover on choices to fix double-tap issue on
 tablet

---
 src/views/GameView.vue | 20 ++++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

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)"
           >
-            <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;
 }