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>
2026-08-04 17:29:25 +02:00
commit 1a9710ec88
42 changed files with 2555 additions and 0 deletions
--- a/server/index.js
+++ b/server/index.js
@@ -0,0 +1,101 @@
+// fuesse.sexy — "Where's the Feet"
+// Express-Server: liefert das Frontend aus, scannt die Szenen-Ordner beim Start,
+// generiert auf Anfrage eine zufaellige Szene und prueft Klick-Treffer serverseitig.
+
+import express from 'express';
+import { dirname, join } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { existsSync } from 'node:fs';
+
+import { scanLibrary, scanScenes } from './sceneScanner.js';
+import { generateScene } from './sceneGenerator.js';
+import { getScene } from './sceneStore.js';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const ROOT = join(__dirname, '..');
+const SCENES_DIR = join(ROOT, 'scenes');
+const LIBRARY_DIR = join(ROOT, 'library');
+const PUBLIC_DIR = join(ROOT, 'public');
+const PANZOOM_DIST = join(ROOT, 'node_modules', 'panzoom', 'dist');
+
+const PORT = process.env.PORT || 3000;
+
+// Wie oft die normale Library-Szene im Vergleich zu einem Spezial-Level drankommt.
+const LIBRARY_WEIGHT = 3;
+
+// Beim Start: Library (Normalfall) + Spezial-Level (Ausnahmen) einlesen und zu einem
+// gewichteten Zufalls-Pool zusammenbauen.
+const library = scanLibrary(LIBRARY_DIR);
+const specials = scanScenes(SCENES_DIR);
+
+const scenePool = [];
+if (library) {
+  const libCategory = {
+    id: 'library',
+    name: '',
+    type: 'clipart',
+    isLibrary: true,
+    background: null, // pro Szene zufaellig
+    minSize: 68,
+    maxSize: 128,
+    cellFactor: 0.82,
+    props: library.props,
+    targets: library.feet,
+  };
+  for (let i = 0; i < LIBRARY_WEIGHT; i++) scenePool.push(libCategory);
+}
+for (const s of specials) scenePool.push(s);
+
+if (scenePool.length === 0) {
+  console.warn('[server] Keine spielbaren Szenen — fuelle library/ oder scenes/.');
+} else {
+  console.log(
+    `[server] bereit: Library=${library ? 'ja' : 'nein'}, Spezial-Level: ${specials.map((c) => c.id).join(', ') || '(keine)'}`
+  );
+}
+
+const app = express();
+app.use(express.json());
+
+// Statisches Frontend + Assets
+app.use(express.static(PUBLIC_DIR));
+app.use('/scenes', express.static(SCENES_DIR));
+app.use('/library', express.static(LIBRARY_DIR));
+if (existsSync(PANZOOM_DIST)) {
+  app.use('/vendor', express.static(PANZOOM_DIST));
+}
+
+// Eine zufaellige, frisch gemischte Szene liefern (meist Library, selten Spezial-Level).
+app.get('/api/scene', (req, res) => {
+  if (scenePool.length === 0) {
+    return res.status(503).json({ error: 'Noch keine Szenen vorhanden.' });
+  }
+  const cat = scenePool[Math.floor(Math.random() * scenePool.length)];
+  const payload = generateScene(cat);
+  res.json(payload);
+});
+
+// Klick pruefen: liegt (x, y) in einer der Ziel-Trefferzonen dieser Szene?
+app.post('/api/scene/:sceneId/guess', (req, res) => {
+  const entry = getScene(req.params.sceneId);
+  if (!entry) {
+    return res.status(404).json({ error: 'Szene unbekannt oder abgelaufen.' });
+  }
+  const { x, y } = req.body || {};
+  if (typeof x !== 'number' || typeof y !== 'number') {
+    return res.status(400).json({ error: 'x und y muessen Zahlen sein.' });
+  }
+
+  let hit = null;
+  for (const t of entry.targets) {
+    if (Math.hypot(t.cx - x, t.cy - y) <= t.radius) {
+      hit = t.id;
+      break;
+    }
+  }
+  res.json({ hit });
+});
+
+app.listen(PORT, () => {
+  console.log(`[server] fuesse.sexy laeuft auf http://localhost:${PORT}`);
+});
--- a/server/sceneGenerator.js
+++ b/server/sceneGenerator.js
@@ -0,0 +1,213 @@
+// Baut aus einer Kategorie ein frisch gemischtes Szenen-Layout: Deko wird zufaellig
+// gestreut, dann werden 3 Ziele darueber versteckt. Weil wir hier platzieren, kennen
+// wir die Ziel-Trefferzonen exakt -> die Klickpruefung kann serverseitig laufen.
+
+import { saveScene } from './sceneStore.js';
+
+const CANVAS_WIDTH = 2000;
+const CANVAS_HEIGHT = 1400;
+const TARGET_COUNT = 3;
+const EDGE_MARGIN = 60;
+const MIN_TARGET_DISTANCE = 220; // Ziele nicht zu dicht beieinander
+
+// Zufaellige, angenehme Hintergrundfarben fuer normale (nicht-thematische) Szenen.
+const PALETTE = [
+  '#fbe7b6', '#d7ecff', '#ffe0ec', '#e5f7e0',
+  '#efe6ff', '#fff2cc', '#dfeff2', '#f4e2d0',
+];
+
+function rand(min, max) {
+  return min + Math.random() * (max - min);
+}
+
+function randInt(min, max) {
+  return Math.floor(rand(min, max + 1));
+}
+
+function pick(array) {
+  return array[randInt(0, array.length - 1)];
+}
+
+function makeSceneId() {
+  return `${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 8)}`;
+}
+
+// 🦶 -> "1f9b6" ; entfernt die Variation-Selector-Bytes (FE0F), joined mit "-".
+// Damit passt es zu gaengigen Emoji-Bildsets (Datei je Codepoint-Sequenz).
+function toCodepoint(glyph) {
+  return [...glyph]
+    .map((ch) => ch.codePointAt(0))
+    .filter((cp) => cp !== 0xfe0f)
+    .map((cp) => cp.toString(16))
+    .join('-');
+}
+
+function randomPosition() {
+  return {
+    cx: rand(EDGE_MARGIN, CANVAS_WIDTH - EDGE_MARGIN),
+    cy: rand(EDGE_MARGIN, CANVAS_HEIGHT - EDGE_MARGIN),
+  };
+}
+
+// Jittered Grid: fuellt die ganze Flaeche lueckenlos, wirkt durch Zufalls-Versatz,
+// -Groesse und -Drehung aber organisch/chaotisch (echtes "Wimmel"-Gefuehl).
+// cellFactor < 1 => Zellen kleiner als die Items => sie ueberlappen => randvoll.
+function gridPositions(cellFactor, avgSize) {
+  const cell = Math.max(16, avgSize * cellFactor);
+  const cols = Math.ceil(CANVAS_WIDTH / cell);
+  const rows = Math.ceil(CANVAS_HEIGHT / cell);
+  const jitter = cell * 0.45;
+  const out = [];
+  for (let r = 0; r < rows; r++) {
+    for (let c = 0; c < cols; c++) {
+      out.push({
+        cx: c * cell + cell / 2 + rand(-jitter, jitter),
+        cy: r * cell + cell / 2 + rand(-jitter, jitter),
+      });
+    }
+  }
+  return out;
+}
+
+// Reihenfolge mischen, damit gleiche Emojis/Props nicht sichtbar "in Reihe" liegen.
+function shuffle(arr) {
+  for (let i = arr.length - 1; i > 0; i--) {
+    const j = randInt(0, i);
+    [arr[i], arr[j]] = [arr[j], arr[i]];
+  }
+  return arr;
+}
+
+// Platz fuer ein Ziel finden, das genug Abstand zu bereits gesetzten Zielen haelt.
+function findTargetPosition(placedTargets) {
+  for (let attempt = 0; attempt < 40; attempt++) {
+    const pos = randomPosition();
+    const clear = placedTargets.every((t) => {
+      const dx = t.cx - pos.cx;
+      const dy = t.cy - pos.cy;
+      return Math.hypot(dx, dy) >= MIN_TARGET_DISTANCE;
+    });
+    if (clear) return pos;
+  }
+  return randomPosition(); // Notfall: nimm irgendeine Position
+}
+
+function buildImageItem(cat, pos) {
+  return {
+    kind: 'image',
+    assetUrl: pick(cat.props),
+    cx: pos.cx,
+    cy: pos.cy,
+    size: rand(cat.minSize, cat.maxSize),
+    rot: rand(-180, 180),
+  };
+}
+
+function buildEmojiItem(cat, pos) {
+  const glyph = pick(cat.propGlyphs);
+  return {
+    kind: 'emoji',
+    glyph,
+    codepoint: toCodepoint(glyph),
+    cx: pos.cx,
+    cy: pos.cy,
+    size: rand(cat.minSize, cat.maxSize),
+    rot: rand(-18, 18),
+  };
+}
+
+// Erzeugt eine Szene fuer die gegebene Kategorie und liefert:
+//   { payload }  -> geht ans Frontend (ohne Kennzeichnung, welche Items Ziele sind)
+// und speichert die Trefferzonen serverseitig unter der sceneId.
+export function generateScene(cat) {
+  const sceneId = makeSceneId();
+  const isEmoji = cat.type === 'emoji';
+
+  // 1) Deko lueckenlos ueber ein jittered Grid streuen -> randvolles Wimmelbild
+  const items = [];
+  const avgSize = (cat.minSize + cat.maxSize) / 2;
+  const cellFactor = cat.cellFactor || (isEmoji ? 0.8 : 0.82);
+  const positions = shuffle(gridPositions(cellFactor, avgSize));
+  for (const pos of positions) {
+    items.push(isEmoji ? buildEmojiItem(cat, pos) : buildImageItem(cat, pos));
+  }
+
+  // 2) Ziele auswaehlen
+  const chosenTargets = [];
+  if (isEmoji) {
+    const glyphPool = shuffle([...cat.targetGlyphs]);
+    for (let i = 0; i < TARGET_COUNT; i++) {
+      const glyph = glyphPool.length > 0 ? glyphPool.pop() : pick(cat.targetGlyphs);
+      chosenTargets.push({ glyph, codepoint: toCodepoint(glyph), name: 'Fuss-Emoji' });
+    }
+  } else {
+    // 3 moeglichst unterschiedliche Ziel-Bilder (Duplikate nur, wenn zu wenige da sind)
+    const pool = shuffle([...cat.targets]);
+    for (let i = 0; i < TARGET_COUNT; i++) {
+      const picked = pool.length > 0 ? pool.pop() : pick(cat.targets);
+      chosenTargets.push({ url: picked.url, name: picked.name });
+    }
+  }
+
+  // 2b) Ablenker-Fuesse streuen: die NICHT gewaehlten Fuesse (nur normale/Clipart-Level).
+  // So muss man die 3 richtigen aus der Legende finden, nicht irgendeinen Fuss.
+  if (!isEmoji && Array.isArray(cat.targets) && cat.targets.length > TARGET_COUNT) {
+    const chosenUrls = new Set(chosenTargets.map((t) => t.url));
+    const decoyPool = cat.targets.filter((t) => !chosenUrls.has(t.url));
+    if (decoyPool.length > 0) {
+      const decoyCount = Math.min(12, decoyPool.length * 2 + 2);
+      for (let i = 0; i < decoyCount; i++) {
+        const d = pick(decoyPool);
+        const pos = randomPosition();
+        items.push({
+          kind: 'image',
+          assetUrl: d.url,
+          cx: pos.cx,
+          cy: pos.cy,
+          size: rand((cat.minSize + cat.maxSize) / 2, cat.maxSize),
+          rot: rand(-25, 25),
+        });
+      }
+    }
+  }
+
+  // 3) Ziele platzieren (kommen ans Ende von items -> werden oben gerendert, also sichtbar)
+  const placedTargets = [];
+  const legend = [];
+  chosenTargets.forEach((t, i) => {
+    const pos = findTargetPosition(placedTargets);
+    const size = isEmoji
+      ? rand(cat.minSize, cat.maxSize)
+      : rand((cat.minSize + cat.maxSize) / 2, cat.maxSize);
+    const id = `t${i}`;
+
+    placedTargets.push({ id, cx: pos.cx, cy: pos.cy, radius: size * 0.55 });
+
+    const item = isEmoji
+      ? { kind: 'emoji', glyph: t.glyph, codepoint: t.codepoint, cx: pos.cx, cy: pos.cy, size, rot: rand(-12, 12) }
+      : { kind: 'image', assetUrl: t.url, cx: pos.cx, cy: pos.cy, size, rot: rand(-25, 25) };
+    items.push(item);
+
+    legend.push(
+      isEmoji
+        ? { id, name: t.name, glyph: t.glyph, codepoint: t.codepoint }
+        : { id, name: t.name, assetUrl: t.url }
+    );
+  });
+
+  // Trefferzonen nur serverseitig ablegen
+  saveScene(sceneId, placedTargets);
+
+  const payload = {
+    sceneId,
+    type: cat.type,
+    category: cat.name,
+    width: CANVAS_WIDTH,
+    height: CANVAS_HEIGHT,
+    background: cat.background || pick(PALETTE),
+    targets: legend,
+    items,
+  };
+
+  return payload;
+}
--- a/server/sceneScanner.js
+++ b/server/sceneScanner.js
@@ -0,0 +1,137 @@
+// Liest den scenes/-Ordner ein und stellt die Kategorie-Metadaten bereit.
+// Eine "Kategorie" = ein Unterordner von scenes/. Der Scan passiert einmal beim
+// Serverstart; ein neuer Ordner wird also erst nach einem Neustart sichtbar.
+
+import { readdirSync, readFileSync, statSync, existsSync } from 'node:fs';
+import { join } from 'node:path';
+
+const IMAGE_EXTENSIONS = ['.svg', '.png', '.webp', '.jpg', '.jpeg', '.gif'];
+
+function isImage(filename) {
+  const lower = filename.toLowerCase();
+  return IMAGE_EXTENSIONS.some((ext) => lower.endsWith(ext));
+}
+
+function listImages(dir) {
+  if (!existsSync(dir)) return [];
+  return readdirSync(dir)
+    .filter((name) => isImage(name))
+    .sort();
+}
+
+function readConfig(categoryDir) {
+  const configPath = join(categoryDir, 'config.json');
+  if (!existsSync(configPath)) return {};
+  try {
+    return JSON.parse(readFileSync(configPath, 'utf8'));
+  } catch (err) {
+    console.warn(`[scanner] config.json in ${categoryDir} ist ungueltig:`, err.message);
+    return {};
+  }
+}
+
+// Liest die gemeinsame Library (Fundgrube): library/props/ (Deko) + library/feet/
+// (alle Fuesse). Daraus generiert der Server normale, nicht-thematische Szenen.
+export function scanLibrary(libraryRoot) {
+  const propsDir = join(libraryRoot, 'props');
+  const feetDir = join(libraryRoot, 'feet');
+
+  const props = listImages(propsDir).map((f) => `/library/props/${f}`);
+  const feet = listImages(feetDir).map((f) => ({
+    id: f.replace(/\.[^.]+$/, ''),
+    name: prettyName(f),
+    url: `/library/feet/${f}`,
+  }));
+
+  if (feet.length < 3) {
+    console.warn(`[scanner] Library hat < 3 Fuesse (${feet.length}) — normale Szenen deaktiviert.`);
+    return null;
+  }
+  if (props.length < 1) {
+    console.warn('[scanner] Library hat keine Deko in props/ — normale Szenen deaktiviert.');
+    return null;
+  }
+  return { props, feet };
+}
+
+// Baut die Liste aller SPEZIAL-Level (Unterordner von scenes/). Ungueltige Ordner
+// werden mit einer Warnung uebersprungen, statt den Start zu blockieren.
+export function scanScenes(scenesRoot) {
+  if (!existsSync(scenesRoot)) {
+    console.warn(`[scanner] scenes/-Ordner fehlt: ${scenesRoot}`);
+    return [];
+  }
+
+  const categories = [];
+
+  for (const entry of readdirSync(scenesRoot)) {
+    const categoryDir = join(scenesRoot, entry);
+    if (!statSync(categoryDir).isDirectory()) continue;
+
+    const config = readConfig(categoryDir);
+    const type = config.type || 'clipart';
+    const name = config.name || entry;
+
+    if (type === 'emoji') {
+      const targets = Array.isArray(config.targets) ? config.targets : [];
+      const props = Array.isArray(config.props) ? config.props : [];
+      if (targets.length < 1 || props.length < 3) {
+        console.warn(`[scanner] "${entry}" (emoji) uebersprungen: braucht targets + genug props in config.json`);
+        continue;
+      }
+      categories.push({
+        id: entry,
+        name,
+        type,
+        background: config.background || '#f4f4f8',
+        propCount: config.propCount || 250,
+        minSize: config.minSize || 42,
+        maxSize: config.maxSize || 78,
+        targetGlyphs: targets,
+        propGlyphs: props,
+      });
+      continue;
+    }
+
+    // clipart / photo: Bilddateien aus props/ und targets/
+    const propsDir = join(categoryDir, 'props');
+    const targetsDir = join(categoryDir, 'targets');
+    const props = listImages(propsDir).map((f) => `/scenes/${entry}/props/${f}`);
+    const targets = listImages(targetsDir).map((f) => ({
+      id: f.replace(/\.[^.]+$/, ''),
+      name: prettyName(f),
+      url: `/scenes/${entry}/targets/${f}`,
+    }));
+
+    if (targets.length < 3) {
+      console.warn(`[scanner] "${entry}" uebersprungen: braucht mind. 3 Bilder in targets/ (gefunden: ${targets.length})`);
+      continue;
+    }
+    if (props.length < 1) {
+      console.warn(`[scanner] "${entry}" uebersprungen: keine Bilder in props/`);
+      continue;
+    }
+
+    categories.push({
+      id: entry,
+      name,
+      type,
+      background: config.background || '#f4f4f8',
+      propCount: config.propCount || 60,
+      minSize: config.minSize || 70,
+      maxSize: config.maxSize || 130,
+      props,
+      targets,
+    });
+  }
+
+  return categories;
+}
+
+// "ballerina-fuss.svg" -> "Ballerina Fuss"
+function prettyName(filename) {
+  return filename
+    .replace(/\.[^.]+$/, '')
+    .replace(/[-_]+/g, ' ')
+    .replace(/\b\w/g, (c) => c.toUpperCase());
+}
--- a/server/sceneStore.js
+++ b/server/sceneStore.js
@@ -0,0 +1,29 @@
+// Haelt die Trefferzonen jeder generierten Szene serverseitig, damit Klicks
+// geprueft werden koennen, ohne die Zielpositionen je ans Frontend zu schicken.
+// Einfache Groessen- und Zeitbegrenzung verhindert ein Speicher-Leck bei vielen
+// Aufrufen.
+
+const MAX_ENTRIES = 500;
+const TTL_MS = 1000 * 60 * 30; // 30 Minuten
+
+const scenes = new Map(); // sceneId -> { targets, createdAt }
+
+function evictIfNeeded() {
+  const now = Date.now();
+  for (const [id, entry] of scenes) {
+    if (now - entry.createdAt > TTL_MS) scenes.delete(id);
+  }
+  while (scenes.size > MAX_ENTRIES) {
+    const oldest = scenes.keys().next().value; // Map behaelt Einfuege-Reihenfolge
+    scenes.delete(oldest);
+  }
+}
+
+export function saveScene(sceneId, targets) {
+  scenes.set(sceneId, { targets, createdAt: Date.now() });
+  evictIfNeeded();
+}
+
+export function getScene(sceneId) {
+  return scenes.get(sceneId) || null;
+}