1.12.10

Added screenshot to README and updated play instructions.

.gitea/workflows/deploy.yaml

@@ -0,0 +1,23 @@
+name: Deploy to Production
+run-name: Deploy to Production by @${{ github.actor }}
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  deploy:
+    runs-on: self-hosted
+    steps:
+      - name: Check out repository code
+        uses: actions/checkout@v4
+
+      - name: Build and deploy with Docker Compose
+        run: |
+          # Próba zatrzymania i usunięcia starego kontenera (ignoruje błąd jeśli nie istnieje)
+          docker compose down --remove-orphans || true
+          docker rm -f nonograms-app || true
+          
+          # Start nowej wersji
+          docker compose up -d --build

README.md

@@ -2,12 +2,12 @@
 
 ## Description
 
-![Nonograms Application Screenshot](public/screenshot.png)
-
 Nonograms is a modern, fast, and accessible logic puzzle game (also known as Picross or Griddlers). Solve pixel-art puzzles by marking cells according to numeric clues for rows and columns. The app features:
 - Clean UX with keyboard and touch support
 - Multiple languages and PWA support (installable on desktop and mobile)
 - Difficulty simulation and guide to learn solving strategies
 - Shareable puzzles and persistent progress
 
+![Nonograms Application Screenshot](public/screenshot.png)
+
 Play online at https://nonograms.7u.pl or install as a PWA for an app-like experience.

check_i18n.js

@@ -1,37 +0,0 @@
-
-const fs = require('fs');
-
-const fileContent = fs.readFileSync('src/composables/useI18n.js', 'utf8');
-
-// Extract the messages object
-const match = fileContent.match(/const messages = ({[\s\S]*?});/);
-if (!match) {
-  console.error('Could not find messages object');
-  process.exit(1);
-}
-
-// We need to make the string valid JS to eval it.
-// It seems the content inside `const messages = { ... };` is valid JS object notation.
-// But we need to be careful about imports or other things if we were to `eval` the whole file.
-// We'll just `eval` the object part.
-
-const messagesStr = match[1];
-const messages = eval(`(${messagesStr})`);
-
-const enKeys = Object.keys(messages.en);
-const languages = Object.keys(messages);
-
-const missing = {};
-
-languages.forEach(lang => {
-  if (lang === 'en') return;
-  
-  const langKeys = Object.keys(messages[lang]);
-  const missingKeys = enKeys.filter(k => !langKeys.includes(k));
-  
-  if (missingKeys.length > 0) {
-    missing[lang] = missingKeys;
-  }
-});
-
-console.log(JSON.stringify(missing, null, 2));

docker-compose.yml

@@ -10,5 +10,5 @@ services:
       - "8081:80"
     restart: unless-stopped
     # Uncomment the following lines if you want to mount the configuration locally for development/testing
-    volumes:
-      - ./nginx.conf:/etc/nginx/conf.d/default.conf:ro
+    # volumes:
+    #   - ./nginx.conf:/etc/nginx/conf.d/default.conf:ro

package-lock.json

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

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-nonograms-solid",
-  "version": "1.12.3",
+  "version": "1.12.10",
   "homepage": "https://nonograms.7u.pl/",
   "type": "module",
   "scripts": {

src/App.vue

@@ -164,15 +164,23 @@ onUnmounted(() => {
     <FixedBar />
 
     <div v-if="(canInstall || (isIos && !isStandalone)) && !installDismissed" class="install-banner">
-      <div class="install-text">
-        <span v-if="isIos && !isStandalone">{{ t('pwa.installIos') }}</span>
-        <span v-else>{{ t('pwa.installTitle') }}</span>
+      <div class="install-content">
+        <img src="/pwa-192x192.png" alt="App Icon" class="install-icon" />
+        <div class="install-text">
+          <div class="install-title">{{ t('app.title') }}</div>
+          <div class="install-desc">
+            <span v-if="isIos && !isStandalone">{{ t('pwa.installIos') }}</span>
+            <span v-else>{{ t('pwa.installTitle') }}</span>
+          </div>
+        </div>
       </div>
       <div class="install-actions">
         <button v-if="!isIos" class="btn-neon secondary install-btn" @click="handleInstall">
           {{ installLabel }}
         </button>
-        <button class="install-close" @click="installDismissed = true">×</button>
+        <button class="install-close" @click="installDismissed = true" aria-label="Close">
+          ✕
+        </button>
       </div>
     </div>
 
@@ -209,7 +217,7 @@ onUnmounted(() => {
 .game-container {
   display: flex;
   flex-direction: column;
-  align-items: stretch; /* was center */
+  align-items: stretch;
   gap: 20px;
   width: 100%;
   padding-bottom: 50px;
@@ -217,38 +225,111 @@ onUnmounted(() => {
 }
 
 .install-banner {
-  background: var(--banner-bg);
-  border: 1px solid var(--banner-border);
-  border-radius: 8px;
-  padding: 10px 20px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  width: 90%;
-  max-width: 600px;
-  margin: 0 auto 20px auto; /* Center it manually */
-  box-shadow: var(--banner-shadow);
-  position: sticky;
+  position: fixed;
+  bottom: 0;
   left: 0;
-  right: 0;
+  width: 100%;
+  background: var(--panel-bg);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border-top: 1px solid var(--neon-cyan);
+  box-shadow: 0 -4px 30px rgba(0, 242, 254, 0.15);
+  padding: 16px 20px;
+  padding-bottom: max(16px, env(safe-area-inset-bottom));
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  z-index: 2000;
+  animation: slideUp 0.5s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+@media (min-width: 768px) {
+  .install-banner {
+    width: 400px;
+    bottom: 24px;
+    right: 24px;
+    left: auto;
+    border-radius: 12px;
+    border: 1px solid var(--neon-cyan);
+    padding-bottom: 16px;
+  }
+}
+
+.install-content {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.install-icon {
+  width: 48px;
+  height: 48px;
+  border-radius: 10px;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
 }
 
 .install-text {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.install-title {
+  font-weight: bold;
+  color: var(--neon-cyan);
+  font-size: 1.1rem;
+}
+
+.install-desc {
+  font-size: 0.9rem;
   color: var(--text-color);
+  line-height: 1.3;
 }
 
 .install-actions {
   display: flex;
-  gap: 10px;
   align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.install-btn {
+  flex: 1;
+  padding: 10px;
+  font-size: 0.95rem;
+  justify-content: center;
 }
 
 .install-close {
   background: transparent;
   border: none;
   color: var(--text-muted);
-  font-size: 1.5rem;
+  font-size: 1.2rem;
   cursor: pointer;
+  width: 36px;
+  height: 36px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  transition: background 0.2s;
+}
+
+.install-close:hover {
+  background: rgba(255,255,255,0.1);
+  color: var(--text-color);
+}
+
+@keyframes slideUp {
+  from {
+    transform: translateY(100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
 }
 
 .game-layout {

src/utils/puzzleUtils.js

@@ -125,28 +125,37 @@ export function calculateDifficulty(density, size = 10) {
     let level;
 
     // "Hardest" threshold is 99% solvability.
+    // We calculate a base value first, then adjust for solvability.
+    
+    const densityFactor = 1 - 2 * Math.abs(density - 0.5);
+    const complexity = size * (0.4 + 0.6 * densityFactor);
+    
     if (solvedPct < 99) {
-        // Extreme: Requires guessing
-        level = 'extreme';
-        // Map 0-99% solved to value 85-100
-        value = 85 + ((99 - solvedPct) / 99) * 15;
+        // Requires guessing / advanced logic.
+        // Base penalty for low solvability: 85 to 100
+        const penaltyBase = 85 + ((99 - solvedPct) / 99) * 15;
+        
+        // Scale penalty by size. 
+        // Small grids (e.g. 5x5) are trivial even if "unsolvable" by simple logic.
+        // Large grids (e.g. 20x20) are truly extreme if unsolvable.
+        const sizeFactor = Math.min(1, size / 20);
+        
+        value = penaltyBase * sizeFactor;
+        
+        // Ensure difficulty doesn't drop below structural complexity
+        value = Math.max(value, complexity);
     } else {
         // Solvable (>= 99%)
-        // Density factor: 0.5 is hardest (1), 0.1/0.9 is easiest (0.2)
-        const densityFactor = 1 - 2 * Math.abs(density - 0.5);
-        
         // Complexity based on Size and Density
         // Max size 80.
         // Formula: size * (0.4 + 0.6 * densityFactor)
-        // Max: 80 * 1 = 80.
-        const complexity = size * (0.4 + 0.6 * densityFactor);
-        
         value = Math.min(85, complexity);
-        
-        if (value < 25) level = 'easy';
-        else if (value < 55) level = 'harder';
-        else level = 'hardest';
     }
+        
+    if (value < 25) level = 'easy';
+    else if (value < 55) level = 'harder';
+    else if (value < 85) level = 'hardest';
+    else level = 'extreme';
 
     return { level, value: Math.round(value) };
 }