1.15.4

.env.example

@@ -0,0 +1,2 @@
+# Optional: Set a custom container name to run multiple instances
+# CONTAINER_NAME=nonograms-dev

.gitignore

@@ -14,9 +14,3 @@ dist-ssr/
 *.njsproj
 *.sln
 *.sw?
-
-# Security keys and certificates
-*.keystore
-*.jks
-*.p12
-*.mobileprovision

android/.gitignore

@@ -54,8 +54,9 @@ captures/
 
 # Keystore files
 # Uncomment the following lines if you do not want to check your keystore files in.
-#*.jks
-#*.keystore
+*.jks
+*.keystore
+keystore.properties
 
 # External native build folder generated in Android Studio 2.2 and later
 .externalNativeBuild

android/app/build.gradle

@@ -3,12 +3,27 @@ apply plugin: 'com.android.application'
 android {
     namespace = "pl.nonograms.app"
     compileSdk = rootProject.ext.compileSdkVersion
+
+    signingConfigs {
+        release {
+            def keystorePropertiesFile = rootProject.file("keystore.properties")
+            if (keystorePropertiesFile.exists()) {
+                def keystoreProperties = new Properties()
+                keystoreProperties.load(new FileInputStream(keystorePropertiesFile))
+                storeFile = file(keystoreProperties['storeFile'])
+                storePassword = keystoreProperties['storePassword']
+                keyAlias = keystoreProperties['keyAlias']
+                keyPassword = keystoreProperties['keyPassword']
+            }
+        }
+    }
+
     defaultConfig {
         applicationId "pl.nonograms.app"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 1
-        versionName "1.0"
+        versionCode 1144
+        versionName "1.14.4"
         testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
         aaptOptions {
              // Files and dirs to omit from the packaged assets dir, modified to accommodate modern web apps.
@@ -18,8 +33,9 @@ android {
     }
     buildTypes {
         release {
+            signingConfig signingConfigs.release
             minifyEnabled false
-            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
+            proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
         }
     }
 }

android/app/src/main/AndroidManifest.xml

@@ -30,6 +30,7 @@
     </application>
 
     <!-- Permissions -->
-
     <uses-permission android:name="android.permission.INTERNET" />
+    <uses-permission android:name="android.permission.CAMERA" />
+    <uses-feature android:name="android.hardware.camera" android:required="false" />
 </manifest>

android/build.gradle

@@ -7,7 +7,7 @@ buildscript {
         mavenCentral()
     }
     dependencies {
-        classpath 'com.android.tools.build:gradle:8.13.0'
+        classpath 'com.android.tools.build:gradle:9.0.1'
         classpath 'com.google.gms:google-services:4.4.4'
 
         // NOTE: Do not place your application dependencies here; they belong

android/gradle.properties

@@ -20,3 +20,13 @@ org.gradle.jvmargs=-Xmx1536m
 # Android operating system, and which are packaged with your app's APK
 # https://developer.android.com/topic/libraries/support-library/androidx-rn
 android.useAndroidX=true
+android.defaults.buildfeatures.resvalues=true
+android.sdk.defaultTargetSdkToCompileSdkIfUnset=false
+android.enableAppCompileTimeRClass=false
+android.usesSdkInManifest.disallowed=false
+android.uniquePackageNames=false
+android.dependency.useConstraints=true
+android.r8.strictFullModeForKeepRules=false
+android.r8.optimizedResourceShrinking=false
+android.builtInKotlin=false
+android.newDsl=false

android/gradle/wrapper/gradle-wrapper.properties

@@ -1,6 +1,6 @@
 distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-8.14.3-all.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-9.2.1-all.zip
 networkTimeout=10000
 validateDistributionUrl=true
 zipStoreBase=GRADLE_USER_HOME

dev-dist/sw.js

@@ -82,7 +82,7 @@ define(['./workbox-7a5e81cd'], (function (workbox) { 'use strict';
    */
   workbox.precacheAndRoute([{
     "url": "index.html",
-    "revision": "0.kkc80cp3p5o"
+    "revision": "0.b79gmi6tt88"
   }], {});
   workbox.cleanupOutdatedCaches();
   workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("index.html"), {

docker-compose.yml

@@ -1,14 +1,17 @@
 version: '3.8'
 
 services:
-  app:
-    container_name: nonograms-app
+  nonograms:
+    container_name: ${CONTAINER_NAME:-nonograms}
     build:
       context: .
       dockerfile: Dockerfile
-    ports:
-      - "8081:80"
+    expose:
+      - "80"
     restart: unless-stopped
-    # Uncomment the following lines if you want to mount the configuration locally for development/testing
-    # volumes:
-    #   - ./nginx.conf:/etc/nginx/conf.d/default.conf:ro
+    networks:
+      - npm_public
+
+networks:
+  npm_public:
+    external: true

ios/App/App/Info.plist

@@ -24,6 +24,8 @@
 	<string>$(CURRENT_PROJECT_VERSION)</string>
 	<key>LSRequiresIPhoneOS</key>
 	<true/>
+	<key>NSCameraUsageDescription</key>
+	<string>This app requires camera access to import nonograms from photos.</string>
 	<key>UILaunchStoryboardName</key>
 	<string>LaunchScreen</string>
 	<key>UIMainStoryboardFile</key>

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "vue-nonograms-solid",
-  "version": "1.14.3",
+  "version": "1.15.4",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "vue-nonograms-solid",
-      "version": "1.14.3",
+      "version": "1.15.4",
       "dependencies": {
         "@capacitor/android": "^8.1.0",
         "@capacitor/cli": "^8.1.0",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-nonograms-solid",
-  "version": "1.14.3",
+  "version": "1.15.4",
   "homepage": "https://nonograms.7u.pl/",
   "type": "module",
   "scripts": {

src/components/CustomGameModal.vue

@@ -1,9 +1,10 @@
 <script setup>
-import { ref, computed, onMounted, onUnmounted, watch, nextTick } from 'vue';
+import { ref, computed, onMounted, watch } from 'vue';
 import { usePuzzleStore } from '@/stores/puzzle';
 import { useI18n } from '@/composables/useI18n';
 import { calculateDifficulty } from '@/utils/puzzleUtils';
 import { HelpCircle } from 'lucide-vue-next';
+import DifficultyMap from './DifficultyMap.vue';
 
 const emit = defineEmits(['close', 'open-simulation']);
 const store = usePuzzleStore();
@@ -12,161 +13,11 @@ const { t } = useI18n();
 const customSize = ref(10);
 const fillRate = ref(50);
 const errorMsg = ref('');
-const difficultyCanvas = ref(null);
-const isDragging = ref(false);
-const cachedBackground = ref(null);
 
-const drawMap = () => {
-  const canvas = difficultyCanvas.value;
-  if (!canvas) return;
-  const ctx = canvas.getContext('2d');
-  const width = canvas.width;
-  const height = canvas.height;
-
-  // Clear
-  ctx.clearRect(0, 0, width, height);
-
-  // Use cached background if available
-  if (cachedBackground.value) {
-      ctx.putImageData(cachedBackground.value, 0, 0);
-  } else {
-      // Draw Gradient Background (Heavy calculation)
-      const imgData = ctx.createImageData(width, height);
-      const data = imgData.data;
-
-      // Ranges:
-      // X: Fill Rate 10% -> 90%
-      // Y: Size 5 -> 80
-      
-      for (let y = 0; y < height; y++) {
-        for (let x = 0; x < width; x++) {
-          const normalizedX = x / width;
-          const normalizedY = 1 - (y / height); // 0 at bottom, 1 at top
-          
-          const fRate = 0.1 + normalizedX * 0.8; // 0.1 to 0.9
-          const sSize = 5 + normalizedY * 75;    // 5 to 80
-          
-          const { value } = calculateDifficulty(fRate, sSize);
-          
-          // Color Mapping
-          const hue = 120 * (1 - value / 100);
-          const [r, g, b] = hslToRgb(hue / 360, 1, 0.5);
-          
-          const index = (y * width + x) * 4;
-          data[index] = r;
-          data[index + 1] = g;
-          data[index + 2] = b;
-          data[index + 3] = 255; // Alpha
-        }
-      }
-      ctx.putImageData(imgData, 0, 0);
-      cachedBackground.value = imgData;
-  }
-
-  // Draw current position
-  // Map current fillRate/size to x,y
-  // Fill: 10..90. Size: 5..80.
-  const currentFill = Math.max(10, Math.min(90, fillRate.value));
-  const currentSize = Math.max(5, Math.min(80, customSize.value));
-  
-  const posX = ((currentFill - 10) / 80) * width;
-  const posY = (1 - (currentSize - 5) / 75) * height;
-
-  // Draw Crosshair/Circle
-  ctx.beginPath();
-  ctx.arc(posX, posY, 6, 0, Math.PI * 2);
-  ctx.fillStyle = '#fff';
-  ctx.fill();
-  ctx.lineWidth = 2;
-  ctx.strokeStyle = '#000';
-  ctx.stroke();
-};
-
-const hslToRgb = (h, s, l) => {
-    let r, g, b;
-    if (s === 0) {
-        r = g = b = l; // achromatic
-    } else {
-        const hue2rgb = (p, q, t) => {
-            if (t < 0) t += 1;
-            if (t > 1) t -= 1;
-            if (t < 1 / 6) return p + (q - p) * 6 * t;
-            if (t < 1 / 2) return q;
-            if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
-            return p;
-        };
-        const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
-        const p = 2 * l - q;
-        r = hue2rgb(p, q, h + 1 / 3);
-        g = hue2rgb(p, q, h);
-        b = hue2rgb(p, q, h - 1 / 3);
-    }
-    return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
-};
-
-const updateFromEvent = (e) => {
-    const canvas = difficultyCanvas.value;
-    if (!canvas) return;
-    const rect = canvas.getBoundingClientRect();
-    
-    // Handle Touch or Mouse
-    const clientX = e.touches ? e.touches[0].clientX : e.clientX;
-    const clientY = e.touches ? e.touches[0].clientY : e.clientY;
-    
-    let x = clientX - rect.left;
-    let y = clientY - rect.top;
-    
-    // Clamp
-    x = Math.max(0, Math.min(rect.width, x));
-    y = Math.max(0, Math.min(rect.height, y));
-    
-    // Reverse Map
-    // x / width -> fillRate (10..90)
-    // 1 - y / height -> size (5..80)
-    
-    const normalizedX = x / rect.width;
-    const normalizedY = 1 - (y / rect.height);
-    
-    const newFill = 10 + normalizedX * 80;
-    const newSize = 5 + normalizedY * 75;
-    
-    fillRate.value = Math.round(newFill);
-    customSize.value = Math.round(newSize);
-};
-
-const startDrag = (e) => {
-    isDragging.value = true;
-    updateFromEvent(e);
-    // Add global listeners for mouse to handle dragging outside canvas
-    window.addEventListener('mousemove', onDrag);
-    window.addEventListener('mouseup', stopDrag);
-};
-
-const onDrag = (e) => {
-    if (!isDragging.value) return;
-    updateFromEvent(e);
-};
-
-const stopDrag = () => {
-    isDragging.value = false;
-    window.removeEventListener('mousemove', onDrag);
-    window.removeEventListener('mouseup', stopDrag);
-};
-
-onUnmounted(() => {
-    window.removeEventListener('mousemove', onDrag);
-    window.removeEventListener('mouseup', stopDrag);
-});
-
-const showAdvanced = ref(false);
+const showAdvanced = ref(true);
 
 const toggleAdvanced = () => {
     showAdvanced.value = !showAdvanced.value;
-    if (showAdvanced.value) {
-        // Reset cache when opening to ensure size is correct if canvas resized
-        cachedBackground.value = null; 
-        nextTick(drawMap);
-    }
 };
 
 onMounted(() => {
@@ -179,14 +30,6 @@ onMounted(() => {
   if (savedFillRate && !isNaN(savedFillRate)) {
     fillRate.value = Math.max(10, Math.min(90, Number(savedFillRate)));
   }
-  
-  // Don't draw map initially if hidden
-});
-
-watch([customSize, fillRate], () => {
-    if (showAdvanced.value) {
-        drawMap();
-    }
 });
 
 watch(customSize, (newVal) => {
@@ -245,7 +88,7 @@ const confirm = () => {
               <div class="range-value">{{ customSize }}</div>
               <input 
                 type="range" 
-                v-model="customSize" 
+                v-model.number="customSize" 
                 min="5" 
                 max="80"
                 step="1"
@@ -264,7 +107,7 @@ const confirm = () => {
               <div class="range-value">{{ fillRate }}%</div>
               <input 
                 type="range" 
-                v-model="fillRate" 
+                v-model.number="fillRate" 
                 min="10" 
                 max="90"
                 step="1"
@@ -278,15 +121,14 @@ const confirm = () => {
         </div>
 
         <div class="map-section" v-if="showAdvanced">
-            <canvas 
-                ref="difficultyCanvas" 
-                width="400" 
-                height="400"
-                @mousedown="startDrag"
-                @touchstart.prevent="startDrag"
-                @touchmove.prevent="onDrag"
-                @touchend="stopDrag"
-            ></canvas>
+            <DifficultyMap 
+                v-model:size="customSize"
+                v-model:density="fillRate"
+                :interactive="true"
+                :width="400"
+                :height="400"
+                class="difficulty-map-canvas"
+            />
         </div>
       </div>
 

src/components/DifficultyMap.vue

@@ -0,0 +1,293 @@
+<script setup>
+import { ref, onMounted, onUnmounted, watch, nextTick } from 'vue';
+import { calculateDifficulty } from '@/utils/puzzleUtils';
+import { useI18n } from '@/composables/useI18n';
+
+const props = defineProps({
+  size: {
+    type: Number,
+    required: true
+  },
+  density: {
+    type: Number,
+    required: true
+  },
+  actualDifficulty: {
+    type: Number,
+    default: null
+  },
+  interactive: {
+    type: Boolean,
+    default: false
+  },
+  width: {
+    type: Number,
+    default: 300
+  },
+  height: {
+    type: Number,
+    default: 200
+  }
+});
+
+const emit = defineEmits(['update:size', 'update:density']);
+const { t } = useI18n();
+
+const canvasRef = ref(null);
+let cachedBackground = null;
+const isDragging = ref(false);
+
+// Constants for ranges
+const MIN_SIZE = 5;
+const MAX_SIZE = 80;
+const MIN_DENSITY = 10;
+const MAX_DENSITY = 90;
+
+const hslToRgb = (h, s, l) => {
+    let r, g, b;
+    if (s === 0) {
+        r = g = b = l; // achromatic
+    } else {
+        const hue2rgb = (p, q, t) => {
+            if (t < 0) t += 1;
+            if (t > 1) t -= 1;
+            if (t < 1 / 6) return p + (q - p) * 6 * t;
+            if (t < 1 / 2) return q;
+            if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
+            return p;
+        };
+        const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+        const p = 2 * l - q;
+        r = hue2rgb(p, q, h + 1 / 3);
+        g = hue2rgb(p, q, h);
+        b = hue2rgb(p, q, h - 1 / 3);
+    }
+    return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
+};
+
+const drawMap = () => {
+  const canvas = canvasRef.value;
+  if (!canvas) return;
+  
+  try {
+    const ctx = canvas.getContext('2d');
+    const width = canvas.width;
+    const height = canvas.height;
+
+    // Clear
+    ctx.clearRect(0, 0, width, height);
+
+    // Use cached background if available
+    if (cachedBackground) {
+        ctx.drawImage(cachedBackground, 0, 0, width, height);
+    } else {
+        // Draw Gradient Background (Optimized)
+        // Use a smaller buffer to reduce calculations
+        const bufferWidth = 40;
+        const bufferHeight = 40;
+        
+        const bufferCanvas = document.createElement('canvas');
+        bufferCanvas.width = bufferWidth;
+        bufferCanvas.height = bufferHeight;
+        const bufferCtx = bufferCanvas.getContext('2d');
+        
+        const imgData = bufferCtx.createImageData(bufferWidth, bufferHeight);
+        const data = imgData.data;
+        
+        for (let y = 0; y < bufferHeight; y++) {
+          for (let x = 0; x < bufferWidth; x++) {
+            const normalizedX = x / bufferWidth;
+            const normalizedY = 1 - (y / bufferHeight); // 0 at bottom, 1 at top
+            
+            const fRate = (MIN_DENSITY + normalizedX * (MAX_DENSITY - MIN_DENSITY)) / 100; // 0.1 to 0.9
+            const sSize = MIN_SIZE + normalizedY * (MAX_SIZE - MIN_SIZE);    // 5 to 80
+            
+            const { value } = calculateDifficulty(fRate, sSize);
+            
+            // Color Mapping
+            const hue = 120 * (1 - value / 100);
+            const [r, g, b] = hslToRgb(hue / 360, 1, 0.5);
+            
+            const index = (y * bufferWidth + x) * 4;
+            data[index] = r;
+            data[index + 1] = g;
+            data[index + 2] = b;
+            data[index + 3] = 255; // Alpha
+          }
+        }
+        bufferCtx.putImageData(imgData, 0, 0);
+        
+        // Draw scaled up
+        ctx.imageSmoothingEnabled = true;
+        ctx.imageSmoothingQuality = 'high';
+        ctx.drawImage(bufferCanvas, 0, 0, width, height);
+        
+        cachedBackground = bufferCanvas;
+    }
+
+    // Draw current position
+    // Clamp values
+    const currentFill = Math.max(MIN_DENSITY, Math.min(MAX_DENSITY, props.density));
+    const currentSize = Math.max(MIN_SIZE, Math.min(MAX_SIZE, props.size));
+    
+    const posX = ((currentFill - MIN_DENSITY) / (MAX_DENSITY - MIN_DENSITY)) * width;
+    const posY = (1 - (currentSize - MIN_SIZE) / (MAX_SIZE - MIN_SIZE)) * height;
+
+    // Draw Point
+    ctx.beginPath();
+    ctx.arc(posX, posY, 6, 0, Math.PI * 2);
+    
+    // Use actual difficulty color if provided, otherwise white
+    if (props.actualDifficulty !== null) {
+        const hue = 120 * (1 - Math.max(0, Math.min(100, props.actualDifficulty)) / 100);
+        const [r, g, b] = hslToRgb(hue / 360, 1, 0.5);
+        ctx.fillStyle = `rgb(${r},${g},${b})`;
+        ctx.lineWidth = 3; // Thicker border for visibility
+        ctx.strokeStyle = '#fff'; // White border to make it pop
+    } else {
+        ctx.fillStyle = '#fff';
+        ctx.lineWidth = 2;
+        ctx.strokeStyle = '#000';
+    }
+    
+    ctx.fill();
+    ctx.stroke();
+  } catch (e) {
+    console.error("Error drawing difficulty map:", e);
+  }
+};
+
+const updateFromEvent = (e) => {
+    if (!props.interactive) return;
+
+    const canvas = canvasRef.value;
+    if (!canvas) return;
+    const rect = canvas.getBoundingClientRect();
+    
+    // Handle Touch or Mouse
+    const clientX = e.touches ? e.touches[0].clientX : e.clientX;
+    const clientY = e.touches ? e.touches[0].clientY : e.clientY;
+    
+    let x = clientX - rect.left;
+    let y = clientY - rect.top;
+    
+    // Clamp
+    x = Math.max(0, Math.min(rect.width, x));
+    y = Math.max(0, Math.min(rect.height, y));
+    
+    const normalizedX = x / rect.width;
+    const normalizedY = 1 - (y / rect.height);
+    
+    const newFill = MIN_DENSITY + normalizedX * (MAX_DENSITY - MIN_DENSITY);
+    const newSize = MIN_SIZE + normalizedY * (MAX_SIZE - MIN_SIZE);
+    
+    emit('update:density', Math.round(newFill));
+    emit('update:size', Math.round(newSize));
+};
+
+const startDrag = (e) => {
+    if (!props.interactive) return;
+    isDragging.value = true;
+    updateFromEvent(e);
+    window.addEventListener('mousemove', onDrag);
+    window.addEventListener('touchmove', onDrag, { passive: false });
+    window.addEventListener('mouseup', stopDrag);
+    window.addEventListener('touchend', stopDrag);
+};
+
+const onDrag = (e) => {
+    if (!isDragging.value) return;
+    if (e.cancelable) e.preventDefault(); // Prevent scrolling on touch
+    updateFromEvent(e);
+};
+
+const stopDrag = () => {
+    isDragging.value = false;
+    window.removeEventListener('mousemove', onDrag);
+    window.removeEventListener('touchmove', onDrag);
+    window.removeEventListener('mouseup', stopDrag);
+    window.removeEventListener('touchend', stopDrag);
+};
+
+onMounted(() => {
+    nextTick(drawMap);
+});
+
+onUnmounted(() => {
+    stopDrag(); // Cleanup just in case
+});
+
+watch(() => [props.size, props.density, props.actualDifficulty, props.width, props.height], () => {
+    requestAnimationFrame(drawMap);
+});
+</script>
+
+<template>
+  <div class="difficulty-map-container">
+    <canvas 
+      ref="canvasRef" 
+      :width="width" 
+      :height="height"
+      @mousedown="startDrag"
+      @touchstart="startDrag"
+      :class="{ 'interactive': interactive }"
+    ></canvas>
+    
+    <div class="axis-labels">
+      <span class="y-label">{{ t('difficultyMap.size') }}</span>
+      <span class="x-label">{{ t('difficultyMap.density') }}</span>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.difficulty-map-container {
+  position: relative;
+  display: inline-block;
+  margin: 10px 0;
+}
+
+canvas {
+  border: 1px solid var(--panel-border, #444);
+  border-radius: 8px;
+  background: transparent;
+  cursor: default;
+  display: block; /* Remove inline gap */
+  width: 100%; /* Responsive */
+  max-width: 100%;
+}
+
+canvas.interactive {
+  cursor: crosshair;
+}
+
+.axis-labels {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
+
+.y-label {
+  position: absolute;
+  left: 5px;
+  top: 5px;
+  font-size: 10px;
+  color: rgba(0,0,0,0.5);
+  transform-origin: top left;
+  font-weight: bold;
+  text-shadow: 0 0 2px rgba(255,255,255,0.8);
+}
+
+.x-label {
+  position: absolute;
+  right: 5px;
+  bottom: 5px;
+  font-size: 10px;
+  color: rgba(0,0,0,0.5);
+  font-weight: bold;
+  text-shadow: 0 0 2px rgba(255,255,255,0.8);
+}
+</style>

src/components/GameBoard.vue

@@ -247,10 +247,10 @@ watch(() => store.size, async () => {
       <div class="corner-spacer"></div>
       
       <!-- Column Hints -->
-      <Hints :hints="colHints" orientation="col" :size="gridCols" :activeIndex="activeCol" />
+      <Hints :hints="colHints" orientation="col" :size="gridCols" :activeIndex="activeCol" :completedLines="store.completedCols" />
       
       <!-- Row Hints -->
-      <Hints ref="rowHintsRef" :hints="rowHints" orientation="row" :size="gridRows" :activeIndex="activeRow" />
+      <Hints ref="rowHintsRef" :hints="rowHints" orientation="row" :size="gridRows" :activeIndex="activeRow" :completedLines="store.completedRows" />
       
       <!-- Grid -->
       <div 

src/components/Hints.vue

@@ -16,6 +16,10 @@ defineProps({
   activeIndex: {
     type: Number,
     default: null
+  },
+  completedLines: {
+    type: Array,
+    default: () => []
   }
 });
 </script>
@@ -34,6 +38,7 @@ defineProps({
       class="hint-group"
       :class="{
         'is-active': index === activeIndex,
+        'is-completed': completedLines[index],
         'guide-right': orientation === 'col' && (index + 1) % 5 === 0 && index !== size - 1,
         'guide-bottom': orientation === 'row' && (index + 1) % 5 === 0 && index !== size - 1
       }"
@@ -81,6 +86,15 @@ defineProps({
   height: 100%;
 }
 
+.hint-group.is-completed {
+  opacity: 0.5;
+  background-color: var(--hint-bg);
+}
+
+.hint-group.is-completed .hint-num {
+  color: var(--text-muted);
+}
+
 .col .hint-group {
   flex-direction: column;
   padding: 4px 2px;

src/components/ImageImportModal.vue

@@ -3,6 +3,7 @@ import { ref, computed, onMounted, onUnmounted, watch, nextTick } from 'vue';
 import { usePuzzleStore } from '@/stores/puzzle';
 import { useI18n } from '@/composables/useI18n';
 import { getWorkerPool } from '@/utils/workerPool';
+import DifficultyMap from './DifficultyMap.vue';
 import { Upload, Image as ImageIcon, X, AlertTriangle, Camera, RefreshCw } from 'lucide-vue-next';
 
 const emit = defineEmits(['close']);
@@ -386,6 +387,7 @@ const capturePhoto = () => {
 
 onUnmounted(() => {
     stopCameraStream();
+    getWorkerPool().cancelAll();
 });
 
 </script>
@@ -492,6 +494,17 @@ onUnmounted(() => {
             </div>
             
             <div v-if="imageLoaded" class="stats-panel">
+                <div class="difficulty-map-wrapper">
+                    <DifficultyMap 
+                        :size="maxDimension"
+                        :density="threshold"
+                        :actual-difficulty="difficulty > 0 ? difficulty : null"
+                        :interactive="false"
+                        :width="200"
+                        :height="200"
+                        class="difficulty-map-mini"
+                    />
+                </div>
                 <div v-if="processing" class="loading-stats">
                     <div class="spinner"></div>
                     <span>{{ t('image.calculatingSolvability') || 'Calculating solvability...' }} {{ processingProgress }}%</span>
@@ -531,6 +544,24 @@ onUnmounted(() => {
 </template>
 
 <style scoped>
+.difficulty-map-wrapper {
+    display: flex;
+    justify-content: center;
+    margin-bottom: 15px;
+    background: #000;
+    border-radius: 8px;
+    padding: 10px;
+    border: 1px solid var(--border-color);
+}
+
+.difficulty-map-mini :deep(canvas) {
+    width: 100% !important;
+    max-width: 200px;
+    height: auto !important;
+    aspect-ratio: 1;
+    border-radius: 4px;
+}
+
 .loading-stats {
     display: flex;
     align-items: center;

src/components/WinModal.vue

@@ -46,6 +46,8 @@ const triggerVibration = () => {
 const getShareData = () => ({
   grid: store.playerGrid,
   size: store.size,
+  rows: store.playerGrid?.length || store.size,
+  cols: store.playerGrid?.[0]?.length || store.size,
   currentDensity: store.currentDensity,
   guideUsageCount: store.guideUsageCount,
   hasUsedBoost: store.hasUsedBoost,
@@ -71,9 +73,11 @@ const shareTo = async (target) => {
   try {
     // Try native share first if available (supports images)
     if (navigator.share && navigator.canShare) {
-      const blob = await createShareBlob(getShareData(), t, formattedTime.value);
+      const data = getShareData();
+      const blob = await createShareBlob(data, t, formattedTime.value);
       if (blob) {
-        const file = new File([blob], `nonogram-${store.size}x${store.size}.png`, { type: 'image/png' });
+        const dims = (data.cols && data.rows) ? `${data.cols}x${data.rows}` : `${store.size}x${store.size}`;
+        const file = new File([blob], `nonogram-${dims}.png`, { type: 'image/png' });
         if (navigator.canShare({ files: [file] })) {
           await navigator.share({
             files: [file],

src/composables/useI18n.js

@@ -197,7 +197,9 @@ const messages = {
     'simulation.table.size': 'Rozmiar',
     'simulation.table.density': 'Gęstość',
     'simulation.table.solved': 'Rozwiązano (Logika)',
-    'simulation.empty': 'Naciśnij Start, aby uruchomić symulację Monte Carlo'
+    'simulation.empty': 'Naciśnij Start, aby uruchomić symulację Monte Carlo',
+    'difficultyMap.size': 'Rozmiar',
+    'difficultyMap.density': 'Gęstość'
   },
   en: {
     'app.title': 'Nonograms',
@@ -395,7 +397,9 @@ const messages = {
     'simulation.table.solved': 'Solved (Logic)',
     'simulation.empty': 'Press Start to run Monte Carlo simulation',
     'custom.hideMap': 'Hide difficulty map',
-    'custom.showMap': 'Show difficulty map'
+    'custom.showMap': 'Show difficulty map',
+    'difficultyMap.size': 'Size',
+    'difficultyMap.density': 'Density'
   },
   zh: {
     'app.title': 'Nonograms',

src/composables/useSolver.js

@@ -1,4 +1,4 @@
-import { ref, computed, onUnmounted } from 'vue';
+import { ref, computed, onUnmounted, watch } from 'vue';
 import { usePuzzleStore } from '@/stores/puzzle';
 import { useI18n } from '@/composables/useI18n';
 
@@ -18,6 +18,24 @@ export function useSolver() {
     let worker = null;
     let requestId = 0;
 
+    // Reset solver state when game resets or changes
+    watch(() => store.currentLevelId, () => {
+        resetSolverState();
+    });
+
+    watch(() => store.moves, (newVal) => {
+        if (newVal === 0) {
+            resetSolverState();
+        }
+    });
+
+    function resetSolverState() {
+        pause();
+        isStuck.value = false;
+        statusText.value = t('guide.waiting');
+        isProcessing.value = false;
+    }
+
     function step() {
         if (store.isGameWon) {
             pause();

src/stores/puzzle.js

@@ -56,6 +56,31 @@ export const usePuzzleStore = defineStore('puzzle', () => {
     return Math.min(100, (filledCorrectly.value / totalCellsToFill.value) * 100);
   });
 
+  const completedRows = computed(() => {
+    if (!solution.value.length || !playerGrid.value.length) return [];
+    const rows = solution.value.length;
+    return Array(rows).fill().map((_, r) => {
+      const targetHints = calculateLineHints(solution.value[r]);
+      const playerLine = playerGrid.value[r];
+      return validateLine(playerLine, targetHints);
+    });
+  });
+
+  const completedCols = computed(() => {
+    if (!solution.value.length || !playerGrid.value.length) return [];
+    const rows = solution.value.length;
+    const cols = solution.value[0].length;
+    return Array(cols).fill().map((_, c) => {
+        const col = [];
+        for (let r = 0; r < rows; r++) {
+            col.push(solution.value[r][c]);
+        }
+        const targetHints = calculateLineHints(col);
+        const playerLine = playerGrid.value.map(row => row[c]);
+        return validateLine(playerLine, targetHints);
+    });
+  });
+
   // Actions
   function initGame(levelId = 'easy') {
     stopTimer();
@@ -407,8 +432,13 @@ export const usePuzzleStore = defineStore('puzzle', () => {
     guideUsageCount,
     currentDensity,
     markGuideUsed,
+    markBoostUsed,
+    hasUsedBoost,
+    boostUsageCount,
     startInteraction,
-    endInteraction
+    endInteraction,
+    completedRows,
+    completedCols
   };
 
 });

src/stores/puzzle_completion.test.js

@@ -0,0 +1,70 @@
+
+import { describe, it, expect, beforeEach } from 'vitest';
+import { setActivePinia, createPinia } from 'pinia';
+import { usePuzzleStore } from './puzzle';
+
+describe('Puzzle Store - Completion Logic', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia());
+  });
+
+  it('should correctly identify completed rows and columns', () => {
+    const store = usePuzzleStore();
+    
+    // Setup a simple 2x2 puzzle
+    // Solution:
+    // 1 0
+    // 0 1
+    // Row Hints: [1], [1]
+    // Col Hints: [1], [1]
+    store.solution = [
+      [1, 0],
+      [0, 1]
+    ];
+    store.playerGrid = [
+      [0, 0],
+      [0, 0]
+    ];
+    
+    // Initially nothing is completed
+    expect(store.completedRows).toEqual([false, false]);
+    expect(store.completedCols).toEqual([false, false]);
+    
+    // Fill first row correctly: 1 0
+    store.playerGrid[0][0] = 1;
+    store.playerGrid[0][1] = 0;
+    
+    expect(store.completedRows).toEqual([true, false]);
+    
+    // Fill second row incorrectly (too many filled): 1 1
+    store.playerGrid[1][0] = 1;
+    store.playerGrid[1][1] = 1;
+    
+    // Row 2 hint is [1], user has [2]. Should be false.
+    expect(store.completedRows).toEqual([true, false]);
+    
+    // Fix second row: 0 1
+    store.playerGrid[1][0] = 0;
+    store.playerGrid[1][1] = 1;
+    
+    expect(store.completedRows).toEqual([true, true]);
+    
+    // Check columns
+    // Col 1: 1, 0 -> Hint [1]. Matches.
+    // Col 2: 0, 1 -> Hint [1]. Matches.
+    expect(store.completedCols).toEqual([true, true]);
+  });
+
+  it('should mark row as completed if constraints are met even if wrong position', () => {
+    const store = usePuzzleStore();
+    // Solution: 1 0 0 (Hint 1)
+    store.solution = [[1, 0, 0]];
+    store.playerGrid = [[0, 0, 0]];
+    
+    // User puts 0 0 1 (Hint 1)
+    store.playerGrid[0] = [0, 0, 1];
+    
+    // Should be marked as completed because it satisfies the hint "1"
+    expect(store.completedRows).toEqual([true]);
+  });
+});

src/utils/debug_solver.test.js

@@ -1,27 +0,0 @@
-
-import { describe, it, expect } from 'vitest';
-import { solvePuzzle } from './solver';
-import { calculateHints } from './puzzleUtils';
-
-describe('Debug Solver', () => {
-    it('should solve the broken grid', () => {
-        const grid = [
-            [0,1,1,1,0,0,1,0,1,1],
-            [1,1,1,0,0,1,1,1,0,0],
-            [1,0,1,0,1,0,0,1,0,0],
-            [1,0,0,0,1,1,1,1,0,1],
-            [1,1,0,1,0,0,0,1,0,1],
-            [1,0,1,0,1,0,0,0,1,0],
-            [1,1,1,0,0,1,1,0,0,0],
-            [0,1,0,0,1,0,1,0,0,0],
-            [0,0,0,1,1,0,0,0,1,0],
-            [1,0,1,1,0,0,1,0,1,1]
-        ];
-
-        const { rowHints, colHints } = calculateHints(grid);
-        const result = solvePuzzle(rowHints, colHints);
-        
-        console.log('Solve Result:', result);
-        expect(result.percentSolved).toBe(100);
-    });
-});

src/utils/large_grid_solver.test.js

@@ -1,44 +0,0 @@
-
-import { describe, it, expect } from 'vitest';
-import { solvePuzzle } from './solver.js';
-
-describe('Large Grid Solver', () => {
-    it('should solve a large 55x28 grid without crashing', () => {
-        const rows = 28;
-        const cols = 55;
-        // Create a simple pattern: checkerboard or lines
-        const grid = Array(rows).fill().map((_, r) => 
-            Array(cols).fill().map((_, c) => (r + c) % 2 === 0 ? 1 : 0)
-        );
-        
-        // Calculate hints
-        const rowHints = grid.map(row => {
-            const hints = [];
-            let current = 0;
-            row.forEach(cell => {
-                if (cell === 1) current++;
-                else if (current > 0) { hints.push(current); current = 0; }
-            });
-            if (current > 0) hints.push(current);
-            return hints.length ? hints : [0];
-        });
-        
-        const colHints = Array(cols).fill().map((_, c) => {
-            const hints = [];
-            let current = 0;
-            for(let r=0; r<rows; r++) {
-                if (grid[r][c] === 1) current++;
-                else if (current > 0) { hints.push(current); current = 0; }
-            }
-            if (current > 0) hints.push(current);
-            return hints.length ? hints : [0];
-        });
-        
-        console.log('Starting solve...');
-        const result = solvePuzzle(rowHints, colHints, (p) => console.log(`Progress: ${p}%`));
-        console.log('Result:', result);
-        
-        expect(result.percentSolved).toBeGreaterThan(0);
-        expect(result.difficulty).toBeDefined();
-    });
-});

src/utils/puzzleUtils.js

@@ -61,10 +61,9 @@ export function generateRandomGrid(size, density = 0.5) {
     return grid;
 }
 
-export function calculateDifficulty(density, size = 10) {
-    // Data derived from Monte Carlo Simulation (Logical Solver)
-    // Format: { size: [solved_pct_at_0.1, ..., solved_pct_at_0.9] }
-    const SIM_DATA = {
+// Data derived from Monte Carlo Simulation (Logical Solver)
+// Format: { size: [solved_pct_at_0.1, ..., solved_pct_at_0.9] }
+const SIM_DATA = {
     5: [88, 76, 71, 80, 90, 98, 99, 100, 100],
     10: [58, 25, 18, 44, 81, 99, 100, 100, 100],
     15: [36, 7, 3, 11, 67, 99, 100, 100, 100],
@@ -81,19 +80,24 @@ export function calculateDifficulty(density, size = 10) {
     70: [0, 0, 0, 0, 0, 11, 100, 100, 100],
     75: [0, 0, 0, 0, 0, 12, 100, 100, 100],
     80: [0, 0, 0, 0, 0, 4, 100, 100, 100]
-    };
+};
+
+const SIM_SIZES = Object.keys(SIM_DATA).map(Number).sort((a, b) => a - b);
+
+export function calculateDifficulty(density, size = 10) {
+    density = Number(density);
+    size = Number(size);
 
     // Helper to get interpolated value from array
     const getSimulatedSolvedPct = (s, d) => {
         // Find closest sizes
-        const sizes = Object.keys(SIM_DATA).map(Number).sort((a, b) => a - b);
-        let sLower = sizes[0];
-        let sUpper = sizes[sizes.length - 1];
+        let sLower = SIM_SIZES[0];
+        let sUpper = SIM_SIZES[SIM_SIZES.length - 1];
         
-        for (let i = 0; i < sizes.length - 1; i++) {
-            if (s >= sizes[i] && s <= sizes[i+1]) {
-                sLower = sizes[i];
-                sUpper = sizes[i+1];
+        for (let i = 0; i < SIM_SIZES.length - 1; i++) {
+            if (s >= SIM_SIZES[i] && s <= SIM_SIZES[i+1]) {
+                sLower = SIM_SIZES[i];
+                sUpper = SIM_SIZES[i+1];
                 break;
             }
         }

src/utils/repro_solver.test.js

@@ -1,49 +0,0 @@
-
-import { describe, it, expect } from 'vitest';
-import { solvePuzzle } from './solver';
-import { calculateHints } from './puzzleUtils';
-
-describe('Solver Repro', () => {
-    it('should solve a simple generated puzzle', () => {
-        const grid = [
-            [1, 0, 1, 1, 0],
-            [1, 1, 0, 0, 1],
-            [0, 0, 1, 0, 0],
-            [1, 1, 1, 1, 1],
-            [0, 1, 0, 1, 0]
-        ];
-        const { rowHints, colHints } = calculateHints(grid);
-        
-        const result = solvePuzzle(rowHints, colHints);
-        expect(result.percentSolved).toBe(100);
-    });
-
-    it('should not fail on random valid lines', () => {
-        // Test solveLine indirectly via solvePuzzle on small grids
-        for (let i = 0; i < 100; i++) {
-            const size = 10;
-            const grid = [];
-            for(let r=0; r<size; r++) {
-                const row = [];
-                for(let c=0; c<size; c++) row.push(Math.random() > 0.5 ? 1 : 0);
-                grid.push(row);
-            }
-            
-            const { rowHints, colHints } = calculateHints(grid);
-            const result = solvePuzzle(rowHints, colHints);
-            
-            // It might not be 100% solvable without guessing (logic only), 
-            // but since our solver HAS backtracking, it MUST be 100% solvable 
-            // (unless timeout/max depth reached, but for 10x10 it should solve).
-            
-            // If it returns 0% or low %, it implies it failed to find the solution 
-            // or found a contradiction (which shouldn't happen for valid hints).
-            
-            if (result.percentSolved < 100) {
-                console.log('Failed Grid:', JSON.stringify(grid));
-                console.log('Result:', result);
-            }
-            expect(result.percentSolved).toBe(100);
-        }
-    });
-});

src/utils/shareUtils.js

@@ -1,19 +1,30 @@
 import { calculateDifficulty } from '@/utils/puzzleUtils';
 
 export function buildShareCanvas(data, t, formattedTime) {
-  const { grid, size, currentDensity, guideUsageCount, hasUsedBoost } = data;
+  const { grid, size, rows, cols, currentDensity, guideUsageCount, hasUsedBoost } = data;
   if (!grid || !grid.length) return null;
   
+  // Backward compatibility if rows/cols not provided
+  const numRows = rows || size;
+  const numCols = cols || size;
+  
   const appUrl = typeof __APP_HOMEPAGE__ !== 'undefined' ? __APP_HOMEPAGE__ : '';
   const maxBoard = 640;
-  const cellSize = Math.max(8, Math.floor(maxBoard / size));
-  const boardSize = cellSize * size;
+  // Calculate cell size based on the largest dimension to fit within maxBoard
+  const maxDim = Math.max(numRows, numCols);
+  const cellSize = Math.max(8, Math.floor(maxBoard / maxDim));
+  
+  const boardWidth = cellSize * numCols;
+  const boardHeight = cellSize * numRows;
+  
   const padding = 28;
   const headerHeight = 64;
   const footerHeight = 28;
   const infoHeight = (guideUsageCount > 0 && hasUsedBoost) ? 65 : 40;
-  const width = boardSize + padding * 2;
-  const height = boardSize + padding * 2 + headerHeight + footerHeight + infoHeight;
+  
+  const width = boardWidth + padding * 2;
+  const height = boardHeight + padding * 2 + headerHeight + footerHeight + infoHeight;
+  
   const scale = window.devicePixelRatio || 1;
   const canvas = document.createElement('canvas');
   canvas.width = width * scale;
@@ -38,7 +49,8 @@ export function buildShareCanvas(data, t, formattedTime) {
   
   // Difficulty & Density Info
   const densityPercent = Math.round(currentDensity * 100);
-  const { level: difficultyKey } = calculateDifficulty(currentDensity, size);
+  // Calculate difficulty using the max dimension (size) as it relates to complexity
+  const { level: difficultyKey } = calculateDifficulty(currentDensity, maxDim);
   let diffColor = '#33ff33';
   if (difficultyKey === 'extreme') diffColor = '#ff3333';
   else if (difficultyKey === 'hardest') diffColor = '#ff9933';
@@ -56,26 +68,34 @@ export function buildShareCanvas(data, t, formattedTime) {
   const gridX = padding;
   const gridY = padding + headerHeight;
   ctx.fillStyle = 'rgba(255, 255, 255, 0.06)';
-  ctx.fillRect(gridX, gridY, boardSize, boardSize);
+  ctx.fillRect(gridX, gridY, boardWidth, boardHeight);
   ctx.strokeStyle = 'rgba(255, 255, 255, 0.12)';
   ctx.lineWidth = 1;
-  for (let i = 0; i <= size; i++) {
+  
+  // Vertical lines
+  for (let i = 0; i <= numCols; i++) {
     const x = gridX + i * cellSize;
-    const y = gridY + i * cellSize;
     ctx.beginPath();
     ctx.moveTo(x, gridY);
-    ctx.lineTo(x, gridY + boardSize);
-    ctx.stroke();
-    ctx.beginPath();
-    ctx.moveTo(gridX, y);
-    ctx.lineTo(gridX + boardSize, y);
+    ctx.lineTo(x, gridY + boardHeight);
     ctx.stroke();
   }
+  
+  // Horizontal lines
+  for (let i = 0; i <= numRows; i++) {
+    const y = gridY + i * cellSize;
+    ctx.beginPath();
+    ctx.moveTo(gridX, y);
+    ctx.lineTo(gridX + boardWidth, y);
+    ctx.stroke();
+  }
+
   ctx.fillStyle = '#00f2fe';
   ctx.strokeStyle = 'rgba(255, 255, 255, 0.5)';
   ctx.lineWidth = Math.max(1.5, Math.floor(cellSize * 0.12));
-  for (let r = 0; r < size; r++) {
-    for (let c = 0; c < size; c++) {
+  
+  for (let r = 0; r < numRows; r++) {
+    for (let c = 0; c < numCols; c++) {
       const state = grid[r]?.[c];
       if (state === 1) {
         const x = gridX + c * cellSize + 1;
@@ -107,7 +127,7 @@ export function buildShareCanvas(data, t, formattedTime) {
       ctx.fillStyle = '#ff4d4d';
       ctx.font = '600 14px "Segoe UI", sans-serif';
       
-      const totalCells = size * size;
+      const totalCells = numRows * numCols;
       const percent = Math.min(100, Math.round((guideUsageCount / totalCells) * 100));
       const guideText = t('win.usedGuide', { count: guideUsageCount, percent });
       
@@ -129,19 +149,27 @@ export function buildShareCanvas(data, t, formattedTime) {
 }
 
 export function buildShareSVG(data, t, formattedTime) {
-  const { grid, size, currentDensity, guideUsageCount, hasUsedBoost } = data;
+  const { grid, size, rows, cols, currentDensity, guideUsageCount, hasUsedBoost } = data;
   if (!grid || !grid.length) return null;
   
+  // Backward compatibility
+  const numRows = rows || size;
+  const numCols = cols || size;
+  
   const appUrl = typeof __APP_HOMEPAGE__ !== 'undefined' ? __APP_HOMEPAGE__ : '';
   const maxBoard = 640;
-  const cellSize = Math.max(8, Math.floor(maxBoard / size));
-  const boardSize = cellSize * size;
+  const maxDim = Math.max(numRows, numCols);
+  const cellSize = Math.max(8, Math.floor(maxBoard / maxDim));
+  
+  const boardWidth = cellSize * numCols;
+  const boardHeight = cellSize * numRows;
+  
   const padding = 28;
   const headerHeight = 64;
   const footerHeight = 28;
   const infoHeight = (guideUsageCount > 0 && hasUsedBoost) ? 65 : 40;
-  const width = boardSize + padding * 2;
-  const height = boardSize + padding * 2 + headerHeight + footerHeight + infoHeight;
+  const width = boardWidth + padding * 2;
+  const height = boardHeight + padding * 2 + headerHeight + footerHeight + infoHeight;
 
   // Colors
   const bgGradientStart = '#1b2a4a';
@@ -156,7 +184,7 @@ export function buildShareSVG(data, t, formattedTime) {
 
   // Difficulty Logic
   const densityPercent = Math.round(currentDensity * 100);
-  const { level: difficultyKey } = calculateDifficulty(currentDensity, size);
+  const { level: difficultyKey } = calculateDifficulty(currentDensity, maxDim);
   
   let diffColor = '#33ff33';
   if (difficultyKey === 'extreme') diffColor = '#ff3333';
@@ -194,16 +222,19 @@ export function buildShareSVG(data, t, formattedTime) {
   const gridY = padding + headerHeight;
 
   // Grid Background
-  svgContent += `<rect x="${gridX}" y="${gridY}" width="${boardSize}" height="${boardSize}" fill="${gridColor}"/>`;
+  svgContent += `<rect x="${gridX}" y="${gridY}" width="${boardWidth}" height="${boardHeight}" fill="${gridColor}"/>`;
 
   // Grid Lines
   let gridLines = '';
-  for (let i = 0; i <= size; i++) {
-    const pos = i * cellSize;
   // Vertical
-    gridLines += `<line x1="${gridX + pos}" y1="${gridY}" x2="${gridX + pos}" y2="${gridY + boardSize}" stroke="${gridLineColor}" stroke-width="1"/>`;
+  for (let i = 0; i <= numCols; i++) {
+    const pos = i * cellSize;
+    gridLines += `<line x1="${gridX + pos}" y1="${gridY}" x2="${gridX + pos}" y2="${gridY + boardHeight}" stroke="${gridLineColor}" stroke-width="1"/>`;
+  }
   // Horizontal
-    gridLines += `<line x1="${gridX}" y1="${gridY + pos}" x2="${gridX + boardSize}" y2="${gridY + pos}" stroke="${gridLineColor}" stroke-width="1"/>`;
+  for (let i = 0; i <= numRows; i++) {
+    const pos = i * cellSize;
+    gridLines += `<line x1="${gridX}" y1="${gridY + pos}" x2="${gridX + boardWidth}" y2="${gridY + pos}" stroke="${gridLineColor}" stroke-width="1"/>`;
   }
   svgContent += gridLines;
 
@@ -211,8 +242,8 @@ export function buildShareSVG(data, t, formattedTime) {
   let cells = '';
   const lineWidth = Math.max(1.5, Math.floor(cellSize * 0.12));
   
-  for (let r = 0; r < size; r++) {
-    for (let c = 0; c < size; c++) {
+  for (let r = 0; r < numRows; r++) {
+    for (let c = 0; c < numCols; c++) {
       const state = grid[r]?.[c];
       const cx = gridX + c * cellSize;
       const cy = gridY + r * cellSize;
@@ -238,7 +269,7 @@ export function buildShareSVG(data, t, formattedTime) {
   }
 
   if (guideUsageCount > 0) {
-      const totalCells = size * size;
+      const totalCells = numRows * numCols;
       const percent = Math.min(100, Math.round((guideUsageCount / totalCells) * 100));
       const guideText = t('win.usedGuide', { count: guideUsageCount, percent });
       svgContent += `<text x="${padding}" y="${infoY}" font-family="Segoe UI, sans-serif" font-weight="600" font-size="14" fill="#ff4d4d">⚠️ ${guideText}</text>`;
@@ -276,7 +307,9 @@ export const downloadShareSVG = (data, t, formattedTime) => {
   const url = URL.createObjectURL(blob);
   const link = document.createElement('a');
   link.href = url;
-  link.download = `nonogram-${data.size}x${data.size}.svg`;
+  // Use cols x rows if available, else size x size
+  const dims = (data.cols && data.rows) ? `${data.cols}x${data.rows}` : `${data.size}x${data.size}`;
+  link.download = `nonogram-${dims}.svg`;
   document.body.appendChild(link);
   link.click();
   link.remove();
@@ -289,7 +322,8 @@ export const downloadShareImage = async (data, t, formattedTime) => {
   const url = URL.createObjectURL(blob);
   const link = document.createElement('a');
   link.href = url;
-  link.download = `nonogram-${data.size}x${data.size}.png`;
+  const dims = (data.cols && data.rows) ? `${data.cols}x${data.rows}` : `${data.size}x${data.size}`;
+  link.download = `nonogram-${dims}.png`;
   document.body.appendChild(link);
   link.click();
   link.remove();

src/utils/solver.js

@@ -446,6 +446,7 @@ export function solvePuzzle(rowHints, colHints, onProgress, initialGrid = null,
         lookaheadUsed: maxDepth > 0,
         iterations,
         maxDepth,
-        backtracks
+        backtracks,
+        solution: grid
     };
 }

src/utils/solver.test.js

@@ -1,3 +1,8 @@
+import { describe, it, expect } from 'vitest';
+import { solvePuzzle } from './solver';
+import { calculateHints, generateRandomGrid } from './puzzleUtils';
+
+describe('Solver', () => {
     it('solves a puzzle requiring guessing (Backtracking)', () => {
         // A puzzle that logic alone cannot start usually has multiple solutions or requires a guess.
         // Example: The "domino" or "ambiguous" pattern, but we need a unique solution that requires lookahead.
@@ -61,4 +66,81 @@
             expect(result.percentSolved).toBe(100);
         }
     });
+
+    // Merged from repro_solver.test.js
+    it('should solve a simple generated puzzle', () => {
+        const grid = [
+            [1, 0, 1, 1, 0],
+            [1, 1, 0, 0, 1],
+            [0, 0, 1, 0, 0],
+            [1, 1, 1, 1, 1],
+            [0, 1, 0, 1, 0]
+        ];
+        const { rowHints, colHints } = calculateHints(grid);
+        
+        const result = solvePuzzle(rowHints, colHints);
+        expect(result.percentSolved).toBe(100);
+    });
+
+    // Merged from debug_solver.test.js
+    it('should solve the broken grid (debug case)', () => {
+        const grid = [
+            [0,1,1,1,0,0,1,0,1,1],
+            [1,1,1,0,0,1,1,1,0,0],
+            [1,0,1,0,1,0,0,1,0,0],
+            [1,0,0,0,1,1,1,1,0,1],
+            [1,1,0,1,0,0,0,1,0,1],
+            [1,0,1,0,1,0,0,0,1,0],
+            [1,1,1,0,0,1,1,0,0,0],
+            [0,1,0,0,1,0,1,0,0,0],
+            [0,0,0,1,1,0,0,0,1,0],
+            [1,0,1,1,0,0,1,0,1,1]
+        ];
+
+        const { rowHints, colHints } = calculateHints(grid);
+        const result = solvePuzzle(rowHints, colHints);
+        
+        // console.log('Solve Result:', result);
+        expect(result.percentSolved).toBe(100);
+    });
+
+    // Merged from large_grid_solver.test.js
+    it('should solve a large 55x28 grid without crashing', () => {
+        const rows = 28;
+        const cols = 55;
+        // Create a simple pattern: checkerboard or lines
+        const grid = Array(rows).fill().map((_, r) => 
+            Array(cols).fill().map((_, c) => (r + c) % 2 === 0 ? 1 : 0)
+        );
+        
+        // Calculate hints
+        const rowHints = grid.map(row => {
+            const hints = [];
+            let current = 0;
+            row.forEach(cell => {
+                if (cell === 1) current++;
+                else if (current > 0) { hints.push(current); current = 0; }
+            });
+            if (current > 0) hints.push(current);
+            return hints.length ? hints : [0];
+        });
+        
+        const colHints = Array(cols).fill().map((_, c) => {
+            const hints = [];
+            let current = 0;
+            for(let r=0; r<rows; r++) {
+                if (grid[r][c] === 1) current++;
+                else if (current > 0) { hints.push(current); current = 0; }
+            }
+            if (current > 0) hints.push(current);
+            return hints.length ? hints : [0];
+        });
+        
+        // console.log('Starting solve...');
+        const result = solvePuzzle(rowHints, colHints); // Removed console.log callback to reduce noise
+        // console.log('Result:', result);
+        
+        expect(result.percentSolved).toBeGreaterThan(0);
+        expect(result.difficultyScore).toBeDefined();
+    });
 });

src/workers/solverWorker.js

@@ -1,5 +1,5 @@
 import { calculateHints } from '../utils/puzzleUtils.js';
-import { solveLine } from '../utils/solver.js';
+import { solveLine, solvePuzzle } from '../utils/solver.js';
 
 const messages = {
   pl: {
@@ -140,7 +140,54 @@ const handleStep = (playerGrid, solution, locale) => {
 
 const handleBoost = (playerGrid, solution, locale) => {
   const size = solution.length;
-  // Find first unknown cell and reveal it
+  
+  // 1. Try to use the Solver (DFS) to find a logical move
+  try {
+    const { rowHints, colHints } = calculateHints(solution);
+    
+    // Map Store format (0=Unk, 1=Fill, 2=Cross) to Solver format (-1=Unk, 1=Fill, 0=Empty)
+    const solverGrid = playerGrid.map(row => row.map(cell => {
+      if (cell === 0) return -1;
+      if (cell === 1) return 1;
+      if (cell === 2) return 0;
+      return -1;
+    }));
+    
+    // Run full solver (logicOnly=false allows DFS/guessing)
+    // We pass solverGrid as initial state to respect user's moves
+    const result = solvePuzzle(rowHints, colHints, null, solverGrid, false);
+    
+    if (result && result.solution) {
+      const solvedGrid = result.solution;
+      
+      // Find the first cell that is Unknown in playerGrid but Known in solvedGrid
+      for (let r = 0; r < size; r++) {
+        for (let c = 0; c < size; c++) {
+          if (playerGrid[r][c] === 0) { // Unknown in Player
+            const solvedVal = solvedGrid[r][c]; // -1=Unk, 0=Empty, 1=Filled
+            
+            if (solvedVal !== -1) {
+              // Found a logical deduction!
+              const newState = solvedVal === 1 ? 1 : 2; // 1->Filled, 0->Cross
+              const stateLabel = t(locale, newState === 1 ? 'worker.state.filled' : 'worker.state.empty');
+              return {
+                type: 'move',
+                r,
+                c,
+                state: newState,
+                statusText: t(locale, 'worker.boosted', { row: r + 1, col: c + 1, state: stateLabel })
+              };
+            }
+          }
+        }
+      }
+    }
+  } catch (e) {
+    console.warn('Boost Solver failed, falling back to simple reveal:', e);
+  }
+
+  // 2. Fallback: If solver failed (e.g. contradiction due to user error), 
+  // or no new info found, use the "Cheat" method (reveal from true solution).
   for (let r = 0; r < size; r++) {
     for (let c = 0; c < size; c++) {
       if (playerGrid[r][c] === 0) {

update_i18n_guide.cjs

@@ -1,60 +0,0 @@
-
-const fs = require('fs');
-
-const filePath = 'src/composables/useI18n.js';
-let content = fs.readFileSync(filePath, 'utf8');
-
-// 1. Add key to all language objects
-const lines = content.split('\n');
-const newLines = [];
-let insideLang = false;
-let currentLang = null;
-
-for (let i = 0; i < lines.length; i++) {
-    const line = lines[i];
-    
-    const langStartMatch = line.match(/^\s{2}(['"]?[\w-]+['"]?): \{/);
-    if (langStartMatch) {
-        insideLang = true;
-        currentLang = langStartMatch[1].replace(/['"]/g, '');
-    }
-    
-    if (insideLang && (line.trim() === '},' || line.trim() === '}')) {
-        let translation = 'GUIDE';
-        if (currentLang === 'pl') translation = 'PRZEWODNIK';
-        if (currentLang === 'es') translation = 'GUÍA';
-        if (currentLang === 'fr') translation = 'GUIDE';
-        if (currentLang === 'de') translation = 'ANLEITUNG';
-        if (currentLang === 'it') translation = 'GUIDA';
-        if (currentLang === 'pt' || currentLang === 'pt-br') translation = 'GUIA';
-        if (currentLang === 'ru') translation = 'РУКОВОДСТВО';
-        if (currentLang === 'zh') translation = '指南';
-        
-        // Ensure previous line has comma
-        if (newLines.length > 0) {
-            const lastLine = newLines[newLines.length - 1];
-            if (!lastLine.trim().endsWith(',') && !lastLine.trim().endsWith('{')) {
-                newLines[newLines.length - 1] = lastLine + ',';
-            }
-        }
-        
-        newLines.push(`    'nav.guide': '${translation}'`);
-        insideLang = false;
-        currentLang = null;
-    }
-    
-    newLines.push(line);
-}
-
-content = newLines.join('\n');
-
-// 2. Add to requiredKeys
-// Find "const requiredKeys = ["
-// We know it ends with 'nav.newGame' now.
-content = content.replace(
-    "'nav.newGame'",
-    "'nav.newGame','nav.guide'"
-);
-
-fs.writeFileSync(filePath, content);
-console.log('Updated useI18n.js with nav.guide');

verify_i18n.js

@@ -1,107 +0,0 @@
-
-import fs from 'fs';
-import path from 'path';
-import { fileURLToPath } from 'url';
-import { execSync } from 'child_process';
-
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
-
-// 1. Parse useI18n.js to get keys
-const i18nPath = path.join(__dirname, 'src/composables/useI18n.js');
-const i18nContent = fs.readFileSync(i18nPath, 'utf8');
-
-function extractKeys(lang) {
-    // Find start of lang block: "  en: {"
-    const startRegex = new RegExp(`\\s+${lang}:\\s*\\{`);
-    const startMatch = i18nContent.match(startRegex);
-    if (!startMatch) return new Set();
-
-    const startIndex = startMatch.index + startMatch[0].length;
-    let braceCount = 1;
-    let inString = false;
-    let stringChar = '';
-    let endIndex = -1;
-
-    for (let i = startIndex; i < i18nContent.length; i++) {
-        const char = i18nContent[i];
-        
-        if (inString) {
-            if (char === stringChar && i18nContent[i-1] !== '\\') {
-                inString = false;
-            }
-        } else {
-            if (char === "'" || char === '"' || char === '`') {
-                inString = true;
-                stringChar = char;
-            } else if (char === '{') {
-                braceCount++;
-            } else if (char === '}') {
-                braceCount--;
-                if (braceCount === 0) {
-                    endIndex = i;
-                    break;
-                }
-            }
-        }
-    }
-
-    if (endIndex === -1) return new Set();
-
-    const block = i18nContent.substring(startIndex, endIndex);
-    const keys = new Set();
-    const keyRegex = /['"]([\w.-]+)['"]\s*:/g;
-    let match;
-    while ((match = keyRegex.exec(block)) !== null) {
-        keys.add(match[1]);
-    }
-    return keys;
-}
-
-const enKeys = extractKeys('en');
-console.log(`Found ${enKeys.size} keys in en block.`);
-
-if (enKeys.has('image.title')) {
-    console.log("'image.title' IS present in en block.");
-} else {
-    console.log("'image.title' is MISSING in en block.");
-}
-
-// 2. Scan src for usages
-try {
-    const grepOutput = execSync(`grep -r "t(['\\"]" src | grep -v "node_modules"`, { encoding: 'utf8' });
-    
-    const usedKeys = new Set();
-    const usageRegex = /t\(['"]([\w.-]+)['"]/g;
-    
-    const lines = grepOutput.split('\n');
-    for (const line of lines) {
-        let m;
-        while ((m = usageRegex.exec(line)) !== null) {
-            usedKeys.add(m[1]);
-        }
-    }
-    
-    console.log(`Found ${usedKeys.size} used keys in src.`);
-    
-    // 3. Compare
-    const missingKeys = [];
-    for (const key of usedKeys) {
-        // Skip dynamic keys or composed keys if any (heuristic)
-        if (key.includes('${')) continue;
-
-        if (!enKeys.has(key)) {
-            missingKeys.push(key);
-        }
-    }
-    
-    if (missingKeys.length > 0) {
-        console.log("Missing translations in en:");
-        missingKeys.forEach(k => console.log(` - ${k}`));
-    } else {
-        console.log("No missing translations found in en.");
-    }
-
-} catch (e) {
-    console.error("Error running grep:", e);
-}