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/public/css/style.css
+++ b/public/css/style.css
@@ -0,0 +1,259 @@
+/* fuesse.sexy — verspielter, klarer Look im Dark Mode. Vollflaechig, kein Scrollen. */
+
+:root {
+  --pink: #ff4d8d;
+  --pink-soft: #ff86b3;
+  --ink: #ececf5;
+  --muted: #a49fc0;
+  --bg: #0e0e18;      /* Seite / Letterbox */
+  --panel: #1b1b2c;   /* Leiste, Buttons */
+  --card: #262640;    /* Legenden-Karten */
+  --border: #34345020;
+  --border-solid: #3a3a58;
+  --ok: #34d399;
+  --miss: #f87171;
+}
+
+* { box-sizing: border-box; }
+
+html, body {
+  margin: 0;
+  height: 100%;
+  overflow: hidden;
+  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+  color: var(--ink);
+  background: var(--bg);
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+#game {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+/* ---- Gesucht-Leiste ---- */
+#legend {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  padding: 8px 14px;
+  background: var(--panel);
+  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.4);
+  border-bottom: 1px solid var(--border-solid);
+  z-index: 5;
+}
+
+.legend-label { display: flex; flex-direction: column; line-height: 1.1; }
+.brand {
+  font-weight: 800;
+  font-size: 20px;
+  color: var(--pink);
+  letter-spacing: -0.5px;
+}
+.brand-dot { color: var(--pink-soft); }
+.legend-sub { font-size: 12px; color: var(--muted); }
+
+#legend-items {
+  display: flex;
+  gap: 10px;
+  flex: 1;
+  overflow-x: auto;
+}
+
+.legend-item {
+  flex: 0 0 auto;
+  width: 58px;
+  height: 58px;
+  border-radius: 14px;
+  background: var(--card);
+  border: 3px solid var(--border-solid);
+  display: grid;
+  place-items: center;
+  position: relative;
+  transition: transform 0.15s ease, opacity 0.2s ease, border-color 0.2s ease;
+}
+.legend-thumb { width: 44px; height: 44px; display: grid; place-items: center; }
+.legend-thumb img { max-width: 100%; max-height: 100%; }
+.legend-emoji { font-size: 34px; line-height: 1; }
+
+.legend-item.found {
+  border-color: var(--ok);
+  opacity: 0.5;
+}
+.legend-item.found::after {
+  content: "✓";
+  position: absolute;
+  right: -6px;
+  top: -8px;
+  width: 22px;
+  height: 22px;
+  border-radius: 50%;
+  background: var(--ok);
+  color: #0e0e18;
+  font-size: 14px;
+  font-weight: 800;
+  display: grid;
+  place-items: center;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
+}
+
+.legend-counter {
+  flex: 0 0 auto;
+  font-weight: 800;
+  font-size: 18px;
+  color: var(--pink-soft);
+  background: var(--card);
+  padding: 6px 12px;
+  border-radius: 999px;
+}
+
+/* ---- Buehne / Karte ---- */
+#stage {
+  position: relative;
+  flex: 1;
+  overflow: hidden;
+  background: var(--bg);
+  touch-action: none; /* eigene Pinch/Pan-Gesten */
+}
+
+#scene-svg {
+  width: 100%;
+  height: 100%;
+  display: block;
+  cursor: grab;
+}
+#scene-svg:active { cursor: grabbing; }
+
+.item { pointer-events: auto; }
+
+.category-name {
+  position: absolute;
+  left: 12px;
+  bottom: 12px;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--muted);
+  background: rgba(0, 0, 0, 0.45);
+  padding: 4px 10px;
+  border-radius: 999px;
+  pointer-events: none;
+}
+
+/* ---- Zoom-Steuerung ---- */
+#controls {
+  position: absolute;
+  right: 14px;
+  bottom: 14px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  z-index: 4;
+}
+#controls button {
+  width: 46px;
+  height: 46px;
+  border-radius: 12px;
+  border: 1px solid var(--border-solid);
+  background: var(--panel);
+  color: var(--ink);
+  font-size: 22px;
+  font-weight: 700;
+  cursor: pointer;
+  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.5);
+  display: grid;
+  place-items: center;
+}
+#controls button:hover { color: var(--pink-soft); border-color: var(--pink); }
+#controls button:active { transform: translateY(1px); }
+
+/* ---- Ping-Feedback (im SVG) ---- */
+.ping { pointer-events: none; }
+.ping-ok { stroke: var(--ok); }
+.ping-miss { stroke: var(--miss); }
+.ping { animation: ping 0.6s ease-out forwards; }
+@keyframes ping {
+  0% { r: 8; opacity: 0.95; stroke-width: 8; }
+  100% { r: 60; opacity: 0; stroke-width: 1; }
+}
+
+/* ---- Toast ---- */
+#toast {
+  position: absolute;
+  left: 50%;
+  bottom: 78px;
+  transform: translateX(-50%) translateY(10px);
+  background: rgba(0, 0, 0, 0.85);
+  color: #fff;
+  padding: 8px 16px;
+  border-radius: 999px;
+  font-size: 14px;
+  border: 1px solid var(--border-solid);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.2s ease, transform 0.2s ease;
+}
+#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
+
+/* ---- Lade-Spinner ---- */
+#loading {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  place-items: center;
+  background: rgba(14, 14, 24, 0.8);
+  z-index: 6;
+}
+.spinner {
+  width: 46px;
+  height: 46px;
+  border: 5px solid var(--border-solid);
+  border-top-color: var(--pink);
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+@keyframes spin { to { transform: rotate(360deg); } }
+
+/* ---- Gewinn-Overlay ---- */
+#win-overlay {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  place-items: center;
+  background: rgba(0, 0, 0, 0.7);
+  z-index: 10;
+}
+.win-card {
+  background: var(--panel);
+  padding: 32px 40px;
+  border-radius: 24px;
+  text-align: center;
+  border: 1px solid var(--border-solid);
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
+  animation: pop 0.3s ease;
+}
+.win-emoji { font-size: 52px; }
+.win-card h2 { margin: 10px 0 20px; color: var(--pink-soft); }
+#next-scene {
+  border: none;
+  background: var(--pink);
+  color: #fff;
+  font-size: 18px;
+  font-weight: 700;
+  padding: 12px 28px;
+  border-radius: 999px;
+  cursor: pointer;
+  box-shadow: 0 6px 18px rgba(255, 77, 141, 0.45);
+}
+#next-scene:hover { background: var(--pink-soft); }
+@keyframes pop { from { transform: scale(0.85); opacity: 0; } to { transform: scale(1); opacity: 1; } }
+
+.hidden { display: none !important; }
+
+/* Mobile */
+@media (max-width: 560px) {
+  .brand { font-size: 16px; }
+  .legend-item { width: 50px; height: 50px; }
+  .legend-thumb { width: 38px; height: 38px; }
+}
--- a/public/emoji/README.md
+++ b/public/emoji/README.md
@@ -0,0 +1,30 @@
+# Emoji-Bilder-Set (optional, für den Emoji-Level)
+
+Damit die Emoji-Level auf **jedem Gerät gleich** aussehen (statt je nach Betriebssystem
+anders), rendert das Spiel Emojis als **Bilder** aus diesem Ordner — falls welche da sind.
+
+## So funktioniert's
+
+- Dateiname = **Codepoint(s) in Kleinbuchstaben-Hex**, mit `-` verbunden, `.png`.
+  - 🦶 (U+1F9B6) → `1f9b6.png`
+  - 👣 (U+1F463) → `1f463.png`
+- Der Variation-Selector `FE0F` wird weggelassen (z.B. ❤️ → `2764.png`).
+
+## Ist der Ordner leer?
+
+Dann fällt das Spiel automatisch auf **native Emojis** zurück (Textzeichen). Es ist
+sofort spielbar — sieht aber je nach Gerät unterschiedlich aus. Sobald du ein Set
+einlegst, wird es überall einheitlich.
+
+## Welches Set?
+
+- **Apple-Look:** Du kannst Apple-Emoji-PNGs hier ablegen. ⚠️ Hinweis: Apples
+  Emoji-Grafiken sind **urheberrechtlich geschützt** (Apple-IP). Sie auf einer
+  öffentlichen Domain auszuliefern ist rechtlich eine Grauzone — das ist deine
+  Entscheidung. Das Projekt selbst bündelt bewusst keine Apple-Grafiken.
+- **Frei lizenziert (überall gleich, sauber nutzbar):**
+  - **Twemoji** (CC-BY) — https://github.com/twitter/twemoji
+  - **OpenMoji** (CC-BY-SA) — https://openmoji.org
+  - **Noto Emoji** (Apache-2.0) — https://github.com/googlefonts/noto-emoji
+
+Lade die gewünschten PNGs herunter und benenne sie nach obigem Codepoint-Schema.
--- a/public/index.html
+++ b/public/index.html
@@ -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>
--- a/public/js/app.js
+++ b/public/js/app.js
@@ -0,0 +1,88 @@
+// App-Flow: beim Laden sofort eine zufaellige Szene holen (kein Start-Screen, keine
+// Auswahl). Alle 3 Fuesse finden -> Gewinn-Overlay -> "Weiter" laedt die naechste.
+
+import { Scene } from './scene.js';
+import { Legend } from './legend.js';
+
+const svg = document.getElementById('scene-svg');
+const layer = document.getElementById('scene-layer');
+const stage = document.getElementById('stage');
+const loading = document.getElementById('loading');
+const winOverlay = document.getElementById('win-overlay');
+const toast = document.getElementById('toast');
+
+const scene = new Scene(svg, layer, stage);
+const legend = new Legend(
+  document.getElementById('legend-items'),
+  document.getElementById('legend-counter')
+);
+
+let current = null; // aktuelles Szenen-Payload
+let busy = false;
+
+function showLoading(on) {
+  loading.classList.toggle('hidden', !on);
+}
+
+function showToast(message) {
+  toast.textContent = message;
+  toast.classList.add('show');
+  clearTimeout(showToast._t);
+  showToast._t = setTimeout(() => toast.classList.remove('show'), 900);
+}
+
+async function loadScene() {
+  showLoading(true);
+  winOverlay.classList.add('hidden');
+  try {
+    const res = await fetch('/api/scene');
+    if (!res.ok) throw new Error('Szene konnte nicht geladen werden.');
+    current = await res.json();
+    await scene.render(current);
+    scene.resetView();
+    legend.render(current.targets);
+    document.getElementById('category-name').textContent = current.category || '';
+  } catch (err) {
+    console.error(err);
+    showToast('Ups — Szene konnte nicht geladen werden.');
+  } finally {
+    showLoading(false);
+  }
+}
+
+async function handleTap({ x, y }) {
+  if (busy || !current) return;
+  busy = true;
+  try {
+    const res = await fetch(`/api/scene/${current.sceneId}/guess`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ x, y }),
+    });
+    const data = await res.json();
+    if (data.hit) {
+      const isNew = legend.markFound(data.hit);
+      scene.pingAt(x, y, true);
+      if (isNew && legend.allFound()) {
+        setTimeout(() => winOverlay.classList.remove('hidden'), 400);
+      }
+    } else {
+      scene.pingAt(x, y, false);
+    }
+  } catch (err) {
+    console.error(err);
+  } finally {
+    busy = false;
+  }
+}
+
+scene.onTap(handleTap);
+
+// Steuerung
+document.getElementById('zoom-in').addEventListener('click', () => scene.zoomIn());
+document.getElementById('zoom-out').addEventListener('click', () => scene.zoomOut());
+document.getElementById('reset-view').addEventListener('click', () => scene.resetView());
+document.getElementById('next-scene').addEventListener('click', loadScene);
+
+// Los geht's — sofort.
+loadScene();
--- a/public/js/legend.js
+++ b/public/js/legend.js
@@ -0,0 +1,70 @@
+// Die "Gesucht"-Leiste oben: zeigt die 3 zu findenden Fuesse und hakt gefundene ab.
+
+const EMOJI_BASE = '/emoji/';
+
+export class Legend {
+  constructor(container, counterEl) {
+    this.container = container;
+    this.counterEl = counterEl;
+    this.found = new Set();
+    this.total = 0;
+  }
+
+  render(targets) {
+    this.found.clear();
+    this.total = targets.length;
+    this.container.innerHTML = '';
+
+    for (const t of targets) {
+      const card = document.createElement('div');
+      card.className = 'legend-item';
+      card.dataset.id = t.id;
+
+      const thumb = document.createElement('div');
+      thumb.className = 'legend-thumb';
+
+      if (t.assetUrl) {
+        const img = document.createElement('img');
+        img.src = t.assetUrl;
+        img.alt = t.name || 'Fuss';
+        thumb.appendChild(img);
+      } else if (t.glyph) {
+        // Emoji: Bild aus Set, sonst Textzeichen
+        const img = document.createElement('img');
+        img.alt = t.name || 'Fuss';
+        img.onerror = () => {
+          const span = document.createElement('span');
+          span.className = 'legend-emoji';
+          span.textContent = t.glyph;
+          img.replaceWith(span);
+        };
+        img.src = EMOJI_BASE + t.codepoint + '.png';
+        thumb.appendChild(img);
+      }
+
+      card.appendChild(thumb);
+      this.container.appendChild(card);
+    }
+
+    this._updateCounter();
+  }
+
+  markFound(id) {
+    if (this.found.has(id)) return false;
+    this.found.add(id);
+    const card = this.container.querySelector(`.legend-item[data-id="${id}"]`);
+    if (card) card.classList.add('found');
+    this._updateCounter();
+    return true;
+  }
+
+  allFound() {
+    return this.found.size >= this.total && this.total > 0;
+  }
+
+  _updateCounter() {
+    if (this.counterEl) {
+      this.counterEl.textContent = `${this.found.size} / ${this.total}`;
+    }
+  }
+}
--- a/public/js/scene.js
+++ b/public/js/scene.js
@@ -0,0 +1,228 @@
+// Rendert eine Szene und liefert das "Google-Maps-Gefuehl" via panzoom.
+//
+// WICHTIG (Performance): Alle Items werden EINMAL in ein einzelnes Bild (Canvas)
+// gezeichnet. panzoom bewegt danach nur dieses eine <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);
+  }
+}