fix(ui+game): responsive profile bar, auto-wave toggle, and stats on early exit

Profile bar on phones:
- With the new Statistik/Admin chips the bar overflowed the viewport on
  small screens. It now wraps (flex-wrap + max-width) and compacts its
  paddings, fonts and chip sizes below 560px

Auto-wave (🔁 button in the HUD controls):
- New persistent toggle (localStorage) that starts the next wave on its
  own ~0.4s after intermission begins, collecting the full early-call
  bonus without pressing the wave button every round
- Toggling it on during an active intermission starts the wave
  immediately; works in solo and multiplayer (uses the same action path
  as the manual button); active state shows green

Stats are now saved when leaving via the menu:
- Previously only victory/defeat recorded a result — exiting a running
  game via "🚪 Zurück zum Hauptmenü" or the pause menu discarded the
  whole run, which is why endless-mode progress beyond wave 20 never
  showed up in the stats
- engine.abandon() records best score, stats and crystals (counted as a
  defeat) whenever a solo game is left mid-run; no-ops when no game is
  running or the result was already reported, so no double counting

Verified in the browser (390x844, admin account): profile bar wraps
compactly; 🔁 auto-started wave 1 during intermission without manual
click; exiting mid-wave recorded the run (💎 2, 1 Runde, beste Welle 1).
Build clean, 54/54 tests green.
This commit is contained in:
Tronax 2026-08-17 15:51:23 +02:00
parent 572f82a954
commit f7ab56e475
Signed by: Tronax
SSH key fingerprint: SHA256:2pKKXDZucWvaF/GzXNz0FY53EAO1YDLN80bqS+TTz/o
5 changed files with 89 additions and 1 deletions

View file

@ -49,7 +49,9 @@ async function doLogout(): Promise<void> {
.profile-bar {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
max-width: 100%;
background: var(--panel);
border: 1px solid var(--panel-border);
border-radius: 12px;
@ -79,6 +81,25 @@ async function doLogout(): Promise<void> {
padding: 5px 10px;
cursor: pointer;
}
/* Phones: chips wrap into compact rows instead of overflowing */
@media (max-width: 560px) {
.profile-bar {
gap: 5px;
padding: 5px 8px;
}
.crystals {
font-size: 13px;
}
.name {
font-size: 11.5px;
max-width: 92px;
}
.chip {
font-size: 11px;
padding: 4px 8px;
}
}
.chip:hover {
border-color: var(--accent);
}