Draw the bracket as a real tree with connectors; fit-to-screen and list views for phones

Matches are positioned per round with SVG connector lines between feeder and
next match, winners in bold, live matches tagged with their court, empty slots
labelled with what fills them (W R1.4, L R2.1), and the viewer's team highlighted
along its path. Double elimination renders winners, losers and finals trees.
Narrow screens default to a scaled fit-to-width view; a round-by-round list is
also available. Seed script gains --stage=bracket|double. Release 0.3.0.

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

scripts/seed-demo.js

@@ -1,12 +1,16 @@
 // Creates a demo tournament in the database so a fresh install has something to look at.
 // Run with the server STOPPED (the server keeps state in memory and writes it back):
 //   DB_PATH=./data/courtside.sqlite node scripts/seed-demo.js
+// Options: --stage=pool (default, mid pool play) | --stage=bracket (single elim in progress)
+//          | --stage=double (double elim in progress)
 import { fileURLToPath } from 'node:url';
 import { dirname, join } from 'node:path';
 import { Store } from '../server/store.js';
 import { Registry } from '../server/state.js';
 
 const here = dirname(fileURLToPath(import.meta.url));
+const args = Object.fromEntries(process.argv.slice(2).map(a => a.replace(/^--/, '').split('=')));
+const STAGE = args.stage ?? 'pool';
 const DB_PATH = process.env.DB_PATH ?? join(here, '..', 'data', 'courtside.sqlite');
 const store = new Store(DB_PATH);
 const registry = new Registry(store);
@@ -31,6 +35,24 @@ for (let i = 0; i < 7; i++) {
   const hi = 21, lo = Math.floor(8 + rnd() * 12);
   engine.recordResult(c.matchId, [rnd() < 0.5 ? [hi, lo] : [lo, hi]]);
 }
+if (STAGE !== 'pool') {
+  // finish pool play, build the bracket, decide a few bracket matches
+  while (engine.courts.some(c => c.matchId) && t.matches.filter(m => m.stage === 'pool' && m.status === 'pending').length + engine.courts.filter(c => c.matchId).length > 0) {
+    const c = engine.courts.find(c => c.matchId); if (!c) break;
+    clock += (12 + rnd() * 6) * 60_000;
+    const lo = Math.floor(8 + rnd() * 12);
+    engine.recordResult(c.matchId, [rnd() < 0.5 ? [21, lo] : [lo, 21]]);
+  }
+  const seeded = t.advanceFromPools({ perPool: 2, wildcards: 2 });
+  t.generateBracket(seeded, { type: STAGE === 'double' ? 'double' : 'single', thirdPlace: STAGE !== 'double' });
+  engine.tick();
+  for (let i = 0; i < (STAGE === 'double' ? 5 : 3); i++) {
+    const c = engine.courts.find(c => c.matchId); if (!c) break;
+    clock += (12 + rnd() * 6) * 60_000;
+    const lo = Math.floor(8 + rnd() * 12);
+    engine.recordResult(c.matchId, [rnd() < 0.5 ? [21, lo] : [lo, 21]]);
+  }
+}
 const live = engine.courts.filter(c => c.matchId).map(c => t.match(c.matchId));
 if (live[0]) live[0].live = [14, 11];
 if (live[1]) live[1].live = [7, 9];