From 657dc9cc1f04d94384302d0e47d747c71fabaf7b Mon Sep 17 00:00:00 2001
From: Grzegorz Kucmierz <gkucmierz@gmail.com>
Date: Sun, 8 Feb 2026 15:02:59 +0100
Subject: [PATCH] =?UTF-8?q?Mobile-first=20i=20pixel-perfect:=20wsp=C3=B3ln?=
 =?UTF-8?q?e=20--cell-size,=20grid=20dla=20podpowiedzi,=20dynamiczny=20roz?=
 =?UTF-8?q?miar=20kom=C3=B3rki=20z=20uwzgl=C4=99dnieniem=20padding=C3=B3w?=
 =?UTF-8?q?=20i=20szeroko=C5=9Bci=20opis=C3=B3w;=20poprawa=20touch/pointer?=
 =?UTF-8?q?=20i=20double-tap=20na=20mobile;=20wyr=C3=B3wnanie=20layoutu=20?=
 =?UTF-8?q?bez=20nachodzenia=20na=20desktopie?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                  | 18 +++++++++
 src/components/Cell.vue      | 21 +++++++++--
 src/components/GameBoard.vue | 71 +++++++++++++++++++++++++++++++-----
 src/components/Hints.vue     | 30 +++++++++------
 src/styles/main.css          | 29 +++++++++++++++
 5 files changed, 145 insertions(+), 24 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 2675efa..46ef4ee 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -111,4 +111,22 @@ h1 {
   justify-content: center;
   margin-top: 10px;
 }
+
+@media (max-width: 768px) {
+  .game-header {
+    margin-top: 20px;
+    margin-bottom: 20px;
+  }
+  h1 {
+    font-size: 2.4rem;
+    letter-spacing: 3px;
+  }
+}
+
+@media (max-width: 420px) {
+  h1 {
+    font-size: 2rem;
+    letter-spacing: 2px;
+  }
+}
 </style>
diff --git a/src/components/Cell.vue b/src/components/Cell.vue
index 02fbf1e..6fbdfca 100644
--- a/src/components/Cell.vue
+++ b/src/components/Cell.vue
@@ -21,10 +21,22 @@ const cellClass = computed(() => {
   }
 });
 
-const handleMouseDown = (e) => {
-    // 0 = left, 2 = right
+let lastTap = 0;
+
+const handlePointerDown = (e) => {
+  if (e.pointerType === 'mouse') {
     if (e.button === 0) emit('start-drag', props.r, props.c, false);
     if (e.button === 2) emit('start-drag', props.r, props.c, true);
+    return;
+  }
+  const now = Date.now();
+  const isDoubleTap = now - lastTap < 300;
+  lastTap = now;
+  if (isDoubleTap) {
+    emit('start-drag', props.r, props.c, true);
+  } else {
+    emit('start-drag', props.r, props.c, false);
+  }
 };
 </script>
 
@@ -32,7 +44,9 @@ const handleMouseDown = (e) => {
   <div 
     class="cell" 
     :class="cellClass"
-    @mousedown.prevent="handleMouseDown"
+    :data-r="props.r"
+    :data-c="props.c"
+    @pointerdown.prevent="handlePointerDown"
     @mouseenter="emit('enter-cell', props.r, props.c)"
     @contextmenu.prevent
   >
@@ -52,6 +66,7 @@ const handleMouseDown = (e) => {
   align-items: center;
   transition: background-color 0.1s ease, box-shadow 0.1s ease;
   user-select: none;
+  touch-action: none;
 }
 
 .cell:hover {
diff --git a/src/components/GameBoard.vue b/src/components/GameBoard.vue
index 0ac7ed1..2ce2b75 100644
--- a/src/components/GameBoard.vue
+++ b/src/components/GameBoard.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { onMounted, onUnmounted, computed } from 'vue';
+import { onMounted, onUnmounted, computed, ref, watch, nextTick } from 'vue';
 import { usePuzzleStore } from '@/stores/puzzle';
 import { useHints } from '@/composables/useHints';
 import { useNonogram } from '@/composables/useNonogram';
@@ -10,30 +10,81 @@ const store = usePuzzleStore();
 const { rowHints, colHints } = useHints(computed(() => store.solution));
 const { startDrag, onMouseEnter, stopDrag } = useNonogram();
 
-// Global mouseup to stop dragging even if mouse leaves grid
+const cellSize = ref(30);
+const rowHintsRef = ref(null);
+
+const getRowHintsWidth = () => {
+  const el = rowHintsRef.value?.$el;
+  if (!el) return 0;
+  return el.offsetWidth || 0;
+};
+
+const computeCellSize = () => {
+  const vw = Math.min(window.innerWidth, 900);
+  const rootStyles = getComputedStyle(document.documentElement);
+  const hintWidth = getRowHintsWidth();
+  const gapRaw = rootStyles.getPropertyValue('--gap-size') || '2px';
+  const gridPadRaw = rootStyles.getPropertyValue('--grid-padding') || '5px';
+  const gap = parseFloat(gapRaw);
+  const gridPad = parseFloat(gridPadRaw);
+  const bodyStyles = getComputedStyle(document.body);
+  const bodyPadding = parseFloat(bodyStyles.paddingLeft) + parseFloat(bodyStyles.paddingRight);
+  const availableForGrid = vw - bodyPadding - hintWidth;
+  const size = Math.floor((availableForGrid - gridPad * 2 - (store.size - 1) * gap) / store.size);
+  cellSize.value = Math.max(18, Math.min(36, size));
+};
+
 const handleGlobalMouseUp = () => {
-    stopDrag();
+  stopDrag();
+};
+
+const handleGlobalPointerUp = () => {
+  stopDrag();
+};
+
+const handlePointerMove = (e) => {
+  const el = document.elementFromPoint(e.clientX, e.clientY);
+  if (!el) return;
+  const r = el.getAttribute('data-r');
+  const c = el.getAttribute('data-c');
+  if (r != null && c != null) {
+    onMouseEnter(Number(r), Number(c));
+  }
 };
 
 onMounted(() => {
-    window.addEventListener('mouseup', handleGlobalMouseUp);
+  nextTick(() => {
+    computeCellSize();
+  });
+  window.addEventListener('resize', computeCellSize);
+  window.addEventListener('mouseup', handleGlobalMouseUp);
+  window.addEventListener('pointerup', handleGlobalPointerUp);
+  window.addEventListener('touchend', handleGlobalPointerUp, { passive: true });
 });
 
 onUnmounted(() => {
-    window.removeEventListener('mouseup', handleGlobalMouseUp);
+  window.removeEventListener('resize', computeCellSize);
+  window.removeEventListener('mouseup', handleGlobalMouseUp);
+  window.removeEventListener('pointerup', handleGlobalPointerUp);
+  window.removeEventListener('touchend', handleGlobalPointerUp);
+});
+
+watch(() => store.size, async () => {
+  await nextTick();
+  computeCellSize();
 });
 </script>
 
 <template>
   <div class="game-board-wrapper">
-    <div class="game-container">
+    <div class="game-container" :style="{ '--cell-size': `${cellSize}px` }">
       <div class="corner-spacer"></div>
       
       <!-- Column Hints -->
-      <Hints :hints="colHints" orientation="col" />
+      <Hints :hints="colHints" orientation="col" :size="store.size" />
       
       <!-- Row Hints -->
-      <Hints :hints="rowHints" orientation="row" />
+      <Hints ref="rowHintsRef" :hints="rowHints" orientation="row" :size="store.size" />
       
       <!-- Grid -->
       <div 
@@ -42,6 +93,7 @@ onUnmounted(() => {
           gridTemplateColumns: `repeat(${store.size}, var(--cell-size))`,
           gridTemplateRows: `repeat(${store.size}, var(--cell-size))`
         }"
+        @pointermove.prevent="handlePointerMove"
         @mouseleave="stopDrag"
       >
         <template v-for="(row, r) in store.playerGrid" :key="r">
@@ -84,14 +136,13 @@ onUnmounted(() => {
 }
 
 .corner-spacer {
-  width: 100px; /* Must match Row Hints width */
   height: auto; /* Adapts to Col Hints height */
 }
 
 .grid {
   display: grid;
   gap: var(--gap-size);
-  padding: 5px;
+  padding: var(--grid-padding);
   background: rgba(255, 255, 255, 0.05);
   border-radius: 4px;
 }
diff --git a/src/components/Hints.vue b/src/components/Hints.vue
index 94134b7..7a76823 100644
--- a/src/components/Hints.vue
+++ b/src/components/Hints.vue
@@ -8,12 +8,22 @@ defineProps({
     type: String,
     required: true,
     validator: (v) => ['row', 'col'].includes(v)
+  },
+  size: {
+    type: Number,
+    required: true
   }
 });
 </script>
 
 <template>
-  <div class="hints-container" :class="orientation">
+  <div 
+    class="hints-container" 
+    :class="orientation"
+    :style="orientation === 'col' 
+      ? { gridTemplateColumns: `repeat(${size}, var(--cell-size))` } 
+      : { gridTemplateRows: `repeat(${size}, var(--cell-size))` }"
+  >
     <div 
       v-for="(group, index) in hints" 
       :key="index" 
@@ -33,22 +43,21 @@ defineProps({
 
 <style scoped>
 .hints-container {
-  display: flex;
+  display: grid;
   gap: var(--gap-size);
 }
 
 .hints-container.col {
-  flex-direction: row;
-  margin-bottom: 5px;
+  padding-bottom: var(--grid-padding);
   align-items: flex-end;
-  padding: 0 5px; /* Match grid padding */
+  padding-left: var(--grid-padding);
+  padding-right: var(--grid-padding);
 }
 
 .hints-container.row {
-  flex-direction: column;
-  margin-right: 5px;
   align-items: flex-end;
-  padding: 5px 0; /* Match grid padding */
+  padding: var(--grid-padding) var(--grid-padding) var(--grid-padding) 0;
+  width: max-content;
 }
 
 .hint-group {
@@ -59,20 +68,19 @@ defineProps({
   border: 1px solid rgba(255, 255, 255, 0.1);
   border-radius: 4px;
   transition: all 0.3s ease;
+  width: 100%;
+  height: 100%;
 }
 
 .col .hint-group {
   flex-direction: column;
-  width: var(--cell-size);
   padding: 4px 2px;
   justify-content: flex-end;
 }
 
 .row .hint-group {
   flex-direction: row;
-  height: var(--cell-size);
   padding: 2px 8px;
-  width: 100px; /* Stała szerokość */
 }
 
 .hint-num {
diff --git a/src/styles/main.css b/src/styles/main.css
index 5970c44..43f206c 100644
--- a/src/styles/main.css
+++ b/src/styles/main.css
@@ -15,6 +15,8 @@
   /* Rozmiary */
   --cell-size: 30px;
   --gap-size: 2px;
+  --hint-row-width: 100px;
+  --grid-padding: 5px;
 }
 
 * {
@@ -119,3 +121,30 @@ button.btn-neon.secondary {
 .fade-leave-to {
   opacity: 0;
 }
+
+@media (max-width: 768px) {
+  :root {
+    --gap-size: 1px;
+    --hint-row-width: 72px;
+  }
+  body {
+    padding: 12px;
+  }
+  button.btn-neon {
+    padding: 10px 18px;
+    font-size: 0.9rem;
+  }
+}
+
+@media (max-width: 420px) {
+  :root {
+    --hint-row-width: 60px;
+  }
+  body {
+    padding: 8px;
+  }
+  button.btn-neon {
+    padding: 9px 16px;
+    font-size: 0.85rem;
+  }
+}