1.7.0

package-lock.json

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

package.json

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

src/components/CustomGameModal.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed, onMounted, watch } from 'vue';
+import { ref, computed, onMounted, watch, nextTick } from 'vue';
 import { usePuzzleStore } from '@/stores/puzzle';
 import { useI18n } from '@/composables/useI18n';
 import { calculateDifficulty } from '@/utils/puzzleUtils';
@@ -11,6 +11,153 @@ const { t } = useI18n();
 const customSize = ref(10);
 const fillRate = ref(50);
 const errorMsg = ref('');
+const difficultyCanvas = ref(null);
+const isDragging = ref(false);
+
+const drawMap = () => {
+  const canvas = difficultyCanvas.value;
+  if (!canvas) return;
+  const ctx = canvas.getContext('2d');
+  const width = canvas.width;
+  const height = canvas.height;
+
+  // 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;
+
+  // 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%
+      
+      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
+    }
+  }
+  ctx.putImageData(imgData, 0, 0);
+
+  // Draw current position
+  // Map current fillRate/size to x,y
+  // Fill: 10..90. Size: 5..80.
+  const currentFill = Math.max(10, Math.min(90, fillRate.value));
+  const currentSize = Math.max(5, Math.min(80, customSize.value));
+  
+  const posX = ((currentFill - 10) / 80) * width;
+  const posY = (1 - (currentSize - 5) / 75) * height;
+
+  // Draw Crosshair/Circle
+  ctx.beginPath();
+  ctx.arc(posX, posY, 6, 0, Math.PI * 2);
+  ctx.fillStyle = '#fff';
+  ctx.fill();
+  ctx.lineWidth = 2;
+  ctx.strokeStyle = '#000';
+  ctx.stroke();
+};
+
+const hslToRgb = (h, s, l) => {
+    let r, g, b;
+    if (s === 0) {
+        r = g = b = l; // achromatic
+    } else {
+        const hue2rgb = (p, q, t) => {
+            if (t < 0) t += 1;
+            if (t > 1) t -= 1;
+            if (t < 1 / 6) return p + (q - p) * 6 * t;
+            if (t < 1 / 2) return q;
+            if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
+            return p;
+        };
+        const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+        const p = 2 * l - q;
+        r = hue2rgb(p, q, h + 1 / 3);
+        g = hue2rgb(p, q, h);
+        b = hue2rgb(p, q, h - 1 / 3);
+    }
+    return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
+};
+
+const updateFromEvent = (e) => {
+    const canvas = difficultyCanvas.value;
+    if (!canvas) return;
+    const rect = canvas.getBoundingClientRect();
+    
+    // Handle Touch or Mouse
+    const clientX = e.touches ? e.touches[0].clientX : e.clientX;
+    const clientY = e.touches ? e.touches[0].clientY : e.clientY;
+    
+    let x = clientX - rect.left;
+    let y = clientY - rect.top;
+    
+    // Clamp
+    x = Math.max(0, Math.min(rect.width, x));
+    y = Math.max(0, Math.min(rect.height, y));
+    
+    // Reverse Map
+    // x / width -> fillRate (10..90)
+    // 1 - y / height -> size (5..80)
+    
+    const normalizedX = x / rect.width;
+    const normalizedY = 1 - (y / rect.height);
+    
+    const newFill = 10 + normalizedX * 80;
+    const newSize = 5 + normalizedY * 75;
+    
+    fillRate.value = Math.round(newFill);
+    customSize.value = Math.round(newSize);
+};
+
+const startDrag = (e) => {
+    isDragging.value = true;
+    updateFromEvent(e);
+};
+
+const onDrag = (e) => {
+    if (!isDragging.value) return;
+    updateFromEvent(e);
+};
+
+const stopDrag = () => {
+    isDragging.value = false;
+};
+
+const showAdvanced = ref(false);
+
+const toggleAdvanced = () => {
+    showAdvanced.value = !showAdvanced.value;
+    if (showAdvanced.value) {
+        nextTick(drawMap);
+    }
+};
 
 onMounted(() => {
   const savedSize = localStorage.getItem('nonograms_custom_size');
@@ -22,6 +169,14 @@ onMounted(() => {
   if (savedFillRate && !isNaN(savedFillRate)) {
     fillRate.value = Math.max(10, Math.min(90, Number(savedFillRate)));
   }
+  
+  // Don't draw map initially if hidden
+});
+
+watch([customSize, fillRate], () => {
+    if (showAdvanced.value) {
+        drawMap();
+    }
 });
 
 watch(customSize, (newVal) => {
@@ -41,12 +196,12 @@ const handleSnap = () => {
   customSize.value = snapToStep(Number(customSize.value), 5);
 };
 
-const difficultyLevel = computed(() => {
+const difficultyInfo = computed(() => {
-  return calculateDifficulty(fillRate.value / 100);
+  return calculateDifficulty(fillRate.value / 100, customSize.value);
 });
 
 const difficultyColor = computed(() => {
-  switch(difficultyLevel.value) {
+  switch(difficultyInfo.value.level) {
     case 'extreme': return '#ff3333';
     case 'hardest': return '#ff9933';
     case 'harder': return '#ffff33';
@@ -71,8 +226,11 @@ const confirm = () => {
   <div class="modal-overlay" @click.self="emit('close')">
     <div class="modal glass-panel">
       <h2>{{ t('custom.title') }}</h2>
-      <p>{{ t('custom.prompt') }}</p>
       
+      <div class="modal-content">
+        <div class="sliders-section">
+          <div class="slider-container">
+            <p>{{ t('custom.prompt') }}</p>
             <div class="input-group">
               <div class="range-value">{{ customSize }}</div>
               <input 
@@ -88,7 +246,9 @@ const confirm = () => {
                 <span>80</span>
               </div>
             </div>
+          </div>
 
+          <div class="slider-container">
             <p>{{ t('custom.fillRate') }}</p>
             <div class="input-group">
               <div class="range-value">{{ fillRate }}%</div>
@@ -97,19 +257,44 @@ const confirm = () => {
                 v-model="fillRate" 
                 min="10" 
                 max="90"
-          step="5"
+                step="1"
               />
               <div class="range-scale">
                 <span>10%</span>
                 <span>90%</span>
               </div>
             </div>
+          </div>
+        </div>
+
+        <div class="map-section" v-if="showAdvanced">
+            <canvas 
+                ref="difficultyCanvas" 
+                width="200" 
+                height="200"
+                @mousedown="startDrag"
+                @mousemove="onDrag"
+                @mouseup="stopDrag"
+                @mouseleave="stopDrag"
+                @touchstart.prevent="startDrag"
+                @touchmove.prevent="onDrag"
+                @touchend="stopDrag"
+            ></canvas>
+        </div>
+      </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="difficulty-row">
-          {{ t(`difficulty.${difficultyLevel}`) }}
+            <div class="level" :style="{ color: difficultyColor }">{{ t(`difficulty.${difficultyInfo.level}`) }}</div>
-        </span>
+            <div class="percentage" :style="{ color: difficultyColor }">({{ difficultyInfo.value }}%)</div>
+        </div>
+      </div>
+
+      <div class="advanced-toggle">
+          <button class="btn-text" @click="toggleAdvanced">
+              {{ showAdvanced ? 'Ukryj mapę trudności' : 'Pokaż mapę trudności' }}
+          </button>
       </div>
       
       <p v-if="errorMsg" class="error">{{ errorMsg }}</p>
@@ -141,7 +326,7 @@ const confirm = () => {
 .modal {
   padding: 40px;
   text-align: center;
-  max-width: 400px;
+  max-width: 800px;
   width: 90%;
   border: 1px solid var(--accent-cyan);
   box-shadow: 0 0 50px rgba(0, 242, 255, 0.2);
@@ -149,6 +334,44 @@ const confirm = () => {
   transition: all 0.3s ease-in-out;
 }
 
+.modal-content {
+    display: flex;
+    flex-direction: row;
+    gap: 40px;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 20px;
+}
+
+@media (max-width: 700px) {
+    .modal-content {
+        flex-direction: column;
+        gap: 20px;
+    }
+}
+
+.sliders-section {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.map-section {
+    flex: 0 0 auto;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+canvas {
+    border: 2px solid var(--panel-border);
+    border-radius: 8px;
+    box-shadow: 0 0 20px rgba(0, 242, 255, 0.1);
+    cursor: crosshair;
+    background: #000;
+}
+
 h2 {
   font-size: 2rem;
   color: var(--accent-cyan);
@@ -162,6 +385,11 @@ p {
   margin-bottom: 20px;
 }
 
+.slider-container {
+    width: 100%;
+    margin-bottom: 10px;
+}
+
 .input-group {
     margin-bottom: 20px;
     display: flex;
@@ -222,14 +450,38 @@ input[type="range"]::-moz-range-thumb {
 }
 
 .difficulty-indicator {
-    margin: 20px 0;
+    margin: 20px 0 40px 0;
-    font-size: 1.2rem;
     display: flex;
-    justify-content: center;
+    flex-direction: column;
-    gap: 10px;
     align-items: center;
+    gap: 5px;
+}
+
+.difficulty-row {
+    display: flex;
+    flex-direction: row;
+    gap: 8px;
+    align-items: baseline;
+    justify-content: center;
     white-space: nowrap;
-    height: 1.5em; /* Reserve space for one line of text */
+    flex-wrap: nowrap;
+}
+
+.label {
+    font-size: 1rem;
+    color: var(--text-muted);
+}
+
+.level {
+    font-size: 1.4rem;
+    font-weight: bold;
+    text-transform: uppercase;
+    line-height: 1.2;
+}
+
+.percentage {
+    font-size: 1rem;
+    font-weight: bold;
 }
 
 .difficulty-indicator .label {
@@ -251,6 +503,25 @@ input[type="range"]::-moz-range-thumb {
     font-size: 0.9rem;
 }
 
+.btn-text {
+    background: none;
+    border: none;
+    color: var(--accent-cyan);
+    font-size: 0.9rem;
+    cursor: pointer;
+    text-decoration: underline;
+    opacity: 0.8;
+    transition: opacity 0.3s;
+}
+
+.btn-text:hover {
+    opacity: 1;
+}
+
+.advanced-toggle {
+    margin-bottom: 10px;
+}
+
 .actions {
   display: flex;
   gap: 15px;

src/components/WinModal.vue

@@ -231,7 +231,8 @@ const buildShareSVG = () => {
 
   // Difficulty Logic
   const densityPercent = Math.round(store.currentDensity * 100);
-  const difficultyKey = calculateDifficulty(store.currentDensity);
+  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';

src/utils/puzzleUtils.js

@@ -52,24 +52,36 @@ export function generateRandomGrid(size, density = 0.5) {
     return grid;
 }
 
-export function calculateDifficulty(density) {
+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 'easy';
+    if (density <= 0 || density >= 1) return { level: 'easy', value: 0 };
     
     const entropy = -density * Math.log2(density) - (1 - density) * Math.log2(1 - density);
     
-    // Thresholds based on entropy
+    // Difficulty score combines entropy (complexity) and size (scale)
-    // 0.5 density -> entropy 1.0 (Extreme)
+    // We use sqrt(size) to dampen the effect of very large grids, 
-    // 0.4/0.6 density -> entropy ~0.97 (Extreme)
+    // ensuring that density still plays a major role.
-    // 0.3/0.7 density -> entropy ~0.88 (Hardest)
+    // Normalized against max size (80)
-    // 0.2/0.8 density -> entropy ~0.72 (Harder)
+    const sizeFactor = Math.sqrt(size / 80);
-    // <0.2/>0.8 density -> entropy <0.72 (Easy)
+    const score = entropy * sizeFactor * 100;
+    const value = Math.round(score);
     
-    if (entropy >= 0.96) return 'extreme'; // approx 38% - 62%
+    // Thresholds
-    if (entropy >= 0.85) return 'hardest'; // approx 28% - 38% & 62% - 72%
+    let level = 'easy';
-    if (entropy >= 0.65) return 'harder';  // approx 17% - 28% & 72% - 83%
+    if (value >= 80) level = 'extreme';
-    return 'easy';
+    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 };
 }