1.9.1

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "vue-nonograms-solid",
-  "version": "1.8.4",
+  "version": "1.9.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "vue-nonograms-solid",
-      "version": "1.8.4",
+      "version": "1.9.1",
       "dependencies": {
         "fireworks-js": "^2.10.8",
         "flag-icons": "^7.5.0",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-nonograms-solid",
-  "version": "1.8.4",
+  "version": "1.9.1",
   "type": "module",
   "scripts": {
     "dev": "vite",

src/App.vue

@@ -186,7 +186,7 @@ onUnmounted(() => {
 .game-container {
   display: flex;
   flex-direction: column;
-  align-items: center;
+  align-items: stretch; /* was center */
   gap: 20px;
   width: 100%;
   padding-bottom: 50px;
@@ -202,7 +202,7 @@ onUnmounted(() => {
   align-items: center;
   width: 90%;
   max-width: 600px;
-  margin-bottom: 20px;
+  margin: 0 auto 20px auto; /* Center it manually */
   box-shadow: var(--banner-shadow);
 }
 
@@ -227,17 +227,24 @@ onUnmounted(() => {
 .game-layout {
   display: flex;
   flex-direction: column;
-  align-items: center;
+  align-items: stretch;
   gap: 20px;
   width: 100%;
-  max-width: 1200px;
   padding: 0 20px;
 }
 
+/* Center children (except board section which handles itself) */
+.game-layout > *:not(.board-section) {
+    margin-left: auto;
+    margin-right: auto;
+    max-width: 1200px; /* Keep constraint for panels */
+    width: 100%;
+}
+
 .board-section {
-  display: flex;
-  justify-content: center;
+  display: block;
   width: 100%;
+  overflow-x: visible;
 }
 
 .fade-enter-active,

src/components/GameBoard.vue

@@ -118,6 +118,8 @@ const computeCellSize = () => {
   const gap = parseFloat(gapRaw);
   const gridPad = parseFloat(gridPadRaw);
 
+  const isDesktop = window.matchMedia('(min-width: 769px)').matches;
+
   let containerWidth;
   if (scrollWrapper.value) {
     containerWidth = scrollWrapper.value.clientWidth;
@@ -131,8 +133,15 @@ const computeCellSize = () => {
   const availableForGrid = Math.max(0, containerWidth - hintWidth);
   
   const size = Math.floor((availableForGrid - gridPad * 2 - (store.size - 1) * gap) / store.size);
-  // Keep min 18, max 36
-  cellSize.value = Math.max(18, Math.min(36, size));
+  
+  if (isDesktop) {
+      // Desktop: Allow overflow, use comfortable size
+      cellSize.value = 30;
+  } else {
+      // Mobile: Fit to screen
+      // Keep min 18, max 36
+      cellSize.value = Math.max(18, Math.min(36, size));
+  }
 };
 
 const handleGlobalMouseUp = () => {
@@ -258,8 +267,15 @@ watch(() => store.size, async () => {
 /* Desktop: Remove scroll behavior to ensure full grid visibility */
 @media (min-width: 769px) {
   .game-board-wrapper {
-    overflow-x: auto; /* Allow scrolling if grid is too large (e.g. 80x80) */
-    align-items: center; /* Center the grid on desktop */
+    overflow: visible;
+    width: max-content;
+    min-width: 100%;
+    margin: 0 auto; /* Center the wrapper safely */
+    align-items: flex-start; /* Prevent cropping when centered */
+  }
+  
+  .game-container {
+      /* margin: 0 auto; - wrapper handles centering now */
   }
 }
 

src/composables/useNonogram.js

@@ -44,6 +44,7 @@ export function useNonogram() {
   };
 
   const stopDrag = () => {
+    store.endInteraction();
     isDragging.value = false;
     dragMode.value = null;
   };

src/composables/useSolver.js

@@ -9,8 +9,8 @@ export function useSolver() {
     const isPlaying = ref(false);
     const isProcessing = ref(false);
     const speedIndex = ref(0);
-    const speeds = [1000, 500, 250, 125];
-    const speedLabels = ['x1', 'x2', 'x3', 'x4'];
+    const speeds = [1000, 500, 250, 125, 62];
+    const speedLabels = ['x1', 'x2', 'x4', 'x8', 'x16'];
     const statusText = ref(t('guide.waiting'));
     
     let intervalId = null;

src/stores/puzzle.js

@@ -75,6 +75,7 @@ export const usePuzzleStore = defineStore('puzzle', () => {
   
   // History for undo
   const history = ref([]);
+  const currentTransaction = ref(null);
   
   // Progress State
   const totalCellsToFill = computed(() => {
@@ -150,18 +151,39 @@ export const usePuzzleStore = defineStore('puzzle', () => {
     playerGrid.value = Array(size.value).fill().map(() => Array(size.value).fill(0));
     moves.value = 0;
     history.value = [];
+    currentTransaction.value = null;
   }
   
-  function pushHistory() {
-      const gridCopy = playerGrid.value.map(row => [...row]);
-      history.value.push(gridCopy);
-      if (history.value.length > 50) history.value.shift();
+  function startInteraction() {
+      currentTransaction.value = [];
+  }
+
+  function endInteraction() {
+      if (currentTransaction.value && currentTransaction.value.length > 0) {
+          history.value.push(currentTransaction.value);
+          if (history.value.length > 50) history.value.shift();
+          saveState();
+      }
+      currentTransaction.value = null;
   }
 
   function undo() {
       if (history.value.length === 0 || isGameWon.value) return;
-      const previousState = history.value.pop();
-      playerGrid.value = previousState;
+      
+      const transaction = history.value.pop();
+      
+      // Handle legacy history (full grid snapshot)
+      if (!Array.isArray(transaction) || (transaction.length > 0 && Array.isArray(transaction[0]))) {
+          playerGrid.value = transaction;
+      } else {
+          // Handle new history (list of changes)
+          // Revert changes in reverse order
+          for (let i = transaction.length - 1; i >= 0; i--) {
+              const { r, c, oldVal } = transaction[i];
+              playerGrid.value[r][c] = oldVal;
+          }
+      }
+      
       moves.value++; 
       saveState();
   }
@@ -169,8 +191,6 @@ export const usePuzzleStore = defineStore('puzzle', () => {
   function toggleCell(r, c, isRightClick = false) {
     if (isGameWon.value) return;
     
-    pushHistory();
-
     const currentState = playerGrid.value[r][c];
     let newState;
     
@@ -182,20 +202,48 @@ export const usePuzzleStore = defineStore('puzzle', () => {
       newState = currentState === 1 ? 0 : 1;
     }
     
-    playerGrid.value[r][c] = newState; // This triggers reactivity
+    if (currentState === newState) return;
+
+    // Apply change
+    playerGrid.value[r][c] = newState; 
+    
+    // Record history
+    const change = { r, c, oldVal: currentState, newVal: newState };
+    if (currentTransaction.value) {
+        currentTransaction.value.push(change);
+    } else {
+        // Atomic change if no interaction started
+        history.value.push([change]);
+        if (history.value.length > 50) history.value.shift();
+        saveState();
+    }
+
     moves.value++;
     checkWin();
-    saveState();
+    // saveState(); // Moved to endInteraction or atomic block
   }
   
   function setCell(r, c, state) {
      if (isGameWon.value) return;
-     if (playerGrid.value[r][c] !== state) {
-         pushHistory();
+     const currentState = playerGrid.value[r][c];
+     
+     if (currentState !== state) {
+         // Apply change
          playerGrid.value[r][c] = state;
+         
+         // Record history
+         const change = { r, c, oldVal: currentState, newVal: state };
+         if (currentTransaction.value) {
+             currentTransaction.value.push(change);
+         } else {
+             history.value.push([change]);
+             if (history.value.length > 50) history.value.shift();
+             saveState();
+         }
+         
          moves.value++;
          checkWin();
-         saveState();
+         // saveState(); // Moved to endInteraction or atomic block
      }
   }
 
@@ -343,7 +391,9 @@ export const usePuzzleStore = defineStore('puzzle', () => {
     hasUsedGuide,
     guideUsageCount,
     currentDensity,
-    markGuideUsed
+    markGuideUsed,
+    startInteraction,
+    endInteraction
   };
 
 });