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 <noreply@anthropic.com>
This commit is contained in:
Guido
3
.gitignore
vendored
Normal file
3
.gitignore
vendored
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
node_modules/
|
||||||
|
npm-debug.log
|
||||||
|
.DS_Store
|
||||||
104
DEPLOY.md
Normal file
104
DEPLOY.md
Normal file
@@ -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 <DEINE_REPO_URL> 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://<LXC-IP>: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://<LXC-IP>: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.
|
||||||
98
README.md
Normal file
98
README.md
Normal file
@@ -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
|
||||||
|
```
|
||||||
20
deploy/fuesse-sexy.service
Normal file
20
deploy/fuesse-sexy.service
Normal file
@@ -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
|
||||||
33
install.sh
Executable file
33
install.sh
Executable file
@@ -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 ""
|
||||||
9
library/feet/blauer-fuss.svg
Normal file
9
library/feet/blauer-fuss.svg
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
|
||||||
|
<ellipse cx="50" cy="54" rx="21" ry="19" fill="#3a7bd5"/>
|
||||||
|
<ellipse cx="50" cy="80" rx="13.5" ry="11" fill="#3a7bd5"/>
|
||||||
|
<circle cx="33" cy="33" r="7.5" fill="#3a7bd5"/>
|
||||||
|
<circle cx="45" cy="26" r="5.6" fill="#3a7bd5"/>
|
||||||
|
<circle cx="56" cy="26" r="4.9" fill="#3a7bd5"/>
|
||||||
|
<circle cx="65" cy="30" r="4.2" fill="#3a7bd5"/>
|
||||||
|
<circle cx="72" cy="37" r="3.6" fill="#3a7bd5"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 465 B |
9
library/feet/brauner-fuss.svg
Normal file
9
library/feet/brauner-fuss.svg
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
|
||||||
|
<ellipse cx="50" cy="54" rx="21" ry="19" fill="#b97a4a"/>
|
||||||
|
<ellipse cx="50" cy="80" rx="13.5" ry="11" fill="#b97a4a"/>
|
||||||
|
<circle cx="33" cy="33" r="7.5" fill="#b97a4a"/>
|
||||||
|
<circle cx="45" cy="26" r="5.6" fill="#b97a4a"/>
|
||||||
|
<circle cx="56" cy="26" r="4.9" fill="#b97a4a"/>
|
||||||
|
<circle cx="65" cy="30" r="4.2" fill="#b97a4a"/>
|
||||||
|
<circle cx="72" cy="37" r="3.6" fill="#b97a4a"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 465 B |
9
library/feet/dunkler-fuss.svg
Normal file
9
library/feet/dunkler-fuss.svg
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
|
||||||
|
<ellipse cx="50" cy="54" rx="21" ry="19" fill="#6d4327"/>
|
||||||
|
<ellipse cx="50" cy="80" rx="13.5" ry="11" fill="#6d4327"/>
|
||||||
|
<circle cx="33" cy="33" r="7.5" fill="#6d4327"/>
|
||||||
|
<circle cx="45" cy="26" r="5.6" fill="#6d4327"/>
|
||||||
|
<circle cx="56" cy="26" r="4.9" fill="#6d4327"/>
|
||||||
|
<circle cx="65" cy="30" r="4.2" fill="#6d4327"/>
|
||||||
|
<circle cx="72" cy="37" r="3.6" fill="#6d4327"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 465 B |
10
library/feet/flipflop-fuss.svg
Normal file
10
library/feet/flipflop-fuss.svg
Normal file
@@ -0,0 +1,10 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
|
||||||
|
<ellipse cx="50" cy="54" rx="21" ry="19" fill="#f0b98a"/>
|
||||||
|
<ellipse cx="50" cy="80" rx="13.5" ry="11" fill="#f0b98a"/>
|
||||||
|
<circle cx="33" cy="33" r="7.5" fill="#f0b98a"/>
|
||||||
|
<circle cx="45" cy="26" r="5.6" fill="#f0b98a"/>
|
||||||
|
<circle cx="56" cy="26" r="4.9" fill="#f0b98a"/>
|
||||||
|
<circle cx="65" cy="30" r="4.2" fill="#f0b98a"/>
|
||||||
|
<circle cx="72" cy="37" r="3.6" fill="#f0b98a"/>
|
||||||
|
<path d="M39 33 L28 54 M39 33 L60 50" stroke="#e5484d" stroke-width="6" stroke-linecap="round" fill="none"/>
|
||||||
|
<circle cx="39" cy="33" r="5" fill="#e5484d"/></svg>
|
||||||
|
After Width: | Height: | Size: 625 B |
10
library/feet/flossen-fuss.svg
Normal file
10
library/feet/flossen-fuss.svg
Normal file
@@ -0,0 +1,10 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
|
||||||
|
<ellipse cx="50" cy="54" rx="21" ry="19" fill="#f0b98a"/>
|
||||||
|
<ellipse cx="50" cy="80" rx="13.5" ry="11" fill="#f0b98a"/>
|
||||||
|
<circle cx="33" cy="33" r="7.5" fill="#f0b98a"/>
|
||||||
|
<circle cx="45" cy="26" r="5.6" fill="#f0b98a"/>
|
||||||
|
<circle cx="56" cy="26" r="4.9" fill="#f0b98a"/>
|
||||||
|
<circle cx="65" cy="30" r="4.2" fill="#f0b98a"/>
|
||||||
|
<circle cx="72" cy="37" r="3.6" fill="#f0b98a"/>
|
||||||
|
<path d="M28 34 Q50 24 72 34 L84 2 Q50 -6 16 2 Z" fill="#1f8bd6" stroke="#0f6fb0" stroke-width="2"/>
|
||||||
|
<path d="M34 20 L34 6 M50 17 L50 2 M66 20 L66 6" stroke="#0f6fb0" stroke-width="2.5"/></svg>
|
||||||
|
After Width: | Height: | Size: 657 B |
9
library/feet/gruener-fuss.svg
Normal file
9
library/feet/gruener-fuss.svg
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
|
||||||
|
<ellipse cx="50" cy="54" rx="21" ry="19" fill="#4caf50"/>
|
||||||
|
<ellipse cx="50" cy="80" rx="13.5" ry="11" fill="#4caf50"/>
|
||||||
|
<circle cx="33" cy="33" r="7.5" fill="#4caf50"/>
|
||||||
|
<circle cx="45" cy="26" r="5.6" fill="#4caf50"/>
|
||||||
|
<circle cx="56" cy="26" r="4.9" fill="#4caf50"/>
|
||||||
|
<circle cx="65" cy="30" r="4.2" fill="#4caf50"/>
|
||||||
|
<circle cx="72" cy="37" r="3.6" fill="#4caf50"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 465 B |
9
library/feet/heller-fuss.svg
Normal file
9
library/feet/heller-fuss.svg
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
|
||||||
|
<ellipse cx="50" cy="54" rx="21" ry="19" fill="#f0b98a"/>
|
||||||
|
<ellipse cx="50" cy="80" rx="13.5" ry="11" fill="#f0b98a"/>
|
||||||
|
<circle cx="33" cy="33" r="7.5" fill="#f0b98a"/>
|
||||||
|
<circle cx="45" cy="26" r="5.6" fill="#f0b98a"/>
|
||||||
|
<circle cx="56" cy="26" r="4.9" fill="#f0b98a"/>
|
||||||
|
<circle cx="65" cy="30" r="4.2" fill="#f0b98a"/>
|
||||||
|
<circle cx="72" cy="37" r="3.6" fill="#f0b98a"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 465 B |
9
library/feet/lila-fuss.svg
Normal file
9
library/feet/lila-fuss.svg
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
|
||||||
|
<ellipse cx="50" cy="54" rx="21" ry="19" fill="#8e5bd0"/>
|
||||||
|
<ellipse cx="50" cy="80" rx="13.5" ry="11" fill="#8e5bd0"/>
|
||||||
|
<circle cx="33" cy="33" r="7.5" fill="#8e5bd0"/>
|
||||||
|
<circle cx="45" cy="26" r="5.6" fill="#8e5bd0"/>
|
||||||
|
<circle cx="56" cy="26" r="4.9" fill="#8e5bd0"/>
|
||||||
|
<circle cx="65" cy="30" r="4.2" fill="#8e5bd0"/>
|
||||||
|
<circle cx="72" cy="37" r="3.6" fill="#8e5bd0"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 465 B |
9
library/feet/roter-fuss.svg
Normal file
9
library/feet/roter-fuss.svg
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
|
||||||
|
<ellipse cx="50" cy="54" rx="21" ry="19" fill="#e5484d"/>
|
||||||
|
<ellipse cx="50" cy="80" rx="13.5" ry="11" fill="#e5484d"/>
|
||||||
|
<circle cx="33" cy="33" r="7.5" fill="#e5484d"/>
|
||||||
|
<circle cx="45" cy="26" r="5.6" fill="#e5484d"/>
|
||||||
|
<circle cx="56" cy="26" r="4.9" fill="#e5484d"/>
|
||||||
|
<circle cx="65" cy="30" r="4.2" fill="#e5484d"/>
|
||||||
|
<circle cx="72" cy="37" r="3.6" fill="#e5484d"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 465 B |
7
library/props/ball.svg
Normal file
7
library/props/ball.svg
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
|
||||||
|
<circle cx="50" cy="50" r="40" fill="#fff"/>
|
||||||
|
<path d="M50 10 A40 40 0 0 1 90 50 L50 50 Z" fill="#ff5a5f"/>
|
||||||
|
<path d="M50 90 A40 40 0 0 1 10 50 L50 50 Z" fill="#3ea6ff"/>
|
||||||
|
<path d="M50 10 A40 40 0 0 0 10 50 L50 50 Z" fill="#ffd23f"/>
|
||||||
|
<path d="M50 90 A40 40 0 0 0 90 50 L50 50 Z" fill="#2ec26b"/>
|
||||||
|
<circle cx="50" cy="50" r="40" fill="none" stroke="#26193f" stroke-width="3"/></svg>
|
||||||
|
After Width: | Height: | Size: 465 B |
4
library/props/eimer.svg
Normal file
4
library/props/eimer.svg
Normal file
@@ -0,0 +1,4 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
|
||||||
|
<path d="M28 40 Q50 25 72 40 L66 86 Q50 92 34 86 Z" fill="#ff5a5f"/>
|
||||||
|
<path d="M30 44 Q50 55 70 44" fill="none" stroke="#26193f" stroke-width="3"/>
|
||||||
|
<path d="M30 42 Q50 12 70 42" fill="none" stroke="#ffd23f" stroke-width="5"/></svg>
|
||||||
|
After Width: | Height: | Size: 306 B |
7
library/props/eis.svg
Normal file
7
library/props/eis.svg
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
|
||||||
|
<path d="M35 45 L50 88 L65 45 Z" fill="#e6a86b"/>
|
||||||
|
<path d="M35 45 L65 45 M40 55 L58 55 M45 65 L55 65" stroke="#a9744a" stroke-width="2"/>
|
||||||
|
<circle cx="42" cy="40" r="13" fill="#ff9ecb"/>
|
||||||
|
<circle cx="58" cy="40" r="13" fill="#8ee0c0"/>
|
||||||
|
<circle cx="50" cy="30" r="13" fill="#ffe08a"/>
|
||||||
|
<circle cx="50" cy="20" r="3" fill="#ff5a5f"/></svg>
|
||||||
|
After Width: | Height: | Size: 422 B |
5
library/props/fisch.svg
Normal file
5
library/props/fisch.svg
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
|
||||||
|
<ellipse cx="46" cy="52" rx="30" ry="18" fill="#ffa63f"/>
|
||||||
|
<path d="M74 52 L92 40 L92 64 Z" fill="#ff8a1e"/>
|
||||||
|
<circle cx="34" cy="48" r="4" fill="#26193f"/>
|
||||||
|
<path d="M46 40 L58 34 L54 44 Z" fill="#ff8a1e"/></svg>
|
||||||
|
After Width: | Height: | Size: 290 B |
5
library/props/handtuch.svg
Normal file
5
library/props/handtuch.svg
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
|
||||||
|
<rect x="18" y="20" width="64" height="60" rx="6" fill="#3ea6ff"/>
|
||||||
|
<rect x="18" y="20" width="64" height="60" rx="6" fill="none" stroke="#1c6fb0" stroke-width="3"/>
|
||||||
|
<rect x="18" y="34" width="64" height="7" fill="#fff"/>
|
||||||
|
<rect x="18" y="59" width="64" height="7" fill="#fff"/></svg>
|
||||||
|
After Width: | Height: | Size: 362 B |
7
library/props/krabbe.svg
Normal file
7
library/props/krabbe.svg
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
|
||||||
|
<ellipse cx="50" cy="55" rx="30" ry="20" fill="#ff5a3c"/>
|
||||||
|
<circle cx="40" cy="50" r="4" fill="#26193f"/><circle cx="60" cy="50" r="4" fill="#26193f"/>
|
||||||
|
<path d="M22 55 C10 45 8 60 16 66 M78 55 C90 45 92 60 84 66" stroke="#ff5a3c" stroke-width="7"
|
||||||
|
fill="none" stroke-linecap="round"/>
|
||||||
|
<path d="M28 72 L18 82 M40 76 L34 88 M60 76 L66 88 M72 72 L82 82" stroke="#ff5a3c"
|
||||||
|
stroke-width="5" stroke-linecap="round"/></svg>
|
||||||
|
After Width: | Height: | Size: 505 B |
3
library/props/moewe.svg
Normal file
3
library/props/moewe.svg
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
|
||||||
|
<path d="M12 55 Q35 30 50 52 Q65 30 88 55" stroke="#4a4a5a" stroke-width="6"
|
||||||
|
fill="none" stroke-linecap="round"/></svg>
|
||||||
|
After Width: | Height: | Size: 193 B |
4
library/props/muschel.svg
Normal file
4
library/props/muschel.svg
Normal file
@@ -0,0 +1,4 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
|
||||||
|
<path d="M50 88 C20 60 20 25 50 18 C80 25 80 60 50 88 Z" fill="#ffb3c7"/>
|
||||||
|
<path d="M50 20 L50 86 M35 30 L44 82 M65 30 L56 82 M25 45 L38 80 M75 45 L62 80"
|
||||||
|
stroke="#e26d94" stroke-width="3" fill="none" stroke-linecap="round"/></svg>
|
||||||
|
After Width: | Height: | Size: 308 B |
9
library/props/palme.svg
Normal file
9
library/props/palme.svg
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
|
||||||
|
<path d="M46 90 Q52 55 50 40 L58 40 Q54 60 54 90 Z" fill="#8b5a2b"/>
|
||||||
|
<g fill="#2ec26b">
|
||||||
|
<path d="M52 40 Q30 25 12 32 Q32 30 52 42 Z"/>
|
||||||
|
<path d="M52 40 Q74 25 90 34 Q70 30 52 42 Z"/>
|
||||||
|
<path d="M52 40 Q35 20 30 6 Q46 22 55 40 Z"/>
|
||||||
|
<path d="M52 40 Q70 22 78 10 Q60 24 55 40 Z"/>
|
||||||
|
</g>
|
||||||
|
<circle cx="52" cy="40" r="5" fill="#c98a3a"/></svg>
|
||||||
|
After Width: | Height: | Size: 428 B |
5
library/props/seestern.svg
Normal file
5
library/props/seestern.svg
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
|
||||||
|
<path d="M50 12 L61 40 L92 40 L66 58 L76 88 L50 68 L24 88 L34 58 L8 40 L39 40 Z"
|
||||||
|
fill="#ff7aa8" stroke="#e05089" stroke-width="3" stroke-linejoin="round"/>
|
||||||
|
<circle cx="50" cy="50" r="3" fill="#fff"/><circle cx="42" cy="44" r="2" fill="#fff"/>
|
||||||
|
<circle cx="58" cy="44" r="2" fill="#fff"/></svg>
|
||||||
|
After Width: | Height: | Size: 374 B |
5
library/props/sonne.svg
Normal file
5
library/props/sonne.svg
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
|
||||||
|
<g stroke="#ffb300" stroke-width="6" stroke-linecap="round">
|
||||||
|
<path d="M50 8 V22 M50 78 V92 M8 50 H22 M78 50 H92 M20 20 L30 30 M80 20 L70 30 M20 80 L30 70 M80 80 L70 70"/>
|
||||||
|
</g>
|
||||||
|
<circle cx="50" cy="50" r="22" fill="#ffd23f" stroke="#ffb300" stroke-width="3"/></svg>
|
||||||
|
After Width: | Height: | Size: 343 B |
6
library/props/sonnenbrille.svg
Normal file
6
library/props/sonnenbrille.svg
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
|
||||||
|
<path d="M20 45 H80" stroke="#26193f" stroke-width="5"/>
|
||||||
|
<rect x="16" y="42" width="28" height="20" rx="9" fill="#26193f"/>
|
||||||
|
<rect x="56" y="42" width="28" height="20" rx="9" fill="#26193f"/>
|
||||||
|
<rect x="20" y="46" width="9" height="6" rx="3" fill="#7fd0ff"/>
|
||||||
|
<rect x="60" y="46" width="9" height="6" rx="3" fill="#7fd0ff"/></svg>
|
||||||
|
After Width: | Height: | Size: 410 B |
6
library/props/sonnenschirm.svg
Normal file
6
library/props/sonnenschirm.svg
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
|
||||||
|
<rect x="47" y="45" width="6" height="45" rx="3" fill="#8b5a2b"/>
|
||||||
|
<path d="M10 46 A40 34 0 0 1 90 46 Z" fill="#ff5a5f"/>
|
||||||
|
<path d="M30 46 A20 30 0 0 1 50 46 Z" fill="#fff"/>
|
||||||
|
<path d="M50 46 A20 30 0 0 1 70 46 Z" fill="#fff"/>
|
||||||
|
<path d="M10 46 A40 34 0 0 1 90 46" fill="none" stroke="#26193f" stroke-width="3"/></svg>
|
||||||
|
After Width: | Height: | Size: 398 B |
867
package-lock.json
generated
Normal file
867
package-lock.json
generated
Normal file
@@ -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"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
14
package.json
Normal file
14
package.json
Normal file
@@ -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"
|
||||||
|
}
|
||||||
|
}
|
||||||
259
public/css/style.css
Normal file
259
public/css/style.css
Normal file
@@ -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; }
|
||||||
|
}
|
||||||
30
public/emoji/README.md
Normal file
30
public/emoji/README.md
Normal file
@@ -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.
|
||||||
52
public/index.html
Normal file
52
public/index.html
Normal file
@@ -0,0 +1,52 @@
|
|||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
|
||||||
|
<title>fuesse.sexy — finde die Füße</title>
|
||||||
|
<link rel="stylesheet" href="/css/style.css" />
|
||||||
|
|
||||||
|
<div id="game">
|
||||||
|
<!-- "Gesucht"-Leiste -->
|
||||||
|
<header id="legend">
|
||||||
|
<div class="legend-label">
|
||||||
|
<span class="brand">fuesse<span class="brand-dot">.</span>sexy</span>
|
||||||
|
<span class="legend-sub">Finde diese Füße:</span>
|
||||||
|
</div>
|
||||||
|
<div id="legend-items"></div>
|
||||||
|
<div id="legend-counter" class="legend-counter">0 / 3</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<!-- Die "Karte" (Wimmelbild) -->
|
||||||
|
<main id="stage">
|
||||||
|
<svg id="scene-svg" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet">
|
||||||
|
<g id="scene-layer"></g>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
<div id="category-name" class="category-name"></div>
|
||||||
|
|
||||||
|
<!-- Zoom-Steuerung -->
|
||||||
|
<div id="controls">
|
||||||
|
<button id="zoom-in" title="Reinzoomen" aria-label="Reinzoomen">+</button>
|
||||||
|
<button id="zoom-out" title="Rauszoomen" aria-label="Rauszoomen">−</button>
|
||||||
|
<button id="reset-view" title="Ansicht zurücksetzen" aria-label="Ansicht zurücksetzen">⟲</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Lade-Spinner -->
|
||||||
|
<div id="loading" class="hidden">
|
||||||
|
<div class="spinner"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Treffer/Daneben-Feedback -->
|
||||||
|
<div id="toast"></div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<!-- Gewinn-Overlay -->
|
||||||
|
<div id="win-overlay" class="hidden">
|
||||||
|
<div class="win-card">
|
||||||
|
<div class="win-emoji">🦶🎉</div>
|
||||||
|
<h2>Alle Füße gefunden!</h2>
|
||||||
|
<button id="next-scene">Weiter →</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="/vendor/panzoom.min.js"></script>
|
||||||
|
<script type="module" src="/js/app.js"></script>
|
||||||
88
public/js/app.js
Normal file
88
public/js/app.js
Normal file
@@ -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();
|
||||||
70
public/js/legend.js
Normal file
70
public/js/legend.js
Normal file
@@ -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}`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
228
public/js/scene.js
Normal file
228
public/js/scene.js
Normal file
@@ -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 <image> -> butterweich, egal
|
||||||
|
// wie viele tausend Items die Szene hat. (Vorher war jedes Emoji ein eigenes
|
||||||
|
// <text>-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; // <g>, 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);
|
||||||
|
}
|
||||||
|
}
|
||||||
21
scenes/emoji-chaos/config.json
Normal file
21
scenes/emoji-chaos/config.json
Normal file
@@ -0,0 +1,21 @@
|
|||||||
|
{
|
||||||
|
"name": "Emoji-Chaos",
|
||||||
|
"type": "emoji",
|
||||||
|
"background": "#161628",
|
||||||
|
"minSize": 42,
|
||||||
|
"maxSize": 72,
|
||||||
|
"cellFactor": 0.8,
|
||||||
|
"targets": ["🦶", "🦶🏻", "🦶🏼", "🦶🏽"],
|
||||||
|
"props": [
|
||||||
|
"😀", "😃", "😄", "😁", "😆", "😅", "🤣", "😂", "🙂", "😉",
|
||||||
|
"😊", "😇", "🥰", "😍", "🤩", "😘", "😗", "😋", "😛", "🤪",
|
||||||
|
"😎", "🥳", "😴", "🤗", "🤠", "🥸", "🤓", "😜", "🙃", "😌",
|
||||||
|
"🐶", "🐱", "🦊", "🐼", "🐸", "🐵", "🦁", "🐯", "🐨", "🐷",
|
||||||
|
"🐰", "🐮", "🐔", "🐧", "🦄", "🐝", "🦋", "🐢", "🐙", "🦖",
|
||||||
|
"🍕", "🍔", "🍟", "🌭", "🍦", "🍩", "🍪", "🍓", "🍌", "🥑",
|
||||||
|
"🍎", "🍊", "🍉", "🍇", "🌮", "🥨", "🧀", "🍿", "🍭", "🧁",
|
||||||
|
"⚽", "🏀", "🎾", "🏓", "🎲", "🎸", "🎺", "🎨", "🚀", "⭐",
|
||||||
|
"🌈", "🌸", "🌵", "🍀", "🔥", "💧", "❤️", "💛", "💙", "💜",
|
||||||
|
"💚", "🧡", "⚡", "🎈", "🎁", "🎀", "🔔", "💎", "👑", "🌻"
|
||||||
|
]
|
||||||
|
}
|
||||||
24
scenes/strand-foto/README.md
Normal file
24
scenes/strand-foto/README.md
Normal file
@@ -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.
|
||||||
8
scenes/strand-foto/config.json
Normal file
8
scenes/strand-foto/config.json
Normal file
@@ -0,0 +1,8 @@
|
|||||||
|
{
|
||||||
|
"name": "Strand (Foto)",
|
||||||
|
"type": "photo",
|
||||||
|
"background": "#dcefff",
|
||||||
|
"propCount": 45,
|
||||||
|
"minSize": 80,
|
||||||
|
"maxSize": 150
|
||||||
|
}
|
||||||
101
server/index.js
Normal file
101
server/index.js
Normal file
@@ -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}`);
|
||||||
|
});
|
||||||
213
server/sceneGenerator.js
Normal file
213
server/sceneGenerator.js
Normal file
@@ -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;
|
||||||
|
}
|
||||||
137
server/sceneScanner.js
Normal file
137
server/sceneScanner.js
Normal file
@@ -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());
|
||||||
|
}
|
||||||
29
server/sceneStore.js
Normal file
29
server/sceneStore.js
Normal file
@@ -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;
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user