1.1.0

package-lock.json

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

src/components/CustomGameModal.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref } from 'vue';
+import { ref, computed } from 'vue';
 import { usePuzzleStore } from '@/stores/puzzle';
 import { useI18n } from '@/composables/useI18n';
 
@@ -8,6 +8,7 @@ const store = usePuzzleStore();
 const { t } = useI18n();
 
 const customSize = ref(10);
+const fillRate = ref(50);
 const errorMsg = ref('');
 
 const snapToStep = (value, step) => {
@@ -19,6 +20,26 @@ const handleSnap = () => {
   customSize.value = snapToStep(Number(customSize.value), 5);
 };
 
+const difficultyLevel = computed(() => {
+  const rate = fillRate.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) {
+    case 'extreme': return '#ff3333';
+    case 'hardest': return '#ff9933';
+    case 'harder': return '#ffff33';
+    case 'easy': return '#33ff33';
+    default: return '#33ff33';
+  }
+});
+
 const confirm = () => {
   const size = parseInt(customSize.value);
   if (isNaN(size) || size < 5 || size > 80) {
@@ -26,7 +47,7 @@ const confirm = () => {
     return;
   }
   
-  store.initCustomGame(size);
+  store.initCustomGame(size, fillRate.value / 100);
   emit('close');
 };
 </script>
@@ -52,6 +73,29 @@ const confirm = () => {
           <span>80</span>
         </div>
       </div>
+
+      <p>{{ t('custom.fillRate') }}</p>
+      <div class="input-group">
+        <div class="range-value">{{ fillRate }}%</div>
+        <input 
+          type="range" 
+          v-model="fillRate" 
+          min="10" 
+          max="90"
+          step="5"
+        />
+        <div class="range-scale">
+          <span>10%</span>
+          <span>90%</span>
+        </div>
+      </div>
+
+      <div class="difficulty-indicator">
+        <span class="label">{{ t('custom.difficulty') }}:</span>
+        <span class="value" :style="{ color: difficultyColor }">
+          {{ t(`difficulty.${difficultyLevel}`) }}
+        </span>
+      </div>
       
       <p v-if="errorMsg" class="error">{{ errorMsg }}</p>
 
@@ -87,6 +131,7 @@ const confirm = () => {
   border: 1px solid var(--accent-cyan);
   box-shadow: 0 0 50px rgba(0, 242, 255, 0.2);
   animation: slideUp 0.3s ease;
+  transition: all 0.3s ease-in-out;
 }
 
 h2 {
@@ -161,6 +206,31 @@ input[type="range"]::-moz-range-thumb {
     font-size: 0.85rem;
 }
 
+.difficulty-indicator {
+    margin: 20px 0;
+    font-size: 1.2rem;
+    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 {
+    color: var(--text-color);
+}
+
+.difficulty-indicator .value {
+    font-weight: bold;
+    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 {
     color: #ff4d4d;
     font-size: 0.9rem;

src/components/WinModal.vue

@@ -88,8 +88,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 +110,25 @@ 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 dist = Math.abs(densityPercent - 50);
+  let difficultyKey = 'easy';
+  let diffColor = '#33ff33';
+  if (dist <= 5) { difficultyKey = 'extreme'; diffColor = '#ff3333'; }
+  else if (dist <= 15) { difficultyKey = 'hardest'; diffColor = '#ff9933'; }
+  else if (dist <= 25) { 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

@@ -29,6 +29,12 @@ const messages = {
     'custom.cancel': 'Anuluj',
     'custom.start': 'Start',
     'custom.sizeError': 'Rozmiar musi być między 5 a 80!',
+    'custom.fillRate': 'Wypełnienie',
+    'custom.difficulty': 'Poziom trudności',
+    'difficulty.easy': 'Łatwy',
+    'difficulty.harder': 'Trudniejszy',
+    'difficulty.hardest': 'Najtrudniejszy',
+    'difficulty.extreme': 'Ekstremalny',
     'win.title': 'GRATULACJE!',
     'win.message': 'Rozwiązałeś zagadkę!',
     'win.time': 'Czas:',
@@ -39,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',
@@ -128,6 +136,12 @@ const messages = {
     'custom.cancel': 'Cancel',
     'custom.start': 'Start',
     'custom.sizeError': 'Size must be between 5 and 80!',
+    'custom.fillRate': 'Fill Rate',
+    'custom.difficulty': 'Difficulty',
+    'difficulty.easy': 'Easy',
+    'difficulty.harder': 'Harder',
+    'difficulty.hardest': 'Hardest',
+    'difficulty.extreme': 'Extreme',
     'win.title': 'CONGRATULATIONS!',
     'win.message': 'You solved the puzzle!',
     'win.time': 'Time:',
@@ -138,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/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,23 +121,29 @@ 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();
   }
 
-  function initCustomGame(customSize) {
+  function initCustomGame(customSize, density = 0.5) {
     stopTimer();
     currentLevelId.value = 'custom';
     size.value = customSize;
     
     // Generate random grid
-    solution.value = generateRandomGrid(customSize);
+    solution.value = generateRandomGrid(customSize, density);
     
     resetGrid();
     isGameWon.value = false;
     hasUsedGuide.value = false;
+    guideUsageCount.value = 0;
+    currentDensity.value = density;
     elapsedTime.value = 0;
     startTimer();
+    saveState();
   }
 
   function resetGrid() {
@@ -242,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
@@ -259,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 || [];
@@ -275,44 +289,9 @@ export const usePuzzleStore = defineStore('puzzle', () => {
     return false;
   }
   
-  function initGame(levelId = 'easy') {
-    // If init called without args and we have save, load it?
-    // User might want to start fresh if clicking buttons.
-    // Let's add explicit 'continue' logic or just auto-load on first run.
-    // For now, let's just stick to explicit init, but maybe load on mount if exists?
-    // The user didn't explicitly ask for "Continue", but "features from HTML".
-    // HTML usually auto-saves and loads.
-    
-    stopTimer();
-    currentLevelId.value = levelId;
-    
-    let puzzle = PUZZLES[levelId];
-    if (!puzzle) {
-        puzzle = PUZZLES['easy'];
-    }
-
-    size.value = puzzle.size;
-    solution.value = puzzle.grid;
-    
-    resetGrid();
-    isGameWon.value = false;
-    elapsedTime.value = 0;
-    startTimer();
-    saveState();
-  }
+  // Duplicate initGame removed
   
-  // Modify initCustomGame similarly
-  function initCustomGame(customSize) {
-    stopTimer();
-    currentLevelId.value = 'custom';
-    size.value = customSize;
-    solution.value = generateRandomGrid(customSize);
-    resetGrid();
-    isGameWon.value = false;
-    elapsedTime.value = 0;
-    startTimer();
-    saveState();
-  }
+  // Duplicate initCustomGame removed
 
   // Duplicate toggleCell/setCell removed
 
@@ -321,6 +300,7 @@ export const usePuzzleStore = defineStore('puzzle', () => {
         resetGrid();
         isGameWon.value = false;
         hasUsedGuide.value = false;
+        guideUsageCount.value = 0;
         elapsedTime.value = 0;
         startTimer();
         saveState();
@@ -332,6 +312,7 @@ export const usePuzzleStore = defineStore('puzzle', () => {
   function markGuideUsed() {
     if (isGameWon.value) return;
     hasUsedGuide.value = true;
+    guideUsageCount.value++;
     saveState();
   }
 
@@ -360,6 +341,8 @@ export const usePuzzleStore = defineStore('puzzle', () => {
     undo,
     closeWinModal,
     hasUsedGuide,
+    guideUsageCount,
+    currentDensity,
     markGuideUsed
   };
 

src/utils/puzzleUtils.js

@@ -40,13 +40,12 @@ export function calculateHints(grid) {
     return { rowHints, colHints };
 }
 
-export function generateRandomGrid(size) {
+export function generateRandomGrid(size, density = 0.5) {
     const grid = [];
     for (let i = 0; i < size; i++) {
         const row = [];
         for (let j = 0; j < size; j++) {
-            // ~25% empty cells
-            row.push(Math.random() > 0.25 ? 1 : 0);
+            row.push(Math.random() < density ? 1 : 0);
         }
         grid.push(row);
     }