1.2.0

package-lock.json

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

package.json

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

src/components/CustomGameModal.vue

@@ -2,6 +2,7 @@
 import { ref, computed } from 'vue';
 import { usePuzzleStore } from '@/stores/puzzle';
 import { useI18n } from '@/composables/useI18n';
+import { calculateDifficulty } from '@/utils/puzzleUtils';
 
 const emit = defineEmits(['close']);
 const store = usePuzzleStore();
@@ -21,13 +22,7 @@ const handleSnap = () => {
 };
 
 const difficultyLevel = computed(() => {
-  const rate = fillRate.value;
+  return calculateDifficulty(fillRate.value / 100);
-  const dist = Math.abs(rate - 50);
-  
-  if (dist <= 5) return 'extreme';
-  if (dist <= 15) return 'hardest';
-  if (dist <= 25) return 'harder';
-  return 'easy';
 });
 
 const difficultyColor = computed(() => {
@@ -213,6 +208,8 @@ input[type="range"]::-moz-range-thumb {
     justify-content: center;
     gap: 10px;
     align-items: center;
+    white-space: nowrap;
+    height: 1.5em; /* Reserve space for one line of text */
 }
 
 .difficulty-indicator .label {
@@ -224,6 +221,9 @@ input[type="range"]::-moz-range-thumb {
     text-transform: uppercase;
     text-shadow: 0 0 10px currentColor;
     transition: color 0.3s ease;
+    display: inline-block;
+    min-width: 120px; /* Reserve space for longest text */
+    text-align: left;
 }
 
 .error {

src/components/WinModal.vue

@@ -7,6 +7,7 @@ import { useTimer } from '@/composables/useTimer';
 import xIcon from '@/assets/brands/x.svg';
 import facebookIcon from '@/assets/brands/facebook.svg';
 import whatsappIcon from '@/assets/brands/whatsapp.svg';
+import { calculateDifficulty } from '@/utils/puzzleUtils';
 
 const store = usePuzzleStore();
 const { t } = useI18n();
@@ -88,8 +89,9 @@ const buildShareCanvas = () => {
   const padding = 28;
   const headerHeight = 64;
   const footerHeight = 28;
+  const infoHeight = 40; // New space for difficulty/guide info
   const width = boardSize + padding * 2;
-  const height = boardSize + padding * 2 + headerHeight + footerHeight;
+  const height = boardSize + padding * 2 + headerHeight + footerHeight + infoHeight;
   const scale = window.devicePixelRatio || 1;
   const canvas = document.createElement('canvas');
   canvas.width = width * scale;
@@ -109,6 +111,24 @@ const buildShareCanvas = () => {
   ctx.fillText(t('app.title'), padding, padding + 10);
   ctx.font = '600 16px "Segoe UI", sans-serif';
   ctx.fillText(`${t('win.time')} ${formattedTime.value}`, padding, padding + 34);
+  
+  // Difficulty & Density Info
+  const densityPercent = Math.round(store.currentDensity * 100);
+  const difficultyKey = calculateDifficulty(store.currentDensity);
+  let diffColor = '#33ff33';
+  if (difficultyKey === 'extreme') diffColor = '#ff3333';
+  else if (difficultyKey === 'hardest') diffColor = '#ff9933';
+  else if (difficultyKey === 'harder') diffColor = '#ffff33';
+  
+  const difficultyText = t(`difficulty.${difficultyKey}`);
+  ctx.font = '600 14px "Segoe UI", sans-serif';
+  
+  // Right aligned difficulty info
+  const diffLabel = `${t('win.difficulty')} ${difficultyText} (${densityPercent}%)`;
+  const diffWidth = ctx.measureText(diffLabel).width;
+  ctx.fillStyle = diffColor;
+  ctx.fillText(diffLabel, width - padding - diffWidth, padding + 34);
+
   const gridX = padding;
   const gridY = padding + headerHeight;
   ctx.fillStyle = 'rgba(255, 255, 255, 0.06)';
@@ -152,6 +172,15 @@ const buildShareCanvas = () => {
       }
     }
   }
+
+  // Guide Usage Info (Dirty Flag)
+  if (store.guideUsageCount > 0) {
+      ctx.fillStyle = '#ff4d4d';
+      ctx.font = '600 14px "Segoe UI", sans-serif';
+      const guideText = t('win.usedGuide', { count: store.guideUsageCount });
+      ctx.fillText(`⚠️ ${guideText}`, padding, height - padding - footerHeight + 10);
+  }
+
   ctx.fillStyle = 'rgba(255, 255, 255, 0.75)';
   ctx.font = '500 14px "Segoe UI", sans-serif';
   ctx.fillText(appUrl, padding, height - padding + 6);

src/composables/useI18n.js

@@ -45,6 +45,8 @@ const messages = {
     'win.shareFacebook': 'Facebook',
     'win.shareWhatsapp': 'WhatsApp',
     'win.shareDownload': 'Pobierz zrzut',
+    'win.difficulty': 'Poziom:',
+    'win.usedGuide': 'Użyto podpowiedzi: {count}',
     'pwa.installTitle': 'Zainstaluj aplikację i graj offline',
     'pwa.installMobile': 'Dodaj do ekranu głównego',
     'pwa.installDesktop': 'Zainstaluj na komputerze',
@@ -150,6 +152,8 @@ const messages = {
     'win.shareFacebook': 'Facebook',
     'win.shareWhatsapp': 'WhatsApp',
     'win.shareDownload': 'Download screenshot',
+    'win.difficulty': 'Difficulty:',
+    'win.usedGuide': 'Guide used: {count}',
     'pwa.installTitle': 'Install the app and play offline',
     'pwa.installMobile': 'Add to home screen',
     'pwa.installDesktop': 'Install on desktop',

src/composables/useSolver.js

@@ -78,6 +78,9 @@ export function useSolver() {
             } else if (type === 'done') {
                 isProcessing.value = false;
                 pause();
+            } else if (type === 'stuck') {
+                isProcessing.value = false;
+                pause();
             } else {
                 isProcessing.value = false;
             }

src/stores/puzzle.js

@@ -64,6 +64,9 @@ export const usePuzzleStore = defineStore('puzzle', () => {
   const playerGrid = ref([]); // 0: empty, 1: filled, 2: cross
   const isGameWon = ref(false);
   const hasUsedGuide = ref(false);
+  const guideUsageCount = ref(0);
+  const currentDifficulty = ref(null); // 'easy', 'medium', 'hard', 'custom' or object { density: 0.5 }
+  const currentDensity = ref(0);
   const size = ref(5);
   const startTime = ref(null);
   const elapsedTime = ref(0);
@@ -118,6 +121,8 @@ export const usePuzzleStore = defineStore('puzzle', () => {
     resetGrid();
     isGameWon.value = false;
     hasUsedGuide.value = false;
+    guideUsageCount.value = 0;
+    currentDensity.value = totalCellsToFill.value / (size.value * size.value);
     elapsedTime.value = 0;
     startTimer();
     saveState();
@@ -134,8 +139,11 @@ export const usePuzzleStore = defineStore('puzzle', () => {
     resetGrid();
     isGameWon.value = false;
     hasUsedGuide.value = false;
+    guideUsageCount.value = 0;
+    currentDensity.value = density;
     elapsedTime.value = 0;
     startTimer();
+    saveState();
   }
 
   function resetGrid() {
@@ -243,6 +251,8 @@ export const usePuzzleStore = defineStore('puzzle', () => {
         playerGrid: playerGrid.value,
         isGameWon: isGameWon.value,
         hasUsedGuide: hasUsedGuide.value,
+        guideUsageCount: guideUsageCount.value,
+        currentDensity: currentDensity.value,
         elapsedTime: elapsedTime.value,
         moves: moves.value,
         history: history.value
@@ -260,6 +270,9 @@ export const usePuzzleStore = defineStore('puzzle', () => {
             solution.value = parsed.solution;
             playerGrid.value = parsed.playerGrid;
             isGameWon.value = parsed.isGameWon;
+            hasUsedGuide.value = parsed.hasUsedGuide || false;
+            guideUsageCount.value = parsed.guideUsageCount || 0;
+            currentDensity.value = parsed.currentDensity || 0;
             elapsedTime.value = parsed.elapsedTime || 0;
             moves.value = parsed.moves || 0;
             history.value = parsed.history || [];
@@ -287,6 +300,7 @@ export const usePuzzleStore = defineStore('puzzle', () => {
         resetGrid();
         isGameWon.value = false;
         hasUsedGuide.value = false;
+        guideUsageCount.value = 0;
         elapsedTime.value = 0;
         startTimer();
         saveState();
@@ -298,6 +312,7 @@ export const usePuzzleStore = defineStore('puzzle', () => {
   function markGuideUsed() {
     if (isGameWon.value) return;
     hasUsedGuide.value = true;
+    guideUsageCount.value++;
     saveState();
   }
 
@@ -326,6 +341,8 @@ export const usePuzzleStore = defineStore('puzzle', () => {
     undo,
     closeWinModal,
     hasUsedGuide,
+    guideUsageCount,
+    currentDensity,
     markGuideUsed
   };
 

src/utils/puzzleUtils.js

@@ -51,3 +51,25 @@ export function generateRandomGrid(size, density = 0.5) {
     }
     return grid;
 }
+
+export function calculateDifficulty(density) {
+    // Shannon Entropy: H(x) = -x*log2(x) - (1-x)*log2(1-x)
+    // Normalized to 0-1 range (since max entropy at 0.5 is 1)
+    
+    // Avoid log(0)
+    if (density <= 0 || density >= 1) return 'easy';
+    
+    const entropy = -density * Math.log2(density) - (1 - density) * Math.log2(1 - density);
+    
+    // Thresholds based on entropy
+    // 0.5 density -> entropy 1.0 (Extreme)
+    // 0.4/0.6 density -> entropy ~0.97 (Extreme)
+    // 0.3/0.7 density -> entropy ~0.88 (Hardest)
+    // 0.2/0.8 density -> entropy ~0.72 (Harder)
+    // <0.2/>0.8 density -> entropy <0.72 (Easy)
+
+    if (entropy >= 0.96) return 'extreme'; // approx 38% - 62%
+    if (entropy >= 0.85) return 'hardest'; // approx 28% - 38% & 62% - 72%
+    if (entropy >= 0.65) return 'harder';  // approx 17% - 28% & 72% - 83%
+    return 'easy';
+}

src/workers/solverWorker.js

@@ -5,7 +5,7 @@ const messages = {
     'worker.solved': 'Rozwiązane!',
     'worker.logicRow': 'Logika: Wiersz {row}, Kolumna {col} -> {state}',
     'worker.logicCol': 'Logika: Kolumna {col}, Wiersz {row} -> {state}',
-    'worker.guess': 'Zgadywanie: Wiersz {row}, Kolumna {col}',
+    'worker.stuck': 'Brak logicznego ruchu. Spróbuj zgadnąć lub cofnąć.',
     'worker.done': 'Koniec!',
     'worker.state.filled': 'Pełne',
     'worker.state.empty': 'Puste'
@@ -14,7 +14,7 @@ const messages = {
     'worker.solved': 'Solved!',
     'worker.logicRow': 'Logic: Row {row}, Column {col} -> {state}',
     'worker.logicCol': 'Logic: Column {col}, Row {row} -> {state}',
-    'worker.guess': 'Guessing: Row {row}, Column {col}',
+    'worker.stuck': 'No logical move found. Try guessing or undoing.',
     'worker.done': 'Done!',
     'worker.state.filled': 'Filled',
     'worker.state.empty': 'Empty'
@@ -236,29 +236,9 @@ const handleStep = (playerGrid, solution, locale) => {
     }
   }
 
-  for (let r = 0; r < size; r++) {
+  // Check for guess logic - we want to avoid this unless strictly necessary
-    for (let c = 0; c < size; c++) {
+  // If no logic move found, return 'stuck' instead of cheating
-      const current = playerGrid[r][c];
+  return { type: 'stuck', statusText: t(locale, 'worker.stuck') };
-      const target = solution[r][c];
-      let isCorrect = false;
-      if (target === 1 && current === 1) isCorrect = true;
-      if (target === 0 && current === 2) isCorrect = true;
-      if (target === 0 && current === 0) isCorrect = false;
-      if (target === 1 && current === 0) isCorrect = false;
-      if (!isCorrect) {
-        const newState = target === 1 ? 1 : 2;
-        return {
-          type: 'move',
-          r,
-          c,
-          state: newState,
-          statusText: t(locale, 'worker.guess', { row: r + 1, col: c + 1 })
-        };
-      }
-    }
-  }
-
-  return { type: 'done', statusText: t(locale, 'worker.done') };
 };
 
 self.onmessage = (event) => {