Respect the notch and the home indicator
viewport-fit=cover was already on, so the canvas was full-bleed and the iPhone status bar landed directly on the scoreboard. Keeping the canvas full-bleed — the stands running to the screen edges is the look — and moving the HUD instead: a hidden probe div carries env(safe-area-inset-*), which env() only exposes to CSS, render.js converts it to logical canvas px at the same scale fitViewport just applied, and the scoreboard shifts down while the rack and the draw meter lift up. Body height also goes to 100dvh so iOS's dynamic toolbars stop leaving a strip unused at the bottom. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
1 parent
ae64daa0fb
commit
89667c4018
3 files changed
+34
-6
No files matched your search
@@ -182,6 +182,14 @@ zombie (now an occasional opponent, `TUNE.racketEvery`, not the every-game fixtu
|
||||
because the wave grows with `hordeGrow` while the panic button was a flat 1 s; he chose scaling the
|
||||
melee over shrinking the horde. **Measure the crowd BEFORE calling `meleeSwipe`** — it kills
|
||||
everything in reach, so counting after counts the survivors and the cooldown barely moves.
|
||||
- **The canvas is deliberately FULL-BLEED under the notch and home indicator; the HUD is what respects
|
||||
the safe area.** `viewport-fit=cover` is set, and the stands running to the screen edges look right —
|
||||
but an iPhone's clock was landing directly on the scoreboard. A hidden `#safe` probe div carries
|
||||
`env(safe-area-inset-*)` (env() is only readable from CSS), `measureSafe()` converts it to LOGICAL
|
||||
canvas px using the same scale `fitViewport` just applied, and `SAFE.top`/`SAFE.bottom` shift the
|
||||
scoreboard down and lift the rack + `METER_Y` up. Anything new that anchors to the very top or very
|
||||
bottom of the screen must offset by these too — and the rack's hit test shares `rackGeom`, so taps
|
||||
follow automatically.
|
||||
- **`UI` in config.js is the accent palette** (hot/warm/pick/cream/dim/bad/ball). Every HUD colour
|
||||
goes through it. Gore reds are deliberately NOT in it — the splatter stays loud.
|
||||
- **`F(size, bold)` in render.js builds every canvas font string.** Bare `monospace` resolves to
|
||||
|
||||
Reference in new issue
Block a user