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

./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