commit 1a9710ec887fd247ad2eaca9e41e395d5660b560 Author: Guido Date: Tue Aug 4 17:29:25 2026 +0200 Initial commit: fuesse.sexy — Where's the Feet Wimmel-Suchspiel: finde 3 versteckte Fuesse in einer randvollen Szene. - Node/Express-Server generiert Szenen prozedural aus einer gemeinsamen Library (library/props = Deko, library/feet = Fuesse); Spezial-Level (emoji) unter scenes/ - Serverseitige Trefferpruefung (nicht per DOM austrickbar) - Frontend rendert die Szene als ein Bild -> fluessiges Zoom/Pan (panzoom) - Dark Mode, kein Start-Screen, Installationsskript + Deploy-Doku (Proxmox LXC) Co-Authored-By: Claude Opus 4.8 diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..b82fc88 --- /dev/null +++ b/.gitignore @@ -0,0 +1,3 @@ +node_modules/ +npm-debug.log +.DS_Store diff --git a/DEPLOY.md b/DEPLOY.md new file mode 100644 index 0000000..374b4b7 --- /dev/null +++ b/DEPLOY.md @@ -0,0 +1,104 @@ +# Deployment auf einem Proxmox-VE LXC + +Anleitung, um fuesse.sexy in einem LXC-Container laufen zu lassen (Debian 12 als +Beispiel). Läuft danach dauerhaft als systemd-Dienst und startet beim Boot mit. + +## 1. LXC vorbereiten + +Ein unprivilegierter Debian/Ubuntu-Container reicht locker (1 vCPU, 512 MB RAM, 2 GB +Disk). In der Container-Konsole (als root): + +```sh +apt update && apt install -y curl git +``` + +Node.js 20 (LTS) über NodeSource: + +```sh +curl -fsSL https://deb.nodesource.com/setup_20.x | bash - +apt install -y nodejs +node -v # sollte v20.x zeigen +``` + +## 2. Repo klonen + +```sh +cd /opt +git clone fuesse-sexy +cd fuesse-sexy +./install.sh # installiert Abhängigkeiten (npm install) +``` + +Kurzer Funktionstest: + +```sh +npm start +# -> "fuesse.sexy laeuft auf http://localhost:3000" +``` + +Im Browser `http://:3000` öffnen. Läuft es? Dann mit `Strg+C` stoppen und als +Dienst einrichten. + +## 3. Als systemd-Dienst einrichten (dauerhaft + Autostart) + +Eine Service-Vorlage liegt bei: [`deploy/fuesse-sexy.service`](deploy/fuesse-sexy.service). + +```sh +# node-Pfad prüfen (in der Service-Datei ggf. anpassen): +which node # z.B. /usr/bin/node + +cp /opt/fuesse-sexy/deploy/fuesse-sexy.service /etc/systemd/system/ +systemctl daemon-reload +systemctl enable --now fuesse-sexy + +systemctl status fuesse-sexy # sollte "active (running)" zeigen +``` + +Läuft jetzt unter `http://:3000` und startet beim Boot automatisch. + +> Optional als eigener Benutzer statt root: `adduser --system --group fuesse`, +> `chown -R fuesse:fuesse /opt/fuesse-sexy`, dann die `User=`/`Group=`-Zeilen in der +> Service-Datei einkommentieren. + +## 4. Aktualisieren (neue Version einspielen) + +```sh +cd /opt/fuesse-sexy +git pull +npm install +systemctl restart fuesse-sexy +``` + +## 5. Domain fuesse.sexy + HTTPS (optional, empfohlen) + +Am einfachsten mit **Caddy** (automatisches HTTPS via Let's Encrypt) — entweder im selben +LXC oder auf einem Reverse-Proxy davor: + +```sh +apt install -y debian-keyring debian-archive-keyring apt-transport-https curl +curl -1sLf 'https://dl.cloudsmith.io/public/caddy/stable/gpg.key' | gpg --dearmor -o /usr/share/keyrings/caddy-stable-archive-keyring.gpg +curl -1sLf 'https://dl.cloudsmith.io/public/caddy/stable/debian.deb.txt' | tee /etc/apt/sources.list.d/caddy-stable.list +apt update && apt install -y caddy +``` + +`/etc/caddy/Caddyfile`: + +``` +fuesse.sexy { + reverse_proxy localhost:3000 +} +``` + +```sh +systemctl reload caddy +``` + +Voraussetzung: Der DNS-A/AAAA-Eintrag von **fuesse.sexy** zeigt auf die öffentliche IP, +und Port 80/443 sind aus dem Internet erreichbar (Port-Forwarding/Firewall). Caddy holt +dann automatisch ein Zertifikat. + +## Ports / Netzwerk + +- Die App lauscht auf Port **3000** (via `PORT`-Env änderbar). +- Ohne Reverse-Proxy: LXC-Firewall Port 3000 freigeben. +- Mit Caddy: nur 80/443 nach außen, 3000 bleibt intern. diff --git a/README.md b/README.md new file mode 100644 index 0000000..fa3819e --- /dev/null +++ b/README.md @@ -0,0 +1,98 @@ +# fuesse.sexy — „Where's the Feet" 🦶 + +Ein Wimmel-Suchspiel im Stil von „Wo ist Waldo?" — nur werden **Füße** in einem +detailreichen Wimmelbild gesucht. Pro Szene sind **3 verschiedene Füße** versteckt; +finde alle drei, dann kommt die nächste zufällige Szene. + +- **Kein Start-Screen, keine Auswahl** — Seite öffnen und sofort losspielen. +- **Google-Maps-Gefühl:** ziehen, Mausrad-Zoom am PC, Zwei-Finger-Pinch am Handy. +- **Prozedural generiert:** Der Server würfelt jede Szene aus einer gemeinsamen + **Library** neu zusammen und prüft Klick-Treffer serverseitig (nicht durch „im Code + spicken" austrickbar). +- **Library statt Level:** Normale Szenen ziehen Deko + Füße aus `library/`. Themen sind + unsichtbar/zufällig gemischt. **Spezial-Level** (z.B. Emoji-Chaos) sind die Ausnahme. + +## Installation + +```sh +./install.sh # prüft Node, installiert Abhängigkeiten +npm start # startet den Server +``` + +Dann im Browser: **http://localhost:3000** + +(Alternativ: `npm run setup` statt `./install.sh`.) + +## Die Library erweitern (der Normalfall) + +Normale Szenen ziehen ihre Bildchen aus der gemeinsamen Library: + +``` +library/ + props/ ← Deko-Bildchen (alles, was KEIN Fuß ist: Ball, Muschel, Krabbe …) + feet/ ← Fuß-Bildchen. Der Server wählt pro Szene 3 als Ziele aus, + die übrigen streut er als Ablenker mit ein. +``` + +Zum Erweitern einfach neue Bildchen in den passenden Ordner legen und **Server neu +starten** — fertig. Kein Code, kein Level. + +- **Deko** (kein Fuß) → `library/props/` +- **Füße** (zum Suchen) → `library/feet/` · **mind. 3** müssen vorhanden sein +- **Formate:** `.svg`, `.png`, `.webp`, `.jpg` +- **Tipp:** freigestellte Bildchen mit **transparentem Hintergrund**, grob quadratisch — + dann sitzt die Trefferzone gut. Der Dateiname wird zum Namen in der „Gesucht"-Leiste. + +## Spezial-Level (die Ausnahme) + +Ein Spezial-Level ist ein eigenständiger Ordner unter `scenes/` mit eigener `config.json`. +Es taucht gelegentlich zwischen den normalen Library-Szenen auf. + +- `emoji` — Emojis statt Bilddateien; man sucht den Fuß 🦶 im Emoji-Gewimmel. + Siehe `scenes/emoji-chaos/config.json`. Einheitlicher Look: `public/emoji/README.md`. +- `photo` — freigestellte Fotos statt Zeichnungen (eigene `props/` + `targets/`). + Vorlage: `scenes/strand-foto/README.md`. + +Wie oft normale Library-Szenen im Vergleich zu Spezial-Leveln kommen, steuert +`LIBRARY_WEIGHT` in `server/index.js`. + +## Woher bekomme ich Bildchen? (Gratis-Quellen) + +**Clipart (SVG/PNG):** +- **openclipart.org** — gemeinfrei (CC0), riesig. *Sicherste Quelle.* +- **svgrepo.com** — nach Lizenz „CC0 / Public Domain" filtern. +- **kenney.nl** — hochwertige Asset-Packs, CC0. +- **pixabay.com** — Vektoren + freigestellte PNGs (kommerziell ok). +- **flaticon.com / freepik.com** — riesig, aber Gratis-Tier braucht Namensnennung. +- **game-icons.net** — 4000+ SVG-Icons (CC-BY). + +**Fotos (für Foto-Level, danach freistellen):** +- **pexels.com**, **unsplash.com**, **pixabay.com** (kostenlos, kommerziell nutzbar) +- Freistellen: **remove.bg** (1-Klick) oder **photopea.com** (Gratis-Editor) + +**Emoji:** OpenMoji / Twemoji / Noto — siehe `public/emoji/README.md`. + +> Achte pro Datei auf die jeweilige Lizenz. Am sorgenfreisten sind openclipart, SVGRepo +> (CC0-Filter), Kenney und Pixabay. + +## Deployment (Ausblick) + +Das Spiel ist ein normaler Node-Server. Zum Livestellen auf **fuesse.sexy**: + +1. Auf einen Node-Host bringen (z.B. **Railway**, **Render**, oder ein **VPS**). +2. `npm install` und `npm start` (Standard-Port 3000; via `PORT`-Env änderbar). +3. Die Domain **fuesse.sexy** per DNS/Reverse-Proxy auf den Server zeigen (HTTPS via + dem Host oder z.B. Caddy/Nginx + Let's Encrypt). + +## Projektstruktur + +``` +server/ Express-Server + Szenen-Generator (die "Wimmelbild-Fabrik") +public/ Frontend (Vanilla JS + SVG, Szene wird als 1 Bild gerendert) + emoji/ optionales Emoji-Bildset +library/ die Fundgrube für normale Szenen + props/ Deko (kein Fuß) + feet/ Fuß-Bildchen (Ziele + Ablenker) +scenes/ Spezial-Level (Ausnahmen: emoji, photo) +install.sh Ein-Befehl-Setup +``` diff --git a/deploy/fuesse-sexy.service b/deploy/fuesse-sexy.service new file mode 100644 index 0000000..552649f --- /dev/null +++ b/deploy/fuesse-sexy.service @@ -0,0 +1,20 @@ +[Unit] +Description=fuesse.sexy - Where's the Feet +After=network.target + +[Service] +Type=simple +# Pfad ggf. anpassen (wohin du geklont hast): +WorkingDirectory=/opt/fuesse-sexy +# node-Pfad ggf. anpassen ("which node"): +ExecStart=/usr/bin/node server/index.js +Restart=on-failure +RestartSec=3 +Environment=NODE_ENV=production +Environment=PORT=3000 +# Optional eigener Benutzer statt root (siehe DEPLOY.md): +# User=fuesse +# Group=fuesse + +[Install] +WantedBy=multi-user.target diff --git a/install.sh b/install.sh new file mode 100755 index 0000000..6fad38f --- /dev/null +++ b/install.sh @@ -0,0 +1,33 @@ +#!/bin/sh +# Einfaches Ein-Befehl-Setup fuer fuesse.sexy — "Where's the Feet". +# Aufruf: ./install.sh (oder: sh install.sh) + +set -e + +echo "" +echo "🦶 fuesse.sexy — Setup" +echo "------------------------" + +# 1) Node vorhanden? +if ! command -v node >/dev/null 2>&1; then + echo "❌ Node.js ist nicht installiert." + echo " Bitte zuerst installieren: https://nodejs.org/ (LTS-Version)" + exit 1 +fi + +NODE_VERSION=$(node -v) +echo "✅ Node gefunden ($NODE_VERSION)" + +# 2) Abhaengigkeiten installieren +echo "" +echo "📦 Installiere Abhaengigkeiten (npm install) ..." +npm install + +# 3) Fertig +echo "" +echo "🎉 Fertig! So startest du das Spiel:" +echo "" +echo " npm start" +echo "" +echo " Dann im Browser oeffnen: http://localhost:3000" +echo "" diff --git a/library/feet/blauer-fuss.svg b/library/feet/blauer-fuss.svg new file mode 100644 index 0000000..ba9402b --- /dev/null +++ b/library/feet/blauer-fuss.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/library/feet/brauner-fuss.svg b/library/feet/brauner-fuss.svg new file mode 100644 index 0000000..471a491 --- /dev/null +++ b/library/feet/brauner-fuss.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/library/feet/dunkler-fuss.svg b/library/feet/dunkler-fuss.svg new file mode 100644 index 0000000..74f3f3f --- /dev/null +++ b/library/feet/dunkler-fuss.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/library/feet/flipflop-fuss.svg b/library/feet/flipflop-fuss.svg new file mode 100644 index 0000000..e82c4d6 --- /dev/null +++ b/library/feet/flipflop-fuss.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/library/feet/flossen-fuss.svg b/library/feet/flossen-fuss.svg new file mode 100644 index 0000000..7450670 --- /dev/null +++ b/library/feet/flossen-fuss.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/library/feet/gruener-fuss.svg b/library/feet/gruener-fuss.svg new file mode 100644 index 0000000..30059f4 --- /dev/null +++ b/library/feet/gruener-fuss.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/library/feet/heller-fuss.svg b/library/feet/heller-fuss.svg new file mode 100644 index 0000000..f272db3 --- /dev/null +++ b/library/feet/heller-fuss.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/library/feet/lila-fuss.svg b/library/feet/lila-fuss.svg new file mode 100644 index 0000000..e18ff1f --- /dev/null +++ b/library/feet/lila-fuss.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/library/feet/roter-fuss.svg b/library/feet/roter-fuss.svg new file mode 100644 index 0000000..dc55ae3 --- /dev/null +++ b/library/feet/roter-fuss.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/library/props/ball.svg b/library/props/ball.svg new file mode 100644 index 0000000..42ba2f0 --- /dev/null +++ b/library/props/ball.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/library/props/eimer.svg b/library/props/eimer.svg new file mode 100644 index 0000000..eb14911 --- /dev/null +++ b/library/props/eimer.svg @@ -0,0 +1,4 @@ + + + + diff --git a/library/props/eis.svg b/library/props/eis.svg new file mode 100644 index 0000000..4955773 --- /dev/null +++ b/library/props/eis.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/library/props/fisch.svg b/library/props/fisch.svg new file mode 100644 index 0000000..6d89ff4 --- /dev/null +++ b/library/props/fisch.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/library/props/handtuch.svg b/library/props/handtuch.svg new file mode 100644 index 0000000..3285f28 --- /dev/null +++ b/library/props/handtuch.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/library/props/krabbe.svg b/library/props/krabbe.svg new file mode 100644 index 0000000..1833854 --- /dev/null +++ b/library/props/krabbe.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/library/props/moewe.svg b/library/props/moewe.svg new file mode 100644 index 0000000..dec50b3 --- /dev/null +++ b/library/props/moewe.svg @@ -0,0 +1,3 @@ + + diff --git a/library/props/muschel.svg b/library/props/muschel.svg new file mode 100644 index 0000000..1cbe109 --- /dev/null +++ b/library/props/muschel.svg @@ -0,0 +1,4 @@ + + + diff --git a/library/props/palme.svg b/library/props/palme.svg new file mode 100644 index 0000000..f79f6ea --- /dev/null +++ b/library/props/palme.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/library/props/seestern.svg b/library/props/seestern.svg new file mode 100644 index 0000000..16bac67 --- /dev/null +++ b/library/props/seestern.svg @@ -0,0 +1,5 @@ + + + + diff --git a/library/props/sonne.svg b/library/props/sonne.svg new file mode 100644 index 0000000..d61d866 --- /dev/null +++ b/library/props/sonne.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/library/props/sonnenbrille.svg b/library/props/sonnenbrille.svg new file mode 100644 index 0000000..9138848 --- /dev/null +++ b/library/props/sonnenbrille.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/library/props/sonnenschirm.svg b/library/props/sonnenschirm.svg new file mode 100644 index 0000000..f6e8aa2 --- /dev/null +++ b/library/props/sonnenschirm.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000..84fcf05 --- /dev/null +++ b/package-lock.json @@ -0,0 +1,867 @@ +{ + "name": "fuesse-sexy", + "version": "1.0.0", + "lockfileVersion": 3, + "requires": true, + "packages": { + "": { + "name": "fuesse-sexy", + "version": "1.0.0", + "dependencies": { + "express": "^4.19.2", + "panzoom": "^9.4.3" + } + }, + "node_modules/accepts": { + "version": "1.3.8", + "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz", + "integrity": "sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==", + "license": "MIT", + "dependencies": { + "mime-types": "~2.1.34", + "negotiator": "0.6.3" + }, + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/amator": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/amator/-/amator-1.1.0.tgz", + "integrity": "sha512-V5+aH8pe+Z3u/UG3L3pG3BaFQGXAyXHVQDroRwjPHdh08bcUEchAVsU1MCuJSCaU5o60wTK6KaE6te5memzgYw==", + "license": "MIT", + "dependencies": { + "bezier-easing": "^2.0.3" + } + }, + "node_modules/array-flatten": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz", + "integrity": "sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg==", + "license": "MIT" + }, + "node_modules/bezier-easing": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/bezier-easing/-/bezier-easing-2.1.0.tgz", + "integrity": "sha512-gbIqZ/eslnUFC1tjEvtz0sgx+xTK20wDnYMIA27VA04R7w6xxXQPZDbibjA9DTWZRA2CXtwHykkVzlCaAJAZig==", + "license": "MIT" + }, + "node_modules/body-parser": { + "version": "1.20.6", + "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.6.tgz", + "integrity": "sha512-p5tAzS57i5MV9fZFDj9LeIiTZEufbSe2eDozP+ElheSUq1m74CRq1jI4mYNDdVs9vQztXFLuk/Gd6BWTdwRJ5g==", + "license": "MIT", + "dependencies": { + "bytes": "~3.1.2", + "content-type": "~1.0.5", + "debug": "2.6.9", + "depd": "2.0.0", + "destroy": "~1.2.0", + "http-errors": "~2.0.1", + "iconv-lite": "~0.4.24", + "on-finished": "~2.4.1", + "qs": "~6.15.1", + "raw-body": "~2.5.3", + "type-is": "~1.6.18", + "unpipe": "~1.0.0" + }, + "engines": { + "node": ">= 0.8", + "npm": "1.2.8000 || >= 1.4.16" + } + }, + "node_modules/bytes": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz", + "integrity": "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==", + "license": "MIT", + "engines": { + "node": ">= 0.8" + } + }, + "node_modules/call-bind-apply-helpers": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz", + "integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==", + "license": "MIT", + "dependencies": { + "es-errors": "^1.3.0", + "function-bind": "^1.1.2" + }, + "engines": { + "node": ">= 0.4" + } + }, + "node_modules/call-bound": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/call-bound/-/call-bound-1.0.4.tgz", + "integrity": "sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==", + "license": "MIT", + "dependencies": { + "call-bind-apply-helpers": "^1.0.2", + "get-intrinsic": "^1.3.0" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/content-disposition": { + "version": "0.5.4", + "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.4.tgz", + "integrity": "sha512-FveZTNuGw04cxlAiWbzi6zTAL/lhehaWbTtgluJh4/E95DqMwTmha3KZN1aAWA8cFIhHzMZUvLevkw5Rqk+tSQ==", + "license": "MIT", + "dependencies": { + "safe-buffer": "5.2.1" + }, + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/content-type": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.5.tgz", + "integrity": "sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==", + "license": "MIT", + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/cookie": { + "version": "0.7.2", + "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.7.2.tgz", + "integrity": "sha512-yki5XnKuf750l50uGTllt6kKILY4nQ1eNIQatoXEByZ5dWgnKqbnqmTrBE5B4N7lrMJKQ2ytWMiTO2o0v6Ew/w==", + "license": "MIT", + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/cookie-signature": { + "version": "1.0.7", + "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.7.tgz", + "integrity": "sha512-NXdYc3dLr47pBkpUCHtKSwIOQXLVn8dZEuywboCOJY/osA0wFSLlSawr3KN8qXJEyX66FcONTH8EIlVuK0yyFA==", + "license": "MIT" + }, + "node_modules/debug": { + "version": "2.6.9", + "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz", + "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==", + "license": "MIT", + "dependencies": { + "ms": "2.0.0" + } + }, + "node_modules/depd": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz", + "integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==", + "license": "MIT", + "engines": { + "node": ">= 0.8" + } + }, + "node_modules/destroy": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz", + "integrity": "sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==", + "license": "MIT", + "engines": { + "node": ">= 0.8", + "npm": "1.2.8000 || >= 1.4.16" + } + }, + "node_modules/dunder-proto": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz", + "integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==", + "license": "MIT", + "dependencies": { + "call-bind-apply-helpers": "^1.0.1", + "es-errors": "^1.3.0", + "gopd": "^1.2.0" + }, + "engines": { + "node": ">= 0.4" + } + }, + "node_modules/ee-first": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz", + "integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==", + "license": "MIT" + }, + "node_modules/encodeurl": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-2.0.0.tgz", + "integrity": "sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==", + "license": "MIT", + "engines": { + "node": ">= 0.8" + } + }, + "node_modules/es-define-property": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz", + "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==", + "license": "MIT", + "engines": { + "node": ">= 0.4" + } + }, + "node_modules/es-errors": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz", + "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==", + "license": "MIT", + "engines": { + "node": ">= 0.4" + } + }, + "node_modules/es-object-atoms": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.2.tgz", + "integrity": "sha512-HWcBoN6NileqtSydK2FqHbS/LoDd2pqrnQHLyJzBj4kOp/ky2MWMN694xOfkK8/SnUsW2DH7EfyVlydKCsm1Zw==", + "license": "MIT", + "dependencies": { + "es-errors": "^1.3.0" + }, + "engines": { + "node": ">= 0.4" + } + }, + "node_modules/escape-html": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz", + "integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==", + "license": "MIT" + }, + "node_modules/etag": { + "version": "1.8.1", + "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz", + "integrity": "sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==", + "license": "MIT", + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/express": { + "version": "4.22.2", + "resolved": "https://registry.npmjs.org/express/-/express-4.22.2.tgz", + "integrity": "sha512-IuL+Elrou2ZvCFHs18/CIzy2Nzvo25nZ1/D2eIZlz7c+QUayAcYoiM2BthCjs+EBHVpjYjcuLDAiCWgeIX3X1Q==", + "license": "MIT", + "dependencies": { + "accepts": "~1.3.8", + "array-flatten": "1.1.1", + "body-parser": "~1.20.5", + "content-disposition": "~0.5.4", + "content-type": "~1.0.4", + "cookie": "~0.7.1", + "cookie-signature": "~1.0.6", + "debug": "2.6.9", + "depd": "2.0.0", + "encodeurl": "~2.0.0", + "escape-html": "~1.0.3", + "etag": "~1.8.1", + "finalhandler": "~1.3.1", + "fresh": "~0.5.2", + "http-errors": "~2.0.0", + "merge-descriptors": "1.0.3", + "methods": "~1.1.2", + "on-finished": "~2.4.1", + "parseurl": "~1.3.3", + "path-to-regexp": "~0.1.12", + "proxy-addr": "~2.0.7", + "qs": "~6.15.1", + "range-parser": "~1.2.1", + "safe-buffer": "5.2.1", + "send": "~0.19.0", + "serve-static": "~1.16.2", + "setprototypeof": "1.2.0", + "statuses": "~2.0.1", + "type-is": "~1.6.18", + "utils-merge": "1.0.1", + "vary": "~1.1.2" + }, + "engines": { + "node": ">= 0.10.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/express" + } + }, + "node_modules/finalhandler": { + "version": "1.3.2", + "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.3.2.tgz", + "integrity": "sha512-aA4RyPcd3badbdABGDuTXCMTtOneUCAYH/gxoYRTZlIJdF0YPWuGqiAsIrhNnnqdXGswYk6dGujem4w80UJFhg==", + "license": "MIT", + "dependencies": { + "debug": "2.6.9", + "encodeurl": "~2.0.0", + "escape-html": "~1.0.3", + "on-finished": "~2.4.1", + "parseurl": "~1.3.3", + "statuses": "~2.0.2", + "unpipe": "~1.0.0" + }, + "engines": { + "node": ">= 0.8" + } + }, + "node_modules/forwarded": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz", + "integrity": "sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==", + "license": "MIT", + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/fresh": { + "version": "0.5.2", + "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz", + "integrity": "sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==", + "license": "MIT", + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/function-bind": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz", + "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==", + "license": "MIT", + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/get-intrinsic": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz", + "integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==", + "license": "MIT", + "dependencies": { + "call-bind-apply-helpers": "^1.0.2", + "es-define-property": "^1.0.1", + "es-errors": "^1.3.0", + "es-object-atoms": "^1.1.1", + "function-bind": "^1.1.2", + "get-proto": "^1.0.1", + "gopd": "^1.2.0", + "has-symbols": "^1.1.0", + "hasown": "^2.0.2", + "math-intrinsics": "^1.1.0" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/get-proto": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz", + "integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==", + "license": "MIT", + "dependencies": { + "dunder-proto": "^1.0.1", + "es-object-atoms": "^1.0.0" + }, + "engines": { + "node": ">= 0.4" + } + }, + "node_modules/gopd": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz", + "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==", + "license": "MIT", + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/has-symbols": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz", + "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==", + "license": "MIT", + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/hasown": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.4.tgz", + "integrity": "sha512-T2UbfbBEF32wiepXIsMlTW9+dDYC6wMh/t/vYA4tuOMKqWz/n3vr1NFSxQiyP+zk2mXsoMA/i/7qV6LKut1t1A==", + "license": "MIT", + "dependencies": { + "function-bind": "^1.1.2" + }, + "engines": { + "node": ">= 0.4" + } + }, + "node_modules/http-errors": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.1.tgz", + "integrity": "sha512-4FbRdAX+bSdmo4AUFuS0WNiPz8NgFt+r8ThgNWmlrjQjt1Q7ZR9+zTlce2859x4KSXrwIsaeTqDoKQmtP8pLmQ==", + "license": "MIT", + "dependencies": { + "depd": "~2.0.0", + "inherits": "~2.0.4", + "setprototypeof": "~1.2.0", + "statuses": "~2.0.2", + "toidentifier": "~1.0.1" + }, + "engines": { + "node": ">= 0.8" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/express" + } + }, + "node_modules/iconv-lite": { + "version": "0.4.24", + "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz", + "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==", + "license": "MIT", + "dependencies": { + "safer-buffer": ">= 2.1.2 < 3" + }, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/inherits": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz", + "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==", + "license": "ISC" + }, + "node_modules/ipaddr.js": { + "version": "1.9.1", + "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz", + "integrity": "sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==", + "license": "MIT", + "engines": { + "node": ">= 0.10" + } + }, + "node_modules/math-intrinsics": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz", + "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==", + "license": "MIT", + "engines": { + "node": ">= 0.4" + } + }, + "node_modules/media-typer": { + "version": "0.3.0", + "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz", + "integrity": "sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==", + "license": "MIT", + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/merge-descriptors": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.3.tgz", + "integrity": "sha512-gaNvAS7TZ897/rVaZ0nMtAyxNyi/pdbjbAwUpFQpN70GqnVfOiXpeUUMKRBmzXaSQ8DdTX4/0ms62r2K+hE6mQ==", + "license": "MIT", + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/methods": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz", + "integrity": "sha512-iclAHeNqNm68zFtnZ0e+1L2yUIdvzNoauKU4WBA3VvH/vPFieF7qfRlwUZU+DA9P9bPXIS90ulxoUoCH23sV2w==", + "license": "MIT", + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/mime": { + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz", + "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==", + "license": "MIT", + "bin": { + "mime": "cli.js" + }, + "engines": { + "node": ">=4" + } + }, + "node_modules/mime-db": { + "version": "1.52.0", + "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz", + "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==", + "license": "MIT", + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/mime-types": { + "version": "2.1.35", + "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz", + "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==", + "license": "MIT", + "dependencies": { + "mime-db": "1.52.0" + }, + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/ms": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", + "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==", + "license": "MIT" + }, + "node_modules/negotiator": { + "version": "0.6.3", + "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz", + "integrity": "sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==", + "license": "MIT", + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/ngraph.events": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/ngraph.events/-/ngraph.events-1.4.0.tgz", + "integrity": "sha512-NeDGI4DSyjBNBRtA86222JoYietsmCXbs8CEB0dZ51Xeh4lhVl1y3wpWLumczvnha8sFQIW4E0vvVWwgmX2mGw==", + "license": "BSD-3-Clause" + }, + "node_modules/object-inspect": { + "version": "1.13.4", + "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.4.tgz", + "integrity": "sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==", + "license": "MIT", + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/on-finished": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz", + "integrity": "sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==", + "license": "MIT", + "dependencies": { + "ee-first": "1.1.1" + }, + "engines": { + "node": ">= 0.8" + } + }, + "node_modules/panzoom": { + "version": "9.4.4", + "resolved": "https://registry.npmjs.org/panzoom/-/panzoom-9.4.4.tgz", + "integrity": "sha512-r1KfkNZvsBw59IPq7Yy+GWZnZE1YCG/t7aG6caSkij/TBqdxTzmxNTm/lHf3h6qlVMFisIGIO+lgS2Ym23PIoA==", + "license": "MIT", + "dependencies": { + "amator": "^1.1.0", + "ngraph.events": "^1.2.2", + "wheel": "^1.0.0" + } + }, + "node_modules/parseurl": { + "version": "1.3.3", + "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz", + "integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==", + "license": "MIT", + "engines": { + "node": ">= 0.8" + } + }, + "node_modules/path-to-regexp": { + "version": "0.1.13", + "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.13.tgz", + "integrity": "sha512-A/AGNMFN3c8bOlvV9RreMdrv7jsmF9XIfDeCd87+I8RNg6s78BhJxMu69NEMHBSJFxKidViTEdruRwEk/WIKqA==", + "license": "MIT" + }, + "node_modules/proxy-addr": { + "version": "2.0.7", + "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz", + "integrity": "sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==", + "license": "MIT", + "dependencies": { + "forwarded": "0.2.0", + "ipaddr.js": "1.9.1" + }, + "engines": { + "node": ">= 0.10" + } + }, + "node_modules/qs": { + "version": "6.15.3", + "resolved": "https://registry.npmjs.org/qs/-/qs-6.15.3.tgz", + "integrity": "sha512-O9gl3zCl5h5blw1KGUzQKhA5oUXSl8rwUIM5o0S3nCXMliSvy5Dzx7/DJcI+SwgICv+IneSZwhBh1oSyEHA71A==", + "license": "BSD-3-Clause", + "dependencies": { + "es-define-property": "^1.0.1", + "side-channel": "^1.1.1" + }, + "engines": { + "node": ">=0.6" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/range-parser": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz", + "integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==", + "license": "MIT", + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/raw-body": { + "version": "2.5.3", + "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.5.3.tgz", + "integrity": "sha512-s4VSOf6yN0rvbRZGxs8Om5CWj6seneMwK3oDb4lWDH0UPhWcxwOWw5+qk24bxq87szX1ydrwylIOp2uG1ojUpA==", + "license": "MIT", + "dependencies": { + "bytes": "~3.1.2", + "http-errors": "~2.0.1", + "iconv-lite": "~0.4.24", + "unpipe": "~1.0.0" + }, + "engines": { + "node": ">= 0.8" + } + }, + "node_modules/safe-buffer": { + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz", + "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/feross" + }, + { + "type": "patreon", + "url": "https://www.patreon.com/feross" + }, + { + "type": "consulting", + "url": "https://feross.org/support" + } + ], + "license": "MIT" + }, + "node_modules/safer-buffer": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz", + "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==", + "license": "MIT" + }, + "node_modules/send": { + "version": "0.19.2", + "resolved": "https://registry.npmjs.org/send/-/send-0.19.2.tgz", + "integrity": "sha512-VMbMxbDeehAxpOtWJXlcUS5E8iXh6QmN+BkRX1GARS3wRaXEEgzCcB10gTQazO42tpNIya8xIyNx8fll1OFPrg==", + "license": "MIT", + "dependencies": { + "debug": "2.6.9", + "depd": "2.0.0", + "destroy": "1.2.0", + "encodeurl": "~2.0.0", + "escape-html": "~1.0.3", + "etag": "~1.8.1", + "fresh": "~0.5.2", + "http-errors": "~2.0.1", + "mime": "1.6.0", + "ms": "2.1.3", + "on-finished": "~2.4.1", + "range-parser": "~1.2.1", + "statuses": "~2.0.2" + }, + "engines": { + "node": ">= 0.8.0" + } + }, + "node_modules/send/node_modules/ms": { + "version": "2.1.3", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz", + "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==", + "license": "MIT" + }, + "node_modules/serve-static": { + "version": "1.16.3", + "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.16.3.tgz", + "integrity": "sha512-x0RTqQel6g5SY7Lg6ZreMmsOzncHFU7nhnRWkKgWuMTu5NN0DR5oruckMqRvacAN9d5w6ARnRBXl9xhDCgfMeA==", + "license": "MIT", + "dependencies": { + "encodeurl": "~2.0.0", + "escape-html": "~1.0.3", + "parseurl": "~1.3.3", + "send": "~0.19.1" + }, + "engines": { + "node": ">= 0.8.0" + } + }, + "node_modules/setprototypeof": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz", + "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==", + "license": "ISC" + }, + "node_modules/side-channel": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.1.1.tgz", + "integrity": "sha512-6x6dK6zJdpTzF4sQeNYxwtvBzf6Eg4GtlesS94HOvTudUeyK2WXAaIfmDgsyslYrRBeFIlsi54AYsFGUuhmvrQ==", + "license": "MIT", + "dependencies": { + "es-errors": "^1.3.0", + "object-inspect": "^1.13.4", + "side-channel-list": "^1.0.1", + "side-channel-map": "^1.0.1", + "side-channel-weakmap": "^1.0.2" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/side-channel-list": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/side-channel-list/-/side-channel-list-1.0.1.tgz", + "integrity": "sha512-mjn/0bi/oUURjc5Xl7IaWi/OJJJumuoJFQJfDDyO46+hBWsfaVM65TBHq2eoZBhzl9EchxOijpkbRC8SVBQU0w==", + "license": "MIT", + "dependencies": { + "es-errors": "^1.3.0", + "object-inspect": "^1.13.4" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/side-channel-map": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/side-channel-map/-/side-channel-map-1.0.1.tgz", + "integrity": "sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==", + "license": "MIT", + "dependencies": { + "call-bound": "^1.0.2", + "es-errors": "^1.3.0", + "get-intrinsic": "^1.2.5", + "object-inspect": "^1.13.3" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/side-channel-weakmap": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/side-channel-weakmap/-/side-channel-weakmap-1.0.2.tgz", + "integrity": "sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==", + "license": "MIT", + "dependencies": { + "call-bound": "^1.0.2", + "es-errors": "^1.3.0", + "get-intrinsic": "^1.2.5", + "object-inspect": "^1.13.3", + "side-channel-map": "^1.0.1" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/statuses": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.2.tgz", + "integrity": "sha512-DvEy55V3DB7uknRo+4iOGT5fP1slR8wQohVdknigZPMpMstaKJQWhwiYBACJE3Ul2pTnATihhBYnRhZQHGBiRw==", + "license": "MIT", + "engines": { + "node": ">= 0.8" + } + }, + "node_modules/toidentifier": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz", + "integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==", + "license": "MIT", + "engines": { + "node": ">=0.6" + } + }, + "node_modules/type-is": { + "version": "1.6.18", + "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz", + "integrity": "sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==", + "license": "MIT", + "dependencies": { + "media-typer": "0.3.0", + "mime-types": "~2.1.24" + }, + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/unpipe": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz", + "integrity": "sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==", + "license": "MIT", + "engines": { + "node": ">= 0.8" + } + }, + "node_modules/utils-merge": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz", + "integrity": "sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==", + "license": "MIT", + "engines": { + "node": ">= 0.4.0" + } + }, + "node_modules/vary": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz", + "integrity": "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==", + "license": "MIT", + "engines": { + "node": ">= 0.8" + } + }, + "node_modules/wheel": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/wheel/-/wheel-1.0.0.tgz", + "integrity": "sha512-XiCMHibOiqalCQ+BaNSwRoZ9FDTAvOsXxGHXChBugewDj7HC8VBIER71dEOiRH1fSdLbRCQzngKTSiZ06ZQzeA==", + "license": "MIT" + } + } +} diff --git a/package.json b/package.json new file mode 100644 index 0000000..53f538c --- /dev/null +++ b/package.json @@ -0,0 +1,14 @@ +{ + "name": "fuesse-sexy", + "version": "1.0.0", + "description": "Where's the Feet — ein Wimmel-Suchspiel: finde die versteckten Fuesse.", + "type": "module", + "scripts": { + "start": "node server/index.js", + "setup": "sh install.sh" + }, + "dependencies": { + "express": "^4.19.2", + "panzoom": "^9.4.3" + } +} diff --git a/public/css/style.css b/public/css/style.css new file mode 100644 index 0000000..5af628f --- /dev/null +++ b/public/css/style.css @@ -0,0 +1,259 @@ +/* fuesse.sexy — verspielter, klarer Look im Dark Mode. Vollflaechig, kein Scrollen. */ + +:root { + --pink: #ff4d8d; + --pink-soft: #ff86b3; + --ink: #ececf5; + --muted: #a49fc0; + --bg: #0e0e18; /* Seite / Letterbox */ + --panel: #1b1b2c; /* Leiste, Buttons */ + --card: #262640; /* Legenden-Karten */ + --border: #34345020; + --border-solid: #3a3a58; + --ok: #34d399; + --miss: #f87171; +} + +* { box-sizing: border-box; } + +html, body { + margin: 0; + height: 100%; + overflow: hidden; + font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; + color: var(--ink); + background: var(--bg); + -webkit-user-select: none; + user-select: none; +} + +#game { + display: flex; + flex-direction: column; + height: 100%; +} + +/* ---- Gesucht-Leiste ---- */ +#legend { + display: flex; + align-items: center; + gap: 14px; + padding: 8px 14px; + background: var(--panel); + box-shadow: 0 2px 14px rgba(0, 0, 0, 0.4); + border-bottom: 1px solid var(--border-solid); + z-index: 5; +} + +.legend-label { display: flex; flex-direction: column; line-height: 1.1; } +.brand { + font-weight: 800; + font-size: 20px; + color: var(--pink); + letter-spacing: -0.5px; +} +.brand-dot { color: var(--pink-soft); } +.legend-sub { font-size: 12px; color: var(--muted); } + +#legend-items { + display: flex; + gap: 10px; + flex: 1; + overflow-x: auto; +} + +.legend-item { + flex: 0 0 auto; + width: 58px; + height: 58px; + border-radius: 14px; + background: var(--card); + border: 3px solid var(--border-solid); + display: grid; + place-items: center; + position: relative; + transition: transform 0.15s ease, opacity 0.2s ease, border-color 0.2s ease; +} +.legend-thumb { width: 44px; height: 44px; display: grid; place-items: center; } +.legend-thumb img { max-width: 100%; max-height: 100%; } +.legend-emoji { font-size: 34px; line-height: 1; } + +.legend-item.found { + border-color: var(--ok); + opacity: 0.5; +} +.legend-item.found::after { + content: "✓"; + position: absolute; + right: -6px; + top: -8px; + width: 22px; + height: 22px; + border-radius: 50%; + background: var(--ok); + color: #0e0e18; + font-size: 14px; + font-weight: 800; + display: grid; + place-items: center; + box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); +} + +.legend-counter { + flex: 0 0 auto; + font-weight: 800; + font-size: 18px; + color: var(--pink-soft); + background: var(--card); + padding: 6px 12px; + border-radius: 999px; +} + +/* ---- Buehne / Karte ---- */ +#stage { + position: relative; + flex: 1; + overflow: hidden; + background: var(--bg); + touch-action: none; /* eigene Pinch/Pan-Gesten */ +} + +#scene-svg { + width: 100%; + height: 100%; + display: block; + cursor: grab; +} +#scene-svg:active { cursor: grabbing; } + +.item { pointer-events: auto; } + +.category-name { + position: absolute; + left: 12px; + bottom: 12px; + font-size: 12px; + font-weight: 600; + color: var(--muted); + background: rgba(0, 0, 0, 0.45); + padding: 4px 10px; + border-radius: 999px; + pointer-events: none; +} + +/* ---- Zoom-Steuerung ---- */ +#controls { + position: absolute; + right: 14px; + bottom: 14px; + display: flex; + flex-direction: column; + gap: 8px; + z-index: 4; +} +#controls button { + width: 46px; + height: 46px; + border-radius: 12px; + border: 1px solid var(--border-solid); + background: var(--panel); + color: var(--ink); + font-size: 22px; + font-weight: 700; + cursor: pointer; + box-shadow: 0 3px 12px rgba(0, 0, 0, 0.5); + display: grid; + place-items: center; +} +#controls button:hover { color: var(--pink-soft); border-color: var(--pink); } +#controls button:active { transform: translateY(1px); } + +/* ---- Ping-Feedback (im SVG) ---- */ +.ping { pointer-events: none; } +.ping-ok { stroke: var(--ok); } +.ping-miss { stroke: var(--miss); } +.ping { animation: ping 0.6s ease-out forwards; } +@keyframes ping { + 0% { r: 8; opacity: 0.95; stroke-width: 8; } + 100% { r: 60; opacity: 0; stroke-width: 1; } +} + +/* ---- Toast ---- */ +#toast { + position: absolute; + left: 50%; + bottom: 78px; + transform: translateX(-50%) translateY(10px); + background: rgba(0, 0, 0, 0.85); + color: #fff; + padding: 8px 16px; + border-radius: 999px; + font-size: 14px; + border: 1px solid var(--border-solid); + opacity: 0; + pointer-events: none; + transition: opacity 0.2s ease, transform 0.2s ease; +} +#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } + +/* ---- Lade-Spinner ---- */ +#loading { + position: absolute; + inset: 0; + display: grid; + place-items: center; + background: rgba(14, 14, 24, 0.8); + z-index: 6; +} +.spinner { + width: 46px; + height: 46px; + border: 5px solid var(--border-solid); + border-top-color: var(--pink); + border-radius: 50%; + animation: spin 0.8s linear infinite; +} +@keyframes spin { to { transform: rotate(360deg); } } + +/* ---- Gewinn-Overlay ---- */ +#win-overlay { + position: absolute; + inset: 0; + display: grid; + place-items: center; + background: rgba(0, 0, 0, 0.7); + z-index: 10; +} +.win-card { + background: var(--panel); + padding: 32px 40px; + border-radius: 24px; + text-align: center; + border: 1px solid var(--border-solid); + box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6); + animation: pop 0.3s ease; +} +.win-emoji { font-size: 52px; } +.win-card h2 { margin: 10px 0 20px; color: var(--pink-soft); } +#next-scene { + border: none; + background: var(--pink); + color: #fff; + font-size: 18px; + font-weight: 700; + padding: 12px 28px; + border-radius: 999px; + cursor: pointer; + box-shadow: 0 6px 18px rgba(255, 77, 141, 0.45); +} +#next-scene:hover { background: var(--pink-soft); } +@keyframes pop { from { transform: scale(0.85); opacity: 0; } to { transform: scale(1); opacity: 1; } } + +.hidden { display: none !important; } + +/* Mobile */ +@media (max-width: 560px) { + .brand { font-size: 16px; } + .legend-item { width: 50px; height: 50px; } + .legend-thumb { width: 38px; height: 38px; } +} diff --git a/public/emoji/README.md b/public/emoji/README.md new file mode 100644 index 0000000..cd1fea5 --- /dev/null +++ b/public/emoji/README.md @@ -0,0 +1,30 @@ +# Emoji-Bilder-Set (optional, für den Emoji-Level) + +Damit die Emoji-Level auf **jedem Gerät gleich** aussehen (statt je nach Betriebssystem +anders), rendert das Spiel Emojis als **Bilder** aus diesem Ordner — falls welche da sind. + +## So funktioniert's + +- Dateiname = **Codepoint(s) in Kleinbuchstaben-Hex**, mit `-` verbunden, `.png`. + - 🦶 (U+1F9B6) → `1f9b6.png` + - 👣 (U+1F463) → `1f463.png` +- Der Variation-Selector `FE0F` wird weggelassen (z.B. ❤️ → `2764.png`). + +## Ist der Ordner leer? + +Dann fällt das Spiel automatisch auf **native Emojis** zurück (Textzeichen). Es ist +sofort spielbar — sieht aber je nach Gerät unterschiedlich aus. Sobald du ein Set +einlegst, wird es überall einheitlich. + +## Welches Set? + +- **Apple-Look:** Du kannst Apple-Emoji-PNGs hier ablegen. ⚠️ Hinweis: Apples + Emoji-Grafiken sind **urheberrechtlich geschützt** (Apple-IP). Sie auf einer + öffentlichen Domain auszuliefern ist rechtlich eine Grauzone — das ist deine + Entscheidung. Das Projekt selbst bündelt bewusst keine Apple-Grafiken. +- **Frei lizenziert (überall gleich, sauber nutzbar):** + - **Twemoji** (CC-BY) — https://github.com/twitter/twemoji + - **OpenMoji** (CC-BY-SA) — https://openmoji.org + - **Noto Emoji** (Apache-2.0) — https://github.com/googlefonts/noto-emoji + +Lade die gewünschten PNGs herunter und benenne sie nach obigem Codepoint-Schema. diff --git a/public/index.html b/public/index.html new file mode 100644 index 0000000..296f330 --- /dev/null +++ b/public/index.html @@ -0,0 +1,52 @@ + + +fuesse.sexy — finde die Füße + + +
+ +
+
+ fuesse.sexy + Finde diese Füße: +
+
+
0 / 3
+
+ + +
+ + + + +
+ + +
+ + + +
+ + + + + +
+
+ + + +
+ + + diff --git a/public/js/app.js b/public/js/app.js new file mode 100644 index 0000000..b9dfdcd --- /dev/null +++ b/public/js/app.js @@ -0,0 +1,88 @@ +// App-Flow: beim Laden sofort eine zufaellige Szene holen (kein Start-Screen, keine +// Auswahl). Alle 3 Fuesse finden -> Gewinn-Overlay -> "Weiter" laedt die naechste. + +import { Scene } from './scene.js'; +import { Legend } from './legend.js'; + +const svg = document.getElementById('scene-svg'); +const layer = document.getElementById('scene-layer'); +const stage = document.getElementById('stage'); +const loading = document.getElementById('loading'); +const winOverlay = document.getElementById('win-overlay'); +const toast = document.getElementById('toast'); + +const scene = new Scene(svg, layer, stage); +const legend = new Legend( + document.getElementById('legend-items'), + document.getElementById('legend-counter') +); + +let current = null; // aktuelles Szenen-Payload +let busy = false; + +function showLoading(on) { + loading.classList.toggle('hidden', !on); +} + +function showToast(message) { + toast.textContent = message; + toast.classList.add('show'); + clearTimeout(showToast._t); + showToast._t = setTimeout(() => toast.classList.remove('show'), 900); +} + +async function loadScene() { + showLoading(true); + winOverlay.classList.add('hidden'); + try { + const res = await fetch('/api/scene'); + if (!res.ok) throw new Error('Szene konnte nicht geladen werden.'); + current = await res.json(); + await scene.render(current); + scene.resetView(); + legend.render(current.targets); + document.getElementById('category-name').textContent = current.category || ''; + } catch (err) { + console.error(err); + showToast('Ups — Szene konnte nicht geladen werden.'); + } finally { + showLoading(false); + } +} + +async function handleTap({ x, y }) { + if (busy || !current) return; + busy = true; + try { + const res = await fetch(`/api/scene/${current.sceneId}/guess`, { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ x, y }), + }); + const data = await res.json(); + if (data.hit) { + const isNew = legend.markFound(data.hit); + scene.pingAt(x, y, true); + if (isNew && legend.allFound()) { + setTimeout(() => winOverlay.classList.remove('hidden'), 400); + } + } else { + scene.pingAt(x, y, false); + } + } catch (err) { + console.error(err); + } finally { + busy = false; + } +} + +scene.onTap(handleTap); + +// Steuerung +document.getElementById('zoom-in').addEventListener('click', () => scene.zoomIn()); +document.getElementById('zoom-out').addEventListener('click', () => scene.zoomOut()); +document.getElementById('reset-view').addEventListener('click', () => scene.resetView()); +document.getElementById('next-scene').addEventListener('click', loadScene); + +// Los geht's — sofort. +loadScene(); diff --git a/public/js/legend.js b/public/js/legend.js new file mode 100644 index 0000000..98055d3 --- /dev/null +++ b/public/js/legend.js @@ -0,0 +1,70 @@ +// Die "Gesucht"-Leiste oben: zeigt die 3 zu findenden Fuesse und hakt gefundene ab. + +const EMOJI_BASE = '/emoji/'; + +export class Legend { + constructor(container, counterEl) { + this.container = container; + this.counterEl = counterEl; + this.found = new Set(); + this.total = 0; + } + + render(targets) { + this.found.clear(); + this.total = targets.length; + this.container.innerHTML = ''; + + for (const t of targets) { + const card = document.createElement('div'); + card.className = 'legend-item'; + card.dataset.id = t.id; + + const thumb = document.createElement('div'); + thumb.className = 'legend-thumb'; + + if (t.assetUrl) { + const img = document.createElement('img'); + img.src = t.assetUrl; + img.alt = t.name || 'Fuss'; + thumb.appendChild(img); + } else if (t.glyph) { + // Emoji: Bild aus Set, sonst Textzeichen + const img = document.createElement('img'); + img.alt = t.name || 'Fuss'; + img.onerror = () => { + const span = document.createElement('span'); + span.className = 'legend-emoji'; + span.textContent = t.glyph; + img.replaceWith(span); + }; + img.src = EMOJI_BASE + t.codepoint + '.png'; + thumb.appendChild(img); + } + + card.appendChild(thumb); + this.container.appendChild(card); + } + + this._updateCounter(); + } + + markFound(id) { + if (this.found.has(id)) return false; + this.found.add(id); + const card = this.container.querySelector(`.legend-item[data-id="${id}"]`); + if (card) card.classList.add('found'); + this._updateCounter(); + return true; + } + + allFound() { + return this.found.size >= this.total && this.total > 0; + } + + _updateCounter() { + if (this.counterEl) { + this.counterEl.textContent = `${this.found.size} / ${this.total}`; + } + } +} diff --git a/public/js/scene.js b/public/js/scene.js new file mode 100644 index 0000000..e22bdb6 --- /dev/null +++ b/public/js/scene.js @@ -0,0 +1,228 @@ +// Rendert eine Szene und liefert das "Google-Maps-Gefuehl" via panzoom. +// +// WICHTIG (Performance): Alle Items werden EINMAL in ein einzelnes Bild (Canvas) +// gezeichnet. panzoom bewegt danach nur dieses eine -> butterweich, egal +// wie viele tausend Items die Szene hat. (Vorher war jedes Emoji ein eigenes +// -Element, das beim Zoomen pro Frame neu gerastert wurde = extremes Lag.) +// +// Klicks werden transform-sicher (getScreenCTM) in Szenen-Koordinaten umgerechnet. + +const SVG_NS = 'http://www.w3.org/2000/svg'; +const EMOJI_BASE = '/emoji/'; +const TAP_THRESHOLD_PX = 8; // Bewegung darueber = Ziehen, kein Tippen +const RENDER_SCALE = 2; // Aufloesung des Szenen-Bitmaps (fuer Schaerfe beim Zoomen) +const EMOJI_FONT = '"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif'; + +// Merkt sich pro Session, ob ein Emoji-Bildset vorliegt (sonst native Emojis). +let emojiAssetsAvailable = null; + +function loadImage(url) { + return new Promise((resolve) => { + const img = new Image(); + img.crossOrigin = 'anonymous'; + img.onload = () => resolve({ url, img }); + img.onerror = () => resolve({ url, img: null }); + img.src = url; + }); +} + +function el(name, attrs = {}) { + const node = document.createElementNS(SVG_NS, name); + for (const [k, v] of Object.entries(attrs)) node.setAttribute(k, v); + return node; +} + +export class Scene { + constructor(svg, layer, stage) { + this.svg = svg; + this.layer = layer; // , das panzoom transformiert + this.stage = stage; + this.pz = null; + this.tapHandler = null; + this._down = null; + this._objectUrl = null; + this._imgCache = new Map(); // url -> HTMLImageElement + + this.svg.addEventListener('pointerdown', (e) => { + this._down = { x: e.clientX, y: e.clientY }; + }); + this.svg.addEventListener('click', (e) => { + if (!this._down) return; + const moved = Math.hypot(e.clientX - this._down.x, e.clientY - this._down.y); + this._down = null; + if (moved > TAP_THRESHOLD_PX) return; // war ein Ziehen + this._emitTap(e); + }); + } + + onTap(handler) { + this.tapHandler = handler; + } + + _emitTap(e) { + if (!this.tapHandler) return; + const ctm = this.layer.getScreenCTM(); + if (!ctm) return; + const pt = new DOMPoint(e.clientX, e.clientY).matrixTransform(ctm.inverse()); + this.tapHandler({ x: pt.x, y: pt.y }); + } + + async render(payload) { + if (this.pz) { + this.pz.dispose(); + this.pz = null; + } + this.layer.innerHTML = ''; + + // Emoji-Set einmal pruefen + if (payload.type === 'emoji' && emojiAssetsAvailable === null) { + const sample = payload.items.find((i) => i.kind === 'emoji'); + emojiAssetsAvailable = sample + ? (await loadImage(EMOJI_BASE + sample.codepoint + '.png')).img !== null + : false; + } + + // benoetigte Bilder vorladen (Clipart/Foto + ggf. Emoji-PNGs) + await this._preloadAssets(payload); + + // Szene in ein Bitmap rendern + const dataUrl = await this._rasterize(payload); + + // altes Object-URL freigeben + if (this._objectUrl) URL.revokeObjectURL(this._objectUrl); + this._objectUrl = dataUrl; + + const image = el('image', { + x: 0, + y: 0, + width: payload.width, + height: payload.height, + }); + image.setAttribute('href', dataUrl); + this.layer.appendChild(image); + + this._initPanzoom(payload); + } + + async _preloadAssets(payload) { + const urls = new Set(); + for (const it of payload.items) { + if (it.kind === 'image') urls.add(it.assetUrl); + else if (it.kind === 'emoji' && emojiAssetsAvailable) urls.add(EMOJI_BASE + it.codepoint + '.png'); + } + const missing = [...urls].filter((u) => !this._imgCache.has(u)); + const loaded = await Promise.all(missing.map(loadImage)); + for (const { url, img } of loaded) this._imgCache.set(url, img); + } + + async _rasterize(payload) { + const canvas = document.createElement('canvas'); + canvas.width = payload.width * RENDER_SCALE; + canvas.height = payload.height * RENDER_SCALE; + const ctx = canvas.getContext('2d'); + ctx.scale(RENDER_SCALE, RENDER_SCALE); + + ctx.fillStyle = payload.background || '#ffffff'; + ctx.fillRect(0, 0, payload.width, payload.height); + + ctx.textAlign = 'center'; + ctx.textBaseline = 'middle'; + + for (const item of payload.items) { + ctx.save(); + ctx.translate(item.cx, item.cy); + ctx.rotate((item.rot * Math.PI) / 180); + this._drawItem(ctx, item); + ctx.restore(); + } + + // als Blob-URL (effizienter als riesiger dataURL-String) + return await new Promise((resolve) => { + canvas.toBlob((blob) => resolve(URL.createObjectURL(blob)), 'image/png'); + }); + } + + _drawItem(ctx, item) { + const size = item.size; + + if (item.kind === 'emoji' && !emojiAssetsAvailable) { + ctx.font = `${size}px ${EMOJI_FONT}`; + ctx.fillText(item.glyph, 0, 0); + return; + } + + const url = item.kind === 'image' ? item.assetUrl : EMOJI_BASE + item.codepoint + '.png'; + const img = this._imgCache.get(url); + if (!img) { + // Emoji-Fallback, falls PNG fehlt + if (item.kind === 'emoji') { + ctx.font = `${size}px ${EMOJI_FONT}`; + ctx.fillText(item.glyph, 0, 0); + } + return; + } + + // Seitenverhaeltnis: SVGs sind quadratisch; Raster nach natuerlicher Groesse einpassen + const isSvg = url.toLowerCase().endsWith('.svg'); + let dw = size; + let dh = size; + if (!isSvg && img.naturalWidth && img.naturalHeight) { + const s = Math.min(size / img.naturalWidth, size / img.naturalHeight); + dw = img.naturalWidth * s; + dh = img.naturalHeight * s; + } + ctx.drawImage(img, -dw / 2, -dh / 2, dw, dh); + } + + _initPanzoom(payload) { + if (typeof panzoom === 'function') { + this.pz = panzoom(this.layer, { + maxZoom: 10, + minZoom: 0.9, + bounds: true, + boundsPadding: 0.15, + smoothScroll: true, + zoomDoubleClickSpeed: 1, + }); + } + // viewBox NACH panzoom setzen (panzoom entfernt es beim Init). + this.svg.setAttribute('viewBox', `0 0 ${payload.width} ${payload.height}`); + } + + _stageCenterClient() { + const r = this.stage.getBoundingClientRect(); + return { x: r.left + r.width / 2, y: r.top + r.height / 2 }; + } + + zoomIn() { + if (!this.pz) return; + const c = this._stageCenterClient(); + this.pz.smoothZoom(c.x, c.y, 1.6); + } + + zoomOut() { + if (!this.pz) return; + const c = this._stageCenterClient(); + this.pz.smoothZoom(c.x, c.y, 0.625); + } + + resetView() { + if (!this.pz) return; + this.pz.moveTo(0, 0); + this.pz.zoomAbs(0, 0, 1); + } + + // kurze Treffer-/Daneben-Animation an einer Szenen-Position + pingAt(x, y, ok) { + const ring = el('circle', { + cx: x, + cy: y, + r: 10, + fill: 'none', + 'stroke-width': 6, + class: ok ? 'ping ping-ok' : 'ping ping-miss', + }); + this.layer.appendChild(ring); + setTimeout(() => ring.remove(), 650); + } +} diff --git a/scenes/emoji-chaos/config.json b/scenes/emoji-chaos/config.json new file mode 100644 index 0000000..061c833 --- /dev/null +++ b/scenes/emoji-chaos/config.json @@ -0,0 +1,21 @@ +{ + "name": "Emoji-Chaos", + "type": "emoji", + "background": "#161628", + "minSize": 42, + "maxSize": 72, + "cellFactor": 0.8, + "targets": ["🦶", "🦶🏻", "🦶🏼", "🦶🏽"], + "props": [ + "😀", "😃", "😄", "😁", "😆", "😅", "🤣", "😂", "🙂", "😉", + "😊", "😇", "🥰", "😍", "🤩", "😘", "😗", "😋", "😛", "🤪", + "😎", "🥳", "😴", "🤗", "🤠", "🥸", "🤓", "😜", "🙃", "😌", + "🐶", "🐱", "🦊", "🐼", "🐸", "🐵", "🦁", "🐯", "🐨", "🐷", + "🐰", "🐮", "🐔", "🐧", "🦄", "🐝", "🦋", "🐢", "🐙", "🦖", + "🍕", "🍔", "🍟", "🌭", "🍦", "🍩", "🍪", "🍓", "🍌", "🥑", + "🍎", "🍊", "🍉", "🍇", "🌮", "🥨", "🧀", "🍿", "🍭", "🧁", + "⚽", "🏀", "🎾", "🏓", "🎲", "🎸", "🎺", "🎨", "🚀", "⭐", + "🌈", "🌸", "🌵", "🍀", "🔥", "💧", "❤️", "💛", "💙", "💜", + "💚", "🧡", "⚡", "🎈", "🎁", "🎀", "🔔", "💎", "👑", "🌻" + ] +} diff --git a/scenes/strand-foto/README.md b/scenes/strand-foto/README.md new file mode 100644 index 0000000..4dbbd22 --- /dev/null +++ b/scenes/strand-foto/README.md @@ -0,0 +1,24 @@ +# Foto-Level (Muster) + +Dieses Level ist als **Vorlage** für einen Foto-Level (`"type": "photo"`) angelegt. +Es funktioniert exakt wie ein Clipart-Level — nur mit echten, **freigestellten Fotos** +(transparenter Hintergrund) statt Zeichnungen. + +Solange die Ordner `props/` und `targets/` leer sind, wird dieses Level beim Start +automatisch **übersprungen** (der Server gibt eine Info-Zeile aus). Sobald du Bilder +einfüllst, taucht es im zufälligen Level-Mix auf. + +## So füllst du es + +1. Lege freigestellte Foto-PNGs (transparenter Hintergrund) in `props/` + (Deko: Sandburg, Muschel, Ball, Sonnenschirm … + gern ein paar Ablenker-Füße). +2. Lege **mindestens 3** verschiedene Fuß-Fotos in `targets/`. +3. Server neu starten (`npm start`). + +## Fotos freistellen + +- **remove.bg** — 1-Klick Hintergrund entfernen +- **photopea.com** — kostenloser Foto-Editor im Browser + +Als PNG mit transparentem Hintergrund exportieren. Am besten grob quadratisch +zuschneiden, damit die Trefferzone gut passt. diff --git a/scenes/strand-foto/config.json b/scenes/strand-foto/config.json new file mode 100644 index 0000000..130d5d9 --- /dev/null +++ b/scenes/strand-foto/config.json @@ -0,0 +1,8 @@ +{ + "name": "Strand (Foto)", + "type": "photo", + "background": "#dcefff", + "propCount": 45, + "minSize": 80, + "maxSize": 150 +} diff --git a/server/index.js b/server/index.js new file mode 100644 index 0000000..8018524 --- /dev/null +++ b/server/index.js @@ -0,0 +1,101 @@ +// fuesse.sexy — "Where's the Feet" +// Express-Server: liefert das Frontend aus, scannt die Szenen-Ordner beim Start, +// generiert auf Anfrage eine zufaellige Szene und prueft Klick-Treffer serverseitig. + +import express from 'express'; +import { dirname, join } from 'node:path'; +import { fileURLToPath } from 'node:url'; +import { existsSync } from 'node:fs'; + +import { scanLibrary, scanScenes } from './sceneScanner.js'; +import { generateScene } from './sceneGenerator.js'; +import { getScene } from './sceneStore.js'; + +const __dirname = dirname(fileURLToPath(import.meta.url)); +const ROOT = join(__dirname, '..'); +const SCENES_DIR = join(ROOT, 'scenes'); +const LIBRARY_DIR = join(ROOT, 'library'); +const PUBLIC_DIR = join(ROOT, 'public'); +const PANZOOM_DIST = join(ROOT, 'node_modules', 'panzoom', 'dist'); + +const PORT = process.env.PORT || 3000; + +// Wie oft die normale Library-Szene im Vergleich zu einem Spezial-Level drankommt. +const LIBRARY_WEIGHT = 3; + +// Beim Start: Library (Normalfall) + Spezial-Level (Ausnahmen) einlesen und zu einem +// gewichteten Zufalls-Pool zusammenbauen. +const library = scanLibrary(LIBRARY_DIR); +const specials = scanScenes(SCENES_DIR); + +const scenePool = []; +if (library) { + const libCategory = { + id: 'library', + name: '', + type: 'clipart', + isLibrary: true, + background: null, // pro Szene zufaellig + minSize: 68, + maxSize: 128, + cellFactor: 0.82, + props: library.props, + targets: library.feet, + }; + for (let i = 0; i < LIBRARY_WEIGHT; i++) scenePool.push(libCategory); +} +for (const s of specials) scenePool.push(s); + +if (scenePool.length === 0) { + console.warn('[server] Keine spielbaren Szenen — fuelle library/ oder scenes/.'); +} else { + console.log( + `[server] bereit: Library=${library ? 'ja' : 'nein'}, Spezial-Level: ${specials.map((c) => c.id).join(', ') || '(keine)'}` + ); +} + +const app = express(); +app.use(express.json()); + +// Statisches Frontend + Assets +app.use(express.static(PUBLIC_DIR)); +app.use('/scenes', express.static(SCENES_DIR)); +app.use('/library', express.static(LIBRARY_DIR)); +if (existsSync(PANZOOM_DIST)) { + app.use('/vendor', express.static(PANZOOM_DIST)); +} + +// Eine zufaellige, frisch gemischte Szene liefern (meist Library, selten Spezial-Level). +app.get('/api/scene', (req, res) => { + if (scenePool.length === 0) { + return res.status(503).json({ error: 'Noch keine Szenen vorhanden.' }); + } + const cat = scenePool[Math.floor(Math.random() * scenePool.length)]; + const payload = generateScene(cat); + res.json(payload); +}); + +// Klick pruefen: liegt (x, y) in einer der Ziel-Trefferzonen dieser Szene? +app.post('/api/scene/:sceneId/guess', (req, res) => { + const entry = getScene(req.params.sceneId); + if (!entry) { + return res.status(404).json({ error: 'Szene unbekannt oder abgelaufen.' }); + } + const { x, y } = req.body || {}; + if (typeof x !== 'number' || typeof y !== 'number') { + return res.status(400).json({ error: 'x und y muessen Zahlen sein.' }); + } + + let hit = null; + for (const t of entry.targets) { + if (Math.hypot(t.cx - x, t.cy - y) <= t.radius) { + hit = t.id; + break; + } + } + res.json({ hit }); +}); + +app.listen(PORT, () => { + console.log(`[server] fuesse.sexy laeuft auf http://localhost:${PORT}`); +}); diff --git a/server/sceneGenerator.js b/server/sceneGenerator.js new file mode 100644 index 0000000..fa5a13a --- /dev/null +++ b/server/sceneGenerator.js @@ -0,0 +1,213 @@ +// Baut aus einer Kategorie ein frisch gemischtes Szenen-Layout: Deko wird zufaellig +// gestreut, dann werden 3 Ziele darueber versteckt. Weil wir hier platzieren, kennen +// wir die Ziel-Trefferzonen exakt -> die Klickpruefung kann serverseitig laufen. + +import { saveScene } from './sceneStore.js'; + +const CANVAS_WIDTH = 2000; +const CANVAS_HEIGHT = 1400; +const TARGET_COUNT = 3; +const EDGE_MARGIN = 60; +const MIN_TARGET_DISTANCE = 220; // Ziele nicht zu dicht beieinander + +// Zufaellige, angenehme Hintergrundfarben fuer normale (nicht-thematische) Szenen. +const PALETTE = [ + '#fbe7b6', '#d7ecff', '#ffe0ec', '#e5f7e0', + '#efe6ff', '#fff2cc', '#dfeff2', '#f4e2d0', +]; + +function rand(min, max) { + return min + Math.random() * (max - min); +} + +function randInt(min, max) { + return Math.floor(rand(min, max + 1)); +} + +function pick(array) { + return array[randInt(0, array.length - 1)]; +} + +function makeSceneId() { + return `${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 8)}`; +} + +// 🦶 -> "1f9b6" ; entfernt die Variation-Selector-Bytes (FE0F), joined mit "-". +// Damit passt es zu gaengigen Emoji-Bildsets (Datei je Codepoint-Sequenz). +function toCodepoint(glyph) { + return [...glyph] + .map((ch) => ch.codePointAt(0)) + .filter((cp) => cp !== 0xfe0f) + .map((cp) => cp.toString(16)) + .join('-'); +} + +function randomPosition() { + return { + cx: rand(EDGE_MARGIN, CANVAS_WIDTH - EDGE_MARGIN), + cy: rand(EDGE_MARGIN, CANVAS_HEIGHT - EDGE_MARGIN), + }; +} + +// Jittered Grid: fuellt die ganze Flaeche lueckenlos, wirkt durch Zufalls-Versatz, +// -Groesse und -Drehung aber organisch/chaotisch (echtes "Wimmel"-Gefuehl). +// cellFactor < 1 => Zellen kleiner als die Items => sie ueberlappen => randvoll. +function gridPositions(cellFactor, avgSize) { + const cell = Math.max(16, avgSize * cellFactor); + const cols = Math.ceil(CANVAS_WIDTH / cell); + const rows = Math.ceil(CANVAS_HEIGHT / cell); + const jitter = cell * 0.45; + const out = []; + for (let r = 0; r < rows; r++) { + for (let c = 0; c < cols; c++) { + out.push({ + cx: c * cell + cell / 2 + rand(-jitter, jitter), + cy: r * cell + cell / 2 + rand(-jitter, jitter), + }); + } + } + return out; +} + +// Reihenfolge mischen, damit gleiche Emojis/Props nicht sichtbar "in Reihe" liegen. +function shuffle(arr) { + for (let i = arr.length - 1; i > 0; i--) { + const j = randInt(0, i); + [arr[i], arr[j]] = [arr[j], arr[i]]; + } + return arr; +} + +// Platz fuer ein Ziel finden, das genug Abstand zu bereits gesetzten Zielen haelt. +function findTargetPosition(placedTargets) { + for (let attempt = 0; attempt < 40; attempt++) { + const pos = randomPosition(); + const clear = placedTargets.every((t) => { + const dx = t.cx - pos.cx; + const dy = t.cy - pos.cy; + return Math.hypot(dx, dy) >= MIN_TARGET_DISTANCE; + }); + if (clear) return pos; + } + return randomPosition(); // Notfall: nimm irgendeine Position +} + +function buildImageItem(cat, pos) { + return { + kind: 'image', + assetUrl: pick(cat.props), + cx: pos.cx, + cy: pos.cy, + size: rand(cat.minSize, cat.maxSize), + rot: rand(-180, 180), + }; +} + +function buildEmojiItem(cat, pos) { + const glyph = pick(cat.propGlyphs); + return { + kind: 'emoji', + glyph, + codepoint: toCodepoint(glyph), + cx: pos.cx, + cy: pos.cy, + size: rand(cat.minSize, cat.maxSize), + rot: rand(-18, 18), + }; +} + +// Erzeugt eine Szene fuer die gegebene Kategorie und liefert: +// { payload } -> geht ans Frontend (ohne Kennzeichnung, welche Items Ziele sind) +// und speichert die Trefferzonen serverseitig unter der sceneId. +export function generateScene(cat) { + const sceneId = makeSceneId(); + const isEmoji = cat.type === 'emoji'; + + // 1) Deko lueckenlos ueber ein jittered Grid streuen -> randvolles Wimmelbild + const items = []; + const avgSize = (cat.minSize + cat.maxSize) / 2; + const cellFactor = cat.cellFactor || (isEmoji ? 0.8 : 0.82); + const positions = shuffle(gridPositions(cellFactor, avgSize)); + for (const pos of positions) { + items.push(isEmoji ? buildEmojiItem(cat, pos) : buildImageItem(cat, pos)); + } + + // 2) Ziele auswaehlen + const chosenTargets = []; + if (isEmoji) { + const glyphPool = shuffle([...cat.targetGlyphs]); + for (let i = 0; i < TARGET_COUNT; i++) { + const glyph = glyphPool.length > 0 ? glyphPool.pop() : pick(cat.targetGlyphs); + chosenTargets.push({ glyph, codepoint: toCodepoint(glyph), name: 'Fuss-Emoji' }); + } + } else { + // 3 moeglichst unterschiedliche Ziel-Bilder (Duplikate nur, wenn zu wenige da sind) + const pool = shuffle([...cat.targets]); + for (let i = 0; i < TARGET_COUNT; i++) { + const picked = pool.length > 0 ? pool.pop() : pick(cat.targets); + chosenTargets.push({ url: picked.url, name: picked.name }); + } + } + + // 2b) Ablenker-Fuesse streuen: die NICHT gewaehlten Fuesse (nur normale/Clipart-Level). + // So muss man die 3 richtigen aus der Legende finden, nicht irgendeinen Fuss. + if (!isEmoji && Array.isArray(cat.targets) && cat.targets.length > TARGET_COUNT) { + const chosenUrls = new Set(chosenTargets.map((t) => t.url)); + const decoyPool = cat.targets.filter((t) => !chosenUrls.has(t.url)); + if (decoyPool.length > 0) { + const decoyCount = Math.min(12, decoyPool.length * 2 + 2); + for (let i = 0; i < decoyCount; i++) { + const d = pick(decoyPool); + const pos = randomPosition(); + items.push({ + kind: 'image', + assetUrl: d.url, + cx: pos.cx, + cy: pos.cy, + size: rand((cat.minSize + cat.maxSize) / 2, cat.maxSize), + rot: rand(-25, 25), + }); + } + } + } + + // 3) Ziele platzieren (kommen ans Ende von items -> werden oben gerendert, also sichtbar) + const placedTargets = []; + const legend = []; + chosenTargets.forEach((t, i) => { + const pos = findTargetPosition(placedTargets); + const size = isEmoji + ? rand(cat.minSize, cat.maxSize) + : rand((cat.minSize + cat.maxSize) / 2, cat.maxSize); + const id = `t${i}`; + + placedTargets.push({ id, cx: pos.cx, cy: pos.cy, radius: size * 0.55 }); + + const item = isEmoji + ? { kind: 'emoji', glyph: t.glyph, codepoint: t.codepoint, cx: pos.cx, cy: pos.cy, size, rot: rand(-12, 12) } + : { kind: 'image', assetUrl: t.url, cx: pos.cx, cy: pos.cy, size, rot: rand(-25, 25) }; + items.push(item); + + legend.push( + isEmoji + ? { id, name: t.name, glyph: t.glyph, codepoint: t.codepoint } + : { id, name: t.name, assetUrl: t.url } + ); + }); + + // Trefferzonen nur serverseitig ablegen + saveScene(sceneId, placedTargets); + + const payload = { + sceneId, + type: cat.type, + category: cat.name, + width: CANVAS_WIDTH, + height: CANVAS_HEIGHT, + background: cat.background || pick(PALETTE), + targets: legend, + items, + }; + + return payload; +} diff --git a/server/sceneScanner.js b/server/sceneScanner.js new file mode 100644 index 0000000..9446c47 --- /dev/null +++ b/server/sceneScanner.js @@ -0,0 +1,137 @@ +// Liest den scenes/-Ordner ein und stellt die Kategorie-Metadaten bereit. +// Eine "Kategorie" = ein Unterordner von scenes/. Der Scan passiert einmal beim +// Serverstart; ein neuer Ordner wird also erst nach einem Neustart sichtbar. + +import { readdirSync, readFileSync, statSync, existsSync } from 'node:fs'; +import { join } from 'node:path'; + +const IMAGE_EXTENSIONS = ['.svg', '.png', '.webp', '.jpg', '.jpeg', '.gif']; + +function isImage(filename) { + const lower = filename.toLowerCase(); + return IMAGE_EXTENSIONS.some((ext) => lower.endsWith(ext)); +} + +function listImages(dir) { + if (!existsSync(dir)) return []; + return readdirSync(dir) + .filter((name) => isImage(name)) + .sort(); +} + +function readConfig(categoryDir) { + const configPath = join(categoryDir, 'config.json'); + if (!existsSync(configPath)) return {}; + try { + return JSON.parse(readFileSync(configPath, 'utf8')); + } catch (err) { + console.warn(`[scanner] config.json in ${categoryDir} ist ungueltig:`, err.message); + return {}; + } +} + +// Liest die gemeinsame Library (Fundgrube): library/props/ (Deko) + library/feet/ +// (alle Fuesse). Daraus generiert der Server normale, nicht-thematische Szenen. +export function scanLibrary(libraryRoot) { + const propsDir = join(libraryRoot, 'props'); + const feetDir = join(libraryRoot, 'feet'); + + const props = listImages(propsDir).map((f) => `/library/props/${f}`); + const feet = listImages(feetDir).map((f) => ({ + id: f.replace(/\.[^.]+$/, ''), + name: prettyName(f), + url: `/library/feet/${f}`, + })); + + if (feet.length < 3) { + console.warn(`[scanner] Library hat < 3 Fuesse (${feet.length}) — normale Szenen deaktiviert.`); + return null; + } + if (props.length < 1) { + console.warn('[scanner] Library hat keine Deko in props/ — normale Szenen deaktiviert.'); + return null; + } + return { props, feet }; +} + +// Baut die Liste aller SPEZIAL-Level (Unterordner von scenes/). Ungueltige Ordner +// werden mit einer Warnung uebersprungen, statt den Start zu blockieren. +export function scanScenes(scenesRoot) { + if (!existsSync(scenesRoot)) { + console.warn(`[scanner] scenes/-Ordner fehlt: ${scenesRoot}`); + return []; + } + + const categories = []; + + for (const entry of readdirSync(scenesRoot)) { + const categoryDir = join(scenesRoot, entry); + if (!statSync(categoryDir).isDirectory()) continue; + + const config = readConfig(categoryDir); + const type = config.type || 'clipart'; + const name = config.name || entry; + + if (type === 'emoji') { + const targets = Array.isArray(config.targets) ? config.targets : []; + const props = Array.isArray(config.props) ? config.props : []; + if (targets.length < 1 || props.length < 3) { + console.warn(`[scanner] "${entry}" (emoji) uebersprungen: braucht targets + genug props in config.json`); + continue; + } + categories.push({ + id: entry, + name, + type, + background: config.background || '#f4f4f8', + propCount: config.propCount || 250, + minSize: config.minSize || 42, + maxSize: config.maxSize || 78, + targetGlyphs: targets, + propGlyphs: props, + }); + continue; + } + + // clipart / photo: Bilddateien aus props/ und targets/ + const propsDir = join(categoryDir, 'props'); + const targetsDir = join(categoryDir, 'targets'); + const props = listImages(propsDir).map((f) => `/scenes/${entry}/props/${f}`); + const targets = listImages(targetsDir).map((f) => ({ + id: f.replace(/\.[^.]+$/, ''), + name: prettyName(f), + url: `/scenes/${entry}/targets/${f}`, + })); + + if (targets.length < 3) { + console.warn(`[scanner] "${entry}" uebersprungen: braucht mind. 3 Bilder in targets/ (gefunden: ${targets.length})`); + continue; + } + if (props.length < 1) { + console.warn(`[scanner] "${entry}" uebersprungen: keine Bilder in props/`); + continue; + } + + categories.push({ + id: entry, + name, + type, + background: config.background || '#f4f4f8', + propCount: config.propCount || 60, + minSize: config.minSize || 70, + maxSize: config.maxSize || 130, + props, + targets, + }); + } + + return categories; +} + +// "ballerina-fuss.svg" -> "Ballerina Fuss" +function prettyName(filename) { + return filename + .replace(/\.[^.]+$/, '') + .replace(/[-_]+/g, ' ') + .replace(/\b\w/g, (c) => c.toUpperCase()); +} diff --git a/server/sceneStore.js b/server/sceneStore.js new file mode 100644 index 0000000..34146da --- /dev/null +++ b/server/sceneStore.js @@ -0,0 +1,29 @@ +// Haelt die Trefferzonen jeder generierten Szene serverseitig, damit Klicks +// geprueft werden koennen, ohne die Zielpositionen je ans Frontend zu schicken. +// Einfache Groessen- und Zeitbegrenzung verhindert ein Speicher-Leck bei vielen +// Aufrufen. + +const MAX_ENTRIES = 500; +const TTL_MS = 1000 * 60 * 30; // 30 Minuten + +const scenes = new Map(); // sceneId -> { targets, createdAt } + +function evictIfNeeded() { + const now = Date.now(); + for (const [id, entry] of scenes) { + if (now - entry.createdAt > TTL_MS) scenes.delete(id); + } + while (scenes.size > MAX_ENTRIES) { + const oldest = scenes.keys().next().value; // Map behaelt Einfuege-Reihenfolge + scenes.delete(oldest); + } +} + +export function saveScene(sceneId, targets) { + scenes.set(sceneId, { targets, createdAt: Date.now() }); + evictIfNeeded(); +} + +export function getScene(sceneId) { + return scenes.get(sceneId) || null; +}