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

server/public/board.js

@@ -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();
   }
@@ -257,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);
 })();