HUD-Elemente überlappen sich auf kleinen und kurzen Viewports (320×640, 844×390) #5

New issue

Open

opened 2026-08-29 01:41:05 +02:00 by G1LL1 · 2 comments

G1LL1 commented

2026-08-29 01:41:05 +02:00

(Migrated from gitlab.g1ll1.com)

Komponente: CSS/HUD
Betroffene Version: main @ 238ed66, index.html Zeilen 136–152

Beschreibung

Strecke, Sektorname und Pause-Button liegen in derselben Zeile und schieben sich ineinander;
zusatätzlich liegen Fokus-Balken und Fokus-Button übereinander.

Gemessene Überlappungen (Bounding-Rects, Spielzustand PLAYING, realistische Anzeigewerte):

Viewport	Stage-Höhe	Stage-Font	Überlappungen
320 × 640 (Hochformat)	180 px	11 px	`hudDist ↔ hudSector`, `hudSector ↔ btnPause`, `focusWrap ↔ btnFocus`
844 × 390 (iPhone Querformat)	390 px	11 px	`hudSector ↔ btnPause`
1366 × 768 (Desktop)	768 px	14.2 px	keine

Bestätigt durch Screenshot im 320er-Hochformat: „18 m“ liegt halbhinter „Morgenlicht · 1“,
der Sektortext läuft unter dem 44×44-Pause-Button.

Ursache

/* index.html:136-152 */
.hud-top { display:flex; justify-content:space-between; padding:.7em .9em; gap:.6em; }
.hud-mid { position:absolute; top:.7em; left:50%; transform:translateX(-50%); }  /* Strecke: zentriert */
.hud-right{ text-align:right; padding-right:3.4em; }                             /* Sektor: rechtsbündig */
#btnPause{ top:.6em; right:.6em; width:44px; height:44px; }                      /* fix 44 CSS-px */
#focusWrap{ left:.9em; bottom:1em; width:min(12em,34%); }                        /* links, relativ */
#btnFocus { left:50%; transform:translateX(-50%); bottom:1.1em; min-width:132px; }/* zentriert */

.hud-mid (Strecke, font-size:1.9em) ist prozentual zentriert, .hud-right (Sektor)
rechtsbündig – auf schmalen Bühnen treffen beide aufeinander.
.hud-right reserviert 3.4em für den Pause-Button. Bei Stage-Font 11 px sind das 37,4 px,
der Button belegt aber right:.6em (6.6px) … 50.6px. Die Reservierung ist also zu klein und
skaliert nicht mit dem fixen Button.
#focusWrap (links, Breite relativ) und #btnFocus (zentriert, min-width:132px) belegen
dieselbe Zeile; bei 320 px Stage-Breite inevitable Überlappung
(focusWrap endet bei ≈ 130 px, btnFocus beginnt bei ≈ 94 px).

Reproduktion

Playwright:

const st = document.getElementById('stage').getBoundingClientRect();
const r = id => document.getElementById(id).getBoundingClientRect();
// PLAYING, S.distance hoch gesetzt, updateHud()gelaufen
// -> Rects von hudDist / hudSector / btnPause / focusWrap / btnFocus auf Schnittmengen prüfen

Auswirkung

Lesbarkeit derHUD-Einträge auf Mobilgeräten nicht gegeben (Strecke und Sektor -Werte nicht
entzifferbar).
Pause-Button teilweise verdeckt → Touch-Ziel beeinträchtigt (AGENTS.md: „mindestens
44 × 44 CSS-Pixel“).
AGENTS.md-Testpunkte „Hochformat auf einem kleinen Mobilgerät“, „kleine Breite von etwa 320
Pixeln“, „Querformat auf einem Mobilgerät“ schlagen fehl.

Lösungsvorschlag

Pause-Reservierung fest an die Button-Größe koppeln:
.hud-right { padding-right: calc(44px + 1.2em); }
Strecke nicht absolut zentrieren, sondern als drittes Flex-Kind in .hud-top einreihen
(flex:1 1 auto; text-align:center; min-width:0) und Sektor/Seite bei schmaler Bühne
umbrechen lassen.
Fokus-Balken und Fokus-Button in einem gestapelten Container anordnen
(display:grid; gap:.4em), statt beide absolut zu positionieren.
Ab Stage-Breite < ≈ 420 px den Sektor auf die Nummer reduzieren (Sektor 4 statt
Neonregen · 4).
Sichtbarer Regressionstest: Überlappungsprüfung der fünf Rects bei 320×640, 375×667,
844×390, 1366×768.

Dokumentiert in gitlab-issues/05-hud-ueberlappung-kleine-viewports.md (Commit 238ed66). Alle Befunde ausgeführt und gemessen; Repro-Schritte im Text.

**Komponente:** CSS/HUD **Betroffene Version:** `main` @ `238ed66`, `index.html` Zeilen 136–152 ## Beschreibung Strecke, Sektorname und Pause-Button liegen in derselben Zeile und schieben sich ineinander; zusatätzlich liegen Fokus-Balken und Fokus-Button übereinander. Gemessene Überlappungen (Bounding-Rects, Spielzustand `PLAYING`, realistische Anzeigewerte): | Viewport | Stage-Höhe | Stage-Font | Überlappungen | |---|---|---|---| | 320 × 640 (Hochformat) | 180 px | 11 px | `hudDist ↔ hudSector`, `hudSector ↔ btnPause`, `focusWrap ↔ btnFocus` | | 844 × 390 (iPhone Querformat) | 390 px | 11 px | `hudSector ↔ btnPause` | | 1366 × 768 (Desktop) | 768 px | 14.2 px | keine | Bestätigt durch Screenshot im 320er-Hochformat: „18 m“ liegt halbhinter „Morgenlicht · 1“, der Sektortext läuft unter dem 44×44-Pause-Button. ## Ursache ```css /* index.html:136-152 */ .hud-top { display:flex; justify-content:space-between; padding:.7em .9em; gap:.6em; } .hud-mid { position:absolute; top:.7em; left:50%; transform:translateX(-50%); } /* Strecke: zentriert */ .hud-right{ text-align:right; padding-right:3.4em; } /* Sektor: rechtsbündig */ #btnPause{ top:.6em; right:.6em; width:44px; height:44px; } /* fix 44 CSS-px */ #focusWrap{ left:.9em; bottom:1em; width:min(12em,34%); } /* links, relativ */ #btnFocus { left:50%; transform:translateX(-50%); bottom:1.1em; min-width:132px; }/* zentriert */ ``` 1. `.hud-mid` (Strecke, `font-size:1.9em`) ist prozentual zentriert, `.hud-right` (Sektor) rechtsbündig – auf schmalen Bühnen treffen beide aufeinander. 2. `.hud-right` reserviert `3.4em` für den Pause-Button. Bei Stage-Font 11 px sind das 37,4 px, der Button belegt aber `right:.6em (6.6px) … 50.6px`. Die Reservierung ist also zu klein und skaliert nicht mit dem fixen Button. 3. `#focusWrap` (links, Breite relativ) und `#btnFocus` (zentriert, `min-width:132px`) belegen dieselbe Zeile; bei 320 px Stage-Breite inevitable Überlappung (`focusWrap` endet bei ≈ 130 px, `btnFocus` beginnt bei ≈ 94 px). ## Reproduktion Playwright: ```js const st = document.getElementById('stage').getBoundingClientRect(); const r = id => document.getElementById(id).getBoundingClientRect(); // PLAYING, S.distance hoch gesetzt, updateHud()gelaufen // -> Rects von hudDist / hudSector / btnPause / focusWrap / btnFocus auf Schnittmengen prüfen ``` ## Auswirkung * Lesbarkeit derHUD-Einträge auf Mobilgeräten nicht gegeben (Strecke und Sektor -Werte nicht entzifferbar). * Pause-Button teilweise verdeckt → Touch-Ziel beeinträchtigt (AGENTS.md: „mindestens 44 × 44 CSS-Pixel“). * AGENTS.md-Testpunkte „Hochformat auf einem kleinen Mobilgerät“, „kleine Breite von etwa 320 Pixeln“, „Querformat auf einem Mobilgerät“ schlagen fehl. ## Lösungsvorschlag * Pause-Reservierung fest an die Button-Größe koppeln: `.hud-right { padding-right: calc(44px + 1.2em); }` * Strecke nicht absolut zentrieren, sondern als drittes Flex-Kind in `.hud-top` einreihen (`flex:1 1 auto; text-align:center; min-width:0`) und Sektor/Seite bei schmaler Bühne umbrechen lassen. * Fokus-Balken und Fokus-Button in einem gestapelten Container anordnen (`display:grid; gap:.4em`), statt beide absolut zu positionieren. * Ab Stage-Breite < ≈ 420 px den Sektor auf die Nummer reduzieren (`Sektor 4` statt `Neonregen · 4`). * Sichtbarer Regressionstest: Überlappungsprüfung der fünf Rects bei 320×640, 375×667, 844×390, 1366×768. --- *Dokumentiert in `gitlab-issues/05-hud-ueberlappung-kleine-viewports.md` (Commit `238ed66`). Alle Befunde ausgeführt und gemessen; Repro-Schritte im Text.*

G1LL1 commented

2026-08-29 01:45:24 +02:00

(Migrated from gitlab.g1ll1.com)

changed the description

G1LL1 commented

2026-08-29 01:48:08 +02:00

(Migrated from gitlab.g1ll1.com)

changed the description