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

New issue

Closed

opened 2026-08-31 21:01:54 +02:00 by gilli · 1 comment

gilli commented

2026-08-31 21:01:54 +02:00

Owner

⁨⁩⁨HUD-Elemente überlappen sich auf kleinen und kurzen Viewports (320×640, 844×390)⁩ ⁨⁩#⁨5⁩⁨⁩"
By ⁨⁩⁨gilli⁩⁨⁩ — ⁨⁨⁩Closed⁨⁩⁩
accessibility
bug
medium
responsive
ui

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 issues/05-hud-ueberlappung-kleine-viewports.md (Commit c171694).

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

1 comments

⁨⁩⁨HUD-Elemente überlappen sich auf kleinen und kurzen Viewports (320×640, 844×390)⁩ ⁨⁩#⁨5⁩⁨⁩" By ⁨⁩⁨gilli⁩⁨⁩ — ⁨⁨⁩Closed⁨⁩⁩ accessibility bug medium responsive ui > **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 `issues/05-hud-ueberlappung-kleine-viewports.md` (Commit `c171694`).* 1 comments

gilli added the

labels

2026-08-31 21:01:54 +02:00

gilli referenced this issue from a commit

2026-09-01 08:43:28 +02:00

HUD rückt in Bänder statt in absolut gesetzte Einzelpunkte (#5)

gilli commented

2026-09-01 08:45:01 +02:00

Author

Owner

Behoben in af4115b (main) – Layout in CSS-Bändern statt absolut gesetzter Einzelpunkte.

Kopfzeile: eine Flex-Zeile aus drei Zellen. Die Pause-Spalte wird mit
padding-right:calc(.9em + 44px + .6em) an die echte Buttonbreite gekoppelt (vorher
3.4em, bei Stage-Font 11 px = 37,4 px für einen 50,6-px-Button). Die Strecke ist
drittes Flex-Kind (flex:0 1 auto) statt absolut zentriert, Punkte und Sektor teilen
die Restbreite je zur Hälfte – die Strecke bleibt mittig.
Fokus-Zeile: #focusDock nimmt Fokus-Balken, Fokus-Button und Greifen-Hinweis in
eine Flex-Zeile. focusWrap ↔ btnFocus kann es damit nicht mehr geben.
Meldungen: #hudMsgs lässt Rekord-Banner und Melde-Text zwischen Kopfzeile und
Fokus-Streifen fließen; flashPop skaliert statt vertikal zu wandern. Der Toast bleibt
außerhalb des HUDs (er muss im Menü und in den Einstellungen sichtbar sein) und hält
sich die Zeile über dem Fokus-Streifen frei.
Schmale Bühne: Sektorname und -nummer sind getrennte Spans, unter 560 px Bühnenbreite
entfällt der Name. Dafür zeigt der Endlosmodus die Sektornummer jetzt immer (vorher nur
der Name – auf schmaler Bühne wäre nichts übrig geblieben). Die „Endlos“-Kennzeichnung aus
#11 fehlt weiterhin, das Issue bleibt offen.
Zusätzliche Überlappungen, die das Issue nicht nannte: der Greifen-Hinweis lag auf dem
Fokus-Button (bis 1366×768 hinauf) und das Rekord-Banner (top:9%) in der Strecken-Angabe;
beide sind jetzt in den Bändern untergebracht. #countdownBg ist pointer-events:none –
die Zahl lag über Canvas-Eingaben und HUD-Buttons, während des Countdowns war weder
Wischen noch Pausieren möglich.
Verdichtungsregeln für Bühnenhöhen ≤ 260 px (Meldungsstapel, Countdown,
Zonenbeschriftung der Wischhilfe) und für Breiten ≤ 380/300 px (Schriften).

Test: tests/browser_issue5.py (neu, Playwright, in tests/run-all.sh) legt den rAF-Loop
still, fährt den ungünstigsten Anzeigewert (127.365 Punkte, 98.765 m, längster Sektorname,
alle Hinweise gleichzeitig) und misst die gemalten Textbereiche per Range – die
Element-Box wäre nach dem Umbau so breit wie die Flexzelle und hätte Überlauf verschluckt.
Pro Viewport (280×653, 320×640, 375×667, 568×320, 844×390, 1024×768, 1366×768): keine
Paar-Überlappung, kein Text über dem eigenen Feld, alles innerhalb der Bühne, Pause- und
Fokus-Button ≥ 44 CSS-px, Mittelpunkte per elementFromPoint frei und per Klick bedienbar,
Sektornummer sichtbar, Sektor-Ablesung im Endlosmodus nicht leer.

Gegen git show HEAD:index.html rot (hudDist↔hudSector 1937 px², hudSector↔btnPause
104 px², focusWrap↔btnFocus 580 px², btnFocus↔grabHint 2197 px²,
hudDist↔recordBanner 918 px²), mit Fix grün. PULSE_HTML= wählt die gemessene Fassung.
Die übrigen Suiten (issue1/2/3/4/13/14, Soak, Browser-Smoke, browser_issue14) bleiben grün.

Behoben in `af4115b` (`main`) – Layout in CSS-Bändern statt absolut gesetzter Einzelpunkte. * **Kopfzeile**: eine Flex-Zeile aus drei Zellen. Die Pause-Spalte wird mit `padding-right:calc(.9em + 44px + .6em)` an die echte Buttonbreite gekoppelt (vorher `3.4em`, bei Stage-Font 11 px = 37,4 px für einen 50,6-px-Button). Die Strecke ist drittes Flex-Kind (`flex:0 1 auto`) statt absolut zentriert, Punkte und Sektor teilen die Restbreite je zur Hälfte – die Strecke bleibt mittig. * **Fokus-Zeile**: `#focusDock` nimmt Fokus-Balken, Fokus-Button und Greifen-Hinweis in eine Flex-Zeile. `focusWrap ↔ btnFocus` kann es damit nicht mehr geben. * **Meldungen**: `#hudMsgs` lässt Rekord-Banner und Melde-Text zwischen Kopfzeile und Fokus-Streifen fließen; `flashPop` skaliert statt vertikal zu wandern. Der Toast bleibt außerhalb des HUDs (er muss im Menü und in den Einstellungen sichtbar sein) und hält sich die Zeile über dem Fokus-Streifen frei. * **Schmale Bühne**: Sektorname und -nummer sind getrennte Spans, unter 560 px Bühnenbreite entfällt der Name. Dafür zeigt der Endlosmodus die Sektornummer jetzt immer (vorher nur der Name – auf schmaler Bühne wäre nichts übrig geblieben). Die „Endlos“-Kennzeichnung aus #11 fehlt weiterhin, das Issue bleibt offen. * **Zusätzliche Überlappungen, die das Issue nicht nannte**: der Greifen-Hinweis lag auf dem Fokus-Button (bis 1366×768 hinauf) und das Rekord-Banner (`top:9%`) in der Strecken-Angabe; beide sind jetzt in den Bändern untergebracht. `#countdownBg` ist `pointer-events:none` – die Zahl lag über Canvas-Eingaben und HUD-Buttons, während des Countdowns war weder Wischen noch Pausieren möglich. * Verdichtungsregeln für Bühnenhöhen ≤ 260 px (Meldungsstapel, Countdown, Zonenbeschriftung der Wischhilfe) und für Breiten ≤ 380/300 px (Schriften). Test: `tests/browser_issue5.py` (neu, Playwright, in `tests/run-all.sh`) legt den rAF-Loop still, fährt den ungünstigsten Anzeigewert (127.365 Punkte, 98.765 m, längster Sektorname, alle Hinweise gleichzeitig) und misst die **gemalten** Textbereiche per Range – die Element-Box wäre nach dem Umbau so breit wie die Flexzelle und hätte Überlauf verschluckt. Pro Viewport (280×653, 320×640, 375×667, 568×320, 844×390, 1024×768, 1366×768): keine Paar-Überlappung, kein Text über dem eigenen Feld, alles innerhalb der Bühne, Pause- und Fokus-Button ≥ 44 CSS-px, Mittelpunkte per `elementFromPoint` frei und per Klick bedienbar, Sektornummer sichtbar, Sektor-Ablesung im Endlosmodus nicht leer. Gegen `git show HEAD:index.html` rot (`hudDist↔hudSector` 1937 px², `hudSector↔btnPause` 104 px², `focusWrap↔btnFocus` 580 px², `btnFocus↔grabHint` 2197 px², `hudDist↔recordBanner` 918 px²), mit Fix grün. `PULSE_HTML=` wählt die gemessene Fassung. Die übrigen Suiten (issue1/2/3/4/13/14, Soak, Browser-Smoke, browser_issue14) bleiben grün.

gilli closed this issue

2026-09-01 08:45:01 +02:00

gilli referenced this issue from a commit

2026-09-01 18:05:00 +02:00

Endlosmodus bleibt im HUD stehen: Wort + Glyph statt nur der Zahl (#11)

gilli referenced this issue

2026-09-01 18:06:10 +02:00

Endlosmodus ist im HUD nicht erkennbar: Sektorname wiederholt sich ab Sektor 11 #11