Mobile-Fixes, Cover-Rendering, aufrechte Objekte, Fuss-Favicon

- Rendering von SVG-viewBox auf sauberes DOM-Modell (div#world > img) umgestellt:
  behebt den Pinch-Fokus-Bug ("zoomt in die Ecke") auf Touch
- Szene fuellt jetzt bildschirmfuellend (Cover) mit eigener Cover-Klemmung statt
  Letterbox-Balken (v.a. mobil im Hochformat)
- Tippen ueber Pointer-Events statt click (funktioniert auf Touch, wo panzoom das
  synthetische click unterdrueckt); Mehrfinger/Pinch zaehlt nie als Tipp
- touch-action:none aufs Bild -> fluessiges Pinch-Zoom
- Objekte aufrecht (leichte Neigung) statt zufaellig gekippt + dezenter Tiefen-Verlauf
  -> wirkt wie eine Szene statt "Haufen"
- Favicon: Fuss-Emoji

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Guido
2026-08-04 18:50:44 +02:00
parent 7cc08ccadd
commit b95464670a
5 changed files with 167 additions and 99 deletions

View File

@@ -1,6 +1,7 @@
<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="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='88'>🦶</text></svg>" />
<link rel="stylesheet" href="/css/style.css" />
<div id="game">
@@ -16,9 +17,9 @@
<!-- 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="world">
<img id="scene-img" alt="Wimmelbild" draggable="false" />
</div>
<div id="category-name" class="category-name"></div>