1.12.9

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

.gitignore

@@ -1,3 +1,3 @@
-
 .gpg/
 node_modules
+.DS_Store

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:
+    # volumes:
-      - ./nginx.conf:/etc/nginx/conf.d/default.conf:ro
+    #   - ./nginx.conf:/etc/nginx/conf.d/default.conf:ro

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-nonograms-solid",
-  "version": "1.12.2",
+  "version": "1.12.9",
   "homepage": "https://nonograms.7u.pl/",
   "type": "module",
   "scripts": {
@@ -20,8 +20,6 @@
     "@vitejs/plugin-vue": "^5.0.4",
     "@vue/test-utils": "^2.4.6",
     "jsdom": "^28.0.0",
-    "puppeteer": "^24.37.2",
-    "sharp": "^0.34.5",
     "vite": "^5.1.4",
     "vite-plugin-pwa": "^0.20.5",
     "vitest": "^4.0.18"

scripts/take-screenshot.js

@@ -1,46 +0,0 @@
-import puppeteer from 'puppeteer';
-import path from 'path';
-import { fileURLToPath } from 'url';
-
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
-
-async function takeScreenshot() {
-  console.log('Launching browser...');
-  const browser = await puppeteer.launch({
-    headless: "new",
-    args: ['--no-sandbox', '--disable-setuid-sandbox']
-  });
-  const page = await browser.newPage();
-  
-  // Set viewport to a nice desktop size
-  await page.setViewport({ width: 1280, height: 800, deviceScaleFactor: 2 });
-
-  console.log('Navigating to app...');
-  try {
-    // Try local network IP if localhost fails, but localhost should work in this env
-    await page.goto('http://localhost:5173', { waitUntil: 'networkidle0', timeout: 10000 });
-  } catch (e) {
-    console.log('Retrying with networkidle2...');
-    try {
-        await page.goto('http://localhost:5173', { waitUntil: 'networkidle2', timeout: 10000 });
-    } catch (e2) {
-        console.error('Could not load page:', e2.message);
-        await browser.close();
-        process.exit(1);
-    }
-  }
-
-  // Wait for animations/rendering
-  await new Promise(r => setTimeout(r, 2000));
-
-  const screenshotPath = path.join(__dirname, '../public/screenshot.png');
-  console.log(`Taking screenshot to ${screenshotPath}...`);
-  
-  await page.screenshot({ path: screenshotPath });
-  
-  await browser.close();
-  console.log('Done.');
-}
-
-takeScreenshot();

src/App.vue

@@ -164,15 +164,23 @@ onUnmounted(() => {
     <FixedBar />
 
     <div v-if="(canInstall || (isIos && !isStandalone)) && !installDismissed" class="install-banner">
-      <div class="install-text">
+      <div class="install-content">
-        <span v-if="isIos && !isStandalone">{{ t('pwa.installIos') }}</span>
+        <img src="/pwa-192x192.png" alt="App Icon" class="install-icon" />
-        <span v-else>{{ t('pwa.installTitle') }}</span>
+        <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);
+  position: fixed;
-  border: 1px solid var(--banner-border);
+  bottom: 0;
-  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;
   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 {