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

The run-end's buttons stop being chips: stacked where there is height

Browse Source 
A 100px label in a 120px half-button left ten pixels of air, which reads as a
squeezed chip. A tall screen has the room, so the two doors stack full width —
filled primary over ghost secondary, the same shape the modal footer and the
splash already use. A short landscape cannot stack, so there the box itself
grows to 344 and the halves come out comfortable instead.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
wuwiandClaude Fable 5 committed 2026-08-31 13:07:55 +02:00
1 parent 0f2ea2b05e
commit da2f4cc7da
1 file changed
+13 -5
Download Patch File Download Diff File Expand all files Collapse all files
src/render.js
+13 -5
View File
@@ -3065,7 +3065,12 @@ export function render() {
const xd = runDelta(), pr = progress();
const ready = dead ? G.eatenT > EATEN_RESTART : G.done.t > DONE_RESTART;
const boxW = Math.min(W - 32, 276), pad = MODAL_PAD, inner = boxW - pad * 2;
// TWO BUTTONS, TWO SHAPES (2026-08-31, Oliver: "sehr gedrungen"). Side by side they get a
// 120px half for a 100px label — ten pixels of air, which reads as a squeezed chip rather
// than a button. A tall screen has the room to STACK them full width; a short landscape
// does not, so there the box itself grows instead and the halves come out comfortable.
const stack = H >= 360;
const boxW = Math.min(W - 32, stack ? 276 : 344), pad = MODAL_PAD, inner = boxW - pad * 2;
const headLines = wrapText(title, B(22), inner);
const lineLines = wrapText(line, F(9), inner);
// the cup keeps ITS OWN mark (the round reached, in the headline pair above) — the board's
@@ -3081,7 +3086,9 @@ export function render() {
let h = pad + headLines.length * 24 + lineLines.length * 13 + 6;
if (xd.xp > 0) h += MODAL_GAP + 32;
if (G.newBest || mark) h += MODAL_GAP + (G.newBest ? 20 : 13);
if (ready) h += MODAL_GAP + 16 + fxLines.length * 12 + MODAL_FOOT + MODAL_BTN;
const twoUp = ready && !promo && !G.net; // is there a second door to draw?
if (ready) h += MODAL_GAP + 16 + fxLines.length * 12 + MODAL_FOOT + MODAL_BTN
+ (stack && twoUp ? MODAL_BTN + 8 : 0);
h += pad;
const x = Math.round(W / 2 - boxW / 2), y0 = Math.round(H / 2 - h / 2), inX = x + pad;
panel(x, y0, boxW, h, 4, MODAL_FILL, MODAL_EDGE);
@@ -3150,13 +3157,14 @@ export function render() {
const solo = !promo && !G.net;
const second = solo ? (cup || (G.done && G.done.cup) ? ['club', 'THE CLUBHOUSE']
: ['again', 'PLAY AGAIN']) : null;
const bw = second ? Math.round((inner - 8) / 2) : inner;
const bw = second && !stack ? Math.round((inner - 8) / 2) : inner;
const label = promo ? 'TAKE THE FLOOR' : solo ? 'ENTER THE DRAW' : 'THE CLUBHOUSE';
drawButton(inX, y, bw, MODAL_BTN, label, UI.pick, true);
endBtns.push({ id: solo ? 'next' : 'club', x: inX, y, w: bw, h: MODAL_BTN });
if (second) {
drawButton(inX + bw + 8, y, bw, MODAL_BTN, second[1], UI.warm, false);
endBtns.push({ id: second[0], x: inX + bw + 8, y, w: bw, h: MODAL_BTN });
const sx = stack ? inX : inX + bw + 8, sy = stack ? y + MODAL_BTN + 8 : y;
drawButton(sx, sy, bw, MODAL_BTN, second[1], UI.warm, false);
endBtns.push({ id: second[0], x: sx, y: sy, w: bw, h: MODAL_BTN });
}
}
ctx.textAlign = 'center'; ctx.textBaseline = 'top';