From d3510423b7c0288000bd1ccb01e4b558a9b743e4 Mon Sep 17 00:00:00 2001 From: Oliver Rieger Date: Sat, 15 Aug 2026 17:59:49 +0200 Subject: [PATCH] The door out takes the corner, and the blood steps aside for it Co-Authored-By: Claude Opus 5 --- index.html | 24 ++++++++++++++++-------- src/render.js | 6 +++++- 2 files changed, 21 insertions(+), 9 deletions(-) diff --git a/index.html b/index.html index 1a07905..fb4427b 100644 --- a/index.html +++ b/index.html @@ -83,12 +83,20 @@ if (location.hostname !== 'splatter-tennis.wuwi.one') { font: 400 10px Silkscreen, monospace; color: #6b7688; } /* THE DOOR OUT (Oliver: every tennis screen lacked an exit — force-closing the app was the only way back to the menu). A quiet chip during play; tapping it freezes the world and asks. */ - /* below the BLOOD panel's strip (top ~30 logical px on the right in the splatter modes), so the - door never sits on the pips — one position, one meaning, every mode */ - #quit { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 40px); right: 8px; z-index: 5; } - #quit button { width: 34px; height: 34px; background: rgba(14,23,20,0.72); border: 2px solid var(--line); - color: var(--dim); font: 400 15px Silkscreen, monospace; cursor: pointer; - -webkit-tap-highlight-color: transparent; } + /* THE CORNER IS THE DOOR. It used to hang a row below, under the BLOOD strip, which is where a + thumb never looks for an exit — the BLOOD panel steps aside for it instead (drawBlood in + render.js reserves this chip's width). Same recessed-panel language as the canvas HUD: + dark green field, a hairline of the board's own highlight, a 1px inner bevel — and it goes + crimson while pressed, because red is reserved for the thing you actually came to press. */ + #quit { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 6px); right: 6px; z-index: 5; } + #quit button { width: 32px; height: 32px; border-radius: 3px; display: grid; place-items: center; + background: rgba(8,26,18,0.82); border: 1px solid rgba(63,149,96,0.35); + box-shadow: inset 0 1px 0 rgba(242,234,214,0.10), 0 1px 2px rgba(0,0,0,0.45); + /* a plain X, not ✕: Silkscreen has no U+2715, so the dingbat fell back to the + system font and drew a smooth glyph inside a pixel HUD */ + color: var(--cream); font: 700 14px Silkscreen, monospace; line-height: 1; + cursor: pointer; -webkit-tap-highlight-color: transparent; } + #quit button:active { background: var(--red); border-color: var(--bad); color: #f2ead6; } #qAsk { position: fixed; inset: 0; z-index: 6; background: rgba(0,0,0,0.55); display: flex; align-items: center; justify-content: center; } #quit[hidden], #qAsk[hidden] { display: none; } @@ -454,7 +462,7 @@ if (location.hostname !== 'splatter-tennis.wuwi.one') {
move: WASD/arrows  ·  serve/swing: SPACE  ·  aim: hold a direction while swinging  ·  T: tuning panel
- + - + diff --git a/src/render.js b/src/render.js index b23e0ee..1d4e25d 100644 --- a/src/render.js +++ b/src/render.js @@ -1095,7 +1095,11 @@ function drawBlood() { if (G.mode !== 'splatter' || !G.hpMax) return; const n = G.hpMax, hp = Math.max(0, Math.min(n, G.hp)); const r = 2.6, gap = n > 6 ? 7 : 9, pw = (n - 1) * gap + r * 2; - const w = Math.max(46, pw + 10), h = 24, x = W - 6 - w, y = 6; + // The quit chip owns the corner (index.html #quit), so the pips move in to clear it: 32 CSS px of + // button plus its 6px margin plus 6px of air, converted to logical px, because the two live in + // different coordinate systems and only the CSS one is fixed. + const chip = Math.round(44 * W / (cv.clientWidth || innerWidth)); + const w = Math.max(46, pw + 10), h = 24, x = W - 6 - chip - w, y = 6; panel(x + 0.5, y + 0.5, w - 1, h - 1, 3, 'rgba(26,6,8,0.82)', 'rgba(163,74,66,0.45)'); ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.font = F(7, 0); ctx.fillStyle = hp <= 2 ? UI.bad : '#89a08f';