wuwi/splatter-tennis
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

The card reads as one thing: padded icon, ragged-left type

Browse Source 
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
wuwiandClaude Fable 5 committed 2026-08-08 21:26:36 +02:00
1 parent 54d5d0949d
commit f69fc12742
2 files changed
+13 -8
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

index.html
+1 -1
View File
@@ -359,6 +359,6 @@
</div> </div>
</div> </div>
</div> </div>
<script type="module" src="main.js?v=134"></script> <script type="module" src="main.js?v=135"></script>
</body> </body>
</html> </html>
render.js
+12 -7
View File
@@ -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 // 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 // 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. // 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) { function drawCard(title, sub1, sub2, color, icon) {
const img = icon && SPR[icon]; const img = icon && SPR[icon];
ctx.fillStyle = 'rgba(10,6,8,0.72)'; ctx.fillRect(0, CARD_TOP, W, CARD_H); 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 k = Math.min((CARD_H - 10) / img.height, 58 / img.width);
const iw = Math.round(img.width * k), ih = Math.round(img.height * k); const iw = Math.round(img.width * k), ih = Math.round(img.height * k);
ctx.imageSmoothingEnabled = false; 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 // 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 // scoreboard and the ads, and 30 read as oversized the moment it left centre court
ctx.textAlign = 'center'; ctx.textAlign = 'left';
ctx.font = B(22); shadowText(title, W / 2, CARD_TOP + 4, color); ctx.font = B(22); shadowText(title, tx, CARD_TOP + 4, color);
ctx.font = F(8); ctx.font = F(8);
if (sub1) shadowText(sub1, W / 2, CARD_TOP + 34, UI.cream); if (sub1) shadowText(sub1, tx, CARD_TOP + 34, UI.cream);
if (sub2) shadowText(sub2, W / 2, CARD_TOP + 48, 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 // A GHOST HAND, fingertip at (x, y) — the tutorial finger every gesture hint shares. A drawn