From f69fc127422630c65402ceb050e86d681d69cce2 Mon Sep 17 00:00:00 2001 From: Oliver Rieger Date: Sat, 8 Aug 2026 21:26:36 +0200 Subject: [PATCH] The card reads as one thing: padded icon, ragged-left type Co-Authored-By: Claude Fable 5 --- index.html | 2 +- render.js | 19 ++++++++++++------- 2 files changed, 13 insertions(+), 8 deletions(-) diff --git a/index.html b/index.html index a996d38..b702b14 100644 --- a/index.html +++ b/index.html @@ -359,6 +359,6 @@ - + diff --git a/render.js b/render.js index 4c6b3dd..8947428 100644 --- a/render.js +++ b/render.js @@ -1190,24 +1190,29 @@ const AD_TOP = () => Math.round(proj(0, 0, -6).y) - AD_H; // top of the courtsid // or not — the icon sits LEFT of the text instead of stacking above it. Stacked, an icon card ran // 102 px tall and its lower third hung over live court; side-by-side it is 62 px flat, sits fully // over the crowd, and the art actually draws BIGGER than the stacked layout gave it. -const CARD_TOP = 96, CARD_H = 62; +const CARD_TOP = 96, CARD_H = 62, CARD_PAD = 14; // px of side padding inside the band 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); - if (img) { // left of the text block, vertically centred, boxed so a wide tin can't reach the type + // 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 - 10) / img.height, 58 / img.width); const iw = Math.round(img.width * k), ih = Math.round(img.height * k); ctx.imageSmoothingEnabled = false; - ctx.drawImage(img, 8, Math.round(CARD_TOP + (CARD_H - ih) / 2), iw, ih); + ctx.drawImage(img, CARD_PAD, Math.round(CARD_TOP + (CARD_H - ih) / 2), iw, ih); + tx += iw + 12; } // 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 = 'center'; - ctx.font = B(22); shadowText(title, W / 2, CARD_TOP + 4, color); + ctx.textAlign = 'left'; + ctx.font = B(22); shadowText(title, tx, CARD_TOP + 4, color); ctx.font = F(8); - if (sub1) shadowText(sub1, W / 2, CARD_TOP + 34, UI.cream); - if (sub2) shadowText(sub2, W / 2, CARD_TOP + 48, UI.cream); + if (sub1) shadowText(sub1, tx, CARD_TOP + 34, UI.cream); + if (sub2) shadowText(sub2, tx, CARD_TOP + 48, UI.cream); + ctx.textAlign = 'center'; // the band's neighbours (flash, countdown) assume centred } // A GHOST HAND, fingertip at (x, y) — the tutorial finger every gesture hint shares. A drawn