diff --git a/PROJECT.md b/PROJECT.md index ded7ebf..9fea60b 100644 --- a/PROJECT.md +++ b/PROJECT.md @@ -595,6 +595,30 @@ can add the class, and Oliver kept seeing `LEVEL 1 · LEAGUE 1` snap to the real is in the HTML now and main.js only ever takes it off. The keyboard-hint strip hides with it (`body:has(#splash.busy) #hint`), so the loading screen really is court, title and bar. +**A THIRD FACE, AND THE TITLES GO UPRIGHT** (2026-08-31). Bangers has no upright cut — the slant +is drawn into the glyphs, which is why the chevrons have always been Silkscreen — so a heading +that wanted to shout without leaning had nowhere to go. **Bungee** (SIL OFL, licence beside it in +`assets/fonts/`) is bundled as the third voice: arcade signage, upper case by design, in-world +where a system sans read as borrowed chrome. The registers are now: +- **Bangers** ANNOUNCES — the primary button, PROMOTED., NEW PERSONAL BEST, and everything the + canvas shouts (SET, CHAPTER, EPIC!). +- **Silkscreen** is the HUD — numbers, labels, captions, anything read at leisure. +- **Bungee** NAMES THE ROOM — the header strip's screen titles (23px) and the poster wall's + section headings (15px). You are not being shouted at there, you are being told where you are. + +It ships SUBSET to the characters the game actually sets — 10 KB instead of 119. To redo it after +a copy change that needs a new glyph: + + uv run --with fonttools pyftsubset assets/fonts/Bungee-Regular.ttf \ + --unicodes="U+0020-007E,U+00A0,U+00B7,U+2013,U+2014,U+2018,U+2019,U+201C,U+201D,U+2026,U+2605,U+00D7" \ + --layout-features="" --no-hinting --desubroutinize \ + --output-file=assets/fonts/Bungee-Subset.ttf + +(the full TTF is not in the repo — fetch it from google/fonts ofl/bungee first). Two CSS traps +this cost us: `#intro h2` carries an id, so the header rule needs one too or the announcement face +wins; and the poster wall's captions live INSIDE `.mgroup` now, so a bare `.mgroup b` restyles +every poster on the screen — scope to `> header`. + **THE MENU DEALS ITSELF IN.** The canvas modals have always arrived on an easeOutBack overshoot; every menu screen does the same now — on EVERY arrival, not just the boot (Oliver, twice: "immer reinfliegen" and "auch für die untermenüs"). `@keyframes dealIn` flies an element in from the left diff --git a/assets/fonts/Bungee-Regular.ttf b/assets/fonts/Bungee-Regular.ttf deleted file mode 100644 index 59dfddc..0000000 Binary files a/assets/fonts/Bungee-Regular.ttf and /dev/null differ diff --git a/assets/fonts/Bungee-Subset.ttf b/assets/fonts/Bungee-Subset.ttf new file mode 100644 index 0000000..050943a Binary files /dev/null and b/assets/fonts/Bungee-Subset.ttf differ diff --git a/index.html b/index.html index afc9b5b..ca8f616 100644 --- a/index.html +++ b/index.html @@ -49,9 +49,11 @@ if (location.hostname !== 'splatter-tennis.wuwi.one' && !window.Capacitor?.isNat /* ...and the UPRIGHT display face (2026-08-31). Bangers is drawn slanted — there is no upright cut of it, which is also why the chevrons are Silkscreen — so the shelf labels that wanted to shout without leaning needed a third voice. Bungee is an arcade/signage face, upper case by - design, and it stays in-world where a system sans did not. SIL OFL, licence beside it. */ + design, and it stays in-world where a system sans did not. SIL OFL, licence beside it. + SUBSET to the characters this game actually sets (ASCII plus the few marks the copy uses): + 10 KB instead of 119 — pyftsubset, and the command is in PROJECT.md if it ever needs redoing. */ @font-face { font-family: 'Bungee'; font-weight: 400; font-display: block; - src: url('assets/fonts/Bungee-Regular.ttf?v=86') format('truetype'); } + src: url('assets/fonts/Bungee-Subset.ttf?v=86') format('truetype'); } /* html needs a real HEIGHT: the root element's background paints the viewport, but a GRADIENT is laid out in the root's own box — and with the canvas position:fixed the root has no content and collapses, so the gradient render.js sets had nowhere to go. */ @@ -231,10 +233,14 @@ if (location.hostname !== 'splatter-tennis.wuwi.one' && !window.Capacitor?.isNat /* the overlay is HIDDEN during play, not removed: a restart puts it straight back, and the display:grid above would otherwise win over the hidden attribute */ #intro[hidden] { display: none; } - /* Screen titles and the primary button are BANGERS — the same announcement face the canvas uses - for SET and CHAPTER. A screen title is a thing that shouts. Everything that is a NUMBER or a - label stays Silkscreen, so the two registers keep meaning what they have always meant. */ + /* THREE REGISTERS NOW (2026-08-31). Bangers still ANNOUNCES — the primary button, PROMOTED., + NEW PERSONAL BEST, and everything the canvas shouts (SET, CHAPTER, EPIC!). Silkscreen is + still the HUD: numbers, labels, anything you read at leisure. And the SCREEN TITLES moved to + Bungee: upright signage, which is what the strip at the top of a screen actually is — you are + not being shouted at, you are being told which room you are in. */ #intro h2 { margin: 0; font: 400 26px Bangers, cursive; color: var(--acid); letter-spacing: 1.5px; } + /* #intro h2 above carries an id, so this needs one too or the announcement face wins */ + #intro .hdr h2 { font: 400 23px/1.2 Bungee, Bangers, cursive; letter-spacing: 0.5px; } #intro h3 { display: flex; justify-content: space-between; margin: 20px 0 9px; font: 400 10px Silkscreen, monospace; color: var(--dim); letter-spacing: 2px; text-align: left; } @@ -243,7 +249,7 @@ if (location.hostname !== 'splatter-tennis.wuwi.one' && !window.Capacitor?.isNat padding: 10px 12px; margin: 0 -14px; border-bottom: 2px solid var(--line); background: var(--solid); padding-top: max(10px, env(safe-area-inset-top)); } - .hdr h2 { padding-left: 2px; } + .hdr h2 { padding-left: 2px; } /* (its face is set with the other titles above) */ /* UPRIGHT, not Bangers: the announcement face is drawn slanted, and a slanted arrow read as italic on every screen. Silkscreen's ASCII < > are straight pixel arrows. */ .chev { width: 34px; height: 34px; flex: none; background: none; border: 2px solid var(--line); @@ -518,7 +524,7 @@ if (location.hostname !== 'splatter-tennis.wuwi.one' && !window.Capacitor?.isNat /* SCOPED TO THE HEADER, not to the section: the posters live INSIDE .mgroup now, so a bare descendant selector here restyled every caption on the wall (it stayed invisible while this rule still named Silkscreen — the moment the family changed, the posters changed with it). */ - #modeList .mgroup > header b { display: block; letter-spacing: 0.5px; color: var(--cream); + #modeList .mgroup > header b { display: block; letter-spacing: 0.5px; color: var(--acid); text-shadow: none; font: 400 15px/1.3 Bungee, Bangers, cursive; } /* ...and the strap goes back to the quiet register under it: a shouted line over a system-sans line was two foreign voices in one header */