diff --git a/src/render.js b/src/render.js index a7a619c..cf73a5d 100644 --- a/src/render.js +++ b/src/render.js @@ -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';