1.8.2

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "vue-nonograms-solid",
-  "version": "1.8.0",
+  "version": "1.8.2",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "vue-nonograms-solid",
-      "version": "1.8.0",
+      "version": "1.8.2",
       "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.2",
   "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';
@@ -140,6 +140,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,8 +152,15 @@ 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 = () => {
@@ -271,12 +281,9 @@ const confirm = () => {
         <div class="map-section" v-if="showAdvanced">
             <canvas 
                 ref="difficultyCanvas" 
-                width="200" 
+                width="400" 
-                height="200"
+                height="400"
                 @mousedown="startDrag"
-                @mousemove="onDrag"
-                @mouseup="stopDrag"
-                @mouseleave="stopDrag"
                 @touchstart.prevent="startDrag"
                 @touchmove.prevent="onDrag"
                 @touchend="stopDrag"
@@ -371,6 +378,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 +387,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>{{ t('simulation.table.size') }}</th>
-                        <th>Density</th>
+                        <th>{{ t('simulation.table.density') }}</th>
-                        <th>Solved (Logic)</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',