1.8.3

package-lock.json

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

package.json

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

src/components/CustomGameModal.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed, onMounted, watch, nextTick } from 'vue';
+import { ref, computed, onMounted, onUnmounted, watch, nextTick } from 'vue';
 import { usePuzzleStore } from '@/stores/puzzle';
 import { useI18n } from '@/composables/useI18n';
 import { calculateDifficulty } from '@/utils/puzzleUtils';
@@ -14,6 +14,7 @@ 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;
@@ -25,46 +26,42 @@ const drawMap = () => {
   // Clear
   ctx.clearRect(0, 0, width, height);
 
-  // Draw Gradient Background
-  // Optimization: Create an image data once if static, but here it's small enough.
-  const imgData = ctx.createImageData(width, height);
-  const data = imgData.data;
+  // 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++) {
-      // Map x, y to fillRate, size
-      // y=0 -> size 80 (top), y=height -> size 5 (bottom)
-      // x=0 -> fill 10%, x=width -> fill 90%
+      // Ranges:
+      // X: Fill Rate 10% -> 90%
+      // Y: Size 5 -> 80
       
-      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:
-      // Green (0%) -> Yellow (50%) -> Red (100%)
-      // Hue: 120 -> 0
-      const hue = 120 * (1 - value / 100);
-      
-      // Convert HSL to RGB (Simplified)
-      // Saturation 100%, Lightness 50%
-      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
-    }
+      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;
   }
-  ctx.putImageData(imgData, 0, 0);
 
   // Draw current position
   // Map current fillRate/size to x,y
@@ -140,6 +137,9 @@ const updateFromEvent = (e) => {
 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) => {
@@ -149,13 +149,22 @@ const onDrag = (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 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);
     }
 };
@@ -271,12 +280,9 @@ const confirm = () => {
         <div class="map-section" v-if="showAdvanced">
             <canvas 
                 ref="difficultyCanvas" 
-                width="200" 
-                height="200"
+                width="400" 
+                height="400"
                 @mousedown="startDrag"
-                @mousemove="onDrag"
-                @mouseup="stopDrag"
-                @mouseleave="stopDrag"
                 @touchstart.prevent="startDrag"
                 @touchmove.prevent="onDrag"
                 @touchend="stopDrag"
@@ -371,6 +377,8 @@ const confirm = () => {
 }
 
 canvas {
+    width: 400px;
+    height: 400px;
     border: 2px solid var(--panel-border);
     border-radius: 8px;
     box-shadow: 0 0 20px rgba(0, 242, 255, 0.1);
@@ -378,6 +386,14 @@ canvas {
     background: #000;
 }
 
+@media (max-width: 600px) {
+    canvas {
+        width: 100%;
+        height: auto;
+        aspect-ratio: 1;
+    }
+}
+
 h2 {
   font-size: 2rem;
   color: var(--accent-cyan);

src/components/SimulationView.vue

@@ -3,9 +3,11 @@
 import { ref, computed } from 'vue';
 import { generateRandomGrid, calculateHints } from '@/utils/puzzleUtils';
 import { solvePuzzle } from '@/utils/solver';
+import { useI18n } from '@/composables/useI18n';
 import { X, Play, Square, RotateCcw } from 'lucide-vue-next';
 
 const emit = defineEmits(['close']);
+const { t } = useI18n();
 
 const SIZES = [5, 10, 15, 20, 25, 30, 35, 40, 45, 50]; 
 const DENSITIES = [0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9];
@@ -13,12 +15,17 @@ const SAMPLES_PER_POINT = 10; // Reduced for web performance demo
 
 const isRunning = ref(false);
 const progress = ref(0);
-const currentStatus = ref('Ready');
+const currentStatus = ref('');
 const results = ref([]);
 const simulationSpeed = ref(1); // 1 = Normal, 2 = Fast (less render updates)
 
 let stopRequested = false;
 
+const displayStatus = computed(() => {
+    if (!currentStatus.value) return t('simulation.status.ready');
+    return currentStatus.value;
+});
+
 const startSimulation = async () => {
     if (isRunning.value) return;
     isRunning.value = true;
@@ -32,12 +39,15 @@ const startSimulation = async () => {
     for (const size of SIZES) {
         for (const density of DENSITIES) {
             if (stopRequested) {
-                currentStatus.value = 'Stopped';
+                currentStatus.value = t('simulation.status.stopped');
                 isRunning.value = false;
                 return;
             }
 
-            currentStatus.value = `Simulating ${size}x${size} @ ${(density * 100).toFixed(0)}%`;
+            currentStatus.value = t('simulation.status.simulating', { 
+                size: size, 
+                density: (density * 100).toFixed(0) 
+            });
             
             let totalSolved = 0;
             
@@ -66,7 +76,7 @@ const startSimulation = async () => {
     }
 
     isRunning.value = false;
-    currentStatus.value = 'Completed';
+    currentStatus.value = t('simulation.status.completed');
 };
 
 const stopSimulation = () => {
@@ -86,7 +96,7 @@ const getRowColor = (solved) => {
   <div class="modal-overlay" @click.self="emit('close')">
     <div class="modal glass-panel">
       <div class="header">
-        <h2>Difficulty Simulation</h2>
+        <h2>{{ t('simulation.title') }}</h2>
         <button class="close-btn" @click="emit('close')">
             <X />
         </button>
@@ -95,7 +105,7 @@ const getRowColor = (solved) => {
       <div class="content">
         <div class="controls">
             <div class="status-bar">
-                <div class="status-text">{{ currentStatus }}</div>
+                <div class="status-text">{{ displayStatus }}</div>
                 <div class="progress-track">
                     <div class="progress-fill" :style="{ width: progress + '%' }"></div>
                 </div>
@@ -103,10 +113,10 @@ const getRowColor = (solved) => {
             
             <div class="actions">
                 <button v-if="!isRunning" class="btn-neon" @click="startSimulation">
-                    <Play class="icon" /> Start Simulation
+                    <Play class="icon" /> {{ t('simulation.start') }}
                 </button>
                 <button v-else class="btn-neon secondary" @click="stopSimulation">
-                    <Square class="icon" /> Stop
+                    <Square class="icon" /> {{ t('simulation.stop') }}
                 </button>
             </div>
         </div>
@@ -115,9 +125,9 @@ const getRowColor = (solved) => {
             <table class="results-table">
                 <thead>
                     <tr>
-                        <th>Size</th>
-                        <th>Density</th>
-                        <th>Solved (Logic)</th>
+                        <th>{{ t('simulation.table.size') }}</th>
+                        <th>{{ t('simulation.table.density') }}</th>
+                        <th>{{ t('simulation.table.solved') }}</th>
                     </tr>
                 </thead>
                 <tbody>
@@ -129,7 +139,7 @@ const getRowColor = (solved) => {
                 </tbody>
             </table>
             <div v-if="results.length === 0" class="empty-state">
-                Press Start to run Monte Carlo simulation
+                {{ t('simulation.empty') }}
             </div>
         </div>
       </div>

src/composables/useI18n.js

@@ -106,7 +106,19 @@ const messages = {
     'language.searchLabel': 'Wyszukaj język',
     'language.searchPlaceholder': 'Wpisz nazwę języka...',
     'nav.newGame': 'NOWA GRA',
-    'nav.guide': 'PRZEWODNIK'
+    'nav.guide': 'PRZEWODNIK',
+    'custom.simulationHelp': 'Jak to jest obliczane?',
+    'simulation.title': 'Symulacja Trudności',
+    'simulation.status.ready': 'Gotowy',
+    'simulation.status.stopped': 'Zatrzymano',
+    'simulation.status.completed': 'Zakończono',
+    'simulation.status.simulating': 'Symulacja {size}x{size} @ {density}%',
+    'simulation.start': 'Start Symulacji',
+    'simulation.stop': 'Stop',
+    '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'
   },
   en: {
     'app.title': 'Nonograms',
@@ -265,7 +277,19 @@ const messages = {
     'language.searchLabel': 'Search language',
     'language.searchPlaceholder': 'Type language name...',
     'nav.newGame': 'NEW GAME',
-    'nav.guide': 'GUIDE'
+    'nav.guide': 'GUIDE',
+    'custom.simulationHelp': 'How is this calculated?',
+    'simulation.title': 'Difficulty Simulation',
+    'simulation.status.ready': 'Ready',
+    'simulation.status.stopped': 'Stopped',
+    'simulation.status.completed': 'Completed',
+    'simulation.status.simulating': 'Simulating {size}x{size} @ {density}%',
+    'simulation.start': 'Start Simulation',
+    'simulation.stop': 'Stop',
+    'simulation.table.size': 'Size',
+    'simulation.table.density': 'Density',
+    'simulation.table.solved': 'Solved (Logic)',
+    'simulation.empty': 'Press Start to run Monte Carlo simulation'
   },
   zh: {
     'app.title': 'Nonograms',