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
2026-08-04 17:29:25 +02:00
commit 1a9710ec88
42 changed files with 2555 additions and 0 deletions

52
public/index.html Normal file
View 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>