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:
@@ -118,15 +118,27 @@ html, body {
|
||||
touch-action: none; /* eigene Pinch/Pan-Gesten */
|
||||
}
|
||||
|
||||
#scene-svg {
|
||||
#stage {
|
||||
cursor: grab;
|
||||
-webkit-touch-callout: none; /* kein Langdruck-Menü auf iOS */
|
||||
}
|
||||
#stage:active { cursor: grabbing; }
|
||||
|
||||
#world {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transform-origin: 0 0;
|
||||
will-change: transform;
|
||||
}
|
||||
#scene-img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
cursor: grab;
|
||||
pointer-events: none;
|
||||
-webkit-user-drag: none;
|
||||
user-select: none;
|
||||
}
|
||||
#scene-svg:active { cursor: grabbing; }
|
||||
|
||||
.item { pointer-events: auto; }
|
||||
|
||||
.category-name {
|
||||
position: absolute;
|
||||
@@ -168,14 +180,22 @@ html, body {
|
||||
#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; }
|
||||
/* ---- Ping-Feedback (Treffer/Daneben) ---- */
|
||||
.ping {
|
||||
position: absolute;
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
margin: -23px 0 0 -23px; /* auf (left/top) zentrieren */
|
||||
border-radius: 50%;
|
||||
border: 6px solid var(--ok);
|
||||
pointer-events: none;
|
||||
animation: ping 0.6s ease-out forwards;
|
||||
}
|
||||
.ping-ok { border-color: var(--ok); }
|
||||
.ping-miss { border-color: var(--miss); }
|
||||
@keyframes ping {
|
||||
0% { r: 8; opacity: 0.95; stroke-width: 8; }
|
||||
100% { r: 60; opacity: 0; stroke-width: 1; }
|
||||
0% { transform: scale(0.3); opacity: 0.95; }
|
||||
100% { transform: scale(2.3); opacity: 0; }
|
||||
}
|
||||
|
||||
/* ---- Toast ---- */
|
||||
|
||||
Reference in New Issue
Block a user