Compare commits
44 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
43c0290fac
|
|||
|
fa5fa12157
|
|||
|
29682c9a06
|
|||
|
2d30315ae6
|
|||
|
2261f44b4a
|
|||
| 2cd32d4a3e | |||
|
48def6c400
|
|||
|
f1f3f81466
|
|||
|
121e4c418f
|
|||
|
5583a08b9a
|
|||
|
fed32c6cbe
|
|||
|
99052a2b6c
|
|||
| f483d39a2c | |||
| 29952b22e7 | |||
| c42210ac24 | |||
| 0799cb2162 | |||
| 2cd2291d03 | |||
|
ec20d5ee8f
|
|||
|
b20a829d37
|
|||
|
988c4a899b
|
|||
|
d8faa308e6
|
|||
|
6bddb24bfe
|
|||
|
1c2be3567a
|
|||
|
d62cec415b | ||
|
8be28a4472
|
|||
|
48778b3e8a
|
|||
|
8bd5d5c3e6
|
|||
|
cf37ccd843
|
|||
| 9a65dfe55d | |||
| 2a88362d00 | |||
| 8e3ae3e7d6 | |||
| 51bbe0cb52 | |||
| 08292039cf | |||
| 934b2a0483 | |||
| 27270d6452 | |||
|
a4681b5b97
|
|||
|
8327597e2e
|
|||
|
bae67fc1ec
|
|||
|
47426d529a
|
|||
|
71edc3103d
|
|||
| 30c1faeae4 | |||
|
b90809fca1
|
|||
|
322182245c
|
|||
| 324b761d37 |
23
.gitea/workflows/deploy.yaml
Normal file
23
.gitea/workflows/deploy.yaml
Normal file
@@ -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
|
||||
6
.gitignore
vendored
6
.gitignore
vendored
@@ -1,7 +1,3 @@
|
||||
.gpg/
|
||||
node_modules
|
||||
dist
|
||||
.DS_Store
|
||||
.vscode
|
||||
.idea
|
||||
*.log
|
||||
dev-dist
|
||||
|
||||
@@ -8,4 +8,6 @@ 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.
|
||||
|
||||
@@ -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));
|
||||
92
dev-dist/sw.js
Normal file
92
dev-dist/sw.js
Normal file
@@ -0,0 +1,92 @@
|
||||
/**
|
||||
* 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.kkc80cp3p5o"
|
||||
}], {});
|
||||
workbox.cleanupOutdatedCaches();
|
||||
workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("index.html"), {
|
||||
allowlist: [/^\/$/]
|
||||
}));
|
||||
|
||||
}));
|
||||
3377
dev-dist/workbox-7a5e81cd.js
Normal file
3377
dev-dist/workbox-7a5e81cd.js
Normal file
File diff suppressed because it is too large
Load Diff
@@ -1,938 +0,0 @@
|
||||
[
|
||||
{
|
||||
"size": 5,
|
||||
"density": 0.1,
|
||||
"avgSolved": 89.4,
|
||||
"minSolved": 36,
|
||||
"maxSolved": 100,
|
||||
"avgTime": 0.031666799999999905
|
||||
},
|
||||
{
|
||||
"size": 5,
|
||||
"density": 0.2,
|
||||
"avgSolved": 74.2,
|
||||
"minSolved": 8,
|
||||
"maxSolved": 100,
|
||||
"avgTime": 0.03671869999999924
|
||||
},
|
||||
{
|
||||
"size": 5,
|
||||
"density": 0.3,
|
||||
"avgSolved": 74.2,
|
||||
"minSolved": 0,
|
||||
"maxSolved": 100,
|
||||
"avgTime": 0.04439559999999983
|
||||
},
|
||||
{
|
||||
"size": 5,
|
||||
"density": 0.4,
|
||||
"avgSolved": 80.8,
|
||||
"minSolved": 8,
|
||||
"maxSolved": 100,
|
||||
"avgTime": 0.0317166499999999
|
||||
},
|
||||
{
|
||||
"size": 5,
|
||||
"density": 0.5,
|
||||
"avgSolved": 96.8,
|
||||
"minSolved": 68,
|
||||
"maxSolved": 100,
|
||||
"avgTime": 0.0309604000000002
|
||||
},
|
||||
{
|
||||
"size": 5,
|
||||
"density": 0.6,
|
||||
"avgSolved": 97.6,
|
||||
"minSolved": 84,
|
||||
"maxSolved": 100,
|
||||
"avgTime": 0.031464499999999875
|
||||
},
|
||||
{
|
||||
"size": 5,
|
||||
"density": 0.7,
|
||||
"avgSolved": 99.2,
|
||||
"minSolved": 84,
|
||||
"maxSolved": 100,
|
||||
"avgTime": 0.03086874999999978
|
||||
},
|
||||
{
|
||||
"size": 5,
|
||||
"density": 0.8,
|
||||
"avgSolved": 100,
|
||||
"minSolved": 100,
|
||||
"maxSolved": 100,
|
||||
"avgTime": 0.01615615000000048
|
||||
},
|
||||
{
|
||||
"size": 5,
|
||||
"density": 0.9,
|
||||
"avgSolved": 100,
|
||||
"minSolved": 100,
|
||||
"maxSolved": 100,
|
||||
"avgTime": 0.02271474999999956
|
||||
},
|
||||
{
|
||||
"size": 10,
|
||||
"density": 0.1,
|
||||
"avgSolved": 56.6,
|
||||
"minSolved": 19,
|
||||
"maxSolved": 86,
|
||||
"avgTime": 0.042958299999999915
|
||||
},
|
||||
{
|
||||
"size": 10,
|
||||
"density": 0.2,
|
||||
"avgSolved": 19.8,
|
||||
"minSolved": 0,
|
||||
"maxSolved": 51,
|
||||
"avgTime": 0.050141749999999874
|
||||
},
|
||||
{
|
||||
"size": 10,
|
||||
"density": 0.3,
|
||||
"avgSolved": 15.75,
|
||||
"minSolved": 0,
|
||||
"maxSolved": 73,
|
||||
"avgTime": 0.06852290000000014
|
||||
},
|
||||
{
|
||||
"size": 10,
|
||||
"density": 0.4,
|
||||
"avgSolved": 54.05,
|
||||
"minSolved": 0,
|
||||
"maxSolved": 100,
|
||||
"avgTime": 0.12701870000000018
|
||||
},
|
||||
{
|
||||
"size": 10,
|
||||
"density": 0.5,
|
||||
"avgSolved": 91.8,
|
||||
"minSolved": 59,
|
||||
"maxSolved": 100,
|
||||
"avgTime": 0.16561034999999985
|
||||
},
|
||||
{
|
||||
"size": 10,
|
||||
"density": 0.6,
|
||||
"avgSolved": 99.8,
|
||||
"minSolved": 96,
|
||||
"maxSolved": 100,
|
||||
"avgTime": 0.07136649999999882
|
||||
},
|
||||
{
|
||||
"size": 10,
|
||||
"density": 0.7,
|
||||
"avgSolved": 99.8,
|
||||
"minSolved": 96,
|
||||
"maxSolved": 100,
|
||||
"avgTime": 0.04808134999999893
|
||||
},
|
||||
{
|
||||
"size": 10,
|
||||
"density": 0.8,
|
||||
"avgSolved": 100,
|
||||
"minSolved": 100,
|
||||
"maxSolved": 100,
|
||||
"avgTime": 0.03795824999999979
|
||||
},
|
||||
{
|
||||
"size": 10,
|
||||
"density": 0.9,
|
||||
"avgSolved": 100,
|
||||
"minSolved": 100,
|
||||
"maxSolved": 100,
|
||||
"avgTime": 0.024952100000000855
|
||||
},
|
||||
{
|
||||
"size": 15,
|
||||
"density": 0.1,
|
||||
"avgSolved": 37.044444444444444,
|
||||
"minSolved": 13.333333333333334,
|
||||
"maxSolved": 61.77777777777778,
|
||||
"avgTime": 0.045045850000000345
|
||||
},
|
||||
{
|
||||
"size": 15,
|
||||
"density": 0.2,
|
||||
"avgSolved": 9.777777777777775,
|
||||
"minSolved": 0,
|
||||
"maxSolved": 26.666666666666668,
|
||||
"avgTime": 0.034581349999998776
|
||||
},
|
||||
{
|
||||
"size": 15,
|
||||
"density": 0.3,
|
||||
"avgSolved": 1.8888888888888886,
|
||||
"minSolved": 0,
|
||||
"maxSolved": 8,
|
||||
"avgTime": 0.029402199999999823
|
||||
},
|
||||
{
|
||||
"size": 15,
|
||||
"density": 0.4,
|
||||
"avgSolved": 11.822222222222223,
|
||||
"minSolved": 0,
|
||||
"maxSolved": 61.33333333333333,
|
||||
"avgTime": 0.07898965000000047
|
||||
},
|
||||
{
|
||||
"size": 15,
|
||||
"density": 0.5,
|
||||
"avgSolved": 68.19999999999999,
|
||||
"minSolved": 2.666666666666667,
|
||||
"maxSolved": 100,
|
||||
"avgTime": 0.1374602999999997
|
||||
},
|
||||
{
|
||||
"size": 15,
|
||||
"density": 0.6,
|
||||
"avgSolved": 99.55555555555554,
|
||||
"minSolved": 96.44444444444444,
|
||||
"maxSolved": 100,
|
||||
"avgTime": 0.09379159999999978
|
||||
},
|
||||
{
|
||||
"size": 15,
|
||||
"density": 0.7,
|
||||
"avgSolved": 99.77777777777779,
|
||||
"minSolved": 97.33333333333334,
|
||||
"maxSolved": 100,
|
||||
"avgTime": 0.07072704999999928
|
||||
},
|
||||
{
|
||||
"size": 15,
|
||||
"density": 0.8,
|
||||
"avgSolved": 100,
|
||||
"minSolved": 100,
|
||||
"maxSolved": 100,
|
||||
"avgTime": 0.050104250000000405
|
||||
},
|
||||
{
|
||||
"size": 15,
|
||||
"density": 0.9,
|
||||
"avgSolved": 100,
|
||||
"minSolved": 100,
|
||||
"maxSolved": 100,
|
||||
"avgTime": 0.031362550000000766
|
||||
},
|
||||
{
|
||||
"size": 20,
|
||||
"density": 0.1,
|
||||
"avgSolved": 22.5875,
|
||||
"minSolved": 5,
|
||||
"maxSolved": 41.5,
|
||||
"avgTime": 0.04363335000000035
|
||||
},
|
||||
{
|
||||
"size": 20,
|
||||
"density": 0.2,
|
||||
"avgSolved": 3.25,
|
||||
"minSolved": 0,
|
||||
"maxSolved": 14.499999999999998,
|
||||
"avgTime": 0.03823525000000103
|
||||
},
|
||||
{
|
||||
"size": 20,
|
||||
"density": 0.3,
|
||||
"avgSolved": 0.5625,
|
||||
"minSolved": 0,
|
||||
"maxSolved": 5,
|
||||
"avgTime": 0.03880414999999786
|
||||
},
|
||||
{
|
||||
"size": 20,
|
||||
"density": 0.4,
|
||||
"avgSolved": 1.4625,
|
||||
"minSolved": 0,
|
||||
"maxSolved": 3.25,
|
||||
"avgTime": 0.06692695000000129
|
||||
},
|
||||
{
|
||||
"size": 20,
|
||||
"density": 0.5,
|
||||
"avgSolved": 36.75,
|
||||
"minSolved": 1.25,
|
||||
"maxSolved": 99,
|
||||
"avgTime": 0.25872084999999884
|
||||
},
|
||||
{
|
||||
"size": 20,
|
||||
"density": 0.6,
|
||||
"avgSolved": 99.8,
|
||||
"minSolved": 99,
|
||||
"maxSolved": 100,
|
||||
"avgTime": 0.2258772000000004
|
||||
},
|
||||
{
|
||||
"size": 20,
|
||||
"density": 0.7,
|
||||
"avgSolved": 99.95,
|
||||
"minSolved": 99,
|
||||
"maxSolved": 100,
|
||||
"avgTime": 0.13418124999999997
|
||||
},
|
||||
{
|
||||
"size": 20,
|
||||
"density": 0.8,
|
||||
"avgSolved": 100,
|
||||
"minSolved": 100,
|
||||
"maxSolved": 100,
|
||||
"avgTime": 0.09264785000000053
|
||||
},
|
||||
{
|
||||
"size": 20,
|
||||
"density": 0.9,
|
||||
"avgSolved": 100,
|
||||
"minSolved": 100,
|
||||
"maxSolved": 100,
|
||||
"avgTime": 0.05307699999999756
|
||||
},
|
||||
{
|
||||
"size": 25,
|
||||
"density": 0.1,
|
||||
"avgSolved": 16.000000000000004,
|
||||
"minSolved": 7.84,
|
||||
"maxSolved": 32.800000000000004,
|
||||
"avgTime": 0.05678540000000112
|
||||
},
|
||||
{
|
||||
"size": 25,
|
||||
"density": 0.2,
|
||||
"avgSolved": 0,
|
||||
"minSolved": 0,
|
||||
"maxSolved": 0,
|
||||
"avgTime": 0.04278334999999842
|
||||
},
|
||||
{
|
||||
"size": 25,
|
||||
"density": 0.3,
|
||||
"avgSolved": 0.048,
|
||||
"minSolved": 0,
|
||||
"maxSolved": 0.64,
|
||||
"avgTime": 0.05884794999999983
|
||||
},
|
||||
{
|
||||
"size": 25,
|
||||
"density": 0.4,
|
||||
"avgSolved": 0.8880000000000001,
|
||||
"minSolved": 0,
|
||||
"maxSolved": 9.44,
|
||||
"avgTime": 0.11761245000000287
|
||||
},
|
||||
{
|
||||
"size": 25,
|
||||
"density": 0.5,
|
||||
"avgSolved": 19.128000000000007,
|
||||
"minSolved": 1.1199999999999999,
|
||||
"maxSolved": 96.48,
|
||||
"avgTime": 0.3490229000000021
|
||||
},
|
||||
{
|
||||
"size": 25,
|
||||
"density": 0.6,
|
||||
"avgSolved": 99.24799999999998,
|
||||
"minSolved": 94.88,
|
||||
"maxSolved": 100,
|
||||
"avgTime": 0.49611459999999996
|
||||
},
|
||||
{
|
||||
"size": 25,
|
||||
"density": 0.7,
|
||||
"avgSolved": 99.904,
|
||||
"minSolved": 99.36,
|
||||
"maxSolved": 100,
|
||||
"avgTime": 0.23916465000000073
|
||||
},
|
||||
{
|
||||
"size": 25,
|
||||
"density": 0.8,
|
||||
"avgSolved": 100,
|
||||
"minSolved": 100,
|
||||
"maxSolved": 100,
|
||||
"avgTime": 0.14604994999999973
|
||||
},
|
||||
{
|
||||
"size": 25,
|
||||
"density": 0.9,
|
||||
"avgSolved": 99.96799999999999,
|
||||
"minSolved": 99.36,
|
||||
"maxSolved": 100,
|
||||
"avgTime": 0.08385419999999896
|
||||
},
|
||||
{
|
||||
"size": 30,
|
||||
"density": 0.1,
|
||||
"avgSolved": 7.988888888888889,
|
||||
"minSolved": 0,
|
||||
"maxSolved": 16,
|
||||
"avgTime": 0.08026245000000073
|
||||
},
|
||||
{
|
||||
"size": 30,
|
||||
"density": 0.2,
|
||||
"avgSolved": 0.16666666666666669,
|
||||
"minSolved": 0,
|
||||
"maxSolved": 3.3333333333333335,
|
||||
"avgTime": 0.06999999999999887
|
||||
},
|
||||
{
|
||||
"size": 30,
|
||||
"density": 0.3,
|
||||
"avgSolved": 0,
|
||||
"minSolved": 0,
|
||||
"maxSolved": 0,
|
||||
"avgTime": 0.08285835000000005
|
||||
},
|
||||
{
|
||||
"size": 30,
|
||||
"density": 0.4,
|
||||
"avgSolved": 0.3777777777777777,
|
||||
"minSolved": 0,
|
||||
"maxSolved": 4.111111111111112,
|
||||
"avgTime": 0.1756041499999988
|
||||
},
|
||||
{
|
||||
"size": 30,
|
||||
"density": 0.5,
|
||||
"avgSolved": 5.4222222222222225,
|
||||
"minSolved": 0.7777777777777778,
|
||||
"maxSolved": 21.444444444444443,
|
||||
"avgTime": 0.41105620000000015
|
||||
},
|
||||
{
|
||||
"size": 30,
|
||||
"density": 0.6,
|
||||
"avgSolved": 99.41666666666669,
|
||||
"minSolved": 94.77777777777779,
|
||||
"maxSolved": 100,
|
||||
"avgTime": 0.9417500999999995
|
||||
},
|
||||
{
|
||||
"size": 30,
|
||||
"density": 0.7,
|
||||
"avgSolved": 99.93333333333335,
|
||||
"minSolved": 99.55555555555556,
|
||||
"maxSolved": 100,
|
||||
"avgTime": 0.41628955000000334
|
||||
},
|
||||
{
|
||||
"size": 30,
|
||||
"density": 0.8,
|
||||
"avgSolved": 100,
|
||||
"minSolved": 100,
|
||||
"maxSolved": 100,
|
||||
"avgTime": 0.22320620000000133
|
||||
},
|
||||
{
|
||||
"size": 30,
|
||||
"density": 0.9,
|
||||
"avgSolved": 100,
|
||||
"minSolved": 100,
|
||||
"maxSolved": 100,
|
||||
"avgTime": 0.13331460000000134
|
||||
},
|
||||
{
|
||||
"size": 35,
|
||||
"density": 0.1,
|
||||
"avgSolved": 5.653061224489796,
|
||||
"minSolved": 0,
|
||||
"maxSolved": 13.795918367346937,
|
||||
"avgTime": 0.11177699999999931
|
||||
},
|
||||
{
|
||||
"size": 35,
|
||||
"density": 0.2,
|
||||
"avgSolved": 0.14285714285714285,
|
||||
"minSolved": 0,
|
||||
"maxSolved": 2.857142857142857,
|
||||
"avgTime": 0.09598544999999917
|
||||
},
|
||||
{
|
||||
"size": 35,
|
||||
"density": 0.3,
|
||||
"avgSolved": 0,
|
||||
"minSolved": 0,
|
||||
"maxSolved": 0,
|
||||
"avgTime": 0.1290145000000038
|
||||
},
|
||||
{
|
||||
"size": 35,
|
||||
"density": 0.4,
|
||||
"avgSolved": 0.1346938775510204,
|
||||
"minSolved": 0,
|
||||
"maxSolved": 0.5714285714285714,
|
||||
"avgTime": 0.21904799999999797
|
||||
},
|
||||
{
|
||||
"size": 35,
|
||||
"density": 0.5,
|
||||
"avgSolved": 4.424489795918367,
|
||||
"minSolved": 0.40816326530612246,
|
||||
"maxSolved": 23.183673469387756,
|
||||
"avgTime": 0.5596769500000022
|
||||
},
|
||||
{
|
||||
"size": 35,
|
||||
"density": 0.6,
|
||||
"avgSolved": 91.1061224489796,
|
||||
"minSolved": 8.408163265306122,
|
||||
"maxSolved": 100,
|
||||
"avgTime": 1.5827311000000024
|
||||
},
|
||||
{
|
||||
"size": 35,
|
||||
"density": 0.7,
|
||||
"avgSolved": 99.9673469387755,
|
||||
"minSolved": 99.67346938775509,
|
||||
"maxSolved": 100,
|
||||
"avgTime": 0.5970167499999988
|
||||
},
|
||||
{
|
||||
"size": 35,
|
||||
"density": 0.8,
|
||||
"avgSolved": 100,
|
||||
"minSolved": 100,
|
||||
"maxSolved": 100,
|
||||
"avgTime": 0.33084175000000327
|
||||
},
|
||||
{
|
||||
"size": 35,
|
||||
"density": 0.9,
|
||||
"avgSolved": 100,
|
||||
"minSolved": 100,
|
||||
"maxSolved": 100,
|
||||
"avgTime": 0.1685022000000032
|
||||
},
|
||||
{
|
||||
"size": 40,
|
||||
"density": 0.1,
|
||||
"avgSolved": 2.734375,
|
||||
"minSolved": 0,
|
||||
"maxSolved": 9.8125,
|
||||
"avgTime": 0.13156869999999826
|
||||
},
|
||||
{
|
||||
"size": 40,
|
||||
"density": 0.2,
|
||||
"avgSolved": 0,
|
||||
"minSolved": 0,
|
||||
"maxSolved": 0,
|
||||
"avgTime": 0.13052910000000112
|
||||
},
|
||||
{
|
||||
"size": 40,
|
||||
"density": 0.3,
|
||||
"avgSolved": 0,
|
||||
"minSolved": 0,
|
||||
"maxSolved": 0,
|
||||
"avgTime": 0.17675199999999905
|
||||
},
|
||||
{
|
||||
"size": 40,
|
||||
"density": 0.4,
|
||||
"avgSolved": 0.03125,
|
||||
"minSolved": 0,
|
||||
"maxSolved": 0.3125,
|
||||
"avgTime": 0.26616039999999686
|
||||
},
|
||||
{
|
||||
"size": 40,
|
||||
"density": 0.5,
|
||||
"avgSolved": 2.14375,
|
||||
"minSolved": 0,
|
||||
"maxSolved": 9.5625,
|
||||
"avgTime": 0.694316649999999
|
||||
},
|
||||
{
|
||||
"size": 40,
|
||||
"density": 0.6,
|
||||
"avgSolved": 91.44375,
|
||||
"minSolved": 22.3125,
|
||||
"maxSolved": 100,
|
||||
"avgTime": 2.9244042000000006
|
||||
},
|
||||
{
|
||||
"size": 40,
|
||||
"density": 0.7,
|
||||
"avgSolved": 99.9875,
|
||||
"minSolved": 99.75,
|
||||
"maxSolved": 100,
|
||||
"avgTime": 0.8381519999999967
|
||||
},
|
||||
{
|
||||
"size": 40,
|
||||
"density": 0.8,
|
||||
"avgSolved": 100,
|
||||
"minSolved": 100,
|
||||
"maxSolved": 100,
|
||||
"avgTime": 0.4339062999999925
|
||||
},
|
||||
{
|
||||
"size": 40,
|
||||
"density": 0.9,
|
||||
"avgSolved": 100,
|
||||
"minSolved": 100,
|
||||
"maxSolved": 100,
|
||||
"avgTime": 0.2375938000000076
|
||||
},
|
||||
{
|
||||
"size": 45,
|
||||
"density": 0.1,
|
||||
"avgSolved": 1.7827160493827159,
|
||||
"minSolved": 0,
|
||||
"maxSolved": 4.691358024691358,
|
||||
"avgTime": 0.1660813500000046
|
||||
},
|
||||
{
|
||||
"size": 45,
|
||||
"density": 0.2,
|
||||
"avgSolved": 0,
|
||||
"minSolved": 0,
|
||||
"maxSolved": 0,
|
||||
"avgTime": 0.1715666999999968
|
||||
},
|
||||
{
|
||||
"size": 45,
|
||||
"density": 0.3,
|
||||
"avgSolved": 0,
|
||||
"minSolved": 0,
|
||||
"maxSolved": 0,
|
||||
"avgTime": 0.23760415000000706
|
||||
},
|
||||
{
|
||||
"size": 45,
|
||||
"density": 0.4,
|
||||
"avgSolved": 0.012345679012345678,
|
||||
"minSolved": 0,
|
||||
"maxSolved": 0.14814814814814814,
|
||||
"avgTime": 0.333931249999992
|
||||
},
|
||||
{
|
||||
"size": 45,
|
||||
"density": 0.5,
|
||||
"avgSolved": 1.439506172839506,
|
||||
"minSolved": 0.39506172839506176,
|
||||
"maxSolved": 5.135802469135802,
|
||||
"avgTime": 0.9644125499999916
|
||||
},
|
||||
{
|
||||
"size": 45,
|
||||
"density": 0.6,
|
||||
"avgSolved": 81.71851851851852,
|
||||
"minSolved": 6.0246913580246915,
|
||||
"maxSolved": 100,
|
||||
"avgTime": 5.281324949999998
|
||||
},
|
||||
{
|
||||
"size": 45,
|
||||
"density": 0.7,
|
||||
"avgSolved": 99.94074074074075,
|
||||
"minSolved": 99.4074074074074,
|
||||
"maxSolved": 100,
|
||||
"avgTime": 1.2768960000000107
|
||||
},
|
||||
{
|
||||
"size": 45,
|
||||
"density": 0.8,
|
||||
"avgSolved": 100,
|
||||
"minSolved": 100,
|
||||
"maxSolved": 100,
|
||||
"avgTime": 0.638566650000007
|
||||
},
|
||||
{
|
||||
"size": 45,
|
||||
"density": 0.9,
|
||||
"avgSolved": 100,
|
||||
"minSolved": 100,
|
||||
"maxSolved": 100,
|
||||
"avgTime": 0.3004915999999923
|
||||
},
|
||||
{
|
||||
"size": 50,
|
||||
"density": 0.1,
|
||||
"avgSolved": 1.7,
|
||||
"minSolved": 0,
|
||||
"maxSolved": 5.92,
|
||||
"avgTime": 0.20294785000000387
|
||||
},
|
||||
{
|
||||
"size": 50,
|
||||
"density": 0.2,
|
||||
"avgSolved": 0,
|
||||
"minSolved": 0,
|
||||
"maxSolved": 0,
|
||||
"avgTime": 0.23199789999999892
|
||||
},
|
||||
{
|
||||
"size": 50,
|
||||
"density": 0.3,
|
||||
"avgSolved": 0,
|
||||
"minSolved": 0,
|
||||
"maxSolved": 0,
|
||||
"avgTime": 0.29876259999999205
|
||||
},
|
||||
{
|
||||
"size": 50,
|
||||
"density": 0.4,
|
||||
"avgSolved": 0.008,
|
||||
"minSolved": 0,
|
||||
"maxSolved": 0.16,
|
||||
"avgTime": 0.38459799999998834
|
||||
},
|
||||
{
|
||||
"size": 50,
|
||||
"density": 0.5,
|
||||
"avgSolved": 0.5099999999999999,
|
||||
"minSolved": 0,
|
||||
"maxSolved": 1.7999999999999998,
|
||||
"avgTime": 0.8961771499999941
|
||||
},
|
||||
{
|
||||
"size": 50,
|
||||
"density": 0.6,
|
||||
"avgSolved": 73.258,
|
||||
"minSolved": 5.6000000000000005,
|
||||
"maxSolved": 100,
|
||||
"avgTime": 7.937735449999991
|
||||
},
|
||||
{
|
||||
"size": 50,
|
||||
"density": 0.7,
|
||||
"avgSolved": 99.96399999999998,
|
||||
"minSolved": 99.76,
|
||||
"maxSolved": 100,
|
||||
"avgTime": 1.6324250000000062
|
||||
},
|
||||
{
|
||||
"size": 50,
|
||||
"density": 0.8,
|
||||
"avgSolved": 100,
|
||||
"minSolved": 100,
|
||||
"maxSolved": 100,
|
||||
"avgTime": 0.8293270000000064
|
||||
},
|
||||
{
|
||||
"size": 50,
|
||||
"density": 0.9,
|
||||
"avgSolved": 100,
|
||||
"minSolved": 100,
|
||||
"maxSolved": 100,
|
||||
"avgTime": 0.41459575000000654
|
||||
},
|
||||
{
|
||||
"size": 60,
|
||||
"density": 0.1,
|
||||
"avgSolved": 0.16666666666666669,
|
||||
"minSolved": 0,
|
||||
"maxSolved": 1.6666666666666667,
|
||||
"avgTime": 0.2432124999999928
|
||||
},
|
||||
{
|
||||
"size": 60,
|
||||
"density": 0.2,
|
||||
"avgSolved": 0,
|
||||
"minSolved": 0,
|
||||
"maxSolved": 0,
|
||||
"avgTime": 0.35082704999999237
|
||||
},
|
||||
{
|
||||
"size": 60,
|
||||
"density": 0.3,
|
||||
"avgSolved": 0,
|
||||
"minSolved": 0,
|
||||
"maxSolved": 0,
|
||||
"avgTime": 0.49827310000000014
|
||||
},
|
||||
{
|
||||
"size": 60,
|
||||
"density": 0.4,
|
||||
"avgSolved": 0.0027777777777777775,
|
||||
"minSolved": 0,
|
||||
"maxSolved": 0.05555555555555555,
|
||||
"avgTime": 0.6393062499999985
|
||||
},
|
||||
{
|
||||
"size": 60,
|
||||
"density": 0.5,
|
||||
"avgSolved": 0.23055555555555554,
|
||||
"minSolved": 0,
|
||||
"maxSolved": 1.6666666666666667,
|
||||
"avgTime": 1.2402395500000012
|
||||
},
|
||||
{
|
||||
"size": 60,
|
||||
"density": 0.6,
|
||||
"avgSolved": 35.01805555555556,
|
||||
"minSolved": 1.3333333333333335,
|
||||
"maxSolved": 100,
|
||||
"avgTime": 10.759754149999992
|
||||
},
|
||||
{
|
||||
"size": 60,
|
||||
"density": 0.7,
|
||||
"avgSolved": 99.96944444444445,
|
||||
"minSolved": 99.83333333333333,
|
||||
"maxSolved": 100,
|
||||
"avgTime": 2.964204100000029
|
||||
},
|
||||
{
|
||||
"size": 60,
|
||||
"density": 0.8,
|
||||
"avgSolved": 100,
|
||||
"minSolved": 100,
|
||||
"maxSolved": 100,
|
||||
"avgTime": 1.2736664999999903
|
||||
},
|
||||
{
|
||||
"size": 60,
|
||||
"density": 0.9,
|
||||
"avgSolved": 100,
|
||||
"minSolved": 100,
|
||||
"maxSolved": 100,
|
||||
"avgTime": 0.6249353999999812
|
||||
},
|
||||
{
|
||||
"size": 70,
|
||||
"density": 0.1,
|
||||
"avgSolved": 0.14285714285714285,
|
||||
"minSolved": 0,
|
||||
"maxSolved": 1.4285714285714286,
|
||||
"avgTime": 0.34277719999998907
|
||||
},
|
||||
{
|
||||
"size": 70,
|
||||
"density": 0.2,
|
||||
"avgSolved": 0,
|
||||
"minSolved": 0,
|
||||
"maxSolved": 0,
|
||||
"avgTime": 0.5435105000000249
|
||||
},
|
||||
{
|
||||
"size": 70,
|
||||
"density": 0.3,
|
||||
"avgSolved": 0,
|
||||
"minSolved": 0,
|
||||
"maxSolved": 0,
|
||||
"avgTime": 0.7600602999999865
|
||||
},
|
||||
{
|
||||
"size": 70,
|
||||
"density": 0.4,
|
||||
"avgSolved": 0,
|
||||
"minSolved": 0,
|
||||
"maxSolved": 0,
|
||||
"avgTime": 0.9591250999999943
|
||||
},
|
||||
{
|
||||
"size": 70,
|
||||
"density": 0.5,
|
||||
"avgSolved": 0.04081632653061225,
|
||||
"minSolved": 0,
|
||||
"maxSolved": 0.2857142857142857,
|
||||
"avgTime": 1.491010399999982
|
||||
},
|
||||
{
|
||||
"size": 70,
|
||||
"density": 0.6,
|
||||
"avgSolved": 16.403061224489797,
|
||||
"minSolved": 1,
|
||||
"maxSolved": 99.71428571428571,
|
||||
"avgTime": 22.21432699999999
|
||||
},
|
||||
{
|
||||
"size": 70,
|
||||
"density": 0.7,
|
||||
"avgSolved": 99.96836734693878,
|
||||
"minSolved": 99.73469387755102,
|
||||
"maxSolved": 100,
|
||||
"avgTime": 4.92020829999999
|
||||
},
|
||||
{
|
||||
"size": 70,
|
||||
"density": 0.8,
|
||||
"avgSolved": 99.99591836734695,
|
||||
"minSolved": 99.91836734693878,
|
||||
"maxSolved": 100,
|
||||
"avgTime": 2.0306394499999554
|
||||
},
|
||||
{
|
||||
"size": 70,
|
||||
"density": 0.9,
|
||||
"avgSolved": 100,
|
||||
"minSolved": 100,
|
||||
"maxSolved": 100,
|
||||
"avgTime": 0.8882499500000336
|
||||
},
|
||||
{
|
||||
"size": 80,
|
||||
"density": 0.1,
|
||||
"avgSolved": 0,
|
||||
"minSolved": 0,
|
||||
"maxSolved": 0,
|
||||
"avgTime": 0.4418666499999858
|
||||
},
|
||||
{
|
||||
"size": 80,
|
||||
"density": 0.2,
|
||||
"avgSolved": 0,
|
||||
"minSolved": 0,
|
||||
"maxSolved": 0,
|
||||
"avgTime": 0.7795667999999978
|
||||
},
|
||||
{
|
||||
"size": 80,
|
||||
"density": 0.3,
|
||||
"avgSolved": 0,
|
||||
"minSolved": 0,
|
||||
"maxSolved": 0,
|
||||
"avgTime": 1.0745101999999747
|
||||
},
|
||||
{
|
||||
"size": 80,
|
||||
"density": 0.4,
|
||||
"avgSolved": 0,
|
||||
"minSolved": 0,
|
||||
"maxSolved": 0,
|
||||
"avgTime": 1.3407041500000105
|
||||
},
|
||||
{
|
||||
"size": 80,
|
||||
"density": 0.5,
|
||||
"avgSolved": 0.0125,
|
||||
"minSolved": 0,
|
||||
"maxSolved": 0.078125,
|
||||
"avgTime": 1.9724897000000283
|
||||
},
|
||||
{
|
||||
"size": 80,
|
||||
"density": 0.6,
|
||||
"avgSolved": 1.21484375,
|
||||
"minSolved": 0.40625,
|
||||
"maxSolved": 2.296875,
|
||||
"avgTime": 3.9163123999999927
|
||||
},
|
||||
{
|
||||
"size": 80,
|
||||
"density": 0.7,
|
||||
"avgSolved": 99.978125,
|
||||
"minSolved": 99.9375,
|
||||
"maxSolved": 100,
|
||||
"avgTime": 7.790070799999967
|
||||
},
|
||||
{
|
||||
"size": 80,
|
||||
"density": 0.8,
|
||||
"avgSolved": 100,
|
||||
"minSolved": 100,
|
||||
"maxSolved": 100,
|
||||
"avgTime": 3.1350061999999754
|
||||
},
|
||||
{
|
||||
"size": 80,
|
||||
"density": 0.9,
|
||||
"avgSolved": 100,
|
||||
"minSolved": 100,
|
||||
"maxSolved": 100,
|
||||
"avgTime": 1.3134414999999535
|
||||
}
|
||||
]
|
||||
@@ -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
|
||||
|
||||
@@ -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="/nonograms.svg" />
|
||||
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
|
||||
<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
4
package-lock.json
generated
@@ -1,12 +1,12 @@
|
||||
{
|
||||
"name": "vue-nonograms-solid",
|
||||
"version": "1.9.13",
|
||||
"version": "1.14.1",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "vue-nonograms-solid",
|
||||
"version": "1.9.13",
|
||||
"version": "1.14.1",
|
||||
"dependencies": {
|
||||
"fireworks-js": "^2.10.8",
|
||||
"flag-icons": "^7.5.0",
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
{
|
||||
"name": "vue-nonograms-solid",
|
||||
"version": "1.9.13",
|
||||
"version": "1.14.1",
|
||||
"homepage": "https://nonograms.7u.pl/",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"dev": "vite --host",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview",
|
||||
"test": "vitest"
|
||||
|
||||
BIN
public/apple-touch-icon.png
Normal file
BIN
public/apple-touch-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
@@ -1,28 +1,44 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="192" height="192" viewBox="0 0 192 192">
|
||||
<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>
|
||||
<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"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 1.8 KiB |
BIN
public/pwa-192x192.png
Normal file
BIN
public/pwa-192x192.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
@@ -8,17 +8,37 @@
|
||||
<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>
|
||||
<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"/>
|
||||
|
||||
<!-- 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"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.8 KiB |
BIN
public/pwa-512x512.png
Normal file
BIN
public/pwa-512x512.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 78 KiB |
@@ -1,4 +1,4 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 192 192">
|
||||
<defs>
|
||||
<linearGradient id="bg" x1="0" y1="0" x2="1" y2="1">
|
||||
<stop offset="0" stop-color="#43C6AC"/>
|
||||
@@ -8,17 +8,37 @@
|
||||
<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>
|
||||
<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"/>
|
||||
|
||||
<!-- 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"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.8 KiB |
BIN
public/screenshot.png
Normal file
BIN
public/screenshot.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 MiB |
42
scripts/generate-icons.js
Normal file
42
scripts/generate-icons.js
Normal file
@@ -0,0 +1,42 @@
|
||||
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();
|
||||
47
scripts/run_simulation.mjs
Normal file
47
scripts/run_simulation.mjs
Normal file
@@ -0,0 +1,47 @@
|
||||
|
||||
import { generateRandomGrid, calculateHints } from '../src/utils/puzzleUtils.js';
|
||||
import { solvePuzzle } from '../src/utils/solver.js';
|
||||
import fs from 'fs';
|
||||
|
||||
const SIZES = [5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75, 80];
|
||||
const DENSITIES = [0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9];
|
||||
const SAMPLES = 200; // High sample count for stability
|
||||
|
||||
console.log('Starting simulation...');
|
||||
console.log(`Sizes: ${SIZES.join(', ')}`);
|
||||
console.log(`Densities: ${DENSITIES.join(', ')}`);
|
||||
console.log(`Samples per point: ${SAMPLES}`);
|
||||
|
||||
const results = {};
|
||||
|
||||
async function run() {
|
||||
const totalSteps = SIZES.length * DENSITIES.length;
|
||||
let currentStep = 0;
|
||||
const startTime = Date.now();
|
||||
|
||||
for (const size of SIZES) {
|
||||
results[size] = [];
|
||||
for (const density of DENSITIES) {
|
||||
let totalSolved = 0;
|
||||
for (let i = 0; i < SAMPLES; i++) {
|
||||
const grid = generateRandomGrid(size, density);
|
||||
const { rowHints, colHints } = calculateHints(grid);
|
||||
const { percentSolved } = solvePuzzle(rowHints, colHints);
|
||||
totalSolved += percentSolved;
|
||||
}
|
||||
const avg = Math.round(totalSolved / SAMPLES);
|
||||
results[size].push(avg);
|
||||
|
||||
currentStep++;
|
||||
const pct = Math.round((currentStep / totalSteps) * 100);
|
||||
const elapsed = ((Date.now() - startTime) / 1000).toFixed(0);
|
||||
process.stdout.write(`\rProgress: ${pct}% (${currentStep}/${totalSteps}) - Elapsed: ${elapsed}s`);
|
||||
}
|
||||
}
|
||||
|
||||
console.log('\n\nSimulation complete!');
|
||||
console.log('SIM_DATA = ' + JSON.stringify(results, null, 4) + ';');
|
||||
fs.writeFileSync('simulation_results.json', JSON.stringify(results, null, 4));
|
||||
}
|
||||
|
||||
run();
|
||||
@@ -1,75 +1,38 @@
|
||||
|
||||
import fs from 'fs';
|
||||
import path from 'path';
|
||||
import { generateRandomGrid, calculateHints } from '../src/utils/puzzleUtils.js';
|
||||
import { solvePuzzle } from '../src/utils/solver.js';
|
||||
|
||||
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 SIZES = [5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 60, 70, 80];
|
||||
const DENSITIES = [0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9];
|
||||
const SAMPLES_PER_POINT = 20; // Adjust based on time/accuracy needs
|
||||
const SAMPLES_SMALL = 100; // For size <= 25
|
||||
const SAMPLES_LARGE = 30; // For size > 25
|
||||
|
||||
console.log('Starting Monte Carlo Simulation for Nonogram Difficulty...');
|
||||
console.log(`Config: Sizes=${SIZES.length}, Densities=${DENSITIES.length}, Samples=${SAMPLES_PER_POINT}`);
|
||||
const results = {};
|
||||
|
||||
const results = [];
|
||||
const csvRows = ['size,density,avg_solved_percent,min_solved_percent,max_solved_percent,avg_time_ms'];
|
||||
console.log('Starting Monte Carlo Simulation...');
|
||||
|
||||
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;
|
||||
|
||||
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
|
||||
for (let i = 0; i < samples; i++) {
|
||||
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 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)}%`);
|
||||
const avg = Math.round(totalSolved / samples);
|
||||
rowData.push(avg);
|
||||
}
|
||||
results[size] = rowData;
|
||||
console.log(` Size ${size}: [${rowData.join(', ')}]`);
|
||||
}
|
||||
|
||||
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}`);
|
||||
const duration = (Date.now() - startTime) / 1000;
|
||||
console.log(`\nSimulation Complete in ${duration.toFixed(2)}s. Result JSON:`);
|
||||
console.log(JSON.stringify(results, null, 4));
|
||||
|
||||
142
src/App.vue
142
src/App.vue
@@ -8,6 +8,7 @@ import StatusPanel from './components/StatusPanel.vue';
|
||||
import GuidePanel from './components/GuidePanel.vue';
|
||||
import WinModal from './components/WinModal.vue';
|
||||
import CustomGameModal from './components/CustomGameModal.vue';
|
||||
import ImageImportModal from './components/ImageImportModal.vue';
|
||||
import SimulationView from './components/SimulationView.vue';
|
||||
import FixedBar from './components/FixedBar.vue';
|
||||
import ReloadPrompt from './components/ReloadPrompt.vue';
|
||||
@@ -16,6 +17,7 @@ import ReloadPrompt from './components/ReloadPrompt.vue';
|
||||
const store = usePuzzleStore();
|
||||
const { t, locale, setLocale, locales } = useI18n();
|
||||
const showCustomModal = ref(false);
|
||||
const showImageImportModal = ref(false);
|
||||
const showSimulation = ref(false);
|
||||
const showGuide = ref(false);
|
||||
const deferredPrompt = ref(null);
|
||||
@@ -23,6 +25,8 @@ const canInstall = ref(false);
|
||||
const installDismissed = ref(false);
|
||||
const isCoarsePointer = ref(false);
|
||||
const isStandalone = ref(false);
|
||||
const isIos = ref(false);
|
||||
const isDev = ref(false);
|
||||
const themePreference = ref('system');
|
||||
const appVersion = __APP_VERSION__;
|
||||
let displayModeMedia = null;
|
||||
@@ -38,6 +42,10 @@ const onKeyDownGlobal = (e) => {
|
||||
showCustomModal.value = false;
|
||||
return;
|
||||
}
|
||||
if (showImageImportModal.value) {
|
||||
showImageImportModal.value = false;
|
||||
return;
|
||||
}
|
||||
if (store.isGameWon) {
|
||||
store.closeWinModal();
|
||||
}
|
||||
@@ -58,7 +66,7 @@ const updateStandalone = () => {
|
||||
const handleBeforeInstallPrompt = (e) => {
|
||||
e.preventDefault();
|
||||
deferredPrompt.value = e;
|
||||
if (!isStandalone.value) {
|
||||
if (!isStandalone.value && !isDev.value) {
|
||||
canInstall.value = true;
|
||||
}
|
||||
};
|
||||
@@ -109,6 +117,9 @@ 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);
|
||||
isDev.value = window.location.port !== '' && window.location.port !== '80' && window.location.port !== '443';
|
||||
const storedTheme = typeof localStorage !== 'undefined' ? localStorage.getItem('theme') : null;
|
||||
if (storedTheme === 'light' || storedTheme === 'dark' || storedTheme === 'system') {
|
||||
themePreference.value = storedTheme;
|
||||
@@ -155,18 +166,30 @@ onUnmounted(() => {
|
||||
<main class="game-container">
|
||||
<NavBar
|
||||
@open-custom="showCustomModal = true"
|
||||
@open-image-import="showImageImportModal = true"
|
||||
@toggle-guide="showGuide = !showGuide"
|
||||
@set-theme="setThemePreference"
|
||||
/>
|
||||
<FixedBar />
|
||||
|
||||
<div v-if="canInstall && !installDismissed" class="install-banner">
|
||||
<div class="install-text">{{ t('pwa.installTitle') }}</div>
|
||||
<div v-if="!isDev && (canInstall || (isIos && !isStandalone)) && !installDismissed" class="install-banner">
|
||||
<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 class="btn-neon secondary install-btn" @click="handleInstall">
|
||||
<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>
|
||||
|
||||
@@ -193,6 +216,10 @@ onUnmounted(() => {
|
||||
<Teleport to="body">
|
||||
<WinModal v-if="store.isGameWon" />
|
||||
<CustomGameModal v-if="showCustomModal" @close="showCustomModal = false" @open-simulation="showSimulation = true" />
|
||||
<ImageImportModal
|
||||
v-if="showImageImportModal"
|
||||
@close="showImageImportModal = false"
|
||||
/>
|
||||
<SimulationView v-if="showSimulation" @close="showSimulation = false" />
|
||||
<ReloadPrompt />
|
||||
</Teleport>
|
||||
@@ -203,7 +230,7 @@ onUnmounted(() => {
|
||||
.game-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch; /* was center */
|
||||
align-items: stretch;
|
||||
gap: 20px;
|
||||
width: 100%;
|
||||
padding-bottom: 50px;
|
||||
@@ -211,38 +238,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 {
|
||||
|
||||
@@ -43,21 +43,30 @@ 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) => {
|
||||
// Handled in pointerdown
|
||||
clearLongPress();
|
||||
};
|
||||
|
||||
const handlePointerCancel = (e) => {
|
||||
// Handled in pointerdown
|
||||
clearLongPress();
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -84,6 +93,7 @@ const handlePointerCancel = (e) => {
|
||||
height: var(--cell-size);
|
||||
background-color: var(--cell-empty);
|
||||
border: 1px solid var(--glass-border);
|
||||
box-sizing: border-box;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
@@ -340,12 +340,20 @@ 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;
|
||||
|
||||
@@ -10,6 +10,10 @@ const store = usePuzzleStore();
|
||||
const { rowHints, colHints } = useHints(computed(() => store.solution));
|
||||
const { startDrag, onMouseEnter, stopDrag } = useNonogram();
|
||||
|
||||
// Compute grid dimensions from hints
|
||||
const gridRows = computed(() => rowHints.value.length);
|
||||
const gridCols = computed(() => colHints.value.length);
|
||||
|
||||
const cellSize = ref(30);
|
||||
const rowHintsRef = ref(null);
|
||||
const activeRow = ref(null);
|
||||
@@ -27,17 +31,28 @@ 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;
|
||||
showScrollbar.value = isMobile && (sw > cw + 1);
|
||||
// Use contentWidth to check for overflow, as scrollWidth might be misleading
|
||||
showScrollbar.value = isMobile && (contentWidth > cw + 1);
|
||||
|
||||
if (showScrollbar.value) {
|
||||
// Thumb width percentage = (viewport / total) * 100
|
||||
const ratio = cw / sw;
|
||||
// Use contentWidth for more accurate ratio
|
||||
const ratio = cw / contentWidth;
|
||||
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;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@@ -132,13 +147,16 @@ const computeCellSize = () => {
|
||||
// Ensure we don't have negative space
|
||||
const availableForGrid = Math.max(0, containerWidth - hintWidth);
|
||||
|
||||
const size = Math.floor((availableForGrid - gridPad * 2 - (store.size - 1) * gap) / store.size);
|
||||
// Calculate cell size based on width availability (columns)
|
||||
// Vertical scrolling is acceptable, so we don't constrain by height (rows)
|
||||
const cols = Math.max(1, gridCols.value);
|
||||
const size = Math.floor((availableForGrid - gridPad * 2 - (cols - 1) * gap) / cols);
|
||||
|
||||
if (isDesktop) {
|
||||
// Desktop: Allow overflow, use comfortable size
|
||||
cellSize.value = 30;
|
||||
} else {
|
||||
// Mobile: Fit to screen
|
||||
// Mobile: Fit to screen width
|
||||
// Keep min 18, max 36
|
||||
cellSize.value = Math.max(18, Math.min(36, size));
|
||||
}
|
||||
@@ -175,21 +193,38 @@ 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', computeCellSize);
|
||||
window.addEventListener('resize', checkScroll);
|
||||
|
||||
window.addEventListener('resize', handleResize);
|
||||
window.addEventListener('orientationchange', handleResize);
|
||||
window.addEventListener('mouseup', handleGlobalMouseUp);
|
||||
window.addEventListener('pointerup', handleGlobalPointerUp);
|
||||
window.addEventListener('touchend', handleGlobalPointerUp, { passive: true });
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('resize', computeCellSize);
|
||||
window.removeEventListener('resize', checkScroll);
|
||||
window.removeEventListener('resize', handleResize);
|
||||
window.removeEventListener('orientationchange', handleResize);
|
||||
window.removeEventListener('mouseup', handleGlobalMouseUp);
|
||||
window.removeEventListener('pointerup', handleGlobalPointerUp);
|
||||
window.removeEventListener('touchend', handleGlobalPointerUp);
|
||||
@@ -199,6 +234,10 @@ watch(() => store.size, async () => {
|
||||
await nextTick();
|
||||
computeCellSize();
|
||||
checkScroll();
|
||||
setTimeout(() => {
|
||||
computeCellSize();
|
||||
checkScroll();
|
||||
}, 300);
|
||||
});
|
||||
</script>
|
||||
|
||||
@@ -208,17 +247,17 @@ watch(() => store.size, async () => {
|
||||
<div class="corner-spacer"></div>
|
||||
|
||||
<!-- Column Hints -->
|
||||
<Hints :hints="colHints" orientation="col" :size="store.size" :activeIndex="activeCol" />
|
||||
<Hints :hints="colHints" orientation="col" :size="gridCols" :activeIndex="activeCol" />
|
||||
|
||||
<!-- Row Hints -->
|
||||
<Hints ref="rowHintsRef" :hints="rowHints" orientation="row" :size="store.size" :activeIndex="activeRow" />
|
||||
<Hints ref="rowHintsRef" :hints="rowHints" orientation="row" :size="gridRows" :activeIndex="activeRow" />
|
||||
|
||||
<!-- Grid -->
|
||||
<div
|
||||
class="grid"
|
||||
:style="{
|
||||
gridTemplateColumns: `repeat(${store.size}, var(--cell-size))`,
|
||||
gridTemplateRows: `repeat(${store.size}, var(--cell-size))`
|
||||
gridTemplateColumns: `repeat(${gridCols}, var(--cell-size))`,
|
||||
gridTemplateRows: `repeat(${gridRows}, var(--cell-size))`
|
||||
}"
|
||||
@pointermove.prevent="handlePointerMove"
|
||||
@mouseleave="handleGridLeave"
|
||||
@@ -231,8 +270,8 @@ watch(() => store.size, async () => {
|
||||
:r="r"
|
||||
:c="c"
|
||||
:class="{
|
||||
'guide-right': (c + 1) % 5 === 0 && c !== store.size - 1,
|
||||
'guide-bottom': (r + 1) % 5 === 0 && r !== store.size - 1
|
||||
'guide-right': (c + 1) % 5 === 0 && c !== gridCols - 1,
|
||||
'guide-bottom': (r + 1) % 5 === 0 && r !== gridRows - 1
|
||||
}"
|
||||
@start-drag="startDrag"
|
||||
@enter-cell="handleCellEnter"
|
||||
@@ -272,6 +311,7 @@ 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 {
|
||||
|
||||
@@ -58,13 +58,13 @@ defineProps({
|
||||
|
||||
.hints-container.col {
|
||||
padding-bottom: var(--grid-padding);
|
||||
align-items: flex-end;
|
||||
/* align-items: flex-end; - Removed to ensure uniform column height */
|
||||
padding-left: var(--grid-padding);
|
||||
padding-right: var(--grid-padding);
|
||||
}
|
||||
|
||||
.hints-container.row {
|
||||
align-items: flex-end;
|
||||
/* align-items: flex-end; - Removed to ensure row hints fill the cell height */
|
||||
padding: var(--grid-padding) var(--grid-padding) var(--grid-padding) 0;
|
||||
width: max-content;
|
||||
}
|
||||
@@ -99,6 +99,21 @@ defineProps({
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.hint-num {
|
||||
font-size: 0.7rem;
|
||||
padding: 1px;
|
||||
}
|
||||
|
||||
.col .hint-group {
|
||||
padding: 2px 0;
|
||||
}
|
||||
|
||||
.row .hint-group {
|
||||
padding: 0 4px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Alternating Colors within the group */
|
||||
.hint-num.hint-alt {
|
||||
color: var(--accent-cyan);
|
||||
|
||||
859
src/components/ImageImportModal.vue
Normal file
859
src/components/ImageImportModal.vue
Normal file
@@ -0,0 +1,859 @@
|
||||
<script setup>
|
||||
import { ref, computed, onMounted, onUnmounted, watch, nextTick } from 'vue';
|
||||
import { usePuzzleStore } from '@/stores/puzzle';
|
||||
import { useI18n } from '@/composables/useI18n';
|
||||
import { getWorkerPool } from '@/utils/workerPool';
|
||||
import { Upload, Image as ImageIcon, X, AlertTriangle, Camera, RefreshCw } from 'lucide-vue-next';
|
||||
|
||||
const emit = defineEmits(['close']);
|
||||
const store = usePuzzleStore();
|
||||
const { t } = useI18n();
|
||||
|
||||
const fileInput = ref(null);
|
||||
const canvasRef = ref(null);
|
||||
const previewCanvasRef = ref(null);
|
||||
const videoRef = ref(null);
|
||||
const isDragging = ref(false);
|
||||
const imageLoaded = ref(false);
|
||||
const processing = ref(false);
|
||||
const processingProgress = ref(0);
|
||||
const isCameraOpen = ref(false);
|
||||
const hasMultipleCameras = ref(false);
|
||||
const stream = ref(null);
|
||||
const facingMode = ref('environment');
|
||||
|
||||
// Settings
|
||||
const maxDimension = ref(15);
|
||||
const threshold = ref(50); // 0-100% density
|
||||
|
||||
// State
|
||||
const originalImage = ref(null);
|
||||
const generatedGrid = ref([]);
|
||||
const difficulty = ref(0);
|
||||
const solvability = ref(0);
|
||||
const difficultyLabel = ref('');
|
||||
const gridRows = ref(15);
|
||||
const gridCols = ref(15);
|
||||
|
||||
const onDrop = (e) => {
|
||||
isDragging.value = false;
|
||||
const file = e.dataTransfer.files[0];
|
||||
if (file && file.type.startsWith('image/')) {
|
||||
processFile(file);
|
||||
}
|
||||
};
|
||||
|
||||
const onFileSelect = (e) => {
|
||||
const file = e.target.files[0];
|
||||
if (file) {
|
||||
processFile(file);
|
||||
}
|
||||
};
|
||||
|
||||
const processFile = (file) => {
|
||||
const reader = new FileReader();
|
||||
reader.onload = (e) => {
|
||||
const img = new Image();
|
||||
img.onload = () => {
|
||||
originalImage.value = img;
|
||||
imageLoaded.value = true;
|
||||
nextTick(() => {
|
||||
updateGrid();
|
||||
});
|
||||
};
|
||||
img.src = e.target.result;
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
};
|
||||
|
||||
const updateGrid = () => {
|
||||
if (!originalImage.value || !canvasRef.value) return;
|
||||
|
||||
const ctx = canvasRef.value.getContext('2d');
|
||||
|
||||
// Calculate dimensions preserving aspect ratio
|
||||
const imgW = originalImage.value.width;
|
||||
const imgH = originalImage.value.height;
|
||||
const aspect = imgW / imgH;
|
||||
|
||||
let w, h;
|
||||
const maxDim = maxDimension.value;
|
||||
|
||||
if (aspect >= 1) {
|
||||
w = maxDim;
|
||||
h = Math.round(w / aspect);
|
||||
} else {
|
||||
h = maxDim;
|
||||
w = Math.round(h * aspect);
|
||||
}
|
||||
|
||||
// Ensure bounds [5, 80]
|
||||
// 1. Clamp min (prioritize min 5)
|
||||
if (w < 5) { w = 5; h = Math.round(w / aspect); }
|
||||
if (h < 5) { h = 5; w = Math.round(h * aspect); }
|
||||
|
||||
// 2. Clamp max (hard limit 80)
|
||||
if (w > 80) w = 80;
|
||||
if (h > 80) h = 80;
|
||||
|
||||
// Final safeguard
|
||||
w = Math.max(5, Math.min(80, Math.round(w)));
|
||||
h = Math.max(5, Math.min(80, Math.round(h)));
|
||||
|
||||
gridRows.value = h;
|
||||
gridCols.value = w;
|
||||
|
||||
// Resize logic
|
||||
canvasRef.value.width = w;
|
||||
canvasRef.value.height = h;
|
||||
|
||||
// Draw image scaled to grid size
|
||||
ctx.drawImage(originalImage.value, 0, 0, w, h);
|
||||
|
||||
// Get pixel data
|
||||
const imageData = ctx.getImageData(0, 0, w, h);
|
||||
const data = imageData.data;
|
||||
|
||||
// 1. Collect brightness of valid pixels
|
||||
const pixels = [];
|
||||
for (let y = 0; y < h; y++) {
|
||||
for (let x = 0; x < w; x++) {
|
||||
const i = (y * w + x) * 4;
|
||||
const r = data[i];
|
||||
const g = data[i + 1];
|
||||
const b = data[i + 2];
|
||||
const a = data[i + 3];
|
||||
|
||||
// If transparent, ignore
|
||||
if (a >= 128) {
|
||||
// Calculate brightness (Luminance)
|
||||
const brightness = 0.299 * r + 0.587 * g + 0.114 * b;
|
||||
pixels.push({ x, y, brightness });
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 2. Sort by brightness (ascending: dark -> light)
|
||||
// Darker pixels have lower brightness.
|
||||
// We want to fill the darkest X% pixels.
|
||||
pixels.sort((a, b) => a.brightness - b.brightness);
|
||||
|
||||
// 3. Determine cutoff
|
||||
// threshold.value is density (0-100%)
|
||||
// If density is 50%, we want 50% of pixels to be black.
|
||||
// So we take the first 50% of sorted pixels.
|
||||
const totalValid = pixels.length;
|
||||
const targetFillCount = Math.floor(totalValid * (threshold.value / 100));
|
||||
|
||||
// 4. Build grid
|
||||
const grid = Array(h).fill().map(() => Array(w).fill(0));
|
||||
|
||||
// Mark the darkest pixels as filled (1)
|
||||
for (let i = 0; i < targetFillCount; i++) {
|
||||
const p = pixels[i];
|
||||
grid[p.y][p.x] = 1;
|
||||
}
|
||||
|
||||
generatedGrid.value = grid;
|
||||
drawPreview();
|
||||
calculateStats();
|
||||
};
|
||||
|
||||
const drawPreview = () => {
|
||||
if (!previewCanvasRef.value || generatedGrid.value.length === 0) return;
|
||||
const ctx = previewCanvasRef.value.getContext('2d');
|
||||
const rows = generatedGrid.value.length;
|
||||
const cols = generatedGrid.value[0].length;
|
||||
|
||||
// Max 300px width/height, preserving aspect
|
||||
const maxPreview = 300;
|
||||
const cellW = maxPreview / Math.max(rows, cols);
|
||||
const cellH = cellW; // square cells
|
||||
|
||||
const previewW = cols * cellW;
|
||||
const previewH = rows * cellH;
|
||||
|
||||
previewCanvasRef.value.width = previewW;
|
||||
previewCanvasRef.value.height = previewH;
|
||||
|
||||
ctx.clearRect(0, 0, previewW, previewH);
|
||||
|
||||
// Draw original image with low opacity
|
||||
if (originalImage.value) {
|
||||
ctx.save();
|
||||
ctx.globalAlpha = 0.3;
|
||||
ctx.drawImage(originalImage.value, 0, 0, previewW, previewH);
|
||||
ctx.restore();
|
||||
}
|
||||
|
||||
for (let y = 0; y < rows; y++) {
|
||||
for (let x = 0; x < cols; x++) {
|
||||
if (generatedGrid.value[y][x] === 1) {
|
||||
ctx.fillStyle = '#000';
|
||||
ctx.fillRect(x * cellW, y * cellH, cellW, cellH);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Grid lines
|
||||
ctx.strokeStyle = '#ccc';
|
||||
ctx.lineWidth = 0.5;
|
||||
|
||||
// Vertical lines
|
||||
for (let i = 0; i <= cols; i++) {
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(i * cellW, 0);
|
||||
ctx.lineTo(i * cellW, previewH);
|
||||
ctx.stroke();
|
||||
}
|
||||
|
||||
// Horizontal lines
|
||||
for (let i = 0; i <= rows; i++) {
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(0, i * cellH);
|
||||
ctx.lineTo(previewW, i * cellH);
|
||||
ctx.stroke();
|
||||
}
|
||||
};
|
||||
|
||||
const calculateStats = async () => {
|
||||
if (generatedGrid.value.length === 0) return;
|
||||
|
||||
processing.value = true;
|
||||
processingProgress.value = 0;
|
||||
const requestId = Date.now();
|
||||
currentStatsRequestId = requestId;
|
||||
|
||||
try {
|
||||
const pool = getWorkerPool();
|
||||
pool.cancelAll(); // Force stop previous calculations for immediate responsiveness
|
||||
|
||||
// Demonstrate parallel execution capability
|
||||
// We split the problem into two branches: assuming first cell is EMPTY (0) vs FILLED (1)
|
||||
// This doubles the search power by utilizing 2 workers immediately.
|
||||
|
||||
// Ensure we send plain objects to workers, not Vue proxies
|
||||
const rawGrid = JSON.parse(JSON.stringify(generatedGrid.value));
|
||||
const rows = rawGrid.length;
|
||||
const cols = rawGrid[0].length;
|
||||
|
||||
// Create initial states
|
||||
const gridA = Array(rows).fill().map(() => Array(cols).fill(-1));
|
||||
gridA[0][0] = 0; // Branch A: Assume (0,0) is Empty
|
||||
|
||||
const gridB = Array(rows).fill().map(() => Array(cols).fill(-1));
|
||||
gridB[0][0] = 1; // Branch B: Assume (0,0) is Filled
|
||||
|
||||
const tasks = [
|
||||
{
|
||||
data: { id: requestId, grid: rawGrid, initialGrid: gridA },
|
||||
onProgress: (p) => { if (currentStatsRequestId === requestId) processingProgress.value = Math.max(processingProgress.value, p); }
|
||||
},
|
||||
{
|
||||
data: { id: requestId, grid: rawGrid, initialGrid: gridB },
|
||||
onProgress: (p) => { if (currentStatsRequestId === requestId) processingProgress.value = Math.max(processingProgress.value, p); }
|
||||
}
|
||||
];
|
||||
|
||||
const result = await pool.runRace(tasks);
|
||||
|
||||
if (result.id === currentStatsRequestId) {
|
||||
solvability.value = result.solvability;
|
||||
difficulty.value = result.difficulty;
|
||||
difficultyLabel.value = result.difficultyLabel;
|
||||
}
|
||||
} catch (err) {
|
||||
if (err.message !== 'Cancelled' && err.message !== 'Terminated') {
|
||||
console.error('Worker error:', err);
|
||||
if (currentStatsRequestId === requestId) {
|
||||
solvability.value = 0;
|
||||
difficulty.value = 0;
|
||||
// If translation key is missing, this might show 'difficulty.error'
|
||||
// Ensure we have a fallback or the key exists
|
||||
difficultyLabel.value = 'error';
|
||||
}
|
||||
}
|
||||
} finally {
|
||||
if (currentStatsRequestId === requestId) {
|
||||
processing.value = false;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
let currentStatsRequestId = 0;
|
||||
|
||||
let debounceTimer;
|
||||
watch([maxDimension, threshold], () => {
|
||||
if (imageLoaded.value) {
|
||||
if (debounceTimer) clearTimeout(debounceTimer);
|
||||
debounceTimer = setTimeout(() => {
|
||||
updateGrid();
|
||||
}, 50);
|
||||
} else {
|
||||
// If no image loaded, just update the display values
|
||||
// Assuming square aspect ratio for preview
|
||||
gridRows.value = maxDimension.value;
|
||||
gridCols.value = maxDimension.value;
|
||||
}
|
||||
});
|
||||
|
||||
const createPuzzle = () => {
|
||||
if (generatedGrid.value.length > 0) {
|
||||
store.initFromImage(generatedGrid.value);
|
||||
emit('close');
|
||||
}
|
||||
};
|
||||
|
||||
const triggerFileInput = () => {
|
||||
fileInput.value.click();
|
||||
};
|
||||
|
||||
const startCamera = async () => {
|
||||
isCameraOpen.value = true;
|
||||
try {
|
||||
if (stream.value) {
|
||||
stopCameraStream();
|
||||
}
|
||||
const constraints = {
|
||||
video: {
|
||||
facingMode: facingMode.value
|
||||
}
|
||||
};
|
||||
stream.value = await navigator.mediaDevices.getUserMedia(constraints);
|
||||
|
||||
// Check available devices
|
||||
const devices = await navigator.mediaDevices.enumerateDevices();
|
||||
const videoDevices = devices.filter(device => device.kind === 'videoinput');
|
||||
hasMultipleCameras.value = videoDevices.length > 1;
|
||||
|
||||
// Wait for next tick or ensure videoRef is available
|
||||
setTimeout(() => {
|
||||
if (videoRef.value) {
|
||||
videoRef.value.srcObject = stream.value;
|
||||
}
|
||||
}, 100);
|
||||
} catch (err) {
|
||||
console.error("Error accessing camera:", err);
|
||||
alert(t('image.cameraError'));
|
||||
isCameraOpen.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const stopCameraStream = () => {
|
||||
if (stream.value) {
|
||||
stream.value.getTracks().forEach(track => track.stop());
|
||||
stream.value = null;
|
||||
}
|
||||
};
|
||||
|
||||
const closeCamera = () => {
|
||||
stopCameraStream();
|
||||
isCameraOpen.value = false;
|
||||
};
|
||||
|
||||
const switchCamera = async () => {
|
||||
facingMode.value = facingMode.value === 'user' ? 'environment' : 'user';
|
||||
await startCamera();
|
||||
};
|
||||
|
||||
const capturePhoto = () => {
|
||||
if (!videoRef.value) return;
|
||||
|
||||
const canvas = document.createElement('canvas');
|
||||
canvas.width = videoRef.value.videoWidth;
|
||||
canvas.height = videoRef.value.videoHeight;
|
||||
const ctx = canvas.getContext('2d');
|
||||
|
||||
// Mirror if using front camera
|
||||
if (facingMode.value === 'user') {
|
||||
ctx.translate(canvas.width, 0);
|
||||
ctx.scale(-1, 1);
|
||||
}
|
||||
|
||||
ctx.drawImage(videoRef.value, 0, 0, canvas.width, canvas.height);
|
||||
|
||||
const img = new Image();
|
||||
img.onload = () => {
|
||||
originalImage.value = img;
|
||||
imageLoaded.value = true;
|
||||
nextTick(() => {
|
||||
updateGrid();
|
||||
});
|
||||
closeCamera();
|
||||
};
|
||||
img.src = canvas.toDataURL('image/png');
|
||||
};
|
||||
|
||||
onUnmounted(() => {
|
||||
stopCameraStream();
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="modal-overlay" @click.self="$emit('close')">
|
||||
<div class="modal-content">
|
||||
<button class="close-btn" @click="$emit('close')">
|
||||
<X :size="24" />
|
||||
</button>
|
||||
|
||||
<h2 class="modal-title">{{ t('image.title') }}</h2>
|
||||
|
||||
<div v-if="isCameraOpen" class="camera-overlay">
|
||||
<video ref="videoRef" autoplay playsinline></video>
|
||||
<div class="camera-controls">
|
||||
<button class="camera-btn secondary" @click="closeCamera">
|
||||
<X :size="24" />
|
||||
</button>
|
||||
<button class="camera-btn capture" @click="capturePhoto">
|
||||
<div class="shutter"></div>
|
||||
</button>
|
||||
<button v-if="hasMultipleCameras" class="camera-btn secondary" @click="switchCamera">
|
||||
<RefreshCw :size="24" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-grid">
|
||||
<!-- Left: Input & Preview -->
|
||||
<div class="input-section">
|
||||
<div
|
||||
class="drop-zone"
|
||||
:class="{ dragging: isDragging, loaded: imageLoaded }"
|
||||
@dragover.prevent="isDragging = true"
|
||||
@dragleave.prevent="isDragging = false"
|
||||
@drop.prevent="onDrop"
|
||||
@click="!imageLoaded ? triggerFileInput() : null"
|
||||
>
|
||||
<input
|
||||
ref="fileInput"
|
||||
type="file"
|
||||
accept="image/*"
|
||||
class="hidden-input"
|
||||
@change="onFileSelect"
|
||||
/>
|
||||
|
||||
<div v-if="!imageLoaded" class="placeholder">
|
||||
<Upload :size="48" class="icon" />
|
||||
<p>{{ t('image.drop') }}</p>
|
||||
<div class="button-group">
|
||||
<button class="btn-neon small" @click.stop="triggerFileInput">
|
||||
{{ t('image.select') }}
|
||||
</button>
|
||||
<button class="btn-neon small secondary" @click.stop="startCamera">
|
||||
<Camera :size="16" />
|
||||
{{ t('image.camera') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else class="preview-container">
|
||||
<canvas ref="previewCanvasRef" class="preview-canvas"></canvas>
|
||||
<div class="button-group">
|
||||
<button class="btn-change" @click.stop="triggerFileInput">
|
||||
{{ t('image.change') }}
|
||||
</button>
|
||||
<button class="btn-change" @click.stop="startCamera">
|
||||
<Camera :size="16" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Hidden canvas for processing -->
|
||||
<canvas ref="canvasRef" style="display: none;"></canvas>
|
||||
</div>
|
||||
|
||||
<!-- Right: Controls & Stats -->
|
||||
<div class="controls-section">
|
||||
<div class="control-group">
|
||||
<label>{{ t('image.size') }}: {{ gridCols }}x{{ gridRows }}</label>
|
||||
<input
|
||||
type="range"
|
||||
v-model.number="maxDimension"
|
||||
min="5"
|
||||
max="80"
|
||||
step="5"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="control-group">
|
||||
<label>{{ t('image.threshold') }}: {{ threshold }}%</label>
|
||||
<input
|
||||
type="range"
|
||||
v-model.number="threshold"
|
||||
min="1"
|
||||
max="99"
|
||||
/>
|
||||
<div class="threshold-preview">
|
||||
<span>Low Density</span>
|
||||
<span>High Density</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="imageLoaded" class="stats-panel">
|
||||
<div v-if="processing" class="loading-stats">
|
||||
<div class="spinner"></div>
|
||||
<span>{{ t('image.calculatingSolvability') || 'Calculating solvability...' }} {{ processingProgress }}%</span>
|
||||
</div>
|
||||
<template v-else>
|
||||
<div class="stat-row">
|
||||
<span>{{ t('image.solvability') }}:</span>
|
||||
<span :class="{ 'good': solvability === 100, 'bad': solvability < 100 }">
|
||||
{{ solvability }}%
|
||||
</span>
|
||||
</div>
|
||||
<div v-if="solvability < 100" class="warning">
|
||||
<AlertTriangle :size="16" />
|
||||
{{ t('image.warning') }}
|
||||
</div>
|
||||
|
||||
<div class="stat-row">
|
||||
<span>{{ t('image.difficulty') }}:</span>
|
||||
<span>{{ difficulty }}% ({{ t(`difficulty.${difficultyLabel.toLowerCase()}`) }})</span>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<div class="actions">
|
||||
<button
|
||||
class="btn-neon primary"
|
||||
:disabled="!imageLoaded || processing"
|
||||
@click="createPuzzle"
|
||||
>
|
||||
{{ t('image.create') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.loading-stats {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
padding: 10px;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.spinner {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: 2px solid var(--text-muted);
|
||||
border-top-color: var(--primary-accent);
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
.modal-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
backdrop-filter: blur(5px);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background: var(--panel-bg);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 16px;
|
||||
padding: 30px;
|
||||
width: 90%;
|
||||
max-width: 800px;
|
||||
position: relative;
|
||||
box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
|
||||
color: var(--text-color);
|
||||
max-height: 90vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
right: 15px;
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--text-muted);
|
||||
cursor: pointer;
|
||||
transition: color 0.3s;
|
||||
}
|
||||
|
||||
.close-btn:hover {
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
color: var(--primary-accent);
|
||||
font-size: 1.8rem;
|
||||
text-shadow: 0 0 10px var(--primary-accent);
|
||||
}
|
||||
|
||||
.camera-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #000;
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
.camera-overlay video {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.camera-controls {
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
padding: 20px;
|
||||
background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
|
||||
}
|
||||
|
||||
.camera-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 50%;
|
||||
background: rgba(255,255,255,0.2);
|
||||
backdrop-filter: blur(5px);
|
||||
}
|
||||
|
||||
.camera-btn.capture {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
background: rgba(255,255,255,0.3);
|
||||
border: 4px solid white;
|
||||
}
|
||||
|
||||
.shutter {
|
||||
width: 54px;
|
||||
height: 54px;
|
||||
background: white;
|
||||
border-radius: 50%;
|
||||
transition: transform 0.1s;
|
||||
}
|
||||
|
||||
.camera-btn.capture:active .shutter {
|
||||
transform: scale(0.9);
|
||||
}
|
||||
|
||||
.button-group {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin-top: 15px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.content-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 30px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.content-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.drop-zone {
|
||||
border: 2px dashed var(--border-color);
|
||||
border-radius: 12px;
|
||||
height: 300px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.drop-zone:hover, .drop-zone.dragging {
|
||||
border-color: var(--primary-accent);
|
||||
background: rgba(0, 242, 254, 0.1);
|
||||
}
|
||||
|
||||
.drop-zone.loaded {
|
||||
border: none;
|
||||
background: none;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.placeholder {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.hidden-input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.preview-container {
|
||||
position: relative;
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.preview-container .button-group {
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
right: 10px;
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.preview-canvas {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
border: 1px solid var(--border-color);
|
||||
box-shadow: 0 0 15px rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
.btn-change {
|
||||
background: rgba(0,0,0,0.7);
|
||||
color: white;
|
||||
border: 1px solid white;
|
||||
padding: 5px 10px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 0.8rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
backdrop-filter: blur(2px);
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.btn-change:hover {
|
||||
background: rgba(0,0,0,0.9);
|
||||
}
|
||||
|
||||
.controls-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.control-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
input[type="range"] {
|
||||
width: 100%;
|
||||
accent-color: var(--primary-accent);
|
||||
}
|
||||
|
||||
.threshold-preview {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 0.8rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.stats-panel {
|
||||
background: rgba(0,0,0,0.2);
|
||||
padding: 15px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.stat-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 8px;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.good { color: #4ade80; }
|
||||
.bad { color: #f87171; }
|
||||
|
||||
.warning {
|
||||
color: #fbbf24;
|
||||
font-size: 0.85rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
margin-top: -5px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.actions {
|
||||
margin-top: auto;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.btn-neon {
|
||||
padding: 10px 20px;
|
||||
border: 1px solid var(--primary-accent);
|
||||
background: rgba(0, 242, 254, 0.1);
|
||||
color: var(--primary-accent);
|
||||
font-family: 'Orbitron', sans-serif;
|
||||
text-transform: uppercase;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 0 10px rgba(0, 242, 254, 0.2);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.btn-neon:hover:not(:disabled) {
|
||||
background: var(--primary-accent);
|
||||
color: #000;
|
||||
box-shadow: 0 0 20px var(--primary-accent);
|
||||
}
|
||||
|
||||
.btn-neon:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
filter: grayscale(1);
|
||||
}
|
||||
|
||||
.btn-neon.small {
|
||||
padding: 5px 15px;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -2,12 +2,12 @@
|
||||
import { ref, computed, onMounted, onUnmounted, watch } from 'vue';
|
||||
import { usePuzzleStore } from '@/stores/puzzle';
|
||||
import { useI18n } from '@/composables/useI18n';
|
||||
import { Gamepad2, Palette, CircleHelp, Sun, Moon, Menu, X, ChevronDown, ChevronUp, Monitor } from 'lucide-vue-next';
|
||||
import { Gamepad2, Palette, CircleHelp, Sun, Moon, Menu, X, ChevronDown, ChevronUp, Monitor, Image as ImageIcon, Sparkles, Shuffle, Grid3X3, Grid2X2, Grid, MousePointer2 } from 'lucide-vue-next';
|
||||
|
||||
const store = usePuzzleStore();
|
||||
const { t, locale, setLocale, locales } = useI18n();
|
||||
|
||||
const emit = defineEmits(['open-custom', 'toggle-guide', 'set-theme']);
|
||||
const emit = defineEmits(['open-custom', 'open-image-import', 'toggle-guide', 'set-theme']);
|
||||
|
||||
const isGameOpen = ref(false);
|
||||
const isThemeOpen = ref(false);
|
||||
@@ -16,6 +16,13 @@ const isMobileMenuOpen = ref(false);
|
||||
const langMenuRef = ref(null);
|
||||
const searchTerm = ref('');
|
||||
|
||||
const getLevelIcon = (id) => {
|
||||
if (id === 'easy') return Grid2X2;
|
||||
if (id === 'medium') return Grid3X3;
|
||||
if (id === 'hard') return Grid;
|
||||
return Gamepad2;
|
||||
};
|
||||
|
||||
// Map language codes to country codes for flag-icons
|
||||
const langToCountry = {
|
||||
en: 'gb',
|
||||
@@ -180,6 +187,12 @@ const openCustom = () => {
|
||||
closeMobileMenu();
|
||||
};
|
||||
|
||||
const openImageImport = () => {
|
||||
emit('open-image-import');
|
||||
isGameOpen.value = false;
|
||||
closeMobileMenu();
|
||||
};
|
||||
|
||||
const setTheme = (theme) => {
|
||||
emit('set-theme', theme);
|
||||
isThemeOpen.value = false;
|
||||
@@ -251,10 +264,16 @@ watch(isMobileMenuOpen, (val) => {
|
||||
class="dropdown-item"
|
||||
@click="selectLevel(lvl.id)"
|
||||
>
|
||||
<component :is="getLevelIcon(lvl.id)" :size="16" />
|
||||
{{ lvl.label }}
|
||||
</button>
|
||||
<button class="dropdown-item" @click="openCustom">
|
||||
{{ t('level.custom') }}
|
||||
<Shuffle :size="16" />
|
||||
{{ t('level.custom_random') }}
|
||||
</button>
|
||||
<button class="dropdown-item" @click="openImageImport">
|
||||
<ImageIcon :size="16" />
|
||||
{{ t('level.custom_image') }}
|
||||
</button>
|
||||
</div>
|
||||
</transition>
|
||||
@@ -321,8 +340,10 @@ watch(isMobileMenuOpen, (val) => {
|
||||
</transition>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Mobile Menu Overlay -->
|
||||
<Teleport to="body">
|
||||
<transition name="fade">
|
||||
<div v-if="isMobileMenuOpen" class="mobile-menu-overlay">
|
||||
<div class="mobile-menu-header">
|
||||
@@ -346,10 +367,16 @@ watch(isMobileMenuOpen, (val) => {
|
||||
class="mobile-sub-item"
|
||||
@click="selectLevel(lvl.id)"
|
||||
>
|
||||
<component :is="getLevelIcon(lvl.id)" :size="16" />
|
||||
{{ lvl.label }}
|
||||
</button>
|
||||
<button class="mobile-sub-item" @click="openCustom">
|
||||
{{ t('level.custom') }}
|
||||
<Shuffle :size="16" />
|
||||
{{ t('level.custom_random') }}
|
||||
</button>
|
||||
<button class="mobile-sub-item" @click="openImageImport">
|
||||
<ImageIcon :size="16" />
|
||||
{{ t('level.custom_image') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -420,7 +447,7 @@ watch(isMobileMenuOpen, (val) => {
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</nav>
|
||||
</Teleport>
|
||||
</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];
|
||||
const SIZES = [5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 60, 70, 80];
|
||||
const DENSITIES = [0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9];
|
||||
const SAMPLES_PER_POINT = 10; // Reduced for web performance demo
|
||||
const SAMPLES_PER_POINT = 50; // Increased for better accuracy
|
||||
|
||||
const isRunning = ref(false);
|
||||
const progress = ref(0);
|
||||
@@ -71,11 +71,12 @@ const startSimulation = async () => {
|
||||
for (let i = 0; i < SAMPLES_PER_POINT; i++) {
|
||||
const grid = generateRandomGrid(size, density);
|
||||
const { rowHints, colHints } = calculateHints(grid);
|
||||
const { percentSolved } = solvePuzzle(rowHints, colHints);
|
||||
// Use logicOnly=true for fast simulation
|
||||
const { percentSolved } = solvePuzzle(rowHints, colHints, null, null, true);
|
||||
totalSolved += percentSolved;
|
||||
|
||||
// Yield to UI every few samples to keep it responsive
|
||||
if (i % 2 === 0) await new Promise(r => setTimeout(r, 0));
|
||||
if (i % 10 === 0) await new Promise(r => setTimeout(r, 0));
|
||||
}
|
||||
|
||||
const avgSolved = totalSolved / SAMPLES_PER_POINT;
|
||||
|
||||
@@ -215,6 +215,8 @@ 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);
|
||||
@@ -223,6 +225,12 @@ onUnmounted(() => {
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
@media (max-width: 768px), (max-height: 600px) {
|
||||
.modal {
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 2.5rem;
|
||||
color: var(--primary-accent);
|
||||
|
||||
@@ -7,6 +7,8 @@ const messages = {
|
||||
'level.medium': 'ŚREDNI 10X10',
|
||||
'level.hard': 'TRUDNY 15X15',
|
||||
'level.custom': 'WŁASNY',
|
||||
'level.custom_random': 'WŁASNY LOSOWY',
|
||||
'level.custom_image': 'WŁASNY Z OBRAZU',
|
||||
'level.guide': 'PODPOWIEDŹ ❓',
|
||||
'actions.reset': 'RESET',
|
||||
'actions.random': 'NOWA LOSOWA',
|
||||
@@ -31,10 +33,29 @@ const messages = {
|
||||
'custom.sizeError': 'Rozmiar musi być między 5 a 80!',
|
||||
'custom.fillRate': 'Wypełnienie',
|
||||
'custom.difficulty': 'Poziom trudności',
|
||||
'image.title': 'IMPORTUJ OBRAZ',
|
||||
'image.drop': 'Przeciągnij obraz tutaj',
|
||||
'image.select': 'Wybierz plik',
|
||||
'image.camera': 'Zrób zdjęcie',
|
||||
'image.capture': 'Zrób zdjęcie',
|
||||
'image.switch': 'Przełącz aparat',
|
||||
'image.cameraError': 'Nie można uzyskać dostępu do kamery',
|
||||
'image.change': 'Zmień obraz',
|
||||
'image.size': 'Rozmiar siatki',
|
||||
'image.threshold': 'Próg czerni',
|
||||
'image.solvability': 'Rozwiązywalność',
|
||||
'image.warning': 'Ten obraz może wymagać zgadywania!',
|
||||
'image.difficulty': 'Trudność',
|
||||
'image.calculating': 'Obliczanie...',
|
||||
'image.calculatingSolvability': 'Obliczanie rozwiązywalności...',
|
||||
'image.create': 'STWÓRZ NONOGRAM',
|
||||
'difficulty.easy': 'Łatwy',
|
||||
'difficulty.medium': 'Średni',
|
||||
'difficulty.hard': 'Trudny',
|
||||
'difficulty.harder': 'Trudniejszy',
|
||||
'difficulty.hardest': 'Najtrudniejszy',
|
||||
'difficulty.extreme': 'Ekstremalny',
|
||||
'difficulty.unknown': 'Nieznany',
|
||||
'win.title': 'GRATULACJE!',
|
||||
'win.message': 'Rozwiązałeś zagadkę!',
|
||||
'win.time': 'Czas:',
|
||||
@@ -50,6 +71,7 @@ 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ż',
|
||||
@@ -180,6 +202,8 @@ const messages = {
|
||||
'level.medium': 'MEDIUM 10X10',
|
||||
'level.hard': 'HARD 15X15',
|
||||
'level.custom': 'CUSTOM',
|
||||
'level.custom_random': 'CUSTOM RANDOM',
|
||||
'level.custom_image': 'CUSTOM FROM IMAGE',
|
||||
'level.guide': 'GUIDE ❓',
|
||||
'actions.reset': 'RESET',
|
||||
'actions.random': 'NEW RANDOM',
|
||||
@@ -223,6 +247,7 @@ 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',
|
||||
|
||||
@@ -32,12 +32,15 @@ export const usePuzzleStore = defineStore('puzzle', () => {
|
||||
let count = 0;
|
||||
if (solution.value.length === 0 || playerGrid.value.length === 0) return 0;
|
||||
|
||||
for (let r = 0; r < size.value; r++) {
|
||||
for (let c = 0; c < size.value; c++) {
|
||||
const rows = solution.value.length;
|
||||
const cols = solution.value[0].length;
|
||||
|
||||
for (let r = 0; r < rows; r++) {
|
||||
for (let c = 0; c < cols; c++) {
|
||||
// Zliczamy tylko poprawne wypełnienia (czarne),
|
||||
// ale w nonogramach postęp to często: (poprawne_czarne - bledne_czarne) / total_czarne
|
||||
// Zróbmy prostą wersję: % poprawnie zaznaczonych czarnych - błędnie zaznaczone czarne
|
||||
if (playerGrid.value[r][c] === 1) {
|
||||
if (playerGrid.value[r] && playerGrid.value[r][c] === 1) {
|
||||
if (solution.value[r][c] === 1) count++;
|
||||
else count--; // kara za błąd
|
||||
}
|
||||
@@ -93,10 +96,36 @@ export const usePuzzleStore = defineStore('puzzle', () => {
|
||||
saveState();
|
||||
}
|
||||
|
||||
function initFromImage(grid) {
|
||||
stopTimer();
|
||||
currentLevelId.value = 'custom_image';
|
||||
// Use the larger dimension for size to ensure loops cover everything if square-assumption exists
|
||||
// But ideally we should support rectangular.
|
||||
// For now, size.value is used in resetGrid loop.
|
||||
// Let's update resetGrid to handle rectangular.
|
||||
size.value = Math.max(grid.length, grid[0].length);
|
||||
solution.value = grid;
|
||||
|
||||
resetGrid();
|
||||
isGameWon.value = false;
|
||||
hasUsedGuide.value = false;
|
||||
guideUsageCount.value = 0;
|
||||
|
||||
// Calculate density
|
||||
const totalFilled = grid.flat().filter(c => c === 1).length;
|
||||
currentDensity.value = totalFilled / (size.value * size.value);
|
||||
|
||||
elapsedTime.value = 0;
|
||||
startTimer();
|
||||
saveState();
|
||||
}
|
||||
|
||||
function resetGrid() {
|
||||
playerGrid.value = Array(size.value).fill().map(() => Array(size.value).fill(0));
|
||||
moves.value = 0;
|
||||
const rows = solution.value.length;
|
||||
const cols = solution.value[0].length;
|
||||
playerGrid.value = Array(rows).fill().map(() => Array(cols).fill(0));
|
||||
history.value = [];
|
||||
moves.value = 0;
|
||||
currentTransaction.value = null;
|
||||
}
|
||||
|
||||
@@ -198,11 +227,14 @@ export const usePuzzleStore = defineStore('puzzle', () => {
|
||||
|
||||
// Calculate expected hints from solution (truth)
|
||||
// We do this dynamically to ensure we always check against the rules of the board
|
||||
const rows = solution.value.length;
|
||||
const cols = solution.value[0].length;
|
||||
|
||||
const solutionRows = solution.value;
|
||||
const solutionCols = Array(size.value).fill().map((_, c) => solution.value.map(r => r[c]));
|
||||
const solutionCols = Array(cols).fill().map((_, c) => solution.value.map(r => r[c]));
|
||||
|
||||
// Check Rows
|
||||
for (let r = 0; r < size.value; r++) {
|
||||
for (let r = 0; r < rows; r++) {
|
||||
const targetHints = calculateLineHints(solutionRows[r]);
|
||||
const playerLine = playerGrid.value[r];
|
||||
if (!validateLine(playerLine, targetHints)) {
|
||||
@@ -213,7 +245,7 @@ export const usePuzzleStore = defineStore('puzzle', () => {
|
||||
|
||||
if (correct) {
|
||||
// Check Columns
|
||||
for (let c = 0; c < size.value; c++) {
|
||||
for (let c = 0; c < cols; c++) {
|
||||
const targetHints = calculateLineHints(solutionCols[c]);
|
||||
const playerLine = playerGrid.value.map(row => row[c]);
|
||||
if (!validateLine(playerLine, targetHints)) {
|
||||
@@ -332,6 +364,7 @@ export const usePuzzleStore = defineStore('puzzle', () => {
|
||||
progressPercentage,
|
||||
initGame,
|
||||
initCustomGame,
|
||||
initFromImage,
|
||||
toggleCell,
|
||||
setCell,
|
||||
resetGame,
|
||||
|
||||
27
src/utils/debug_solver.test.js
Normal file
27
src/utils/debug_solver.test.js
Normal file
@@ -0,0 +1,27 @@
|
||||
|
||||
import { describe, it, expect } from 'vitest';
|
||||
import { solvePuzzle } from './solver';
|
||||
import { calculateHints } from './puzzleUtils';
|
||||
|
||||
describe('Debug Solver', () => {
|
||||
it('should solve the broken grid', () => {
|
||||
const grid = [
|
||||
[0,1,1,1,0,0,1,0,1,1],
|
||||
[1,1,1,0,0,1,1,1,0,0],
|
||||
[1,0,1,0,1,0,0,1,0,0],
|
||||
[1,0,0,0,1,1,1,1,0,1],
|
||||
[1,1,0,1,0,0,0,1,0,1],
|
||||
[1,0,1,0,1,0,0,0,1,0],
|
||||
[1,1,1,0,0,1,1,0,0,0],
|
||||
[0,1,0,0,1,0,1,0,0,0],
|
||||
[0,0,0,1,1,0,0,0,1,0],
|
||||
[1,0,1,1,0,0,1,0,1,1]
|
||||
];
|
||||
|
||||
const { rowHints, colHints } = calculateHints(grid);
|
||||
const result = solvePuzzle(rowHints, colHints);
|
||||
|
||||
console.log('Solve Result:', result);
|
||||
expect(result.percentSolved).toBe(100);
|
||||
});
|
||||
});
|
||||
44
src/utils/large_grid_solver.test.js
Normal file
44
src/utils/large_grid_solver.test.js
Normal file
@@ -0,0 +1,44 @@
|
||||
|
||||
import { describe, it, expect } from 'vitest';
|
||||
import { solvePuzzle } from './solver.js';
|
||||
|
||||
describe('Large Grid Solver', () => {
|
||||
it('should solve a large 55x28 grid without crashing', () => {
|
||||
const rows = 28;
|
||||
const cols = 55;
|
||||
// Create a simple pattern: checkerboard or lines
|
||||
const grid = Array(rows).fill().map((_, r) =>
|
||||
Array(cols).fill().map((_, c) => (r + c) % 2 === 0 ? 1 : 0)
|
||||
);
|
||||
|
||||
// Calculate hints
|
||||
const rowHints = grid.map(row => {
|
||||
const hints = [];
|
||||
let current = 0;
|
||||
row.forEach(cell => {
|
||||
if (cell === 1) current++;
|
||||
else if (current > 0) { hints.push(current); current = 0; }
|
||||
});
|
||||
if (current > 0) hints.push(current);
|
||||
return hints.length ? hints : [0];
|
||||
});
|
||||
|
||||
const colHints = Array(cols).fill().map((_, c) => {
|
||||
const hints = [];
|
||||
let current = 0;
|
||||
for(let r=0; r<rows; r++) {
|
||||
if (grid[r][c] === 1) current++;
|
||||
else if (current > 0) { hints.push(current); current = 0; }
|
||||
}
|
||||
if (current > 0) hints.push(current);
|
||||
return hints.length ? hints : [0];
|
||||
});
|
||||
|
||||
console.log('Starting solve...');
|
||||
const result = solvePuzzle(rowHints, colHints, (p) => console.log(`Progress: ${p}%`));
|
||||
console.log('Result:', result);
|
||||
|
||||
expect(result.percentSolved).toBeGreaterThan(0);
|
||||
expect(result.difficulty).toBeDefined();
|
||||
});
|
||||
});
|
||||
@@ -27,19 +27,20 @@ export function validateLine(line, targetHints) {
|
||||
export function calculateHints(grid) {
|
||||
if (!grid || grid.length === 0) return { rowHints: [], colHints: [] };
|
||||
|
||||
const size = grid.length;
|
||||
const rows = grid.length;
|
||||
const cols = grid[0].length;
|
||||
const rowHints = [];
|
||||
const colHints = [];
|
||||
|
||||
// Row Hints
|
||||
for (let r = 0; r < size; r++) {
|
||||
for (let r = 0; r < rows; r++) {
|
||||
rowHints.push(calculateLineHints(grid[r]));
|
||||
}
|
||||
|
||||
// Col Hints
|
||||
for (let c = 0; c < size; c++) {
|
||||
for (let c = 0; c < cols; c++) {
|
||||
const col = [];
|
||||
for (let r = 0; r < size; r++) {
|
||||
for (let r = 0; r < rows; r++) {
|
||||
col.push(grid[r][c]);
|
||||
}
|
||||
colHints.push(calculateLineHints(col));
|
||||
@@ -63,21 +64,23 @@ 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: [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],
|
||||
5: [88, 76, 71, 80, 90, 98, 99, 100, 100],
|
||||
10: [58, 25, 18, 44, 81, 99, 100, 100, 100],
|
||||
15: [36, 7, 3, 11, 67, 99, 100, 100, 100],
|
||||
20: [24, 3, 0, 3, 48, 99, 100, 100, 100],
|
||||
25: [13, 1, 0, 1, 21, 99, 100, 100, 100],
|
||||
30: [9, 0, 0, 0, 7, 99, 100, 100, 100],
|
||||
35: [5, 0, 0, 0, 5, 97, 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],
|
||||
45: [2, 0, 0, 0, 1, 84, 100, 100, 100],
|
||||
50: [1, 0, 0, 0, 0, 65, 100, 100, 100],
|
||||
55: [1, 0, 0, 0, 0, 55, 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]
|
||||
65: [0, 0, 0, 0, 0, 20, 100, 100, 100],
|
||||
70: [0, 0, 0, 0, 0, 11, 100, 100, 100],
|
||||
75: [0, 0, 0, 0, 0, 12, 100, 100, 100],
|
||||
80: [0, 0, 0, 0, 0, 4, 100, 100, 100]
|
||||
};
|
||||
|
||||
// Helper to get interpolated value from array
|
||||
@@ -122,17 +125,41 @@ export function calculateDifficulty(density, size = 10) {
|
||||
|
||||
const solvedPct = getSimulatedSolvedPct(size, density);
|
||||
|
||||
// Difficulty Score: Inverse of Solved Percent
|
||||
// 100% Solved -> 0 Difficulty
|
||||
// 0% Solved -> 100 Difficulty
|
||||
const value = Math.round(100 - solvedPct);
|
||||
let value;
|
||||
let level;
|
||||
|
||||
// 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
|
||||
// "Hardest" threshold is 99% solvability.
|
||||
// We calculate a base value first, then adjust for solvability.
|
||||
|
||||
return { level, value };
|
||||
const densityFactor = 1 - 2 * Math.abs(density - 0.5);
|
||||
const complexity = size * (0.4 + 0.6 * densityFactor);
|
||||
|
||||
if (solvedPct < 99) {
|
||||
// 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%)
|
||||
// Complexity based on Size and Density
|
||||
// Max size 80.
|
||||
// Formula: size * (0.4 + 0.6 * densityFactor)
|
||||
value = Math.min(85, complexity);
|
||||
}
|
||||
|
||||
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) };
|
||||
}
|
||||
|
||||
49
src/utils/repro_solver.test.js
Normal file
49
src/utils/repro_solver.test.js
Normal file
@@ -0,0 +1,49 @@
|
||||
|
||||
import { describe, it, expect } from 'vitest';
|
||||
import { solvePuzzle } from './solver';
|
||||
import { calculateHints } from './puzzleUtils';
|
||||
|
||||
describe('Solver Repro', () => {
|
||||
it('should solve a simple generated puzzle', () => {
|
||||
const grid = [
|
||||
[1, 0, 1, 1, 0],
|
||||
[1, 1, 0, 0, 1],
|
||||
[0, 0, 1, 0, 0],
|
||||
[1, 1, 1, 1, 1],
|
||||
[0, 1, 0, 1, 0]
|
||||
];
|
||||
const { rowHints, colHints } = calculateHints(grid);
|
||||
|
||||
const result = solvePuzzle(rowHints, colHints);
|
||||
expect(result.percentSolved).toBe(100);
|
||||
});
|
||||
|
||||
it('should not fail on random valid lines', () => {
|
||||
// Test solveLine indirectly via solvePuzzle on small grids
|
||||
for (let i = 0; i < 100; i++) {
|
||||
const size = 10;
|
||||
const grid = [];
|
||||
for(let r=0; r<size; r++) {
|
||||
const row = [];
|
||||
for(let c=0; c<size; c++) row.push(Math.random() > 0.5 ? 1 : 0);
|
||||
grid.push(row);
|
||||
}
|
||||
|
||||
const { rowHints, colHints } = calculateHints(grid);
|
||||
const result = solvePuzzle(rowHints, colHints);
|
||||
|
||||
// It might not be 100% solvable without guessing (logic only),
|
||||
// but since our solver HAS backtracking, it MUST be 100% solvable
|
||||
// (unless timeout/max depth reached, but for 10x10 it should solve).
|
||||
|
||||
// If it returns 0% or low %, it implies it failed to find the solution
|
||||
// or found a contradiction (which shouldn't happen for valid hints).
|
||||
|
||||
if (result.percentSolved < 100) {
|
||||
console.log('Failed Grid:', JSON.stringify(grid));
|
||||
console.log('Result:', result);
|
||||
}
|
||||
expect(result.percentSolved).toBe(100);
|
||||
}
|
||||
});
|
||||
});
|
||||
@@ -227,7 +227,11 @@ export function buildShareSVG(data, t, formattedTime) {
|
||||
}
|
||||
|
||||
// URL
|
||||
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 += `
|
||||
<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 += '</svg>';
|
||||
return svgContent;
|
||||
|
||||
@@ -6,6 +6,9 @@
|
||||
* 1: Filled
|
||||
*/
|
||||
|
||||
// Memoized helper for checking if hints fit
|
||||
const memo = new Map();
|
||||
|
||||
/**
|
||||
* Solves a single line (row or column) based on hints and current knowledge.
|
||||
* Uses the "Left-Right Overlap" algorithm to find common filled cells.
|
||||
@@ -15,10 +18,13 @@
|
||||
* @param {number[]} hints - Array of block lengths
|
||||
* @returns {number[]} - Updated line (or null if contradiction/impossible - though shouldn't happen for valid puzzles)
|
||||
*/
|
||||
function solveLine(currentLine, hints) {
|
||||
export function solveLine(currentLine, hints) {
|
||||
const length = currentLine.length;
|
||||
|
||||
// If no hints, all must be empty
|
||||
// Clear memo for this line solve
|
||||
memo.clear();
|
||||
|
||||
if (hints.length === 0 || (hints.length === 1 && hints[0] === 0)) {
|
||||
return Array(length).fill(0);
|
||||
}
|
||||
@@ -45,28 +51,23 @@ function solveLine(currentLine, hints) {
|
||||
while (currentIdx <= length - block) {
|
||||
if (canPlace(currentLine, currentIdx, block)) {
|
||||
// Verify we can fit remaining blocks
|
||||
// Simple heuristic: do we have enough space?
|
||||
// A full recursive check is better but slower.
|
||||
// For "Logical Solver" we assume valid placement is possible if we respect current constraints.
|
||||
// However, strictly, we need to know if there is *any* valid arrangement starting here.
|
||||
// Let's use a recursive check with memoization for "can fit rest".
|
||||
if (canFitRest(currentLine, currentIdx + block + 1, hints, hIndex + 1)) {
|
||||
leftPositions.push(currentIdx);
|
||||
currentIdx += block + 1; // Move past this block + 1 space
|
||||
break;
|
||||
}
|
||||
}
|
||||
// Cannot skip a filled cell - if we pass a '1', it becomes uncovered
|
||||
if (currentLine[currentIdx] === 1) return null;
|
||||
currentIdx++;
|
||||
}
|
||||
if (leftPositions.length <= hIndex) return null; // Impossible
|
||||
}
|
||||
|
||||
// 2. Calculate Right-Most Positions (by reversing line and hints)
|
||||
// This is symmetrical to Left-Most.
|
||||
// Instead of implementing reverse logic, we can just reverse inputs, run left-most, and reverse back.
|
||||
// But we need to respect the "currentLine" constraints which might be asymmetric.
|
||||
// Clear memo for right-side calculation (different line/hints)
|
||||
memo.clear();
|
||||
|
||||
// Actually, "Right-Most" is just "Left-Most" on the reversed grid.
|
||||
// 2. Calculate Right-Most Positions (by reversing line and hints)
|
||||
const reversedLine = [...currentLine].reverse();
|
||||
const reversedHints = [...hints].reverse();
|
||||
const rightPositionsReversed = [];
|
||||
@@ -82,14 +83,14 @@ function solveLine(currentLine, hints) {
|
||||
break;
|
||||
}
|
||||
}
|
||||
// Cannot skip a filled cell
|
||||
if (reversedLine[currentIdx] === 1) return null;
|
||||
currentIdx++;
|
||||
}
|
||||
if (rightPositionsReversed.length <= hIndex) return null;
|
||||
}
|
||||
|
||||
// Convert reversed positions to actual indices
|
||||
// index in reversed = length - 1 - (original_index + block_size - 1)
|
||||
// original_start = length - 1 - (reversed_start + block_size - 1) = length - reversed_start - block_size
|
||||
const rightPositions = rightPositionsReversed.map((rStart, i) => {
|
||||
const block = reversedHints[i];
|
||||
return length - rStart - block;
|
||||
@@ -106,13 +107,6 @@ function solveLine(currentLine, hints) {
|
||||
const block = hints[i];
|
||||
|
||||
// If overlap exists: [r, l + block - 1]
|
||||
// Example: Block 5. Left: 2, Right: 4.
|
||||
// Left: ..XXXXX...
|
||||
// Right: ....XXXXX.
|
||||
// Overlap: ..XXX...
|
||||
// Indices: max(l, r) to min(l+block, r+block) - 1 ?
|
||||
// Range is [r, l + block - 1] (inclusive)
|
||||
|
||||
if (r < l + block) {
|
||||
for (let k = r; k < l + block; k++) {
|
||||
newLine[k] = 1;
|
||||
@@ -121,15 +115,6 @@ function solveLine(currentLine, hints) {
|
||||
}
|
||||
|
||||
// Determine Empty cells?
|
||||
// A cell is empty if it is not covered by ANY block in ANY valid configuration.
|
||||
// This is harder with just L/R limits.
|
||||
// However, we can use the "Simple Glue" logic:
|
||||
// If a cell is outside the range [LeftLimit[i], RightLimit[i] + block] for ALL i, it's empty.
|
||||
// Wait, indices are not strictly partitioned. Block 1 could be at 0 or 10.
|
||||
// But logic dictates order.
|
||||
// Range of block i is [LeftPositions[i], RightPositions[i] + hints[i]].
|
||||
// If a cell k is not in ANY of these ranges, it is 0.
|
||||
|
||||
// Mask of possible filled cells
|
||||
const possibleFilled = Array(length).fill(false);
|
||||
for (let i = 0; i < hints.length; i++) {
|
||||
@@ -148,8 +133,7 @@ function solveLine(currentLine, hints) {
|
||||
}
|
||||
|
||||
// Memoized helper for checking if hints fit
|
||||
const memo = new Map();
|
||||
function canFitRest(line, startIndex, hints, hintIndex) {
|
||||
export function canFitRest(line, startIndex, hints, hintIndex) {
|
||||
// Optimization: If hints are empty, we just need to check if remaining line has no '1's
|
||||
if (hintIndex >= hints.length) {
|
||||
for (let i = startIndex; i < line.length; i++) {
|
||||
@@ -158,23 +142,32 @@ function canFitRest(line, startIndex, hints, hintIndex) {
|
||||
return true;
|
||||
}
|
||||
|
||||
// Key for memoization (primitive approach)
|
||||
// In a full solver, we'd pass a cache. For single line, maybe overkill, but safe.
|
||||
// let key = `${startIndex}-${hintIndex}`;
|
||||
// Skipping memo for now as line lengths are small (<80) and recursion depth is low.
|
||||
// Memoization key
|
||||
const key = `${startIndex}-${hintIndex}`;
|
||||
if (memo.has(key)) return memo.get(key);
|
||||
|
||||
const remainingLen = line.length - startIndex;
|
||||
// Min space needed: sum of hints + (hints.length - 1) spaces
|
||||
// Calculate lazily or precalc?
|
||||
let minSpace = 0;
|
||||
for(let i=hintIndex; i<hints.length; i++) minSpace += hints[i] + (i < hints.length - 1 ? 1 : 0);
|
||||
|
||||
if (remainingLen < minSpace) return false;
|
||||
if (remainingLen < minSpace) {
|
||||
memo.set(key, false);
|
||||
return false;
|
||||
}
|
||||
|
||||
const block = hints[hintIndex];
|
||||
// Try to find *any* valid placement for this block
|
||||
// We only need ONE valid path to return true.
|
||||
for (let i = startIndex; i <= line.length - minSpace; i++) { // Optimization on upper bound?
|
||||
for (let i = startIndex; i <= line.length - minSpace; i++) {
|
||||
// If we skipped a '1', we went too far. All 1s must be covered by blocks.
|
||||
// Since we are placing the *next* block, any 1s between startIndex and i are uncovered.
|
||||
// Thus, if we find a 1 in [startIndex, i-1], we must stop.
|
||||
let skippedOne = false;
|
||||
for (let x = startIndex; x < i; x++) {
|
||||
if (line[x] === 1) { skippedOne = true; break; }
|
||||
}
|
||||
if (skippedOne) break;
|
||||
|
||||
// Check placement
|
||||
let valid = true;
|
||||
// Block
|
||||
@@ -183,96 +176,276 @@ function canFitRest(line, startIndex, hints, hintIndex) {
|
||||
}
|
||||
if (!valid) continue;
|
||||
|
||||
// Boundary before (checked by loop start usually, but strictly:
|
||||
if (i > 0 && line[i-1] === 1) valid = false; // Should have been handled by caller or skip
|
||||
// Wait, the caller (loop) iterates i.
|
||||
// If i > startIndex, we implied space at i-1.
|
||||
// If line[i-1] is 1, we can't place here if we skipped it.
|
||||
// Actually, if we skip a '1', that's invalid.
|
||||
// So we can't just skip '1's.
|
||||
// Boundary before
|
||||
if (i > 0 && line[i-1] === 1) valid = false;
|
||||
|
||||
// Correct logic:
|
||||
// We iterate i. If we pass a '1' at index < i, that 1 is orphaned -> Invalid path.
|
||||
// So we can only scan forward as long as we don't skip a '1'.
|
||||
|
||||
let skippedOne = false;
|
||||
for (let x = startIndex; x < i; x++) {
|
||||
if (line[x] === 1) { skippedOne = true; break; }
|
||||
}
|
||||
if (skippedOne) break; // Cannot go further right, we left a 1 behind.
|
||||
|
||||
// Boundary after
|
||||
// Boundary after (check implicit in next block placement or end of line, but we need to check i+block cell)
|
||||
if (i + block < line.length && line[i+block] === 1) valid = false;
|
||||
|
||||
if (valid) {
|
||||
// Recurse
|
||||
if (canFitRest(line, i + block + 1, hints, hintIndex + 1)) return true;
|
||||
if (canFitRest(line, i + block + 1, hints, hintIndex + 1)) {
|
||||
memo.set(key, true);
|
||||
return true;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
memo.set(key, false);
|
||||
return false;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Solves the puzzle using logical iteration.
|
||||
* Main solver function that attempts to solve the puzzle using logic and backtracking (DFS).
|
||||
* Uses an efficient propagation queue and undo stack to avoid deep copying the grid.
|
||||
*
|
||||
* @param {number[][]} rowHints
|
||||
* @param {number[][]} colHints
|
||||
* @returns {object} { solvedGrid: number[][], percentSolved: number }
|
||||
* @param {function} onProgress - Optional callback for progress reporting (percent)
|
||||
* @param {number[][]} initialGrid - Optional initial grid state
|
||||
* @param {boolean} logicOnly - If true, stops after logical propagation (no guessing)
|
||||
* @returns {object} result
|
||||
*/
|
||||
export function solvePuzzle(rowHints, colHints) {
|
||||
export function solvePuzzle(rowHints, colHints, onProgress, initialGrid = null, logicOnly = false) {
|
||||
const rows = rowHints.length;
|
||||
const cols = colHints.length;
|
||||
const totalCells = rows * cols;
|
||||
|
||||
// Initialize grid with -1
|
||||
let grid = Array(rows).fill(null).map(() => Array(cols).fill(-1));
|
||||
// Grid initialization: -1 (Unknown), 0 (Empty), 1 (Filled)
|
||||
// Use initialGrid if provided (deep copy to be safe)
|
||||
const grid = initialGrid
|
||||
? initialGrid.map(row => [...row])
|
||||
: Array(rows).fill().map(() => Array(cols).fill(-1));
|
||||
|
||||
let changed = true;
|
||||
let iterations = 0;
|
||||
const MAX_ITER = 100; // Safety break
|
||||
// Stats
|
||||
let iterations = 0; // Total calls to solve()
|
||||
let maxDepth = 0; // Max recursion depth
|
||||
let backtracks = 0; // Failed guesses
|
||||
let logicSteps = 0; // Cells filled by propagation
|
||||
let lastProgressTime = 0;
|
||||
|
||||
while (changed && iterations < MAX_ITER) {
|
||||
changed = false;
|
||||
function reportProgress() {
|
||||
if (!onProgress) return;
|
||||
const now = Date.now();
|
||||
if (now - lastProgressTime >= 50) {
|
||||
let filled = 0;
|
||||
for(let r=0; r<rows; r++) {
|
||||
for(let c=0; c<cols; c++) {
|
||||
if(grid[r][c] !== -1) filled++;
|
||||
}
|
||||
}
|
||||
onProgress(Math.floor((filled/totalCells) * 100));
|
||||
lastProgressTime = now;
|
||||
}
|
||||
}
|
||||
|
||||
// Queue for propagation (Set of strings "r{i}" or "c{i}")
|
||||
const queue = new Set();
|
||||
for(let r=0; r<rows; r++) queue.add(`r${r}`);
|
||||
for(let c=0; c<cols; c++) queue.add(`c${c}`);
|
||||
|
||||
// Helper: Undo changes from a propagation step
|
||||
function undo(changes) {
|
||||
for(let i=changes.length-1; i>=0; i--) {
|
||||
const {r, c, old} = changes[i];
|
||||
grid[r][c] = old;
|
||||
}
|
||||
}
|
||||
|
||||
// Helper: Propagate logic constraints until fixed point or contradiction
|
||||
// Returns list of changes made, or null if contradiction found
|
||||
function propagate() {
|
||||
const changes = [];
|
||||
|
||||
try {
|
||||
while(queue.size > 0) {
|
||||
reportProgress();
|
||||
|
||||
const item = queue.values().next().value;
|
||||
queue.delete(item);
|
||||
|
||||
const type = item[0];
|
||||
const idx = parseInt(item.slice(1));
|
||||
|
||||
let currentLine, hints;
|
||||
if (type === 'r') {
|
||||
currentLine = grid[idx]; // Reference for row (fast)
|
||||
hints = rowHints[idx];
|
||||
} else {
|
||||
currentLine = grid.map(row => row[idx]); // Copy for col (slower)
|
||||
hints = colHints[idx];
|
||||
}
|
||||
|
||||
const newLine = solveLine(currentLine, hints);
|
||||
|
||||
if (!newLine) throw 'contradiction';
|
||||
|
||||
// Apply changes
|
||||
for(let i=0; i<newLine.length; i++) {
|
||||
if (currentLine[i] !== newLine[i]) {
|
||||
// If we try to change a known value to something else -> Contradiction
|
||||
if (currentLine[i] !== -1 && currentLine[i] !== newLine[i]) throw 'contradiction';
|
||||
|
||||
if (currentLine[i] === -1) {
|
||||
const r = type === 'r' ? idx : i;
|
||||
const c = type === 'r' ? i : idx;
|
||||
|
||||
// Double check if already set by orthogonal update in same loop?
|
||||
// (Should be handled by -1 check above, as grid is shared)
|
||||
if (grid[r][c] === -1) {
|
||||
grid[r][c] = newLine[i];
|
||||
changes.push({r, c, old: -1});
|
||||
logicSteps++;
|
||||
|
||||
// Add orthogonal line to queue
|
||||
if (type === 'r') queue.add(`c${c}`);
|
||||
else queue.add(`r${r}`);
|
||||
} else if (grid[r][c] !== newLine[i]) {
|
||||
console.log('Contradiction: Orthogonal Conflict at', r, c, 'Grid:', grid[r][c], 'New:', newLine[i]);
|
||||
throw 'contradiction';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
// Revert changes from this failed propagation
|
||||
undo(changes);
|
||||
return null;
|
||||
}
|
||||
return changes;
|
||||
}
|
||||
|
||||
// DFS Solver
|
||||
function solve(depth) {
|
||||
maxDepth = Math.max(maxDepth, depth);
|
||||
iterations++;
|
||||
|
||||
// Rows
|
||||
for (let r = 0; r < rows; r++) {
|
||||
const newLine = solveLine(grid[r], rowHints[r]);
|
||||
if (newLine) {
|
||||
for (let c = 0; c < cols; c++) {
|
||||
if (grid[r][c] !== newLine[c]) {
|
||||
grid[r][c] = newLine[c];
|
||||
changed = true;
|
||||
}
|
||||
}
|
||||
reportProgress();
|
||||
|
||||
// 1. Propagate Logic
|
||||
const changes = propagate();
|
||||
if (!changes) return false; // Contradiction
|
||||
|
||||
// 2. Find Best Branch Candidate
|
||||
let bestR = -1, bestC = -1;
|
||||
let minUnknowns = Infinity;
|
||||
let isComplete = true;
|
||||
|
||||
// Scan for unknowns and pick heuristic
|
||||
// Heuristic: Line with fewest unknowns (most constrained)
|
||||
for(let r=0; r<rows; r++) {
|
||||
let unknowns = 0;
|
||||
let firstUnknownC = -1;
|
||||
for(let c=0; c<cols; c++) {
|
||||
if(grid[r][c] === -1) {
|
||||
unknowns++;
|
||||
if (firstUnknownC === -1) firstUnknownC = c;
|
||||
}
|
||||
}
|
||||
|
||||
// Cols
|
||||
for (let c = 0; c < cols; c++) {
|
||||
const currentCol = grid.map(row => row[c]);
|
||||
const newCol = solveLine(currentCol, colHints[c]);
|
||||
if (newCol) {
|
||||
for (let r = 0; r < rows; r++) {
|
||||
if (grid[r][c] !== newCol[r]) {
|
||||
grid[r][c] = newCol[r];
|
||||
changed = true;
|
||||
}
|
||||
}
|
||||
if (unknowns > 0) {
|
||||
isComplete = false;
|
||||
if (unknowns < minUnknowns) {
|
||||
minUnknowns = unknowns;
|
||||
bestR = r;
|
||||
bestC = firstUnknownC;
|
||||
}
|
||||
if (minUnknowns === 1) break; // Optimal
|
||||
}
|
||||
}
|
||||
|
||||
// Calculate solved %
|
||||
if (isComplete) return true; // Solved!
|
||||
|
||||
// 3. Branching (Guessing)
|
||||
// Try 1
|
||||
grid[bestR][bestC] = 1;
|
||||
queue.add(`r${bestR}`);
|
||||
queue.add(`c${bestC}`);
|
||||
|
||||
if (solve(depth + 1)) return true;
|
||||
|
||||
// Backtrack from 1
|
||||
grid[bestR][bestC] = -1; // Undo guess
|
||||
// (Recursive call already undid its propagation changes)
|
||||
|
||||
// Try 0
|
||||
grid[bestR][bestC] = 0;
|
||||
queue.add(`r${bestR}`);
|
||||
queue.add(`c${bestC}`);
|
||||
|
||||
if (solve(depth + 1)) return true;
|
||||
|
||||
// Backtrack from 0
|
||||
grid[bestR][bestC] = -1; // Undo guess
|
||||
backtracks++;
|
||||
|
||||
// Undo propagation from this level
|
||||
undo(changes);
|
||||
return false;
|
||||
}
|
||||
|
||||
// Start Solving
|
||||
if (logicOnly) {
|
||||
// Just logical propagation without guessing
|
||||
if (initialGrid) {
|
||||
// If resuming, ensure queue has all lines to check consistency
|
||||
queue.clear();
|
||||
for(let r=0; r<rows; r++) queue.add(`r${r}`);
|
||||
for(let c=0; c<cols; c++) queue.add(`c${c}`);
|
||||
}
|
||||
|
||||
// Propagate logic constraints
|
||||
propagate();
|
||||
// No DFS, so iterations/backtracks remain 0
|
||||
} else if (!initialGrid) {
|
||||
// Normal start (full solver)
|
||||
solve(0);
|
||||
} else {
|
||||
// Resume from provided state (full solver)
|
||||
// We need to populate the queue with all rows/cols since we don't know what changed
|
||||
queue.clear();
|
||||
for(let r=0; r<rows; r++) queue.add(`r${r}`);
|
||||
for(let c=0; c<cols; c++) queue.add(`c${c}`);
|
||||
solve(0);
|
||||
}
|
||||
|
||||
// Calculate Percent Solved
|
||||
let solvedCount = 0;
|
||||
for (let r = 0; r < rows; r++) {
|
||||
for (let c = 0; c < cols; c++) {
|
||||
if (grid[r][c] !== -1) solvedCount++;
|
||||
grid.forEach(r => r.forEach(c => { if(c !== -1) solvedCount++; }));
|
||||
let percentSolved = (solvedCount / totalCells) * 100;
|
||||
|
||||
if (onProgress) onProgress(Math.floor(percentSolved));
|
||||
|
||||
// Difficulty Calculation
|
||||
// Logic:
|
||||
// - Base: 0-20% based on size/density
|
||||
// - Logic: 0-30% based on iterations needed (depth 0)
|
||||
// - Guessing: 0-50% based on backtracks/depth
|
||||
|
||||
let difficultyScore = 0;
|
||||
const effectiveSize = Math.sqrt(totalCells);
|
||||
|
||||
if (percentSolved < 100) {
|
||||
difficultyScore = 100; // Unsolvable (or timed out/too hard)
|
||||
} else {
|
||||
if (maxDepth === 0) {
|
||||
// Pure logic
|
||||
difficultyScore = Math.min(30, effectiveSize);
|
||||
} else {
|
||||
// Required guessing
|
||||
// Simple heuristic: 30 + backtracks * 5 + depth * 2
|
||||
difficultyScore = 30 + (backtracks * 2) + (maxDepth * 5);
|
||||
difficultyScore = Math.min(100, difficultyScore);
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
solvedGrid: grid,
|
||||
percentSolved: (solvedCount / (rows * cols)) * 100
|
||||
percentSolved,
|
||||
difficultyScore: Math.round(difficultyScore),
|
||||
lookaheadUsed: maxDepth > 0,
|
||||
iterations,
|
||||
maxDepth,
|
||||
backtracks
|
||||
};
|
||||
}
|
||||
|
||||
64
src/utils/solver.test.js
Normal file
64
src/utils/solver.test.js
Normal file
@@ -0,0 +1,64 @@
|
||||
it('solves a puzzle requiring guessing (Backtracking)', () => {
|
||||
// A puzzle that logic alone cannot start usually has multiple solutions or requires a guess.
|
||||
// Example: The "domino" or "ambiguous" pattern, but we need a unique solution that requires lookahead.
|
||||
// Or just a very hard unique puzzle.
|
||||
// A simple case where line logic is stuck but global constraints solve it.
|
||||
//
|
||||
// 0 1 1 0
|
||||
// 1 0 0 1
|
||||
// 1 0 0 1
|
||||
// 0 1 1 0
|
||||
// Hints:
|
||||
// R: 2, 1 1, 1 1, 2
|
||||
// C: 2, 1 1, 1 1, 2
|
||||
// This is a "ring". It might be solvable by logic if corners are forced.
|
||||
// Let's try a known "hard" small pattern.
|
||||
//
|
||||
// 0 0 0
|
||||
// 0 1 0
|
||||
// 0 0 0
|
||||
// R: 0, 1, 0
|
||||
// C: 0, 1, 0
|
||||
// Logic solves this instantly.
|
||||
|
||||
// Let's trust the logic works for general backtracking by forcing a guess.
|
||||
// We can mock solveLine to return "no change" to force backtracking? No, integration test is better.
|
||||
|
||||
// Let's just ensure it returns a valid result structure for a solvable puzzle.
|
||||
const rowHints = [[1], [1], [1]];
|
||||
const colHints = [[1], [1], [1]];
|
||||
// 3x3 diagonal?
|
||||
// 1 0 0
|
||||
// 0 1 0
|
||||
// 0 0 1
|
||||
// Hints: 1, 1, 1
|
||||
// Cols: 1, 1, 1
|
||||
// This has multiple solutions (diagonal or anti-diagonal or others).
|
||||
// Our solver should find ONE of them and return 100%.
|
||||
|
||||
const result = solvePuzzle(rowHints, colHints);
|
||||
expect(result.percentSolved).toBe(100);
|
||||
// It might use lookahead because logic can't decide.
|
||||
// Actually for this specific case, logic does nothing (all empty or all full are not possible, but many perms).
|
||||
// So it MUST branch.
|
||||
expect(result.maxDepth).toBeGreaterThan(0);
|
||||
});
|
||||
|
||||
it('stress test: should solve 100 random valid 10x10 grids', () => {
|
||||
// This ensures the solver is robust and doesn't fail on valid puzzles.
|
||||
// Using a fixed seed or just running a loop.
|
||||
for (let i = 0; i < 100; i++) {
|
||||
const size = 10;
|
||||
const grid = generateRandomGrid(size, 0.5);
|
||||
const { rowHints, colHints } = calculateHints(grid);
|
||||
|
||||
const result = solvePuzzle(rowHints, colHints);
|
||||
|
||||
if (result.percentSolved < 100) {
|
||||
console.error('Failed Grid:', JSON.stringify(grid));
|
||||
console.error('Result:', result);
|
||||
}
|
||||
expect(result.percentSolved).toBe(100);
|
||||
}
|
||||
});
|
||||
});
|
||||
170
src/utils/workerPool.js
Normal file
170
src/utils/workerPool.js
Normal file
@@ -0,0 +1,170 @@
|
||||
import SolverWorker from '../workers/solver.worker.js?worker';
|
||||
|
||||
class WorkerPool {
|
||||
constructor() {
|
||||
this.workers = [];
|
||||
this.queue = [];
|
||||
this.active = 0;
|
||||
this.poolSize = navigator.hardwareConcurrency || 4;
|
||||
|
||||
for (let i = 0; i < this.poolSize; i++) {
|
||||
const worker = new SolverWorker();
|
||||
worker.onmessage = (e) => this.handleWorkerMessage(worker, e);
|
||||
worker.onerror = (e) => this.handleWorkerError(worker, e);
|
||||
this.workers.push({ worker, busy: false, id: i });
|
||||
}
|
||||
}
|
||||
|
||||
run(taskData, onProgress) {
|
||||
return new Promise((resolve, reject) => {
|
||||
const task = { data: taskData, resolve, reject, onProgress };
|
||||
const freeWorker = this.workers.find(w => !w.busy);
|
||||
|
||||
if (freeWorker) {
|
||||
this.execute(freeWorker, task);
|
||||
} else {
|
||||
this.queue.push(task);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
runRace(tasks) {
|
||||
return new Promise((resolve, reject) => {
|
||||
let activeCount = tasks.length;
|
||||
let resolved = false;
|
||||
|
||||
tasks.forEach(taskData => {
|
||||
this.run(taskData.data, taskData.onProgress)
|
||||
.then(result => {
|
||||
if (resolved) return;
|
||||
|
||||
// Heuristic: If solved 100%, we have a winner
|
||||
if (result.solvability === 100) {
|
||||
resolved = true;
|
||||
resolve(result);
|
||||
// Cancel others (optional but good for perf)
|
||||
// We can't easily cancel *specific* other tasks in this pool implementation without IDs
|
||||
// But since this is a "Race", we assume the caller will handle cleanup or we just let them finish
|
||||
} else {
|
||||
// If not fully solved, we wait for others?
|
||||
// Or maybe we collect all results and pick best?
|
||||
// For "Race", we usually want the first *Success*.
|
||||
// If all fail (finish without 100%), we reject or return best.
|
||||
activeCount--;
|
||||
if (activeCount === 0) {
|
||||
// All finished, none 100%. Return the last one (or logic to pick best)
|
||||
resolve(result);
|
||||
}
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
if (resolved) return;
|
||||
activeCount--;
|
||||
if (activeCount === 0) {
|
||||
reject(new Error('All workers failed'));
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
execute(workerObj, task) {
|
||||
workerObj.busy = true;
|
||||
workerObj.currentTask = task;
|
||||
this.active++;
|
||||
workerObj.worker.postMessage(task.data);
|
||||
}
|
||||
|
||||
handleWorkerMessage(worker, e) {
|
||||
const workerObj = this.workers.find(w => w.worker === worker);
|
||||
if (workerObj && workerObj.currentTask) {
|
||||
if (e.data.type === 'progress') {
|
||||
if (workerObj.currentTask.onProgress) {
|
||||
workerObj.currentTask.onProgress(e.data.percent);
|
||||
}
|
||||
return; // Don't resolve yet
|
||||
}
|
||||
|
||||
if (e.data.error) {
|
||||
workerObj.currentTask.reject(new Error(e.data.error));
|
||||
} else {
|
||||
workerObj.currentTask.resolve(e.data);
|
||||
}
|
||||
|
||||
workerObj.currentTask = null;
|
||||
workerObj.busy = false;
|
||||
this.active--;
|
||||
this.processQueue();
|
||||
}
|
||||
}
|
||||
|
||||
handleWorkerError(worker, e) {
|
||||
const workerObj = this.workers.find(w => w.worker === worker);
|
||||
if (workerObj && workerObj.currentTask) {
|
||||
workerObj.currentTask.reject(e);
|
||||
workerObj.currentTask = null;
|
||||
workerObj.busy = false;
|
||||
this.active--;
|
||||
this.processQueue();
|
||||
}
|
||||
}
|
||||
|
||||
processQueue() {
|
||||
if (this.queue.length > 0) {
|
||||
const freeWorker = this.workers.find(w => !w.busy);
|
||||
if (freeWorker) {
|
||||
const task = this.queue.shift();
|
||||
this.execute(freeWorker, task);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
clearQueue() {
|
||||
this.queue.forEach(task => {
|
||||
task.reject(new Error('Cancelled'));
|
||||
});
|
||||
this.queue = [];
|
||||
}
|
||||
|
||||
cancelAll() {
|
||||
this.clearQueue();
|
||||
|
||||
// Terminate and restart busy workers
|
||||
this.workers.forEach((w, index) => {
|
||||
if (w.busy) {
|
||||
w.worker.terminate();
|
||||
|
||||
if (w.currentTask) {
|
||||
w.currentTask.reject(new Error('Terminated'));
|
||||
}
|
||||
|
||||
// Create replacement
|
||||
const newWorker = new SolverWorker();
|
||||
newWorker.onmessage = (e) => this.handleWorkerMessage(newWorker, e);
|
||||
newWorker.onerror = (e) => this.handleWorkerError(newWorker, e);
|
||||
|
||||
// Replace in array
|
||||
this.workers[index] = { worker: newWorker, busy: false, id: w.id };
|
||||
}
|
||||
});
|
||||
|
||||
// Reset active count since all busy workers were replaced with idle ones
|
||||
this.active = 0;
|
||||
}
|
||||
|
||||
terminate() {
|
||||
this.workers.forEach(w => w.worker.terminate());
|
||||
this.workers = [];
|
||||
this.queue = [];
|
||||
}
|
||||
}
|
||||
|
||||
// Singleton instance
|
||||
let poolInstance = null;
|
||||
|
||||
export const getWorkerPool = () => {
|
||||
if (!poolInstance) {
|
||||
poolInstance = new WorkerPool();
|
||||
}
|
||||
return poolInstance;
|
||||
};
|
||||
62
src/workers/solver.worker.js
Normal file
62
src/workers/solver.worker.js
Normal file
@@ -0,0 +1,62 @@
|
||||
import { calculateHints } from '../utils/puzzleUtils';
|
||||
import { solvePuzzle } from '../utils/solver';
|
||||
|
||||
self.onmessage = (e) => {
|
||||
const { id, grid, initialGrid } = e.data;
|
||||
|
||||
try {
|
||||
if (!grid || grid.length === 0) {
|
||||
self.postMessage({ id, error: 'Empty grid' });
|
||||
return;
|
||||
}
|
||||
|
||||
const rows = grid.length;
|
||||
const cols = grid[0].length;
|
||||
// Use initialGrid if provided, otherwise assume we are starting fresh
|
||||
// BUT wait, 'grid' passed here is usually the 0/1 grid from Image Import (target pattern).
|
||||
// 'initialGrid' would be the partial solution state (-1/0/1).
|
||||
|
||||
// 1. Calculate Hints from the TARGET grid (the image)
|
||||
const { rowHints, colHints } = calculateHints(grid);
|
||||
|
||||
// 2. Run Solver (Logic + Lookahead)
|
||||
const onProgress = (percent) => {
|
||||
self.postMessage({
|
||||
id,
|
||||
type: 'progress',
|
||||
percent
|
||||
});
|
||||
};
|
||||
|
||||
const { percentSolved, difficultyScore, lookaheadUsed } = solvePuzzle(rowHints, colHints, onProgress, initialGrid);
|
||||
|
||||
// 3. Determine Level
|
||||
let value = difficultyScore;
|
||||
let level;
|
||||
|
||||
if (percentSolved < 100) {
|
||||
level = 'extreme'; // Unsolvable by logic+lookahead
|
||||
} else {
|
||||
if (value < 25) level = 'easy';
|
||||
else if (value < 50) level = 'medium';
|
||||
else if (value < 75) level = 'hard';
|
||||
else level = 'extreme';
|
||||
}
|
||||
|
||||
// Add specific note if lookahead was needed?
|
||||
// UI doesn't have a field for that, but we can encode it in difficultyLabel if needed.
|
||||
// For now, standard levels are fine.
|
||||
|
||||
self.postMessage({
|
||||
id,
|
||||
solvability: Math.floor(percentSolved),
|
||||
difficulty: Math.round(value),
|
||||
difficultyLabel: level,
|
||||
rows,
|
||||
cols
|
||||
});
|
||||
|
||||
} catch (err) {
|
||||
self.postMessage({ id, error: err.message });
|
||||
}
|
||||
};
|
||||
@@ -1,4 +1,5 @@
|
||||
import { calculateHints } from '../utils/puzzleUtils.js';
|
||||
import { solveLine } from '../utils/solver.js';
|
||||
|
||||
const messages = {
|
||||
pl: {
|
||||
@@ -40,195 +41,33 @@ const t = (locale, key, params) => {
|
||||
return typeof value === 'string' ? format(value, params) : key;
|
||||
};
|
||||
|
||||
const buildPrefix = (lineState) => {
|
||||
const n = lineState.length;
|
||||
const filled = new Array(n + 1).fill(0);
|
||||
const cross = new Array(n + 1).fill(0);
|
||||
for (let i = 0; i < n; i++) {
|
||||
filled[i + 1] = filled[i] + (lineState[i] === 1 ? 1 : 0);
|
||||
cross[i + 1] = cross[i] + (lineState[i] === 2 ? 1 : 0);
|
||||
}
|
||||
return { filled, cross };
|
||||
};
|
||||
|
||||
const buildSuffixMin = (hints) => {
|
||||
const m = hints.length;
|
||||
const suffixMin = new Array(m + 1).fill(0);
|
||||
let sumHints = 0;
|
||||
for (let i = m - 1; i >= 0; i--) {
|
||||
sumHints += hints[i];
|
||||
const separators = m - i - 1;
|
||||
suffixMin[i] = sumHints + separators;
|
||||
}
|
||||
return suffixMin;
|
||||
};
|
||||
|
||||
const solveLineLogic = (lineState, hints) => {
|
||||
const n = lineState.length;
|
||||
const m = hints.length;
|
||||
if (m === 0) {
|
||||
for (let i = 0; i < n; i++) {
|
||||
if (lineState[i] === 0) return { index: i, state: 2 };
|
||||
// Map Store format (0=Unk, 1=Fill, 2=Cross) to Solver format (-1=Unk, 1=Fill, 0=Empty)
|
||||
const solverLine = lineState.map(cell => {
|
||||
if (cell === 0) return -1; // Unknown
|
||||
if (cell === 1) return 1; // Filled
|
||||
if (cell === 2) return 0; // Empty/Cross
|
||||
return -1;
|
||||
});
|
||||
|
||||
// Call robust solver
|
||||
const resultLine = solveLine(solverLine, hints);
|
||||
|
||||
// Check for new info
|
||||
if (!resultLine) return { index: -1 }; // Contradiction or error
|
||||
|
||||
for (let i = 0; i < lineState.length; i++) {
|
||||
// We only care about cells that are currently 0 (Unknown) in Store
|
||||
if (lineState[i] === 0) {
|
||||
if (resultLine[i] === 1) {
|
||||
return { index: i, state: 1 }; // Suggest Fill
|
||||
}
|
||||
return { index: -1 };
|
||||
}
|
||||
|
||||
const { filled, cross } = buildPrefix(lineState);
|
||||
const suffixMin = buildSuffixMin(hints);
|
||||
|
||||
const hasFilled = (a, b) => filled[b] - filled[a] > 0;
|
||||
const hasCross = (a, b) => cross[b] - cross[a] > 0;
|
||||
|
||||
const memoSuffix = Array.from({ length: n + 1 }, () => Array(m + 1).fill(null));
|
||||
const memoPrefix = Array.from({ length: n + 1 }, () => Array(m + 1).fill(null));
|
||||
|
||||
const canPlaceSuffix = (pos, hintIndex) => {
|
||||
const cached = memoSuffix[pos][hintIndex];
|
||||
if (cached !== null) return cached;
|
||||
if (hintIndex === m) {
|
||||
const result = !hasFilled(pos, n);
|
||||
memoSuffix[pos][hintIndex] = result;
|
||||
return result;
|
||||
}
|
||||
const len = hints[hintIndex];
|
||||
// maxStart logic: we need enough space for this block (len) + subsequent blocks/gaps (suffixMin[hintIndex+1])
|
||||
// suffixMin[hintIndex] = len + (m - hintIndex - 1) + suffixMin[hintIndex+1]
|
||||
// Actually suffixMin[hintIndex] already includes everything needed from here to end.
|
||||
// So if we place block at start, end is start + len.
|
||||
// Total space needed is suffixMin[hintIndex].
|
||||
// So start can go up to n - suffixMin[hintIndex].
|
||||
const maxStart = n - suffixMin[hintIndex];
|
||||
|
||||
for (let start = pos; start <= maxStart; start++) {
|
||||
if (hasFilled(pos, start)) continue; // Must be empty before this block
|
||||
if (hasCross(start, start + len)) continue; // Block space must be free of crosses
|
||||
|
||||
// If not the last block, we need a gap after
|
||||
if (hintIndex < m - 1) {
|
||||
if (start + len < n && lineState[start + len] === 1) continue; // Gap must not be filled
|
||||
// We can assume gap is at start + len. Next block starts at least at start + len + 1
|
||||
const nextPos = start + len + 1;
|
||||
if (canPlaceSuffix(nextPos, hintIndex + 1)) {
|
||||
memoSuffix[pos][hintIndex] = true;
|
||||
return true;
|
||||
}
|
||||
} else {
|
||||
// Last block
|
||||
// Check if we can fill the rest with empty
|
||||
if (hasFilled(start + len, n)) continue;
|
||||
memoSuffix[pos][hintIndex] = true;
|
||||
return true;
|
||||
}
|
||||
}
|
||||
memoSuffix[pos][hintIndex] = false;
|
||||
return false;
|
||||
};
|
||||
|
||||
const canPlacePrefix = (pos, hintCount) => {
|
||||
const cached = memoPrefix[pos][hintCount];
|
||||
if (cached !== null) return cached;
|
||||
if (hintCount === 0) {
|
||||
const result = !hasFilled(0, pos);
|
||||
memoPrefix[pos][hintCount] = result;
|
||||
return result;
|
||||
}
|
||||
const len = hints[hintCount - 1];
|
||||
|
||||
// Logic for prefix:
|
||||
// We are placing the (hintCount-1)-th block ending at 'start + len' <= pos.
|
||||
// So 'start' <= pos - len.
|
||||
// But we also need to ensure there is space for previous blocks.
|
||||
// However, the simple constraint is just iterating backwards.
|
||||
|
||||
// maxStart: if this is the only block, maxStart = pos - len.
|
||||
// If there are previous blocks, we need a gap before this block.
|
||||
// So previous block ended at start - 1.
|
||||
// Actually the recursive call will handle space check.
|
||||
// But for the gap check:
|
||||
// If we place block at 'start', we need lineState[start-1] != 1 (if start > 0).
|
||||
// And we recursively check canPlacePrefix(start-1, count-1).
|
||||
// But if start=0 and count > 1, impossible.
|
||||
|
||||
const maxStart = pos - len; // Simplified, loop condition handles rest
|
||||
|
||||
for (let start = maxStart; start >= 0; start--) {
|
||||
if (hasCross(start, start + len)) continue;
|
||||
if (hasFilled(start + len, pos)) continue; // Must be empty after this block up to pos
|
||||
|
||||
// Check gap before
|
||||
if (hintCount > 1) {
|
||||
if (start === 0) continue; // No space for previous blocks
|
||||
if (lineState[start - 1] === 1) continue; // Gap must not be filled
|
||||
const prevPos = start - 1;
|
||||
if (canPlacePrefix(prevPos, hintCount - 1)) {
|
||||
memoPrefix[pos][hintCount] = true;
|
||||
return true;
|
||||
}
|
||||
} else {
|
||||
// First block
|
||||
if (hasFilled(0, start)) continue; // Before first block must be empty
|
||||
memoPrefix[pos][hintCount] = true;
|
||||
return true;
|
||||
}
|
||||
}
|
||||
memoPrefix[pos][hintCount] = false;
|
||||
return false;
|
||||
};
|
||||
|
||||
const possibleStarts = [];
|
||||
for (let i = 0; i < m; i++) {
|
||||
const len = hints[i];
|
||||
const starts = [];
|
||||
for (let start = 0; start <= n - len; start++) {
|
||||
if (i === 0) {
|
||||
if (!canPlacePrefix(start, 0)) continue;
|
||||
} else {
|
||||
if (start === 0) continue;
|
||||
if (lineState[start - 1] === 1) continue;
|
||||
if (!canPlacePrefix(start - 1, i)) continue;
|
||||
}
|
||||
|
||||
if (hasCross(start, start + len)) continue;
|
||||
if (start + len < n && lineState[start + len] === 1) continue;
|
||||
const nextPos = start + len < n ? start + len + 1 : start + len;
|
||||
if (!canPlaceSuffix(nextPos, i + 1)) continue;
|
||||
starts.push(start);
|
||||
}
|
||||
possibleStarts.push(starts);
|
||||
}
|
||||
|
||||
const mustFill = new Array(n).fill(false);
|
||||
const coverage = new Array(n).fill(false);
|
||||
|
||||
for (let i = 0; i < m; i++) {
|
||||
const starts = possibleStarts[i];
|
||||
const len = hints[i];
|
||||
if (starts.length === 0) return { index: -1 };
|
||||
let earliest = starts[0];
|
||||
let latest = starts[0];
|
||||
for (let j = 1; j < starts.length; j++) {
|
||||
earliest = Math.min(earliest, starts[j]);
|
||||
latest = Math.max(latest, starts[j]);
|
||||
}
|
||||
const startOverlap = Math.max(earliest, latest);
|
||||
const endOverlap = Math.min(earliest + len - 1, latest + len - 1);
|
||||
for (let k = startOverlap; k <= endOverlap; k++) {
|
||||
if (k >= 0 && k < n) mustFill[k] = true;
|
||||
}
|
||||
for (let s = 0; s < starts.length; s++) {
|
||||
const start = starts[s];
|
||||
for (let k = start; k < start + len; k++) {
|
||||
coverage[k] = true;
|
||||
if (resultLine[i] === 0) {
|
||||
return { index: i, state: 2 }; // Suggest Cross
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
for (let i = 0; i < n; i++) {
|
||||
if (lineState[i] === 0 && mustFill[i]) return { index: i, state: 1 };
|
||||
}
|
||||
for (let i = 0; i < n; i++) {
|
||||
if (lineState[i] === 0 && !coverage[i]) return { index: i, state: 2 };
|
||||
}
|
||||
return { index: -1 };
|
||||
};
|
||||
|
||||
|
||||
@@ -31,14 +31,14 @@ export default defineConfig({
|
||||
theme_color: '#00f2fe',
|
||||
icons: [
|
||||
{
|
||||
src: '/pwa-192x192.svg',
|
||||
src: '/pwa-192x192.png',
|
||||
sizes: '192x192',
|
||||
type: 'image/svg+xml'
|
||||
type: 'image/png'
|
||||
},
|
||||
{
|
||||
src: '/pwa-512x512.svg',
|
||||
src: '/pwa-512x512.png',
|
||||
sizes: '512x512',
|
||||
type: 'image/svg+xml'
|
||||
type: 'image/png'
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -48,5 +48,8 @@ export default defineConfig({
|
||||
alias: {
|
||||
'@': path.resolve(__dirname, './src')
|
||||
}
|
||||
},
|
||||
server: {
|
||||
allowedHosts: true
|
||||
}
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user