TV display: courts pinned at top, lower pane scrolls and pages itself

Release 0.5.3.

Co-Authored-By: Claude Fable 5.1 <[email protected]>
Claude-Session: https://claude.ai/code/session_01MB7nCCAscYsb3zzkT6LHZi

CHANGELOG.md

@@ -9,6 +9,20 @@ so you can always tell what a deployment is actually serving.
 
 ## [Unreleased]
 
+## [0.5.3] - 2026-09-03
+
+### Changed
+- TV display: the courts (and banner) stay pinned at the top of the screen; up next, brackets
+  and standings scroll in a pane underneath, paging automatically every 12 seconds and
+  wrapping back to the top. Idle courts and the banner now use dark-theme colors on the TV.
+
+## [0.5.2] - 2026-09-03
+
+### Changed
+- Champion banner and the Final badge are deep gold instead of beige.
+- Round-1 bye slots in the bracket read "bye" instead of "TBD"; no stray dot before the
+  phase badge when a tournament has no date.
+
 ## [0.5.1] - 2026-09-03
 
 ### Changed

package.json

@@ -1 +1 @@
-{"name":"courtside","type":"module","version":"0.5.1","scripts":{"test":"node --test test/*.test.js","sim":"node simulate.js","start":"node --disable-warning=ExperimentalWarning server/index.js","dev":"node --disable-warning=ExperimentalWarning --watch server/index.js","demo":"node --disable-warning=ExperimentalWarning scripts/seed-demo.js","smoke":"bash test/smoke.sh"},"description":"Self-hosted volleyball tournament desk: one QR code from check-in to live scores","main":"server/index.js","directories":{"test":"test"},"keywords":[],"author":"","license":"MIT","dependencies":{"qrcode":"^1.5.4","ws":"^8.21.3"},"engines":{"node":">=22.13"},"repository":{"type":"git","url":"https://gitea.cloudfreeiot.com/bkvargyas/courtside.git"}}
+{"name":"courtside","type":"module","version":"0.5.3","scripts":{"test":"node --test test/*.test.js","sim":"node simulate.js","start":"node --disable-warning=ExperimentalWarning server/index.js","dev":"node --disable-warning=ExperimentalWarning --watch server/index.js","demo":"node --disable-warning=ExperimentalWarning scripts/seed-demo.js","smoke":"bash test/smoke.sh"},"description":"Self-hosted volleyball tournament desk: one QR code from check-in to live scores","main":"server/index.js","directories":{"test":"test"},"keywords":[],"author":"","license":"MIT","dependencies":{"qrcode":"^1.5.4","ws":"^8.21.3"},"engines":{"node":">=22.13"},"repository":{"type":"git","url":"https://gitea.cloudfreeiot.com/bkvargyas/courtside.git"}}

server/public/app.css

@@ -2,6 +2,7 @@
   --bg:#F7F8F6;--surface:#fff;--ink:#17202A;--muted:#5B6875;--line:#DCE1DE;
   --accent:#1D6FB5;--accent-ink:#fff;--accent-soft:#E4EFF9;--sand:#B98F3F;--sand-soft:#F6EBD2;
   --good:#2E8B57;--warn:#C97B1C;--crit:#C0392B;--court:#1A6FB5;--court-ink:#fff;
+  --gold:#B8860B;--gold-light:#D4A422;--gold-deep:#8A6508;
 }
 @media (prefers-color-scheme:dark){:root{--bg:#12181F;--surface:#1A222B;--ink:#E8ECEF;--muted:#9AA6B1;--line:#2B3640;--accent:#5AA3E6;--accent-ink:#0E1A26;--accent-soft:#1B3040;--sand:#D9B26E;--sand-soft:#3A3120;--good:#5FCB8A;--warn:#E39A3B;--crit:#E5655A;--court:#1D5F99}}
 *{box-sizing:border-box}
@@ -20,13 +21,13 @@ main{max-width:960px;margin:0 auto;padding:16px 16px 64px}
 .eyebrow{font-family:"Barlow Condensed",sans-serif;text-transform:uppercase;letter-spacing:.12em;font-size:13px;font-weight:600;color:var(--muted)}
 .hero{padding:18px 0 8px}.hero.compact{padding:8px 0}.lede{color:var(--muted);margin:6px 0 0}.notes{white-space:pre-line}
 .pill{display:inline-block;font-family:"Barlow Condensed",sans-serif;text-transform:uppercase;letter-spacing:.08em;font-size:12px;font-weight:600;padding:2px 8px;border-radius:3px;line-height:1.5;vertical-align:middle;background:var(--accent-soft);color:var(--accent)}
-.pill.live{background:var(--good);color:#fff}.pill.final{background:var(--sand-soft);color:var(--sand)}.pill.checkin{background:var(--accent);color:var(--accent-ink)}
+.pill.live{background:var(--good);color:#fff}.pill.final{background:var(--gold);color:#fff}.pill.checkin{background:var(--accent);color:var(--accent-ink)}
 .card{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:16px;margin:14px 0}
 .card h2{margin-bottom:8px}
 .list .row{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:12px 14px;margin:8px 0;background:var(--surface);border:1px solid var(--line);border-radius:8px;color:var(--ink);text-decoration:none}
 .flash{padding:10px 14px;border-radius:6px;margin:12px 0;background:var(--accent-soft)}.flash.error{background:var(--sand-soft);color:var(--crit);border-left:3px solid var(--crit)}
 .banner{background:var(--sand-soft);border-left:3px solid var(--sand);padding:10px 14px;border-radius:0 6px 6px 0;margin:12px 0;font-weight:600}
-.champion{text-align:center;padding:20px;margin:14px 0;border:2px solid var(--sand);border-radius:8px;background:var(--sand-soft)}.champion h2{font-size:40px}
+.champion{text-align:center;padding:22px 20px;margin:14px 0;border:2px solid var(--gold-deep);border-radius:8px;background:linear-gradient(160deg,var(--gold-light),var(--gold) 55%,var(--gold-deep));color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.25)}.champion .eyebrow{color:#FFF3C4}.champion h2{font-size:40px}
 /* forms */
 .form label{display:block;margin:12px 0;font-weight:600}
 .form input,.form textarea,.form select{display:block;width:100%;margin-top:4px;padding:10px 12px;font:inherit;font-weight:400;border:1px solid var(--line);border-radius:6px;background:var(--bg);color:var(--ink)}
@@ -93,7 +94,8 @@ ul.plain,ol.plain{list-style:none;padding:0;margin:8px 0}ol.plain{counter-reset:
 .loading{color:var(--muted);padding:24px}
 /* display (TV) mode */
 body.display{font-size:22px;background:#0F1418;color:#F2F5F7}
-body.display .top,body.display .foot{display:none}body.display main{max-width:none;padding:20px 28px}
+body.display .top,body.display .foot{display:none}body.display main{max-width:none;padding:14px 24px 0;height:100vh;height:100dvh;box-sizing:border-box}
+body.display .app{display:flex;flex-direction:column;height:100%}body.display .pin{flex:none;padding-bottom:10px;border-bottom:1px solid #2B3640}body.display .scrollpane{flex:1;min-height:0;overflow-y:auto;padding:10px 0 24px;scrollbar-width:none}body.display .scrollpane::-webkit-scrollbar{display:none}body.display .courts{margin-bottom:0}body.display .court.idle,body.display .court.paused{background:#1A222B;color:#9AA6B1;border-color:#2B3640}body.display .court.idle .nextup{color:#F2F5F7;border-top-color:#2B3640}body.display .banner{background:#3A3120;color:#F0C46B;border-left-color:#D9B26E}body.display .brow .bs{color:#9AA6B1}body.display .brow.won .bs{color:#F2F5F7}
 body.display .display-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}body.display h1{font-size:56px}
 body.display .court .t{font-size:40px}body.display .court .s{font-size:52px}body.display .court{min-height:150px}
 body.display .card{background:#1A222B;border-color:#2B3640;color:#F2F5F7}body.display td{border-color:#2B3640}body.display .bm{background:#12181F;border-color:#2B3640}body.display .brow+.brow{border-color:#2B3640}body.display .bcanvas path{stroke:#3A4652}body.display .btag{background:#1A222B;border-color:#2B3640}

server/public/board.js

@@ -34,7 +34,7 @@
     const s = state;
     const mine = myTeam ? [...s.teams, ...s.withdrawn].find(t => t.id === myTeam) : null;
     const parts = [];
-    if (!display) parts.push(`<section class="hero compact"><div class="eyebrow">${esc(s.date ?? '')} · <span class="pill ${s.phase}">${phaseLabel[s.phase]}</span></div><h1>${esc(s.name)}</h1><p class="lede">${rulesLine(s.rules)}${s.avgMatchMin ? ` · matches running ~${s.avgMatchMin} min` : ''}</p></section>`);
+    if (!display) parts.push(`<section class="hero compact"><div class="eyebrow">${s.date ? `${esc(s.date)} · ` : ''}<span class="pill ${s.phase}">${phaseLabel[s.phase]}</span></div><h1>${esc(s.name)}</h1><p class="lede">${rulesLine(s.rules)}${s.avgMatchMin ? ` · matches running ~${s.avgMatchMin} min` : ''}</p></section>`);
     else parts.push(`<div class="display-head"><h1>${esc(s.name)}</h1><span class="pill ${s.phase}">${phaseLabel[s.phase]}</span></div>`);
     if (s.banner) parts.push(`<div class="banner">${esc(s.banner)}</div>`);
     if (s.champion) parts.push(`<section class="champion"><div class="eyebrow">Champion</div><h2>${esc(s.champion)}</h2></section>`);
@@ -45,7 +45,15 @@
     if (s.pools.length) parts.push(renderPools());
     if (!s.pools.length && !s.bracket.length) parts.push(renderRoster());
     if (s.withdrawn.length && !display) parts.push(`<p class="muted small">Withdrawn: ${s.withdrawn.map(t => esc(t.name)).join(', ')}</p>`);
-    app.innerHTML = parts.join('');
+    if (display) {
+      // TV: courts stay pinned at the top; everything else scrolls underneath
+      const pane = app.querySelector('.scrollpane');
+      const keep = pane ? pane.scrollTop : 0;
+      const pinCount = parts.findIndex(p => p.startsWith('<section class="queue"') || p.startsWith('<section class="card bracketwrap') || p.startsWith('<section class="pools"') || p.startsWith('<section class="card"'));
+      const cut = pinCount === -1 ? parts.length : pinCount;
+      app.innerHTML = `<div class="pin">${parts.slice(0, cut).join('')}</div><div class="scrollpane">${parts.slice(cut).join('')}</div>`;
+      const np = app.querySelector('.scrollpane'); if (np) np.scrollTop = keep;
+    } else app.innerHTML = parts.join('');
     fitBracket();
     notifyMine();
   }
@@ -172,6 +180,7 @@
   }
 
   function feedLabel(m, side) {
+    if (m.status === 'bye') return 'bye';
     // what fills this slot later: winner/loser of which match
     const wantSide = side === 0 ? 'A' : 'B';
     const w = state.bracket.find(f => f.feeds === m.id && f.feedsSide === wantSide);
@@ -256,5 +265,10 @@
   connect();
   // belt and braces: a full refresh every 2 minutes in case a proxy drops the socket silently
   setInterval(() => fetch(`/t/${state.slug}/state.json`).then(r => r.json()).then(s => { state = s; render(); }).catch(() => {}), 120000);
-  if (display) setInterval(() => document.documentElement.scrollTo({ top: (Date.now() / 1000 | 0) % 2 ? 0 : document.body.scrollHeight, behavior: 'smooth' }), 15000);
+  // TV: page the lower pane (up next, brackets, standings) every 12 s and wrap to the top; courts never move
+  if (display) setInterval(() => {
+    const pane = app.querySelector('.scrollpane'); if (!pane || pane.scrollHeight <= pane.clientHeight) return;
+    const atEnd = pane.scrollTop + pane.clientHeight >= pane.scrollHeight - 4;
+    pane.scrollTo({ top: atEnd ? 0 : pane.scrollTop + pane.clientHeight * 0.85, behavior: 'smooth' });
+  }, 12000);
 })();