From ad4ea9617c697d32b5b6c1fcb8a0447bb69592c7 Mon Sep 17 00:00:00 2001
From: Grzegorz Kucmierz <gkucmierz@gmail.com>
Date: Sun, 8 Feb 2026 18:18:07 +0100
Subject: [PATCH] Grid: highlight hints on hover

---
 src/components/Cell.vue      |  2 +-
 src/components/GameBoard.vue | 25 +++++++++++++++++++++----
 src/components/Hints.vue     | 12 +++++++++++-
 3 files changed, 33 insertions(+), 6 deletions(-)

diff --git a/src/components/Cell.vue b/src/components/Cell.vue
index ced1d25..5f39c8b 100644
--- a/src/components/Cell.vue
+++ b/src/components/Cell.vue
@@ -76,7 +76,7 @@ const handlePointerCancel = (e) => {
     @pointerup="handlePointerUp"
     @pointercancel="handlePointerCancel"
     @pointerleave="handlePointerCancel"
-    @mouseenter="emit('enter-cell', props.r, props.c)"
+    @mouseenter="emit('enter-cell', props.r, props.c, $event)"
     @contextmenu.prevent
   >
     <span v-if="props.state === 2" class="cross-mark">×</span>
diff --git a/src/components/GameBoard.vue b/src/components/GameBoard.vue
index 2ce2b75..f43eef3 100644
--- a/src/components/GameBoard.vue
+++ b/src/components/GameBoard.vue
@@ -12,6 +12,9 @@ const { startDrag, onMouseEnter, stopDrag } = useNonogram();
 
 const cellSize = ref(30);
 const rowHintsRef = ref(null);
+const activeRow = ref(null);
+const activeCol = ref(null);
+const isFinePointer = ref(false);
 
 const getRowHintsWidth = () => {
   const el = rowHintsRef.value?.$el;
@@ -52,10 +55,24 @@ const handlePointerMove = (e) => {
   }
 };
 
+const handleCellEnter = (r, c) => {
+  onMouseEnter(r, c);
+  if (!isFinePointer.value) return;
+  activeRow.value = r;
+  activeCol.value = c;
+};
+
+const handleGridLeave = () => {
+  stopDrag();
+  activeRow.value = null;
+  activeCol.value = null;
+};
+
 onMounted(() => {
   nextTick(() => {
     computeCellSize();
   });
+  isFinePointer.value = window.matchMedia('(pointer: fine)').matches;
   window.addEventListener('resize', computeCellSize);
   window.addEventListener('mouseup', handleGlobalMouseUp);
   window.addEventListener('pointerup', handleGlobalPointerUp);
@@ -81,10 +98,10 @@ watch(() => store.size, async () => {
       <div class="corner-spacer"></div>
       
       <!-- Column Hints -->
-      <Hints :hints="colHints" orientation="col" :size="store.size" />
+      <Hints :hints="colHints" orientation="col" :size="store.size" :activeIndex="activeCol" />
       
       <!-- Row Hints -->
-      <Hints ref="rowHintsRef" :hints="rowHints" orientation="row" :size="store.size" />
+      <Hints ref="rowHintsRef" :hints="rowHints" orientation="row" :size="store.size" :activeIndex="activeRow" />
       
       <!-- Grid -->
       <div 
@@ -94,7 +111,7 @@ watch(() => store.size, async () => {
           gridTemplateRows: `repeat(${store.size}, var(--cell-size))`
         }"
         @pointermove.prevent="handlePointerMove"
-        @mouseleave="stopDrag"
+        @mouseleave="handleGridLeave"
       >
         <template v-for="(row, r) in store.playerGrid" :key="r">
           <Cell 
@@ -108,7 +125,7 @@ watch(() => store.size, async () => {
                 'guide-bottom': (r + 1) % 5 === 0 && r !== store.size - 1
             }"
             @start-drag="startDrag"
-            @enter-cell="onMouseEnter"
+            @enter-cell="handleCellEnter"
           />
         </template>
       </div>
diff --git a/src/components/Hints.vue b/src/components/Hints.vue
index 7a76823..f170b24 100644
--- a/src/components/Hints.vue
+++ b/src/components/Hints.vue
@@ -12,6 +12,10 @@ defineProps({
   size: {
     type: Number,
     required: true
+  },
+  activeIndex: {
+    type: Number,
+    default: null
   }
 });
 </script>
@@ -28,7 +32,7 @@ defineProps({
       v-for="(group, index) in hints" 
       :key="index" 
       class="hint-group"
-      :class="{ 'hint-alt': index % 2 !== 0 }"
+      :class="{ 'hint-alt': index % 2 !== 0, 'is-active': index === activeIndex }"
     >
       <span 
         v-for="(num, idx) in group" 
@@ -100,4 +104,10 @@ defineProps({
     background: rgba(255, 255, 255, 0.1);
     border-color: var(--accent-cyan);
 }
+
+.hint-group.is-active {
+    background: rgba(79, 172, 254, 0.2);
+    border-color: rgba(79, 172, 254, 0.8);
+    box-shadow: 0 0 12px rgba(79, 172, 254, 0.35);
+}
 </style>