1.6.4

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "vue-nonograms-solid",
-  "version": "1.0.7",
+  "version": "1.6.4",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "vue-nonograms-solid",
-      "version": "1.0.7",
+      "version": "1.6.4",
       "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.6.4",
   "type": "module",
   "scripts": {
     "dev": "vite",

src/components/CustomGameModal.vue

@@ -1,7 +1,8 @@
 <script setup>
-import { ref, computed } from 'vue';
+import { ref, computed, onMounted, watch } from 'vue';
 import { usePuzzleStore } from '@/stores/puzzle';
 import { useI18n } from '@/composables/useI18n';
+import { calculateDifficulty } from '@/utils/puzzleUtils';
 
 const emit = defineEmits(['close']);
 const store = usePuzzleStore();
@@ -11,6 +12,26 @@ const customSize = ref(10);
 const fillRate = ref(50);
 const errorMsg = ref('');
 
+onMounted(() => {
+  const savedSize = localStorage.getItem('nonograms_custom_size');
+  if (savedSize && !isNaN(savedSize)) {
+    customSize.value = Math.max(5, Math.min(80, Number(savedSize)));
+  }
+  
+  const savedFillRate = localStorage.getItem('nonograms_custom_fill_rate');
+  if (savedFillRate && !isNaN(savedFillRate)) {
+    fillRate.value = Math.max(10, Math.min(90, Number(savedFillRate)));
+  }
+});
+
+watch(customSize, (newVal) => {
+  localStorage.setItem('nonograms_custom_size', newVal);
+});
+
+watch(fillRate, (newVal) => {
+  localStorage.setItem('nonograms_custom_fill_rate', newVal);
+});
+
 const snapToStep = (value, step) => {
   const rounded = Math.round(value / step) * step;
   return Math.max(5, Math.min(80, rounded));
@@ -20,18 +41,12 @@ const handleSnap = () => {
   customSize.value = snapToStep(Number(customSize.value), 5);
 };
 
-const difficultyLevel = computed(() => {
+const difficultyInfo = computed(() => {
-  const rate = fillRate.value;
+  return calculateDifficulty(fillRate.value / 100, customSize.value);
-  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(() => {
-  switch(difficultyLevel.value) {
+  switch(difficultyInfo.value.level) {
     case 'extreme': return '#ff3333';
     case 'hardest': return '#ff9933';
     case 'harder': return '#ffff33';
@@ -82,7 +97,7 @@ const confirm = () => {
           v-model="fillRate" 
           min="10" 
           max="90"
-          step="5"
+          step="1"
         />
         <div class="range-scale">
           <span>10%</span>
@@ -91,10 +106,9 @@ const confirm = () => {
       </div>
 
       <div class="difficulty-indicator">
-        <span class="label">{{ t('custom.difficulty') }}:</span>
+        <div class="label">{{ t('custom.difficulty') }}</div>
-        <span class="value" :style="{ color: difficultyColor }">
+        <div class="level" :style="{ color: difficultyColor }">{{ t(`difficulty.${difficultyInfo.level}`) }}</div>
-          {{ t(`difficulty.${difficultyLevel}`) }}
+        <div class="percentage" :style="{ color: difficultyColor }">{{ difficultyInfo.value }}%</div>
-        </span>
       </div>
       
       <p v-if="errorMsg" class="error">{{ errorMsg }}</p>
@@ -204,15 +218,35 @@ input[type="range"]::-moz-range-thumb {
     justify-content: space-between;
     color: var(--text-muted);
     font-size: 0.85rem;
+.difficulty-indicator {
+    margin: 20px 0 30px 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 5px;
 }
 
-.difficulty-indicator {
+.label {
-    margin: 20px 0;
+    font-size: 1rem;
-    font-size: 1.2rem;
+    color: var(--text-muted);
-    display: flex;
+}
+
+.level {
+    font-size: 1.4rem;
+    font-weight: bold;
+    text-transform: uppercase;
+    line-height: 1.2;
+}
+
+.percentage {
+    font-size: 1rem;
+    font-weight: bold;
+}   display: flex;
     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 +258,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

@@ -4,9 +4,8 @@ import { Fireworks } from 'fireworks-js';
 import { usePuzzleStore } from '@/stores/puzzle';
 import { useI18n } from '@/composables/useI18n';
 import { useTimer } from '@/composables/useTimer';
-import xIcon from '@/assets/brands/x.svg';
+import { Download, FileCode } from 'lucide-vue-next';
-import facebookIcon from '@/assets/brands/facebook.svg';
+import { calculateDifficulty } from '@/utils/puzzleUtils';
-import whatsappIcon from '@/assets/brands/whatsapp.svg';
 
 const store = usePuzzleStore();
 const { t } = useI18n();
@@ -42,30 +41,43 @@ const playFanfare = async () => {
     }
   }
   masterGain = audioContext.createGain();
-  masterGain.gain.value = 0.18;
+  masterGain.gain.value = 0.25; // Slightly louder but softer tone
   masterGain.connect(audioContext.destination);
-  const notes = [
+
-    { time: 0.0, dur: 0.18, freqs: [523.25, 659.25, 783.99] },
-    { time: 0.2, dur: 0.18, freqs: [587.33, 740.0, 880.0] },
-    { time: 0.4, dur: 0.22, freqs: [659.25, 830.61, 987.77] },
-    { time: 0.7, dur: 0.35, freqs: [698.46, 880.0, 1046.5] }
-  ];
   const now = audioContext.currentTime;
-  notes.forEach(({ time, dur, freqs }) => {
+
-    freqs.forEach((freq) => {
+  const playNote = (freq, startTime, duration) => {
     const osc = audioContext.createOscillator();
     const gain = audioContext.createGain();
-      osc.type = 'triangle';
+    
+    // Mix of sine and triangle for a bell-like quality
+    osc.type = 'sine'; 
     osc.frequency.value = freq;
-      gain.gain.setValueAtTime(0.0001, now + time);
+
-      gain.gain.linearRampToValueAtTime(0.8, now + time + 0.02);
+    // Envelope for elegant bell/chime sound
-      gain.gain.exponentialRampToValueAtTime(0.0001, now + time + dur);
+    gain.gain.setValueAtTime(0, startTime);
+    gain.gain.linearRampToValueAtTime(0.4, startTime + 0.05); // Soft attack
+    gain.gain.exponentialRampToValueAtTime(0.01, startTime + duration); // Long release
+
     osc.connect(gain);
     gain.connect(masterGain);
-      osc.start(now + time);
+
-      osc.stop(now + time + dur + 0.05);
+    osc.start(startTime);
-    });
+    osc.stop(startTime + duration + 0.1);
-  });
+  };
+
+  // C Major 7 Arpeggio sequence (C5, E5, G5, B5, C6) - Elegant & Uplifting
+  const sequence = [
+    { freq: 523.25, time: 0.0, dur: 0.8 }, // C5
+    { freq: 659.25, time: 0.1, dur: 0.8 }, // E5
+    { freq: 783.99, time: 0.2, dur: 0.8 }, // G5
+    { freq: 987.77, time: 0.3, dur: 0.8 }, // B5 (Maj7)
+    { freq: 1046.50, time: 0.4, dur: 2.0 }, // C6 (High C resolve)
+    // Add a bass root note at the end for fullness
+    { freq: 523.25, time: 0.4, dur: 2.0 }  // C5
+  ];
+
+  sequence.forEach(note => playNote(note.freq, now + note.time, note.dur));
 };
 
 const triggerVibration = () => {
@@ -88,8 +100,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 +122,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,12 +183,144 @@ const buildShareCanvas = () => {
       }
     }
   }
+
+  // Guide Usage Info (Dirty Flag)
+  if (store.guideUsageCount > 0) {
+      ctx.fillStyle = '#ff4d4d';
+      ctx.font = '600 14px "Segoe UI", sans-serif';
+      
+      const totalCells = store.size * store.size;
+      const percent = Math.min(100, Math.round((store.guideUsageCount / totalCells) * 100));
+      const guideText = t('win.usedGuide', { count: store.guideUsageCount, percent });
+      
+      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);
   return canvas;
 };
 
+const buildShareSVG = () => {
+  const grid = store.playerGrid;
+  if (!grid || !grid.length) return null;
+  
+  const appUrl = 'https://nonograms.7u.pl/';
+  const size = store.size;
+  const maxBoard = 640;
+  const cellSize = Math.max(8, Math.floor(maxBoard / size));
+  const boardSize = cellSize * size;
+  const padding = 28;
+  const headerHeight = 64;
+  const footerHeight = 28;
+  const infoHeight = 40;
+  const width = boardSize + padding * 2;
+  const height = boardSize + padding * 2 + headerHeight + footerHeight + infoHeight;
+
+  // Colors
+  const bgGradientStart = '#1b2a4a';
+  const bgGradientEnd = '#0a1324';
+  const overlayColor = 'rgba(0, 0, 0, 0.35)';
+  const textColor = '#e8fbff';
+  const gridColor = 'rgba(255, 255, 255, 0.06)';
+  const gridLineColor = 'rgba(255, 255, 255, 0.12)';
+  const filledColor = '#00f2fe';
+  const crossColor = 'rgba(255, 255, 255, 0.5)';
+  const urlColor = 'rgba(255, 255, 255, 0.75)';
+
+  // Difficulty Logic
+  const densityPercent = Math.round(store.currentDensity * 100);
+  const diffInfo = calculateDifficulty(store.currentDensity, store.size);
+  const difficultyKey = diffInfo.level;
+  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}`);
+  const diffLabel = `${t('win.difficulty')} ${difficultyText} (${densityPercent}%)`;
+
+  let svgContent = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${width} ${height}" width="${width}" height="${height}">`;
+  
+  // Background
+  svgContent += `
+    <defs>
+      <linearGradient id="bg" x1="0%" y1="0%" x2="100%" y2="100%">
+        <stop offset="0%" stop-color="${bgGradientStart}"/>
+        <stop offset="100%" stop-color="${bgGradientEnd}"/>
+      </linearGradient>
+    </defs>
+    <rect width="100%" height="100%" fill="url(#bg)"/>
+    <rect x="12" y="12" width="${width - 24}" height="${height - 24}" fill="${overlayColor}"/>
+  `;
+
+  // Text: Title & Time
+  svgContent += `
+    <text x="${padding}" y="${padding + 28}" font-family="Segoe UI, sans-serif" font-weight="700" font-size="26" fill="${textColor}">${t('app.title')}</text>
+    <text x="${padding}" y="${padding + 56}" font-family="Segoe UI, sans-serif" font-weight="600" font-size="16" fill="${textColor}">${t('win.time')} ${formattedTime.value}</text>
+  `;
+
+  // Text: Difficulty (Right Aligned - manual approx or end anchor)
+  svgContent += `
+    <text x="${width - padding}" y="${padding + 56}" font-family="Segoe UI, sans-serif" font-weight="600" font-size="14" fill="${diffColor}" text-anchor="end">${diffLabel}</text>
+  `;
+
+  const gridX = padding;
+  const gridY = padding + headerHeight;
+
+  // Grid Background
+  svgContent += `<rect x="${gridX}" y="${gridY}" width="${boardSize}" height="${boardSize}" 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"/>`;
+    // Horizontal
+    gridLines += `<line x1="${gridX}" y1="${gridY + pos}" x2="${gridX + boardSize}" y2="${gridY + pos}" stroke="${gridLineColor}" stroke-width="1"/>`;
+  }
+  svgContent += gridLines;
+
+  // Cells
+  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++) {
+      const state = grid[r]?.[c];
+      const cx = gridX + c * cellSize;
+      const cy = gridY + r * cellSize;
+      
+      if (state === 1) { // Filled
+        cells += `<rect x="${cx + 1}" y="${cy + 1}" width="${cellSize - 2}" height="${cellSize - 2}" fill="${filledColor}"/>`;
+      } else if (state === 2) { // Cross
+        const d = cellSize * 0.6;
+        const off = cellSize * 0.2;
+        cells += `
+          <path d="M${cx + off} ${cy + off} L${cx + off + d} ${cy + off + d} M${cx + off + d} ${cy + off} L${cx + off} ${cy + off + d}" 
+          stroke="${crossColor}" stroke-width="${lineWidth}" stroke-linecap="round"/>
+        `;
+      }
+    }
+  }
+  svgContent += cells;
+
+  // Guide Usage
+  if (store.guideUsageCount > 0) {
+      const totalCells = store.size * store.size;
+      const percent = Math.min(100, Math.round((store.guideUsageCount / totalCells) * 100));
+      const guideText = t('win.usedGuide', { count: store.guideUsageCount, percent });
+      svgContent += `<text x="${padding}" y="${height - padding - footerHeight + 10}" font-family="Segoe UI, sans-serif" font-weight="600" font-size="14" fill="#ff4d4d">⚠️ ${guideText}</text>`;
+  }
+
+  // URL
+  svgContent += `<text x="${padding}" y="${height - padding + 6}" font-family="Segoe UI, sans-serif" font-weight="500" font-size="14" fill="${urlColor}">${appUrl}</text>`;
+
+  svgContent += '</svg>';
+  return svgContent;
+};
+
 const canvasToBlob = (canvas) => new Promise((resolve) => canvas.toBlob((blob) => resolve(blob), 'image/png'));
 
 const createShareBlob = async () => {
@@ -166,6 +329,20 @@ const createShareBlob = async () => {
   return canvasToBlob(canvas);
 };
 
+const downloadShareSVG = () => {
+  const svgString = buildShareSVG();
+  if (!svgString) return;
+  const blob = new Blob([svgString], { type: 'image/svg+xml' });
+  const url = URL.createObjectURL(blob);
+  const link = document.createElement('a');
+  link.href = url;
+  link.download = `nonogram-${store.size}x${store.size}.svg`;
+  document.body.appendChild(link);
+  link.click();
+  link.remove();
+  URL.revokeObjectURL(url);
+};
+
 const downloadShareImage = async () => {
   const blob = await createShareBlob();
   if (!blob) return;
@@ -183,7 +360,7 @@ const buildShareUrl = (target, text, url) => {
   const encodedText = encodeURIComponent(text);
   const encodedUrl = encodeURIComponent(url);
   if (target === 'x') {
-    return `https://twitter.com/intent/tweet?text=${encodedText}&url=${encodedUrl}`;
+    return `https://x.com/intent/tweet?text=${encodedText}&url=${encodedUrl}`;
   }
   if (target === 'facebook') {
     return `https://www.facebook.com/sharer/sharer.php?u=${encodedUrl}&quote=${encodedText}`;
@@ -197,13 +374,18 @@ const buildShareUrl = (target, text, url) => {
 const shareTo = async (target) => {
   if (shareInProgress.value) return;
   shareInProgress.value = true;
-  try {
+  
-    const blob = await createShareBlob();
-    if (!blob) return;
-    const file = new File([blob], `nonogram-${store.size}x${store.size}.png`, { type: 'image/png' });
   const text = shareText.value;
   const url = window.location.href;
-    if (navigator.share && navigator.canShare && navigator.canShare({ files: [file] })) {
+  const shareUrl = buildShareUrl(target, text, url);
+
+  try {
+    // Try native share first if available (supports images)
+    if (navigator.share && navigator.canShare) {
+      const blob = await createShareBlob();
+      if (blob) {
+        const file = new File([blob], `nonogram-${store.size}x${store.size}.png`, { type: 'image/png' });
+        if (navigator.canShare({ files: [file] })) {
           await navigator.share({
             files: [file],
             text,
@@ -212,14 +394,28 @@ const shareTo = async (target) => {
           });
           return;
         }
-    await downloadShareImage();
-    const shareUrl = buildShareUrl(target, text, url);
-    if (shareUrl) {
-      window.open(shareUrl, '_blank', 'noopener');
       }
+    }
+  } catch (error) {
+    if (error.name === 'AbortError') {
+      return; // User cancelled native share, do nothing
+    }
+    // Other errors -> fall through to fallback
   } finally {
     shareInProgress.value = false;
   }
+
+  // Fallback: Direct Link + Download
+  // Open window immediately if possible (though we awaited above, so it might be blocked, 
+  // but we can't do much about it if we want to try native share first).
+  // Ideally, for Desktop, navigator.share is undefined so we skip the await above.
+  
+  if (shareUrl) {
+    window.open(shareUrl, '_blank', 'noopener');
+  }
+  
+  // Trigger download as "screenshot support"
+  downloadShareImage();
 };
 
 onMounted(() => {
@@ -279,19 +475,27 @@ onUnmounted(() => {
       <div class="share">
         <div class="share-title">{{ t('win.shareTitle') }}</div>
         <div class="share-buttons">
+          <!-- X (Twitter) -->
           <button class="btn-neon secondary share-btn" :disabled="shareInProgress" :aria-label="t('win.shareX')" @click="shareTo('x')">
-            <img :src="xIcon" alt="" class="share-icon" />
+            <svg viewBox="0 0 24 24" fill="currentColor" class="share-icon"><path d="M18.901 3H22l-7.21 8.26L23 21h-6.66L11.13 14.76 5.66 21H2.56l7.73-8.83L1 3h6.8l4.63 5.56L18.9 3h.001zm-1.2 15.9h1.77L6.44 5.1H4.44l13.26 13.8z"/></svg>
           </button>
+          <!-- Facebook -->
           <button class="btn-neon secondary share-btn" :disabled="shareInProgress" :aria-label="t('win.shareFacebook')" @click="shareTo('facebook')">
-            <img :src="facebookIcon" alt="" class="share-icon" />
+            <svg viewBox="0 0 24 24" fill="currentColor" class="share-icon"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.791-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg>
           </button>
+          <!-- WhatsApp -->
           <button class="btn-neon secondary share-btn" :disabled="shareInProgress" :aria-label="t('win.shareWhatsapp')" @click="shareTo('whatsapp')">
-            <img :src="whatsappIcon" alt="" class="share-icon" />
+            <svg viewBox="0 0 24 24" fill="currentColor" class="share-icon"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.008-.57-.008-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z"/></svg>
+          </button>
+          <!-- Download Screenshot (Compact) -->
+          <button class="btn-neon secondary share-btn" :disabled="shareInProgress" :aria-label="t('win.shareDownload')" @click="downloadShareImage">
+            <Download :size="20" />
+          </button>
+          <!-- Download SVG (Compact) -->
+          <button class="btn-neon secondary share-btn" :disabled="shareInProgress" aria-label="Download SVG" @click="downloadShareSVG">
+            <FileCode :size="20" />
           </button>
         </div>
-        <button class="btn-neon secondary share-download" :disabled="shareInProgress" @click="downloadShareImage">
-          {{ t('win.shareDownload') }}
-        </button>
       </div>
 
       <div class="actions">

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': 'Podpowiedzi: {percent}% ({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': 'Hints: {percent}% ({count})',
     'pwa.installTitle': 'Install the app and play offline',
     'pwa.installMobile': 'Add to home screen',
     'pwa.installDesktop': 'Install on desktop',
@@ -291,9 +295,17 @@ const messages = {
     'custom.cancel': '取消',
     'custom.start': '开始',
     'custom.sizeError': '尺寸必须在 5 到 80 之间！',
+    'custom.fillRate': '填充率',
+    'custom.difficulty': '难度',
+    'difficulty.easy': '简单',
+    'difficulty.harder': '较难',
+    'difficulty.hardest': '最难',
+    'difficulty.extreme': '极限',
     'win.title': '恭喜！',
     'win.message': '你解开了谜题！',
     'win.time': '时间:',
+    'win.difficulty': '难度:',
+    'win.usedGuide': '使用指南: {count}',
     'win.playAgain': '再玩一次',
     'win.shareTitle': '分享你的结果',
     'win.shareText': '我在 {time} 内解开了 {size}x{size} 的数织！',
@@ -491,9 +503,17 @@ const messages = {
     'custom.cancel': 'Cancelar',
     'custom.start': 'Empezar',
     'custom.sizeError': '¡El tamaño debe estar entre 5 y 80!',
+    'custom.fillRate': 'Relleno',
+    'custom.difficulty': 'Dificultad',
+    'difficulty.easy': 'Fácil',
+    'difficulty.harder': 'Más difícil',
+    'difficulty.hardest': 'El más difícil',
+    'difficulty.extreme': 'Extremo',
     'win.title': '¡FELICIDADES!',
     'win.message': '¡Has resuelto el rompecabezas!',
     'win.time': 'Tiempo:',
+    'win.difficulty': 'Dificultad:',
+    'win.usedGuide': 'Guía usada: {count}',
     'win.playAgain': 'Jugar de nuevo',
     'win.shareTitle': 'Comparte tu resultado',
     'win.shareText': '¡Resolví un nonograma de {size}x{size} en {time}!',
@@ -557,9 +577,17 @@ const messages = {
     'custom.cancel': 'Annuler',
     'custom.start': 'Démarrer',
     'custom.sizeError': 'La taille doit être entre 5 et 80 !',
+    'custom.fillRate': 'Remplissage',
+    'custom.difficulty': 'Difficulté',
+    'difficulty.easy': 'Facile',
+    'difficulty.harder': 'Plus difficile',
+    'difficulty.hardest': 'Le plus difficile',
+    'difficulty.extreme': 'Extrême',
     'win.title': 'FÉLICITATIONS !',
     'win.message': 'Vous avez résolu le puzzle !',
     'win.time': 'Temps:',
+    'win.difficulty': 'Difficulté :',
+    'win.usedGuide': 'Guide utilisé : {count}',
     'win.playAgain': 'Rejouer',
     'win.shareTitle': 'Partagez votre résultat',
     'win.shareText': 'J’ai résolu un nonogramme {size}x{size} en {time} !',
@@ -623,9 +651,17 @@ const messages = {
     'custom.cancel': 'إلغاء',
     'custom.start': 'ابدأ',
     'custom.sizeError': 'يجب أن يكون الحجم بين 5 و80!',
+    'custom.fillRate': 'معدل الملء',
+    'custom.difficulty': 'الصعوبة',
+    'difficulty.easy': 'سهل',
+    'difficulty.harder': 'أصعب',
+    'difficulty.hardest': 'الأصعب',
+    'difficulty.extreme': 'أقصى',
     'win.title': 'تهانينا!',
     'win.message': 'لقد حللت اللغز!',
     'win.time': 'الوقت:',
+    'win.difficulty': 'الصعوبة:',
+    'win.usedGuide': 'تم استخدام الدليل: {count}',
     'win.playAgain': 'العب مرة أخرى',
     'win.shareTitle': 'شارك نتيجتك',
     'win.shareText': 'حللت نونوغرام {size}x{size} في {time}!',
@@ -755,9 +791,17 @@ const messages = {
     'custom.cancel': 'Отмена',
     'custom.start': 'Старт',
     'custom.sizeError': 'Размер должен быть от 5 до 80!',
+    'custom.fillRate': 'Заполнение',
+    'custom.difficulty': 'Сложность',
+    'difficulty.easy': 'Легкий',
+    'difficulty.harder': 'Сложный',
+    'difficulty.hardest': 'Очень сложный',
+    'difficulty.extreme': 'Экстремальный',
     'win.title': 'ПОЗДРАВЛЯЕМ!',
     'win.message': 'Вы решили головоломку!',
     'win.time': 'Время:',
+    'win.difficulty': 'Сложность:',
+    'win.usedGuide': 'Подсказок использовано: {count}',
     'win.playAgain': 'Сыграть снова',
     'win.shareTitle': 'Поделитесь результатом',
     'win.shareText': 'Я решил(а) нонограмму {size}x{size} за {time}!',
@@ -954,9 +998,17 @@ const messages = {
     'custom.cancel': 'Abbrechen',
     'custom.start': 'Start',
     'custom.sizeError': 'Die Größe muss zwischen 5 und 80 liegen!',
+    'custom.fillRate': 'Füllrate',
+    'custom.difficulty': 'Schwierigkeit',
+    'difficulty.easy': 'Einfach',
+    'difficulty.harder': 'Schwerer',
+    'difficulty.hardest': 'Am schwersten',
+    'difficulty.extreme': 'Extrem',
     'win.title': 'HERZLICHEN GLÜCKWUNSCH!',
     'win.message': 'Sie haben das Rätsel gelöst!',
     'win.time': 'Zeit:',
+    'win.difficulty': 'Schwierigkeit:',
+    'win.usedGuide': 'Hilfe benutzt: {count}',
     'win.playAgain': 'Erneut spielen',
     'win.shareTitle': 'Teilen Sie Ihr Ergebnis',
     'win.shareText': 'Ich habe ein {size}x{size} Nonogramm in {time} gelöst!',

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,37 @@ export function generateRandomGrid(size, density = 0.5) {
     }
     return grid;
 }
+
+export function calculateDifficulty(density, size = 10) {
+    // 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 { level: 'easy', value: 0 };
+    
+    const entropy = -density * Math.log2(density) - (1 - density) * Math.log2(1 - density);
+    
+    // Difficulty score combines entropy (complexity) and size (scale)
+    // We use sqrt(size) to dampen the effect of very large grids, 
+    // ensuring that density still plays a major role.
+    // Normalized against max size (80)
+    const sizeFactor = Math.sqrt(size / 80);
+    const score = entropy * sizeFactor * 100;
+    const value = Math.round(score);
+    
+    // Thresholds
+    let level = 'easy';
+    if (value >= 80) level = 'extreme';
+    else if (value >= 60) level = 'hardest';
+    else if (value >= 40) level = 'harder';
+    else if (value >= 20) level = 'medium'; // Using 'medium' key if available, or we need to add it?
+    // Wait, useI18n only has: easy, harder, hardest, extreme.
+    // Let's stick to those keys but adjust ranges.
+    
+    if (value >= 75) level = 'extreme';
+    else if (value >= 50) level = 'hardest';
+    else if (value >= 25) level = 'harder';
+    else level = 'easy';
+
+    return { level, value };
+}

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'
@@ -91,16 +91,34 @@ const solveLineLogic = (lineState, hints) => {
       return result;
     }
     const len = hints[hintIndex];
+    // maxStart logic: we need enough space for this block (len) + subsequent blocks/gaps (suffixMin[hintIndex+1])
+    // suffixMin[hintIndex] = len + (m - hintIndex - 1) + suffixMin[hintIndex+1]
+    // Actually suffixMin[hintIndex] already includes everything needed from here to end.
+    // So if we place block at start, end is start + len.
+    // Total space needed is suffixMin[hintIndex].
+    // So start can go up to n - suffixMin[hintIndex].
     const maxStart = n - suffixMin[hintIndex];
+    
     for (let start = pos; start <= maxStart; start++) {
-      if (hasFilled(pos, start)) continue;
+      if (hasFilled(pos, start)) continue; // Must be empty before this block
-      if (hasCross(start, start + len)) continue;
+      if (hasCross(start, start + len)) continue; // Block space must be free of crosses
-      if (start + len < n && lineState[start + len] === 1) continue;
+      
-      const nextPos = start + len < n ? start + len + 1 : start + len;
+      // If not the last block, we need a gap after
+      if (hintIndex < m - 1) {
+          if (start + len < n && lineState[start + len] === 1) continue; // Gap must not be filled
+          // We can assume gap is at start + len. Next block starts at least at start + len + 1
+          const nextPos = start + len + 1;
           if (canPlaceSuffix(nextPos, hintIndex + 1)) {
             memoSuffix[pos][hintIndex] = true;
             return true;
           }
+      } else {
+          // Last block
+          // Check if we can fill the rest with empty
+          if (hasFilled(start + len, n)) continue;
+          memoSuffix[pos][hintIndex] = true;
+          return true;
+      }
     }
     memoSuffix[pos][hintIndex] = false;
     return false;
@@ -115,17 +133,43 @@ const solveLineLogic = (lineState, hints) => {
       return result;
     }
     const len = hints[hintCount - 1];
-    const maxStart = pos - len;
+    
+    // Logic for prefix:
+    // We are placing the (hintCount-1)-th block ending at 'start + len' <= pos.
+    // So 'start' <= pos - len.
+    // But we also need to ensure there is space for previous blocks.
+    // However, the simple constraint is just iterating backwards.
+    
+    // maxStart: if this is the only block, maxStart = pos - len.
+    // If there are previous blocks, we need a gap before this block.
+    // So previous block ended at start - 1.
+    // Actually the recursive call will handle space check.
+    // But for the gap check:
+    // If we place block at 'start', we need lineState[start-1] != 1 (if start > 0).
+    // And we recursively check canPlacePrefix(start-1, count-1).
+    // But if start=0 and count > 1, impossible.
+    
+    const maxStart = pos - len; // Simplified, loop condition handles rest
+    
     for (let start = maxStart; start >= 0; start--) {
       if (hasCross(start, start + len)) continue;
-      if (start + len < pos && lineState[start + len] === 1) continue;
+      if (hasFilled(start + len, pos)) continue; // Must be empty after this block up to pos
-      if (hasFilled(start + len, pos)) continue;
+      
-      if (start > 0 && lineState[start - 1] === 1) continue;
+      // Check gap before
-      const prevPos = start > 0 ? start - 1 : 0;
+      if (hintCount > 1) {
+          if (start === 0) continue; // No space for previous blocks
+          if (lineState[start - 1] === 1) continue; // Gap must not be filled
+          const prevPos = start - 1;
           if (canPlacePrefix(prevPos, hintCount - 1)) {
             memoPrefix[pos][hintCount] = true;
             return true;
           }
+      } else {
+          // First block
+          if (hasFilled(0, start)) continue; // Before first block must be empty
+          memoPrefix[pos][hintCount] = true;
+          return true;
+      }
     }
     memoPrefix[pos][hintCount] = false;
     return false;
@@ -136,7 +180,14 @@ const solveLineLogic = (lineState, hints) => {
     const len = hints[i];
     const starts = [];
     for (let start = 0; start <= n - len; start++) {
-      if (!canPlacePrefix(start, i)) continue;
+      if (i === 0) {
+        if (!canPlacePrefix(start, 0)) continue;
+      } else {
+        if (start === 0) continue;
+        if (lineState[start - 1] === 1) continue;
+        if (!canPlacePrefix(start - 1, i)) continue;
+      }
+
       if (hasCross(start, start + len)) continue;
       if (start + len < n && lineState[start + len] === 1) continue;
       const nextPos = start + len < n ? start + len + 1 : start + len;
@@ -236,29 +287,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) => {