courtside/server/public/board.js

/* Courtside public board. Renders entirely from the state JSON embedded in the page,
   then keeps it fresh over a WebSocket. No framework, no build step. */
(() => {
  const app = document.getElementById('app');
  let state = JSON.parse(document.getElementById('state').textContent);
  const myTeam = app.dataset.team || null;
  const display = app.dataset.display === '1';
  const seenAlerts = new Set();
  const esc = s => String(s ?? '').replace(/[&<>"']/g, c => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c]));
  // every team name on the board links to that team's page (schedule, record, next match)
  const teamHref = t => `/t/${state.slug}/teams/${encodeURIComponent(t.id)}`;
  const name = t => t ? `<a class="tl" href="${teamHref(t)}">${esc(t.name)}</a>` : '<span class="tbd">TBD</span>';
  const clock = ms => new Date(ms).toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' });
  const isMine = m => myTeam && (m.a?.id === myTeam || m.b?.id === myTeam);
  const phaseLabel = { checkin: 'Registration open', closed: 'Registration closed', live: 'Live', final: 'Final' };
  const score = m => m.status === 'final' ? m.sets.map(s => `${s[0]}–${s[1]}`).join(', ')
    : m.status === 'forfeit' ? 'forfeit' : m.live ? [...(m.liveSets ?? []), m.live].map(s => `${s[0]}–${s[1]}`).join(', ') : m.status === 'live' ? '0–0' : '';
  // score from one team's point of view (their points first)
  const scoreFor = (m, teamId) => {
    const flip = m.b?.id === teamId;
    const pair = ([a, b]) => flip ? `${b}–${a}` : `${a}–${b}`;
    if (m.status === 'final') return m.sets.map(pair).join(', ');
    if (m.status === 'forfeit') return 'forfeit';
    if (m.live) return [...(m.liveSets ?? []), m.live].map(pair).join(', ');
    return m.status === 'live' ? '0–0' : '';
  };
  const rulesLine = r => `${r.teamSize}s · to ${r.pointsTo}, win by ${r.winBy}${r.cap ? `, cap ${r.cap}` : ''}${r.bestOf > 1 ? `, best of ${r.bestOf}` : ''}`;

  function render() {
    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>`);
    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>`);
    if (mine) parts.push(renderMyTeam(mine));
    if (s.phase === 'live') { parts.push(renderCourts()); parts.push(renderUpNext()); }
    if (s.phase === 'closed' && !s.pools.length) parts.push(`<section class="card"><h2>Schedule coming</h2><p>Registration is closed with ${s.teams.length} teams. The organizer is generating pools now; this page will update on its own.</p></section>`);
    if (s.bracket.length) parts.push(renderBracket());
    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('');
    fitBracket();
    notifyMine();
  }

  function renderMyTeam(t) {
    const s = state;
    const my = [...s.pools.flatMap(p => p.matches), ...s.bracket].filter(isMine);
    const live = my.find(m => m.status === 'live');
    const next = s.upNext.find(isMine) ?? my.find(m => m.status === 'on_deck' || (m.status === 'pending' && m.a && m.b));
    const played = my.filter(m => m.status === 'final' || m.status === 'forfeit');
    const w = played.filter(m => m.winner === t.id).length;
    let now;
    if (t.status === 'withdrawn') now = `<p>Your team has withdrawn from the tournament.</p>`;
    else if (live) now = `<p class="big">You're on <b>Court ${live.court}</b> now vs ${name(live.a?.id === t.id ? live.b : live.a)}</p>`;
    else if (next) now = `<p class="big">Next: vs ${name(next.a?.id === t.id ? next.b : next.a)}${next.court ? ` on <b>Court ${next.court}</b>` : ''}${next.etaMin != null ? ` <span class="muted">in about ${next.etaMin} min</span>` : ''}</p>`;
    else if (s.phase === 'final') now = `<p>Tournament over. Thanks for playing.</p>`;
    else if (s.phase === 'live') now = `<p>No match scheduled yet. Waiting on results from other courts.</p>`;
    else now = `<p>Waiting for play to start.</p>`;
    return `<section class="card mine"><div class="eyebrow">Your team</div><h2>${esc(t.name)}</h2>${now}<p class="muted">${played.length ? `Record ${w}–${played.length - w}` : 'No results yet'}${t.poolId ? ` · Pool ${esc(t.poolId)}` : ''}</p>
      ${my.length ? `<ul class="plain sched">${my.map(m => `<li class="${m.status}"><span>${m.stage === 'pool' ? `Pool ${m.round}` : (m.label ?? `Bracket R${m.round}`)}</span><span>vs ${name(m.a?.id === t.id ? m.b : m.a)}</span><span class="mono">${scoreFor(m, t.id) || (m.court ? `Court ${m.court}` : '')}${m.status === 'final' || m.status === 'forfeit' ? (m.winner === t.id ? ' W' : ' L') : ''}</span></li>`).join('')}</ul>` : ''}
      ${!display && 'Notification' in window && Notification.permission === 'default' ? `<button type="button" class="button" id="notify">Alert me when we're up</button>` : ''}
    </section>`;
  }

  function renderCourts() {
    return `<section class="courts">${state.courts.map(c => {
      const m = c.match;
      if (c.status === 'paused') return `<div class="court paused"><div class="lbl">Court ${c.court}</div><div class="teams"><div class="t">Paused</div></div></div>`;
      if (!m) return `<div class="court idle"><div class="lbl">Court ${c.court}</div><div class="teams"><div class="t muted">Open</div></div></div>`;
      const avg = state.avgMatchMin;
      const elapsed = m.startedAt ? Math.max(0, Math.round((Date.now() - m.startedAt) / 60000)) : null;
      const left = avg != null && elapsed != null ? Math.max(0, avg - elapsed) : null;
      const finish = avg != null && m.startedAt ? clock(Math.max(Date.now(), m.startedAt + avg * 60000)) : null;
      const timing = avg != null ? `avg game ${avg} min${elapsed != null ? ` · ${elapsed} min played` : ''}${finish ? ` · est. finish ~${finish}${left ? ` (${left} min)` : ''}` : ''}` : '';
      return `<div class="court ${isMine(m) ? 'mine' : ''}"><div class="lbl">Court ${c.court} · ${m.stage === 'pool' ? `Pool ${esc(m.a && state.teams.find(t => t.id === m.a.id)?.poolId || '')} R${m.round}` : (m.label ?? `Bracket R${m.round}`)}</div>
        <div class="teams"><div class="t">${name(m.a)}</div><div class="s mono">${score(m) || '0–0'}</div><div class="t">${name(m.b)}</div></div>
        ${timing ? `<div class="timing">${timing}</div>` : ''}
        ${nextForCourt(c.court)}</div>`;
    }).join('')}</section>`;
  }

  // the first queued match predicted for this court, with the clock time it should be ready
  function nextForCourt(courtNo) {
    const u = state.upNext.find(x => x.court === courtNo);
    if (!u) return '';
    const ready = clock(state.generatedAt + u.etaMin * 60000);
    return `<div class="nextup ${isMine(u) ? 'mine' : ''}"><span class="k">Next up</span> ${name(u.a)} vs ${name(u.b)} <span class="eta mono">ready ~${ready}</span></div>`;
  }

  function renderUpNext() {
    if (!state.upNext.length) return '';
    return `<section class="queue"><div class="eyebrow">Up next</div>${state.upNext.map((u, i) => `<div class="qrow ${isMine(u) ? 'mine' : ''}"><span class="k">${i === 0 ? 'On deck' : 'Then'}</span><span>${name(u.a)} vs ${name(u.b)}</span><span class="eta mono">Court ${u.court} · ~${clock(state.generatedAt + u.etaMin * 60000)} (${u.etaMin} min)</span></div>`).join('')}</section>`;
  }

  function renderPools() {
    return `<section class="pools">${state.pools.map(p => `<div class="card pool"><h2>Pool ${esc(p.id)}</h2>
      <table><thead><tr><th>Team</th><th class="num">W</th><th class="num">L</th><th class="num">Pts</th><th class="num">+/−</th></tr></thead><tbody>
      ${p.standings.map((r, i) => `<tr class="${r.status === 'withdrawn' ? 'withdrawn' : ''} ${r.teamId === myTeam ? 'mine' : ''}"><td>${i + 1}. ${name({ id: r.teamId, name: r.name })}${r.decidedBy ? `<span class="tb" title="Tie broken by ${r.decidedBy}">*</span>` : ''}</td><td class="num">${r.w}</td><td class="num">${r.l}</td><td class="num">${r.pf}–${r.pa}</td><td class="num">${r.pointDiff > 0 ? '+' : ''}${r.pointDiff}</td></tr>`).join('')}
      </tbody></table>
      <details${display ? '' : ''}><summary>Matches</summary><ul class="plain matches">${p.matches.map(m => `<li class="${m.status} ${isMine(m) ? 'mine' : ''}"><span>R${m.round}</span><span class="${m.winner && m.winner === m.a?.id ? 'won' : ''}">${name(m.a)}</span><span class="mono">${score(m) || (m.court ? `C${m.court}` : '·')}</span><span class="${m.winner && m.winner === m.b?.id ? 'won' : ''}">${name(m.b)}</span></li>`).join('')}</ul></details>
    </div>`).join('')}</section>`;
  }

  // ---- bracket: a real tree with connector lines, plus a list view for small screens ----
  // default: full tree on wide screens, scaled-to-fit on phones; the viewer's choice is remembered
  let bracketView = window.innerWidth < 700 ? 'fit' : 'tree';
  try { bracketView = localStorage.getItem('courtside.bracketView') || bracketView; } catch {}
  const BOX_W = 176, BOX_H = 58, COL_GAP = 44, ROW_GAP = 14;

  function renderBracket() {
    const isDouble = state.bracket.some(m => m.stage === 'losers');
    const toggle = display ? '' : `<div class="bviews" role="tablist">${[['tree', 'Bracket'], ['fit', 'Fit to screen'], ['list', 'List']].map(([v, l]) => `<button type="button" class="small ${bracketView === v ? 'cur' : ''}" data-bview="${v}">${l}</button>`).join('')}</div>`;
    const stages = [['bracket', isDouble ? 'Winners bracket' : 'Bracket'], ['losers', 'Losers bracket'], ['final', 'Finals']];
    const body = stages.map(([stage, title]) => {
      const ms = state.bracket.filter(m => m.stage === stage && !(m.conditional && !m.a));
      if (!ms.length) return '';
      return `<div class="bstage">${isDouble ? `<h3>${title}</h3>` : ''}${bracketView === 'list' ? bracketList(stage, ms) : bracketTree(stage, ms)}</div>`;
    }).join('');
    return `<section class="card bracketwrap ${bracketView === 'fit' ? 'fit' : ''}"><div class="bhead"><h2>${isDouble ? 'Double elimination' : 'Bracket'}</h2>${toggle}</div>${body}${bracketView === 'tree' && !display ? '<p class="muted small bhint">Swipe sideways to see later rounds.</p>' : ''}</section>`;
  }

  function bracketTree(stage, ms) {
    const third = ms.find(m => m.label === '3rd place');
    const tree = ms.filter(m => m !== third);
    const rounds = [...new Set(tree.map(m => m.round))].sort((a, b) => a - b);
    const pos = new Map();
    const feedersOf = m => tree.filter(f => f.feeds === m.id);
    rounds.forEach((r, ri) => {
      const inRound = tree.filter(m => m.round === r).sort((a, b) => (a.slot ?? 0) - (b.slot ?? 0));
      const x = ri * (BOX_W + COL_GAP);
      let cursor = 0;
      inRound.forEach(m => {
        const fs = feedersOf(m).map(f => pos.get(f.id)).filter(Boolean);
        let y;
        if (fs.length) y = fs.reduce((a, p) => a + p.y, 0) / fs.length;
        else y = cursor;
        y = Math.max(y, cursor);
        pos.set(m.id, { x, y });
        cursor = y + BOX_H + ROW_GAP;
      });
    });
    let height = Math.max(...[...pos.values()].map(p => p.y)) + BOX_H;
    let width = rounds.length * (BOX_W + COL_GAP) - COL_GAP;
    if (third) { const f = pos.get(tree.find(m => m.round === rounds.at(-1))?.id) ?? { x: 0, y: 0 }; pos.set(third.id, { x: f.x, y: height + ROW_GAP * 2 }); height += ROW_GAP * 2 + BOX_H; }
    const paths = tree.filter(m => m.feeds && pos.has(m.feeds)).map(m => {
      const a = pos.get(m.id), b = pos.get(m.feeds);
      const x1 = a.x + BOX_W, y1 = a.y + BOX_H / 2, x2 = b.x, y2 = b.y + BOX_H / 2, xm = x1 + COL_GAP / 2;
      const hot = m.winner && isMineId(m.winner);
      return `<path d="M${x1} ${y1} H${xm} V${y2} H${x2}" class="${m.winner ? 'decided' : ''} ${hot ? 'mine' : ''}"/>`;
    }).join('');
    const boxes = [...pos.entries()].map(([id, p]) => matchBox(ms.find(m => m.id === id), p)).join('');
    const labels = rounds.map((r, ri) => `<div class="rlbl" style="left:${ri * (BOX_W + COL_GAP)}px;width:${BOX_W}px">${roundName(stage, r, rounds.length, tree)}</div>`).join('');
    return `<div class="btree-scroll"><div class="btree" style="width:${width}px;height:${height + 22}px"><div class="rlbls">${labels}</div><div class="bcanvas" style="top:22px"><svg width="${width}" height="${height}" aria-hidden="true">${paths}</svg>${boxes}</div></div></div>`;
  }

  function matchBox(m, p) {
    const row = (t, side) => {
      const won = m.winner && t && m.winner === t.id;
      const pts = m.sets[0] ? m.sets.map(s => s[side]).join(' ') : (m.live && m.status === 'live' ? m.live[side] : '');
      return `<div class="brow ${won ? 'won' : ''} ${t && isMineId(t.id) ? 'mine' : ''}"><span class="bn">${t ? name(t) : `<span class="tbd">${feedLabel(m, side)}</span>`}</span><span class="bs mono">${pts}</span></div>`;
    };
    const tag = m.status === 'live' ? `<span class="btag live">Court ${m.court}</span>` : m.status === 'on_deck' ? `<span class="btag">On deck${m.court ? ` · C${m.court}` : ''}</span>` : m.status === 'forfeit' ? '<span class="btag">Forfeit</span>' : m.label ? `<span class="btag">${esc(m.label)}</span>` : '';
    return `<div class="bm ${m.status} ${isMine(m) ? 'mine' : ''}" style="left:${p.x}px;top:${p.y}px;width:${BOX_W}px;height:${BOX_H}px">${row(m.a, 0)}${row(m.b, 1)}${tag}</div>`;
  }

  function feedLabel(m, side) {
    // 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);
    if (w) return `W ${shortRef(w)}`;
    const l = state.bracket.find(f => f.loserFeeds === m.id && f.loserFeedsSide === wantSide);
    if (l) return `L ${shortRef(l)}`;
    return 'TBD';
  }
  const shortRef = m => m.stage === 'losers' ? `LB${m.round}.${m.slot}` : m.stage === 'final' ? 'final' : `R${m.round}.${m.slot}`;

  function bracketList(stage, ms) {
    const rounds = [...new Set(ms.map(m => m.round))].sort((a, b) => a - b);
    return rounds.map(r => `<div class="blist"><div class="rlbl">${roundName(stage, r, rounds.length, ms)}</div>${ms.filter(m => m.round === r).map(m => `<div class="bm list ${m.status} ${isMine(m) ? 'mine' : ''}">${['a', 'b'].map((k, i) => { const t = m[k]; const won = m.winner && t && m.winner === t.id; return `<div class="brow ${won ? 'won' : ''} ${t && isMineId(t.id) ? 'mine' : ''}"><span class="bn">${t ? name(t) : `<span class="tbd">${feedLabel(m, i)}</span>`}</span><span class="bs mono">${m.sets[0] ? m.sets.map(s => s[i]).join(' ') : (m.live && m.status === 'live' ? m.live[i] : '')}</span></div>`; }).join('')}${m.status === 'live' ? `<span class="btag live">Court ${m.court}</span>` : m.status === 'on_deck' ? `<span class="btag">On deck${m.court ? ` · C${m.court}` : ''}</span>` : m.status === 'forfeit' ? '<span class="btag">Forfeit</span>' : m.label ? `<span class="btag">${esc(m.label)}</span>` : ''}</div>`).join('')}</div>`).join('');
  }
  const isMineId = id => myTeam && id === myTeam;

  function fitBracket() {
    if (bracketView !== 'fit') return;
    document.querySelectorAll('.btree-scroll').forEach(sc => {
      const tree = sc.firstElementChild;
      const w = parseFloat(tree.style.width), h = parseFloat(tree.style.height);
      const scale = Math.min(1, (sc.clientWidth - 2) / w);
      tree.style.transform = `scale(${scale})`;
      tree.style.transformOrigin = '0 0';
      sc.style.height = `${h * scale}px`;
    });
  }
  document.addEventListener('click', e => {
    const b = e.target.closest('[data-bview]');
    if (!b) return;
    bracketView = b.dataset.bview;
    try { localStorage.setItem('courtside.bracketView', bracketView); } catch {}
    render();
  });
  window.addEventListener('resize', fitBracket);

  function roundName(stage, r, total, ms) {
    if (stage === 'final') return r === 1 ? 'Grand final' : 'Bracket reset';
    if (stage === 'losers') return `LB round ${r}`;
    const left = total - r;
    const inRound = ms.filter(m => m.round === r && m.label !== '3rd place').length;
    return left === 0 ? 'Final' : left === 1 ? 'Semifinals' : left === 2 ? 'Quarterfinals' : `Round of ${inRound * 2}`;
  }

  function renderRoster() {
    return `<section class="card"><h2>Teams (${state.teams.length})</h2><ol class="plain cols">${state.teams.map(t => `<li class="${t.id === myTeam ? 'mine' : ''}">${esc(t.name)} <span class="muted">(${t.players})</span></li>`).join('')}</ol></section>`;
  }

  // ---- alerts for the team page ----
  function notifyMine() {
    if (!myTeam) return;
    for (const a of state.recentAlerts) {
      const key = `${a.kind}:${a.match ?? a.at}`;
      if (seenAlerts.has(key)) continue;
      seenAlerts.add(key);
      if (!(a.kind === 'broadcast' || a.teams.includes(myTeam))) continue;
      if (Date.now() - a.at > 10 * 60 * 1000) continue; // stale on first load
      toast(a.text);
      try { navigator.vibrate?.([200, 100, 200]); } catch {}
      if ('Notification' in window && Notification.permission === 'granted') { try { new Notification('Courtside', { body: a.text, tag: key }); } catch {} }
    }
  }
  function toast(text) {
    const el = document.createElement('div'); el.className = 'toast'; el.textContent = text;
    document.body.appendChild(el); setTimeout(() => el.remove(), 8000);
  }
  document.addEventListener('click', e => {
    if (e.target.id === 'notify') Notification.requestPermission().then(render);
  });
  // first paint: skip toasts for alerts that already happened
  for (const a of state.recentAlerts) seenAlerts.add(`${a.kind}:${a.match ?? a.at}`);

  // ---- live updates ----
  let retry = 1000;
  function connect() {
    const ws = new WebSocket(`${location.protocol === 'https:' ? 'wss' : 'ws'}://${location.host}/ws/${state.slug}`);
    ws.onmessage = ev => { state = JSON.parse(ev.data); retry = 1000; render(); };
    ws.onclose = () => { setTimeout(connect, retry); retry = Math.min(retry * 2, 15000); };
    ws.onerror = () => ws.close();
  }
  render();
  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);
})();