From 8658a93dc71bafaa8ce0b0039ec6aeba3a6748d5 Mon Sep 17 00:00:00 2001 From: Oliver Rieger Date: Sat, 8 Aug 2026 21:41:47 +0200 Subject: [PATCH] White countdown; centred plain cards, ragged-left only beside art Co-Authored-By: Claude Fable 5 --- index.html | 2 +- render.js | 16 ++++++++-------- 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/index.html b/index.html index 158b2fb..0ef5b80 100644 --- a/index.html +++ b/index.html @@ -359,6 +359,6 @@ - + diff --git a/render.js b/render.js index 91c4044..689d3b0 100644 --- a/render.js +++ b/render.js @@ -1196,19 +1196,19 @@ const CARD_TOP = 88, CARD_H = 62, CARD_PAD = 20; // px of side padding inside th function drawCard(title, sub1, sub2, color, icon) { const img = icon && SPR[icon]; ctx.fillStyle = 'rgba(10,6,8,0.72)'; ctx.fillRect(0, CARD_TOP, W, CARD_H); - // LEFT-ALIGNED layout on a padded column: icon inset by CARD_PAD, the type ragged-left beside - // it — centred type next to a left icon read as two unrelated things sharing a band - let tx = CARD_PAD; - if (img) { // vertically centred, boxed so a wide tin can't reach the type - const k = Math.min((CARD_H - 18) / img.height, 46 / img.width); + // TWO layouts, by whether there is art: a plain card (SET, CHAPTER, the intros) stays fully + // CENTRED, the classic announcement; an icon card goes ragged-left beside its inset art — + // centred type next to a left icon read as two unrelated things sharing a band. + let tx = W / 2; ctx.textAlign = 'center'; + if (img) { // vertically centred, boxed small — the art is a bullet point, not the message + const k = Math.min(36 / img.height, 38 / img.width); const iw = Math.round(img.width * k), ih = Math.round(img.height * k); ctx.imageSmoothingEnabled = false; ctx.drawImage(img, CARD_PAD, Math.round(CARD_TOP + (CARD_H - ih) / 2), iw, ih); - tx += iw + 12; + tx = CARD_PAD + iw + 12; ctx.textAlign = 'left'; } // the title still SHOUTS (Bangers) but at 22, not 30 — up here it shares the screen with the // scoreboard and the ads, and 30 read as oversized the moment it left centre court - ctx.textAlign = 'left'; ctx.font = B(22); shadowText(title, tx, CARD_TOP + 4, color); ctx.font = F(8); if (sub1) shadowText(sub1, tx, CARD_TOP + 34, UI.cream); @@ -1793,7 +1793,7 @@ export function render() { const txt = (G.changeover > 0 ? 'CHANGEOVER · ' : '') + 'RESUMING IN ' + Math.ceil(waitT); ctx.font = B(16); ctx.textBaseline = 'top'; - shadowText(txt, W / 2, Math.round(proj(0, COURT.netH, COURT.netZ).y) - 26, hexA(UI.warm, 0.95)); + shadowText(txt, W / 2, Math.round(proj(0, COURT.netH, COURT.netZ).y) - 26, '#ffffff'); } if (G.phase === 'pretoss' && score.server === 'P' && G.mode !== 'eaten' && !G.horde && !(G.mgT > 0) && !G.aim && waitT <= 0.5) { // while pulling, the draw meter owns this slot ctx.font = F(8);