Compare commits
1 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 6a8853e99b |
@@ -1,18 +0,0 @@
|
||||
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: |
|
||||
docker compose up -d --build
|
||||
6
.gitignore
vendored
@@ -1,3 +1,7 @@
|
||||
.gpg/
|
||||
node_modules
|
||||
dist
|
||||
.DS_Store
|
||||
.vscode
|
||||
.idea
|
||||
*.log
|
||||
dev-dist
|
||||
|
||||
@@ -8,6 +8,4 @@ Nonograms is a modern, fast, and accessible logic puzzle game (also known as Pic
|
||||
- Difficulty simulation and guide to learn solving strategies
|
||||
- Shareable puzzles and persistent progress
|
||||
|
||||

|
||||
|
||||
Play online at https://nonograms.7u.pl or install as a PWA for an app-like experience.
|
||||
|
||||
37
check_i18n.js
Normal file
@@ -0,0 +1,37 @@
|
||||
|
||||
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));
|
||||
@@ -1,92 +0,0 @@
|
||||
/**
|
||||
* Copyright 2018 Google Inc. All Rights Reserved.
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
// If the loader is already loaded, just stop.
|
||||
if (!self.define) {
|
||||
let registry = {};
|
||||
|
||||
// Used for `eval` and `importScripts` where we can't get script URL by other means.
|
||||
// In both cases, it's safe to use a global var because those functions are synchronous.
|
||||
let nextDefineUri;
|
||||
|
||||
const singleRequire = (uri, parentUri) => {
|
||||
uri = new URL(uri + ".js", parentUri).href;
|
||||
return registry[uri] || (
|
||||
|
||||
new Promise(resolve => {
|
||||
if ("document" in self) {
|
||||
const script = document.createElement("script");
|
||||
script.src = uri;
|
||||
script.onload = resolve;
|
||||
document.head.appendChild(script);
|
||||
} else {
|
||||
nextDefineUri = uri;
|
||||
importScripts(uri);
|
||||
resolve();
|
||||
}
|
||||
})
|
||||
|
||||
.then(() => {
|
||||
let promise = registry[uri];
|
||||
if (!promise) {
|
||||
throw new Error(`Module ${uri} didn’t register its module`);
|
||||
}
|
||||
return promise;
|
||||
})
|
||||
);
|
||||
};
|
||||
|
||||
self.define = (depsNames, factory) => {
|
||||
const uri = nextDefineUri || ("document" in self ? document.currentScript.src : "") || location.href;
|
||||
if (registry[uri]) {
|
||||
// Module is already loading or loaded.
|
||||
return;
|
||||
}
|
||||
let exports = {};
|
||||
const require = depUri => singleRequire(depUri, uri);
|
||||
const specialDeps = {
|
||||
module: { uri },
|
||||
exports,
|
||||
require
|
||||
};
|
||||
registry[uri] = Promise.all(depsNames.map(
|
||||
depName => specialDeps[depName] || require(depName)
|
||||
)).then(deps => {
|
||||
factory(...deps);
|
||||
return exports;
|
||||
});
|
||||
};
|
||||
}
|
||||
define(['./workbox-7a5e81cd'], (function (workbox) { 'use strict';
|
||||
|
||||
self.addEventListener('message', event => {
|
||||
if (event.data && event.data.type === 'SKIP_WAITING') {
|
||||
self.skipWaiting();
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* The precacheAndRoute() method efficiently caches and responds to
|
||||
* requests for URLs in the manifest.
|
||||
* See https://goo.gl/S9QRab
|
||||
*/
|
||||
workbox.precacheAndRoute([{
|
||||
"url": "index.html",
|
||||
"revision": "0.0dmrmul42fg"
|
||||
}], {});
|
||||
workbox.cleanupOutdatedCaches();
|
||||
workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("index.html"), {
|
||||
allowlist: [/^\/$/]
|
||||
}));
|
||||
|
||||
}));
|
||||
@@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/nonograms.svg" />
|
||||
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
|
||||
<link rel="apple-touch-icon" href="/nonograms.svg" />
|
||||
<link rel="mask-icon" href="/nonograms.svg" color="#00f2fe" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Nonograms Pro - Vue 3 SOLID</title>
|
||||
|
||||
4
package-lock.json
generated
@@ -1,12 +1,12 @@
|
||||
{
|
||||
"name": "vue-nonograms-solid",
|
||||
"version": "1.12.6",
|
||||
"version": "1.9.14",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "vue-nonograms-solid",
|
||||
"version": "1.12.6",
|
||||
"version": "1.9.14",
|
||||
"dependencies": {
|
||||
"fireworks-js": "^2.10.8",
|
||||
"flag-icons": "^7.5.0",
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
{
|
||||
"name": "vue-nonograms-solid",
|
||||
"version": "1.12.6",
|
||||
"version": "1.9.14",
|
||||
"homepage": "https://nonograms.7u.pl/",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite --host",
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview",
|
||||
"test": "vitest"
|
||||
|
||||
|
Before Width: | Height: | Size: 15 KiB |
@@ -1,44 +1,28 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="192" height="192" viewBox="0 0 192 192">
|
||||
<defs>
|
||||
<linearGradient id="bg" x1="0" y1="0" x2="1" y2="1">
|
||||
<stop offset="0" stop-color="#43C6AC"/>
|
||||
<stop offset="1" stop-color="#191654"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="cell" x1="0" y1="0" x2="1" y2="1">
|
||||
<stop offset="0" stop-color="#00f2fe"/>
|
||||
<stop offset="1" stop-color="#4facfe"/>
|
||||
</linearGradient>
|
||||
<filter id="glow" x="-20%" y="-20%" width="140%" height="140%">
|
||||
<feGaussianBlur stdDeviation="1.5" result="blur"/>
|
||||
<feComposite in="SourceGraphic" in2="blur" operator="over"/>
|
||||
</filter>
|
||||
</defs>
|
||||
|
||||
<!-- Main Background -->
|
||||
<rect width="192" height="192" rx="42" fill="url(#bg)"/>
|
||||
|
||||
<!-- Console Screen Background -->
|
||||
<rect x="26" y="26" width="140" height="140" rx="16" fill="rgba(0,10,30,0.5)" stroke="rgba(0,242,254,0.2)" stroke-width="1.5"/>
|
||||
|
||||
<!-- Letter N built from Nonogram cells -->
|
||||
<g fill="url(#cell)" filter="url(#glow)">
|
||||
<!-- Left Column -->
|
||||
<rect x="38" y="38" width="20" height="20" rx="4"/>
|
||||
<rect x="38" y="62" width="20" height="20" rx="4"/>
|
||||
<rect x="38" y="86" width="20" height="20" rx="4"/>
|
||||
<rect x="38" y="110" width="20" height="20" rx="4"/>
|
||||
<rect x="38" y="134" width="20" height="20" rx="4"/>
|
||||
|
||||
<!-- Diagonal -->
|
||||
<rect x="62" y="62" width="20" height="20" rx="4"/>
|
||||
<rect x="86" y="86" width="20" height="20" rx="4"/>
|
||||
<rect x="110" y="110" width="20" height="20" rx="4"/>
|
||||
|
||||
<!-- Right Column -->
|
||||
<rect x="134" y="38" width="20" height="20" rx="4"/>
|
||||
<rect x="134" y="62" width="20" height="20" rx="4"/>
|
||||
<rect x="134" y="86" width="20" height="20" rx="4"/>
|
||||
<rect x="134" y="110" width="20" height="20" rx="4"/>
|
||||
<rect x="134" y="134" width="20" height="20" rx="4"/>
|
||||
<rect width="192" height="192" fill="#0b0f1f"/>
|
||||
<g transform="translate(24,24)">
|
||||
<rect x="0" y="0" width="144" height="144" rx="16" fill="#121639" stroke="#00f2fe" stroke-width="4"/>
|
||||
<g stroke="#00f2fe" stroke-width="2">
|
||||
<line x1="24" y1="0" x2="24" y2="144"/>
|
||||
<line x1="48" y1="0" x2="48" y2="144"/>
|
||||
<line x1="72" y1="0" x2="72" y2="144"/>
|
||||
<line x1="96" y1="0" x2="96" y2="144"/>
|
||||
<line x1="120" y1="0" x2="120" y2="144"/>
|
||||
<line x1="0" y1="24" x2="144" y2="24"/>
|
||||
<line x1="0" y1="48" x2="144" y2="48"/>
|
||||
<line x1="0" y1="72" x2="144" y2="72"/>
|
||||
<line x1="0" y1="96" x2="144" y2="96"/>
|
||||
<line x1="0" y1="120" x2="144" y2="120"/>
|
||||
</g>
|
||||
<g fill="#00f2fe">
|
||||
<rect x="6" y="6" width="18" height="18" rx="3"/>
|
||||
<rect x="54" y="30" width="18" height="18" rx="3"/>
|
||||
<rect x="102" y="78" width="18" height="18" rx="3"/>
|
||||
<rect x="30" y="126" width="18" height="18" rx="3"/>
|
||||
</g>
|
||||
<g fill="#ffffff">
|
||||
<path d="M36 40 h16 v64 h-16 z"/>
|
||||
<path d="M52 40 h16 l32 48 v-48 h16 v64 h-16 l-32 -48 v48 h-16 z"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 1.2 KiB |
|
Before Width: | Height: | Size: 16 KiB |
@@ -8,37 +8,17 @@
|
||||
<stop offset="0" stop-color="#00f2fe"/>
|
||||
<stop offset="1" stop-color="#4facfe"/>
|
||||
</linearGradient>
|
||||
<filter id="glow" x="-20%" y="-20%" width="140%" height="140%">
|
||||
<feGaussianBlur stdDeviation="1.5" result="blur"/>
|
||||
<feComposite in="SourceGraphic" in2="blur" operator="over"/>
|
||||
</filter>
|
||||
</defs>
|
||||
|
||||
<!-- Main Background -->
|
||||
<rect width="192" height="192" rx="42" fill="url(#bg)"/>
|
||||
|
||||
<!-- Console Screen Background -->
|
||||
<rect x="26" y="26" width="140" height="140" rx="16" fill="rgba(0,10,30,0.5)" stroke="rgba(0,242,254,0.2)" stroke-width="1.5"/>
|
||||
|
||||
<!-- Letter N built from Nonogram cells -->
|
||||
<g fill="url(#cell)" filter="url(#glow)">
|
||||
<!-- Left Column -->
|
||||
<rect x="38" y="38" width="20" height="20" rx="4"/>
|
||||
<rect x="38" y="62" width="20" height="20" rx="4"/>
|
||||
<rect x="38" y="86" width="20" height="20" rx="4"/>
|
||||
<rect x="38" y="110" width="20" height="20" rx="4"/>
|
||||
<rect x="38" y="134" width="20" height="20" rx="4"/>
|
||||
|
||||
<!-- Diagonal -->
|
||||
<rect x="62" y="62" width="20" height="20" rx="4"/>
|
||||
<rect x="86" y="86" width="20" height="20" rx="4"/>
|
||||
<rect x="110" y="110" width="20" height="20" rx="4"/>
|
||||
|
||||
<!-- Right Column -->
|
||||
<rect x="134" y="38" width="20" height="20" rx="4"/>
|
||||
<rect x="134" y="62" width="20" height="20" rx="4"/>
|
||||
<rect x="134" y="86" width="20" height="20" rx="4"/>
|
||||
<rect x="134" y="110" width="20" height="20" rx="4"/>
|
||||
<rect x="134" y="134" width="20" height="20" rx="4"/>
|
||||
<rect width="192" height="192" rx="28" fill="url(#bg)"/>
|
||||
<rect x="28" y="28" width="136" height="136" rx="14" fill="rgba(0,0,0,0.35)"/>
|
||||
<g fill="url(#cell)">
|
||||
<rect x="48" y="48" width="20" height="20" rx="4"/>
|
||||
<rect x="76" y="48" width="20" height="20" rx="4"/>
|
||||
<rect x="104" y="48" width="20" height="20" rx="4"/>
|
||||
<rect x="48" y="76" width="20" height="20" rx="4"/>
|
||||
<rect x="104" y="76" width="20" height="20" rx="4"/>
|
||||
<rect x="48" y="104" width="20" height="20" rx="4"/>
|
||||
<rect x="76" y="104" width="20" height="20" rx="4"/>
|
||||
<rect x="104" y="104" width="20" height="20" rx="4"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 1.1 KiB |
|
Before Width: | Height: | Size: 78 KiB |
@@ -1,4 +1,4 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 192 192">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512">
|
||||
<defs>
|
||||
<linearGradient id="bg" x1="0" y1="0" x2="1" y2="1">
|
||||
<stop offset="0" stop-color="#43C6AC"/>
|
||||
@@ -8,37 +8,17 @@
|
||||
<stop offset="0" stop-color="#00f2fe"/>
|
||||
<stop offset="1" stop-color="#4facfe"/>
|
||||
</linearGradient>
|
||||
<filter id="glow" x="-20%" y="-20%" width="140%" height="140%">
|
||||
<feGaussianBlur stdDeviation="1.5" result="blur"/>
|
||||
<feComposite in="SourceGraphic" in2="blur" operator="over"/>
|
||||
</filter>
|
||||
</defs>
|
||||
|
||||
<!-- Main Background -->
|
||||
<rect width="192" height="192" rx="42" fill="url(#bg)"/>
|
||||
|
||||
<!-- Console Screen Background -->
|
||||
<rect x="26" y="26" width="140" height="140" rx="16" fill="rgba(0,10,30,0.5)" stroke="rgba(0,242,254,0.2)" stroke-width="1.5"/>
|
||||
|
||||
<!-- Letter N built from Nonogram cells -->
|
||||
<g fill="url(#cell)" filter="url(#glow)">
|
||||
<!-- Left Column -->
|
||||
<rect x="38" y="38" width="20" height="20" rx="4"/>
|
||||
<rect x="38" y="62" width="20" height="20" rx="4"/>
|
||||
<rect x="38" y="86" width="20" height="20" rx="4"/>
|
||||
<rect x="38" y="110" width="20" height="20" rx="4"/>
|
||||
<rect x="38" y="134" width="20" height="20" rx="4"/>
|
||||
|
||||
<!-- Diagonal -->
|
||||
<rect x="62" y="62" width="20" height="20" rx="4"/>
|
||||
<rect x="86" y="86" width="20" height="20" rx="4"/>
|
||||
<rect x="110" y="110" width="20" height="20" rx="4"/>
|
||||
|
||||
<!-- Right Column -->
|
||||
<rect x="134" y="38" width="20" height="20" rx="4"/>
|
||||
<rect x="134" y="62" width="20" height="20" rx="4"/>
|
||||
<rect x="134" y="86" width="20" height="20" rx="4"/>
|
||||
<rect x="134" y="110" width="20" height="20" rx="4"/>
|
||||
<rect x="134" y="134" width="20" height="20" rx="4"/>
|
||||
<rect width="512" height="512" rx="80" fill="url(#bg)"/>
|
||||
<rect x="74" y="74" width="364" height="364" rx="40" fill="rgba(0,0,0,0.35)"/>
|
||||
<g fill="url(#cell)">
|
||||
<rect x="138" y="138" width="54" height="54" rx="10"/>
|
||||
<rect x="214" y="138" width="54" height="54" rx="10"/>
|
||||
<rect x="290" y="138" width="54" height="54" rx="10"/>
|
||||
<rect x="138" y="214" width="54" height="54" rx="10"/>
|
||||
<rect x="290" y="214" width="54" height="54" rx="10"/>
|
||||
<rect x="138" y="290" width="54" height="54" rx="10"/>
|
||||
<rect x="214" y="290" width="54" height="54" rx="10"/>
|
||||
<rect x="290" y="290" width="54" height="54" rx="10"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 1.1 KiB |
|
Before Width: | Height: | Size: 1.4 MiB |
@@ -1,42 +0,0 @@
|
||||
import sharp from 'sharp';
|
||||
import path from 'path';
|
||||
import { fileURLToPath } from 'url';
|
||||
|
||||
const __filename = fileURLToPath(import.meta.url);
|
||||
const __dirname = path.dirname(__filename);
|
||||
|
||||
const INPUT_FILE = path.join(__dirname, '../public/nonograms.svg');
|
||||
const OUTPUT_DIR = path.join(__dirname, '../public');
|
||||
|
||||
async function generateIcons() {
|
||||
console.log('Generating icons from ' + INPUT_FILE);
|
||||
|
||||
try {
|
||||
// 192x192
|
||||
await sharp(INPUT_FILE)
|
||||
.resize(192, 192)
|
||||
.png()
|
||||
.toFile(path.join(OUTPUT_DIR, 'pwa-192x192.png'));
|
||||
console.log('Created pwa-192x192.png');
|
||||
|
||||
// 512x512
|
||||
await sharp(INPUT_FILE)
|
||||
.resize(512, 512)
|
||||
.png()
|
||||
.toFile(path.join(OUTPUT_DIR, 'pwa-512x512.png'));
|
||||
console.log('Created pwa-512x512.png');
|
||||
|
||||
// Apple Touch Icon (180x180)
|
||||
await sharp(INPUT_FILE)
|
||||
.resize(180, 180)
|
||||
.png()
|
||||
.toFile(path.join(OUTPUT_DIR, 'apple-touch-icon.png'));
|
||||
console.log('Created apple-touch-icon.png');
|
||||
|
||||
} catch (err) {
|
||||
console.error('Error generating icons:', err);
|
||||
process.exit(1);
|
||||
}
|
||||
}
|
||||
|
||||
generateIcons();
|
||||
@@ -1,38 +1,75 @@
|
||||
|
||||
import fs from 'fs';
|
||||
import path from 'path';
|
||||
import { generateRandomGrid, calculateHints } from '../src/utils/puzzleUtils.js';
|
||||
import { solvePuzzle } from '../src/utils/solver.js';
|
||||
|
||||
const SIZES = [5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 60, 70, 80];
|
||||
const OUTPUT_FILE = 'difficulty_simulation_results.json';
|
||||
const CSV_FILE = 'difficulty_simulation_results.csv';
|
||||
|
||||
// Configuration
|
||||
const SIZES = [5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 60, 70, 80]; // Steps of 5 up to 50, then 10
|
||||
const DENSITIES = [0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9];
|
||||
const SAMPLES_SMALL = 100; // For size <= 25
|
||||
const SAMPLES_LARGE = 30; // For size > 25
|
||||
const SAMPLES_PER_POINT = 20; // Adjust based on time/accuracy needs
|
||||
|
||||
const results = {};
|
||||
console.log('Starting Monte Carlo Simulation for Nonogram Difficulty...');
|
||||
console.log(`Config: Sizes=${SIZES.length}, Densities=${DENSITIES.length}, Samples=${SAMPLES_PER_POINT}`);
|
||||
|
||||
console.log('Starting Monte Carlo Simulation...');
|
||||
const results = [];
|
||||
const csvRows = ['size,density,avg_solved_percent,min_solved_percent,max_solved_percent,avg_time_ms'];
|
||||
|
||||
const startTime = Date.now();
|
||||
|
||||
for (const size of SIZES) {
|
||||
const samples = size <= 25 ? SAMPLES_SMALL : SAMPLES_LARGE;
|
||||
const rowData = [];
|
||||
|
||||
for (const density of DENSITIES) {
|
||||
let totalSolved = 0;
|
||||
let minSolved = 100;
|
||||
let maxSolved = 0;
|
||||
let totalTime = 0;
|
||||
|
||||
for (let i = 0; i < samples; i++) {
|
||||
process.stdout.write(`Simulating Size: ${size}x${size}, Density: ${density} ... `);
|
||||
|
||||
for (let i = 0; i < SAMPLES_PER_POINT; i++) {
|
||||
const t0 = performance.now();
|
||||
|
||||
// 1. Generate
|
||||
const grid = generateRandomGrid(size, density);
|
||||
const { rowHints, colHints } = calculateHints(grid);
|
||||
|
||||
// 2. Solve
|
||||
const { percentSolved } = solvePuzzle(rowHints, colHints);
|
||||
|
||||
const t1 = performance.now();
|
||||
|
||||
totalSolved += percentSolved;
|
||||
minSolved = Math.min(minSolved, percentSolved);
|
||||
maxSolved = Math.max(maxSolved, percentSolved);
|
||||
totalTime += (t1 - t0);
|
||||
}
|
||||
|
||||
const avg = Math.round(totalSolved / samples);
|
||||
rowData.push(avg);
|
||||
const avgSolved = totalSolved / SAMPLES_PER_POINT;
|
||||
const avgTime = totalTime / SAMPLES_PER_POINT;
|
||||
|
||||
results.push({
|
||||
size,
|
||||
density,
|
||||
avgSolved,
|
||||
minSolved,
|
||||
maxSolved,
|
||||
avgTime
|
||||
});
|
||||
|
||||
csvRows.push(`${size},${density},${avgSolved.toFixed(2)},${minSolved.toFixed(2)},${maxSolved.toFixed(2)},${avgTime.toFixed(2)}`);
|
||||
|
||||
console.log(`Avg Solved: ${avgSolved.toFixed(1)}%`);
|
||||
}
|
||||
results[size] = rowData;
|
||||
console.log(` Size ${size}: [${rowData.join(', ')}]`);
|
||||
}
|
||||
|
||||
const duration = (Date.now() - startTime) / 1000;
|
||||
console.log(`\nSimulation Complete in ${duration.toFixed(2)}s. Result JSON:`);
|
||||
console.log(JSON.stringify(results, null, 4));
|
||||
const totalDuration = (Date.now() - startTime) / 1000;
|
||||
console.log(`Simulation complete in ${totalDuration.toFixed(1)}s`);
|
||||
|
||||
// Save results
|
||||
fs.writeFileSync(OUTPUT_FILE, JSON.stringify(results, null, 2));
|
||||
fs.writeFileSync(CSV_FILE, csvRows.join('\n'));
|
||||
|
||||
console.log(`Results saved to ${OUTPUT_FILE} and ${CSV_FILE}`);
|
||||
|
||||
12
src/App.vue
@@ -23,7 +23,6 @@ const canInstall = ref(false);
|
||||
const installDismissed = ref(false);
|
||||
const isCoarsePointer = ref(false);
|
||||
const isStandalone = ref(false);
|
||||
const isIos = ref(false);
|
||||
const themePreference = ref('system');
|
||||
const appVersion = __APP_VERSION__;
|
||||
let displayModeMedia = null;
|
||||
@@ -110,8 +109,6 @@ onMounted(() => {
|
||||
}
|
||||
if (typeof window !== 'undefined') {
|
||||
isCoarsePointer.value = window.matchMedia('(pointer: coarse)').matches;
|
||||
const ua = navigator.userAgent.toLowerCase();
|
||||
isIos.value = /ipad|iphone|ipod/.test(ua) || (ua.includes('mac') && navigator.maxTouchPoints > 1);
|
||||
const storedTheme = typeof localStorage !== 'undefined' ? localStorage.getItem('theme') : null;
|
||||
if (storedTheme === 'light' || storedTheme === 'dark' || storedTheme === 'system') {
|
||||
themePreference.value = storedTheme;
|
||||
@@ -163,13 +160,10 @@ 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>
|
||||
<div v-if="canInstall && !installDismissed" class="install-banner">
|
||||
<div class="install-text">{{ t('pwa.installTitle') }}</div>
|
||||
<div class="install-actions">
|
||||
<button v-if="!isIos" class="btn-neon secondary install-btn" @click="handleInstall">
|
||||
<button class="btn-neon secondary install-btn" @click="handleInstall">
|
||||
{{ installLabel }}
|
||||
</button>
|
||||
<button class="install-close" @click="installDismissed = true">×</button>
|
||||
|
||||
@@ -43,30 +43,21 @@ const handlePointerDown = (e) => {
|
||||
const now = Date.now();
|
||||
if (now - lastTap < 300) {
|
||||
// Double tap -> X (Force)
|
||||
clearLongPress();
|
||||
emit('start-drag', props.r, props.c, true, true);
|
||||
lastTap = 0;
|
||||
} else {
|
||||
// Single tap / Start drag -> Fill
|
||||
emit('start-drag', props.r, props.c, false, false);
|
||||
lastTap = now;
|
||||
|
||||
// Start Long Press Timer
|
||||
clearLongPress();
|
||||
longPressTimer = setTimeout(() => {
|
||||
if (navigator.vibrate) navigator.vibrate(50);
|
||||
// Switch to Cross (Right click logic, force=true to overwrite the just-placed Fill)
|
||||
emit('start-drag', props.r, props.c, true, true);
|
||||
}, 500);
|
||||
}
|
||||
};
|
||||
|
||||
const handlePointerUp = (e) => {
|
||||
clearLongPress();
|
||||
// Handled in pointerdown
|
||||
};
|
||||
|
||||
const handlePointerCancel = (e) => {
|
||||
clearLongPress();
|
||||
// Handled in pointerdown
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
@@ -340,20 +340,12 @@ const confirm = () => {
|
||||
text-align: center;
|
||||
max-width: 800px;
|
||||
width: 90%;
|
||||
max-height: 90vh;
|
||||
overflow-y: auto;
|
||||
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;
|
||||
}
|
||||
|
||||
@media (max-width: 768px), (max-height: 600px) {
|
||||
.modal {
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
@@ -27,28 +27,17 @@ let dragStartLeft = 0;
|
||||
const checkScroll = () => {
|
||||
const el = scrollWrapper.value;
|
||||
if (!el) return;
|
||||
|
||||
const content = el.firstElementChild;
|
||||
const contentWidth = content ? content.offsetWidth : el.scrollWidth;
|
||||
const sw = el.scrollWidth;
|
||||
const cw = el.clientWidth;
|
||||
|
||||
// Only show custom scrollbar on mobile/tablet (width < 768px) and if content overflows
|
||||
const isMobile = window.innerWidth <= 768;
|
||||
// Use contentWidth to check for overflow, as scrollWidth might be misleading
|
||||
showScrollbar.value = isMobile && (contentWidth > cw + 1);
|
||||
showScrollbar.value = isMobile && (sw > cw + 1);
|
||||
|
||||
if (showScrollbar.value) {
|
||||
// Thumb width percentage = (viewport / total) * 100
|
||||
// Use contentWidth for more accurate ratio
|
||||
const ratio = cw / contentWidth;
|
||||
const ratio = cw / sw;
|
||||
thumbWidth.value = Math.max(10, ratio * 100);
|
||||
|
||||
// Hide if content fits or almost fits (prevent useless scrollbar)
|
||||
// Increased tolerance to 95%
|
||||
if (ratio >= 0.95) {
|
||||
showScrollbar.value = false;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@@ -186,38 +175,21 @@ const handleGridLeave = () => {
|
||||
activeCol.value = null;
|
||||
};
|
||||
|
||||
const handleResize = () => {
|
||||
computeCellSize();
|
||||
checkScroll();
|
||||
// Re-check after potential layout animation/transition
|
||||
setTimeout(() => {
|
||||
computeCellSize();
|
||||
checkScroll();
|
||||
}, 300);
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
nextTick(() => {
|
||||
computeCellSize();
|
||||
checkScroll();
|
||||
// Extra check for slow layout/font loading or orientation changes
|
||||
setTimeout(() => {
|
||||
computeCellSize();
|
||||
checkScroll();
|
||||
}, 300);
|
||||
});
|
||||
isFinePointer.value = window.matchMedia('(pointer: fine)').matches;
|
||||
|
||||
window.addEventListener('resize', handleResize);
|
||||
window.addEventListener('orientationchange', handleResize);
|
||||
window.addEventListener('resize', computeCellSize);
|
||||
window.addEventListener('resize', checkScroll);
|
||||
window.addEventListener('mouseup', handleGlobalMouseUp);
|
||||
window.addEventListener('pointerup', handleGlobalPointerUp);
|
||||
window.addEventListener('touchend', handleGlobalPointerUp, { passive: true });
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('resize', handleResize);
|
||||
window.removeEventListener('orientationchange', handleResize);
|
||||
window.removeEventListener('resize', computeCellSize);
|
||||
window.removeEventListener('resize', checkScroll);
|
||||
window.removeEventListener('mouseup', handleGlobalMouseUp);
|
||||
window.removeEventListener('pointerup', handleGlobalPointerUp);
|
||||
window.removeEventListener('touchend', handleGlobalPointerUp);
|
||||
@@ -227,10 +199,6 @@ watch(() => store.size, async () => {
|
||||
await nextTick();
|
||||
computeCellSize();
|
||||
checkScroll();
|
||||
setTimeout(() => {
|
||||
computeCellSize();
|
||||
checkScroll();
|
||||
}, 300);
|
||||
});
|
||||
</script>
|
||||
|
||||
@@ -304,7 +272,6 @@ watch(() => store.size, async () => {
|
||||
min-width: 100%;
|
||||
margin: 0 auto; /* Center the wrapper safely */
|
||||
align-items: flex-start; /* Prevent cropping when centered */
|
||||
padding-right: 40px;
|
||||
}
|
||||
|
||||
.game-container {
|
||||
|
||||
@@ -321,10 +321,8 @@ watch(isMobileMenuOpen, (val) => {
|
||||
</transition>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Mobile Menu Overlay -->
|
||||
<Teleport to="body">
|
||||
<!-- Mobile Menu Overlay -->
|
||||
<transition name="fade">
|
||||
<div v-if="isMobileMenuOpen" class="mobile-menu-overlay">
|
||||
<div class="mobile-menu-header">
|
||||
@@ -404,7 +402,7 @@ watch(isMobileMenuOpen, (val) => {
|
||||
/>
|
||||
</div>
|
||||
<div class="lang-list mobile-lang-list">
|
||||
<button
|
||||
<button
|
||||
v-for="lang in filteredLanguages"
|
||||
:key="lang.code"
|
||||
class="mobile-sub-item"
|
||||
@@ -422,7 +420,7 @@ watch(isMobileMenuOpen, (val) => {
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</Teleport>
|
||||
</nav>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
@@ -9,9 +9,9 @@ import { X, Play, Square, RotateCcw } from 'lucide-vue-next';
|
||||
const emit = defineEmits(['close']);
|
||||
const { t } = useI18n();
|
||||
|
||||
const SIZES = [5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 60, 70, 80];
|
||||
const SIZES = [5, 10, 15, 20, 25, 30, 35, 40, 45, 50];
|
||||
const DENSITIES = [0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9];
|
||||
const SAMPLES_PER_POINT = 50; // Increased for better accuracy
|
||||
const SAMPLES_PER_POINT = 10; // Reduced for web performance demo
|
||||
|
||||
const isRunning = ref(false);
|
||||
const progress = ref(0);
|
||||
|
||||
@@ -215,8 +215,6 @@ onUnmounted(() => {
|
||||
width: fit-content;
|
||||
max-width: min(92vw, 560px);
|
||||
min-width: 280px;
|
||||
max-height: 90vh;
|
||||
overflow-y: auto;
|
||||
border: 1px solid var(--primary-accent);
|
||||
box-shadow: 0 0 50px rgba(0, 242, 255, 0.2);
|
||||
animation: slideUp 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
@@ -225,12 +223,6 @@ onUnmounted(() => {
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
@media (max-width: 768px), (max-height: 600px) {
|
||||
.modal {
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 2.5rem;
|
||||
color: var(--primary-accent);
|
||||
|
||||
@@ -50,7 +50,6 @@ const messages = {
|
||||
'pwa.installTitle': 'Zainstaluj aplikację i graj offline',
|
||||
'pwa.installMobile': 'Dodaj do ekranu głównego',
|
||||
'pwa.installDesktop': 'Zainstaluj na komputerze',
|
||||
'pwa.installIos': 'Aby zainstalować: kliknij Udostępnij i wybierz "Dodaj do ekranu głównego"',
|
||||
'pwa.offlineReady': 'Aplikacja gotowa do pracy offline',
|
||||
'pwa.newContent': 'Dostępna nowa wersja, odśwież aby zaktualizować',
|
||||
'pwa.reload': 'Odśwież',
|
||||
@@ -224,7 +223,6 @@ const messages = {
|
||||
'pwa.installTitle': 'Install the app and play offline',
|
||||
'pwa.installMobile': 'Add to home screen',
|
||||
'pwa.installDesktop': 'Install on desktop',
|
||||
'pwa.installIos': 'To install: tap Share and select "Add to Home Screen"',
|
||||
'pwa.offlineReady': 'App ready to work offline',
|
||||
'pwa.newContent': 'New content available, click on reload button to update',
|
||||
'pwa.reload': 'Reload',
|
||||
|
||||
@@ -63,20 +63,21 @@ export function generateRandomGrid(size, density = 0.5) {
|
||||
export function calculateDifficulty(density, size = 10) {
|
||||
// Data derived from Monte Carlo Simulation (Logical Solver)
|
||||
// Format: { size: [solved_pct_at_0.1, ..., solved_pct_at_0.9] }
|
||||
// Densities: 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9
|
||||
const SIM_DATA = {
|
||||
5: [86, 73, 74, 80, 88, 98, 99, 99, 100],
|
||||
10: [57, 22, 19, 44, 86, 99, 100, 100, 100],
|
||||
15: [37, 7, 2, 12, 70, 99, 100, 100, 100],
|
||||
20: [23, 3, 0, 3, 40, 99, 100, 100, 100],
|
||||
25: [13, 1, 0, 1, 19, 99, 100, 100, 100],
|
||||
30: [8, 1, 0, 0, 4, 100, 100, 100, 100],
|
||||
35: [5, 0, 0, 0, 3, 99, 100, 100, 100],
|
||||
40: [3, 0, 0, 0, 1, 96, 100, 100, 100],
|
||||
45: [2, 0, 0, 0, 1, 83, 100, 100, 100],
|
||||
50: [1, 0, 0, 0, 0, 62, 100, 100, 100],
|
||||
60: [0, 0, 0, 0, 0, 18, 100, 100, 100],
|
||||
70: [0, 0, 0, 0, 0, 14, 100, 100, 100],
|
||||
80: [0, 0, 0, 0, 0, 4, 100, 100, 100]
|
||||
5: [89, 74, 74, 81, 97, 98, 99, 100, 100],
|
||||
10: [57, 20, 16, 54, 92, 100, 100, 100, 100],
|
||||
15: [37, 10, 2, 12, 68, 100, 100, 100, 100],
|
||||
20: [23, 3, 1, 2, 37, 100, 100, 100, 100],
|
||||
25: [16, 0, 0, 1, 19, 99, 100, 100, 100],
|
||||
30: [8, 0, 0, 0, 5, 99, 100, 100, 100],
|
||||
35: [6, 0, 0, 0, 4, 91, 100, 100, 100],
|
||||
40: [3, 0, 0, 0, 2, 91, 100, 100, 100],
|
||||
45: [2, 0, 0, 0, 1, 82, 100, 100, 100],
|
||||
50: [2, 0, 0, 0, 1, 73, 100, 100, 100],
|
||||
60: [0, 0, 0, 0, 0, 35, 100, 100, 100],
|
||||
71: [0, 0, 0, 0, 0, 16, 100, 100, 100],
|
||||
80: [0, 0, 0, 0, 0, 1, 100, 100, 100]
|
||||
};
|
||||
|
||||
// Helper to get interpolated value from array
|
||||
@@ -121,32 +122,17 @@ export function calculateDifficulty(density, size = 10) {
|
||||
|
||||
const solvedPct = getSimulatedSolvedPct(size, density);
|
||||
|
||||
let value;
|
||||
let level;
|
||||
// Difficulty Score: Inverse of Solved Percent
|
||||
// 100% Solved -> 0 Difficulty
|
||||
// 0% Solved -> 100 Difficulty
|
||||
const value = Math.round(100 - solvedPct);
|
||||
|
||||
// "Hardest" threshold is 99% solvability.
|
||||
if (solvedPct < 99) {
|
||||
// Extreme: Requires guessing
|
||||
level = 'extreme';
|
||||
// Map 0-99% solved to value 85-100
|
||||
value = 85 + ((99 - solvedPct) / 99) * 15;
|
||||
} 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);
|
||||
// Thresholds
|
||||
let level = 'easy';
|
||||
if (value >= 90) level = 'extreme'; // < 10% Solved
|
||||
else if (value >= 60) level = 'hardest'; // < 40% Solved
|
||||
else if (value >= 30) level = 'harder'; // < 70% Solved
|
||||
else level = 'easy'; // > 70% Solved
|
||||
|
||||
// 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';
|
||||
}
|
||||
|
||||
return { level, value: Math.round(value) };
|
||||
return { level, value };
|
||||
}
|
||||
|
||||
@@ -227,11 +227,7 @@ export function buildShareSVG(data, t, formattedTime) {
|
||||
}
|
||||
|
||||
// URL
|
||||
svgContent += `
|
||||
<a href="${appUrl}" target="_blank">
|
||||
<text x="${padding}" y="${height - padding + 6}" font-family="Segoe UI, sans-serif" font-weight="500" font-size="14" fill="${urlColor}" style="text-decoration: underline; cursor: pointer;">${appUrl}</text>
|
||||
</a>
|
||||
`;
|
||||
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;
|
||||
|
||||
@@ -31,14 +31,14 @@ export default defineConfig({
|
||||
theme_color: '#00f2fe',
|
||||
icons: [
|
||||
{
|
||||
src: '/pwa-192x192.png',
|
||||
src: '/pwa-192x192.svg',
|
||||
sizes: '192x192',
|
||||
type: 'image/png'
|
||||
type: 'image/svg+xml'
|
||||
},
|
||||
{
|
||||
src: '/pwa-512x512.png',
|
||||
src: '/pwa-512x512.svg',
|
||||
sizes: '512x512',
|
||||
type: 'image/png'
|
||||
type: 'image/svg+xml'
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -48,8 +48,5 @@ export default defineConfig({
|
||||
alias: {
|
||||
'@': path.resolve(__dirname, './src')
|
||||
}
|
||||
},
|
||||
server: {
|
||||
allowedHosts: true
|
||||
}
|
||||
})
|
||||
|
||||