Deep gold champion banner and Final badge; 'bye' labels in round 1

Release 0.5.2.

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

CHANGELOG.md

@@ -9,6 +9,23 @@ so you can always tell what a deployment is actually serving.
 
 ## [Unreleased]
 
+## [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
+- A team that withdraws during a bracket now shows as a **forfeit** in every match it was in
+  or would have reached, with its name struck through and a "Forfeit · Team" tag on the match,
+  instead of quietly becoming a bye. If the opponent isn't known yet, the withdrawn team stays
+  in its slot and forfeits the moment the opponent arrives; in double elimination it forfeits
+  its losers-bracket match too. Play continues and the tournament still goes Final on its own.
+- Pool match lists mark forfeits as "FF".
+
 ## [0.5.0] - 2026-09-03
 
 ### Fixed

docs/ORGANIZER-GUIDE.md

@@ -46,7 +46,7 @@ A keeper link can only do two things: update the running score of the live match
 - *forfeit remaining* — their unplayed pool games become forfeit wins for the opponents; played games stand. This is the fair default when a team leaves mid-pool.
 - *void all games* — every game they played or would play is removed from standings, as if they never entered. Use this when a team leaves early and forfeits would distort the pool.
 
-In a bracket the opponent advances automatically either way.
+In a bracket the opponent advances by forfeit either way: the bracket shows the withdrawn team struck through with a "Forfeit" tag on each match it was in, including a later match whose opponent wasn't known yet at the time (it forfeits as soon as that opponent arrives). Play carries on and the tournament still finishes on its own.
 
 **Rain, injury, net repair.** Pause the court (with an optional reason shown on the board). The queue keeps flowing to the other court; Resume picks up where it left off.
 

engine/tournament.js

@@ -179,6 +179,12 @@ export class Tournament {
     const next = this.match(matchId);
     if (!next) return;
     next[side === 'A' ? 'teamA' : 'teamB'] = teamId;
+    // a withdrawn team was waiting here: it forfeits to the team that just arrived
+    if (next.autoForfeit && next.teamA && next.teamB && ['pending', 'on_deck'].includes(next.status)) {
+      const f = next.autoForfeit; delete next.autoForfeit;
+      if (this.teams.get(teamId)?.status === 'withdrawn') { next.status = 'void'; return; } // both gone
+      this.recordResult(next.id, [], { actor: 'system', forfeit: f });
+    }
   }
 
   _propagate(m) {
@@ -264,10 +270,12 @@ export class Tournament {
           m.court = null;
         }
       } else if (['pending', 'on_deck', 'live'].includes(m.status)) {
-        // bracket: opponent walks over, if known; otherwise the slot becomes a bye
+        // bracket: opponent walks over by forfeit. If the opponent isn't known yet, the withdrawn
+        // team stays in its slot marked autoForfeit and forfeits the moment the opponent arrives,
+        // so the bracket shows the forfeit rather than a silent bye.
         const opp = m.teamA === teamId ? m.teamB : m.teamA;
         if (opp) this.recordResult(m.id, [], { actor, forfeit: teamId });
-        else { const side = m.teamA === teamId ? 'A' : 'B'; m[side === 'A' ? 'teamA' : 'teamB'] = null; m.pendingBye = side; }
+        else m.autoForfeit = teamId;
         m.court = null;
       }
     }

package.json

@@ -1 +1 @@
-{"name":"courtside","type":"module","version":"0.5.0","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.2","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-state.js

@@ -5,7 +5,7 @@ export function publicState({ t, engine }) {
     id: m.id, stage: m.stage, round: m.round, slot: m.slot, label: m.label ?? null, status: m.status, court: m.court,
     a: m.teamA ? { id: m.teamA, name: name(m.teamA) } : null,
     b: m.teamB ? { id: m.teamB, name: name(m.teamB) } : null,
-    winner: m.winner, sets: m.sets, live: m.live ?? null, liveSets: m.liveSets ?? null, startedAt: m.startedAt ?? null, feeds: m.feeds, feedsSide: m.feedsSide, loserFeeds: m.loserFeeds ?? null, loserFeedsSide: m.loserFeedsSide ?? null, conditional: !!m.conditional,
+    winner: m.winner, sets: m.sets, forfeitBy: m.status === 'forfeit' ? m.loser : (m.autoForfeit ?? null), live: m.live ?? null, liveSets: m.liveSets ?? null, startedAt: m.startedAt ?? null, feeds: m.feeds, feedsSide: m.feedsSide, loserFeeds: m.loserFeeds ?? null, loserFeedsSide: m.loserFeedsSide ?? null, conditional: !!m.conditional,
   });
   const board = t.phase === 'live' ? engine.board() : null;
   const pools = t.pools.map(p => ({

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)}
@@ -84,7 +85,8 @@ ul.plain,ol.plain{list-style:none;padding:0;margin:8px 0}ol.plain{counter-reset:
 .brow.won .bn{font-weight:600}.brow.won .bs{color:var(--ink);font-weight:600}.brow.mine{background:var(--sand-soft)}
 .bm.live{border-color:var(--good);box-shadow:0 0 0 1px var(--good)}.bm.on_deck{border-style:dashed}.bm.mine{border-color:var(--sand);border-width:2px}
 .btag{position:absolute;left:50%;transform:translateX(-50%);bottom:-9px;white-space:nowrap;font-family:"Barlow Condensed",sans-serif;text-transform:uppercase;letter-spacing:.08em;font-size:10px;padding:0 6px;border-radius:3px;background:var(--bg);border:1px solid var(--line);color:var(--muted);line-height:1.5}
-.btag.live{background:var(--good);color:#fff;border-color:var(--good)}
+.btag.live{background:var(--good);color:#fff;border-color:var(--good)}.btag.ff{background:var(--sand-soft);color:var(--sand);border-color:var(--sand)}
+.brow.wd .bn,.wd{text-decoration:line-through;color:var(--muted)}.brow.wd .bn a{color:var(--muted)}
 .bm.list .btag{position:static;transform:none;display:inline-block;align-self:flex-start;margin:4px 9px 6px}
 .blist{margin-top:10px}.blist .rlbl{position:static;text-align:left}
 .bracketwrap.fit .btree-scroll{overflow:hidden}

server/public/board.js

@@ -10,6 +10,9 @@
   // 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 withdrawnIds = () => new Set(state.withdrawn.map(t => t.id));
+  const wdClass = t => t && withdrawnIds().has(t.id) ? 'wd' : '';
+  const forfeitTag = m => m.forfeitBy ? `<span class="btag ff">Forfeit · ${esc(state.withdrawn.concat(state.teams).find(t => t.id === m.forfeitBy)?.name ?? '')}</span>` : '';
   const fromName = (t, from) => t ? name(t) : from ? `<span class="tbd">${from.loser ? 'loser' : 'winner'} on Court ${from.court}</span>` : '<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);
@@ -31,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>`);
@@ -102,7 +105,7 @@
       <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>
+      <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' : ''} ${wdClass(m.a)}">${name(m.a)}</span><span class="mono">${m.status === 'forfeit' ? 'FF' : score(m) || (m.court ? `C${m.court}` : '·')}</span><span class="${m.winner && m.winner === m.b?.id ? 'won' : ''} ${wdClass(m.b)}">${name(m.b)}</span></li>`).join('')}</ul></details>
     </div>`).join('')}</section>`;
   }
 
@@ -162,13 +165,14 @@
     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>`;
+      return `<div class="brow ${won ? 'won' : ''} ${t && isMineId(t.id) ? 'mine' : ''} ${wdClass(t)}"><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>` : '';
+    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.forfeitBy ? forfeitTag(m) : 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) {
+    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);
@@ -181,7 +185,7 @@
 
   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('');
+    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' : ''} ${wdClass(t)}"><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.forfeitBy ? forfeitTag(m) : m.label ? `<span class="btag">${esc(m.label)}</span>` : ''}</div>`).join('')}</div>`).join('');
   }
   const isMineId = id => myTeam && id === myTeam;
 

test/engine.test.js

@@ -216,3 +216,29 @@ test('manual bracket: hand-picked round-1 pairs land in the chosen matches', ()
   assert.throws(() => t.generateBracketFromPairs([[a, a], [b, c], [d, e], [f, null]]), /placed twice/);
   assert.throws(() => t.generateBracketFromPairs([[a, b], [c, d], [e, null], [null, null]]), /Not placed/);
 });
+
+test('withdrawal mid-bracket shows as forfeits (not byes) and play continues to a champion', () => {
+  const t = setup(8, { stages: ['bracket'] });
+  t.closeRegistration();
+  t.generateBracket(ids(t), { type: 'double' });
+  let clock = 0;
+  const eng = new CourtEngine(t, { now: () => clock });
+  eng.start();
+  // play two matches, then withdraw a team that is live on a court
+  for (let i = 0; i < 2; i++) { const c = eng.courts.find(c => c.matchId); clock += 10 * 60_000; eng.recordResult(c.matchId, [[21, 10]]); }
+  const liveMatch = t.match(eng.courts.find(c => c.matchId).matchId);
+  const quitter = liveMatch.teamA;
+  eng.withdrawTeam(quitter, { mode: 'forfeit' });
+  // the live match is now a forfeit by the quitter, and any later match they land in forfeits too
+  assert.equal(liveMatch.status, 'forfeit'); assert.equal(liveMatch.loser, quitter);
+  let guard = 0;
+  while (t.phase === 'live' && guard++ < 100) {
+    const c = eng.courts.find(c => c.matchId); assert.ok(c, 'stalled');
+    clock += 10 * 60_000; eng.recordResult(c.matchId, [[21, 10]]);
+  }
+  assert.equal(t.phase, 'final');
+  const theirs = t.matches.filter(m => [m.teamA, m.teamB].includes(quitter) && m.stage !== 'pool');
+  assert.ok(theirs.length >= 2, 'quitter appears in WB and LB');
+  assert.ok(theirs.every(m => m.status === 'forfeit' && m.loser === quitter), 'every match of the quitter is a forfeit against them');
+  assert.equal(t.matches.filter(m => m.status === 'bye' && m.round > 1).length, 0, 'no silent byes created by the withdrawal');
+});