From 998009629b690acc31fac94f6af04d761d98543c Mon Sep 17 00:00:00 2001 From: Hans de Zwart Date: Tue, 11 Aug 2026 20:05:24 +0200 Subject: [PATCH] Say "Out of time", and stop the sheets shadowing the clock MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Two things Hans spotted playing on the phone. A blackish gradient sat across the bottom of the screen. Both sheets are fixed to bottom:0 and pushed off with translateY(101%), but their box-shadow is thrown 18px *upward* with a 50px blur — so a closed sheet, sitting 1% below the viewport, blurred darkness back onto the clock and left it there, twice over, once per sheet. The shadow now only exists on .sheet.on. Down one column the bottom used to fade 154 to 111 over the last 70px; it is flat 154 to the edge. An open sheet still casts exactly what it did. A flagged clock now reads "Out of time" over two lines in white instead of showing 0:00, on the red the panel already turned. Sizing it off the viewport would not work: the score lines above eat into what is left, so a 5-point match has less room than a 1-point one on the same phone. The stack is a size container and the words take the smaller of 23vw and 42cqh — two lines at line-height 1.04 need 2.08x the font size, so 42% of the container leaves a tenth spare. Measured in real viewports it lands between 52px on a 320x568 at five points and 95px on a 412x915, fitting every combination; with two lines it is the width that binds first, "Out of" being the long line. The other half keeps showing its own time. Checked that normal play still shows clocks and hides the words on both panels, and that Reset puts the flagged panel back to its clock. Co-Authored-By: Claude Opus 5 --- README.md | 3 +++ public_html/index.html | 35 ++++++++++++++++++++++++++++++++++- public_html/sw.js | 2 +- 3 files changed, 38 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 2300508..bdec074 100644 --- a/README.md +++ b/README.md @@ -57,6 +57,9 @@ everything works except installation and the service worker. if you hadn't touched it at all. - The bar under the big time is the delay draining. When it empties you get a soft tick and your reserve starts moving. That's the moment worth hearing. +- **Run out and your half turns red and reads "Out of time"**, in letters sized + to whatever room that half has left, so it's readable from across the board. + The other half keeps showing its own remaining time. - **Reset** starts a whole new match: clocks back to full *and* the score back to 0–0. It takes two taps: the first arms the button — it lights up and a ring unwinds around it — and a second tap within those two seconds does it. One diff --git a/public_html/index.html b/public_html/index.html index 5e510b3..7a8974a 100644 --- a/public_html/index.html +++ b/public_html/index.html @@ -122,6 +122,22 @@ letter-spacing:-.02em; } + /* the flagged player's clock is replaced by the words, on two lines. + Sized off the space that's actually left rather than the viewport, because + the score lines above eat into it: two lines at line-height 1.04 need 2.08x + the font size, so 42cqh of the stack's content box leaves a tenth of it as + breathing room. On two lines the width binds first — "Out of" is the long + line — which is what the vw term is holding. */ + .stack{container-type:size} + .out{ + font-size:clamp(24px,min(23vw,42cqh),130px); + line-height:1.04; + font-weight:700; + letter-spacing:-.01em; + text-align:center; + color:#fff; + } + /* ---------- the delay readout (the bit chess.com doesn't have) ---------- */ .delay{ display:flex;align-items:center; @@ -224,9 +240,14 @@ transition:transform .26s cubic-bezier(.32,.72,0,1); max-height:92vh;max-height:92dvh;overflow-y:auto; /* the scroll is a safety net for the smallest screens, not the normal case */ overscroll-behavior:contain; /* scrolling the sheet can't rubber-band the app */ + } + /* only while it's up: the shadow is thrown 18px upward with a 50px blur, and a + closed sheet sits just 1% below the viewport, so on .sheet it bled back onto + the bottom of the clock and sat there — twice over, once per sheet */ + .sheet.on{ + transform:translateY(0); box-shadow:0 -18px 50px rgba(0,0,0,.45); } - .sheet.on{transform:translateY(0)} .grab{width:38px;height:4px;border-radius:99px;background:#4A4644;margin:5px auto 11px} @@ -341,6 +362,7 @@
3:00
+
15 @@ -402,6 +424,7 @@
3:00
+
15 @@ -600,6 +623,7 @@ return { root: p, time: p.querySelector("[data-time]"), + out: p.querySelector("[data-out]"), moves: p.querySelector("[data-moves]"), you: p.querySelector("[data-you]"), them: p.querySelector("[data-them]"), @@ -729,6 +753,9 @@ function setAttr(node, name, value){ if(node.getAttribute(name) !== value) node.setAttribute(name, value); } + function setHidden(node, on){ + if(node.__h !== on){ node.__h = on; node.hidden = on; } + } function setStyle(node, prop, value){ var k = "__s_" + prop; // per property, so a second one can't alias if(node[k] !== value){ node[k] = value; node.style[prop] = value; } @@ -752,6 +779,12 @@ if(live && main <= 0 && st.phase === RUN){ flag(i); return; } + // the flagged player's clock is replaced by the words; the other panel + // keeps showing its own remaining time + var out = (st.phase === FLAG && i === st.active); + setHidden(el[i].time, out); + setHidden(el[i].out, !out); + setText(el[i].time, fmt(main)); setText(el[i].moves, st.moves[i]); setText(el[i].you, st.score[i]); // each panel is "You" to its own player diff --git a/public_html/sw.js b/public_html/sw.js index 822eeff..d16249f 100644 --- a/public_html/sw.js +++ b/public_html/sw.js @@ -1,5 +1,5 @@ /* Cache-first: once installed the clock never touches the network again. */ -const CACHE = "bgclock-v15"; +const CACHE = "bgclock-v16"; const FILES = [ "./", "./index.html",