@johnmorrisdotca/taisen-brackets 0.9.0 → 0.10.0

package/CHANGELOG.md

@@ -6,6 +6,16 @@ All notable changes to this project are written here. The format follows
 
 ## [Unreleased]
 
+## [0.10.0] - 2026-10-20
+
+Judo, step 4: the road to the final of one judoka.
+
+### Added
+
+- **`judoWins(bracket, athleteId, options)`**: the contests an athlete has won in a bracket, oldest first, as `{ round, opponent, how }`: the round (a repechage and a bronze medal contest named as such), the opponent as an athlete (`name`, `code`, `flag`, `mark` of the team, or what `athlete(team)` gives) and how it was won (a judo result's method, golden score and time, or the score). A bye is a row for each round a top seed skipped (`byes: false` leaves them out). A name that is not in the bracket is a `RangeError`. `Team.code`, the three letters of the country, is new.
+- **`judoRoadPanel({ athlete, wins }, options)`**: the panel for a broadcast or a hall screen. The athlete's block (flag, name, code, coach) in the colour of a judogi (`side`), and a row for each win, most recent first (`order`): the round on a pill, the opponent's flag, code and name, and how it was won; a bye is a quiet row. A wide screen puts the block on the left and the rows on the right, an upright one the block on top and the result under each name. `size`, `theme`, `flags`, `flagHref`, `locale`, `words`, `title`, `weight`, `rows`, `coach`. `describeJudoRoad`. The title is the road chart's word in each language.
+- The demo has a section for it: any of the 16 athletes of the Judo example (a bronze medallist's repechage and bronze medal contest included), size, look, the colour of the block and the order, with the call that draws it; the state is in the address. Tests hold every text inside the drawing and every opponent inside its row, in every size and several languages.
+
 ## [0.9.0] - 2026-10-20
 
 Judo, step 3: the contest card and the mat queue board.

package/README.md

@@ -240,7 +240,7 @@ In the road look, `seeds: true` writes a small tag (`P1`, `WC2`) beside each tea
 
 ## Judo
 
-A judo contest is a tie with a `judo` result: ippon, waza-ari, yuko and shido as the IJF's current Sport and Organisation Rules score them (yuko is back since 2025), golden score, the contest time and how it was won. The box writes the marks (`I`, `W`, `Y`), the shido as yellow and red cards and a note under the two rows, in the five languages. `judoBracket` makes a weight category's bracket with the IJF's repechage and its two bronze medal contests. [docs/judo.md](./docs/judo.md) quotes the rules it follows. `judoScoreboard` draws one contest's scoreboard for a given state (the athletes with flags and codes, ippon, waza-ari and yuko counters, shido cards, clock, golden score, osaekomi timer, weight class and round), on a TV or a tablet, as a screen board or as table-top flip cards: [try it in the demo](https://johnmorrisdotca.github.io/taisen-brackets/#board). `judoContestCard` and `judoMatQueue` draw the card shown when the athletes enter and the board of the next contests per mat, with a big mat number and colour ([demo](https://johnmorrisdotca.github.io/taisen-brackets/#queue)).
+A judo contest is a tie with a `judo` result: ippon, waza-ari, yuko and shido as the IJF's current Sport and Organisation Rules score them (yuko is back since 2025), golden score, the contest time and how it was won. The box writes the marks (`I`, `W`, `Y`), the shido as yellow and red cards and a note under the two rows, in the five languages. `judoBracket` makes a weight category's bracket with the IJF's repechage and its two bronze medal contests. [docs/judo.md](./docs/judo.md) quotes the rules it follows. `judoScoreboard` draws one contest's scoreboard for a given state (the athletes with flags and codes, ippon, waza-ari and yuko counters, shido cards, clock, golden score, osaekomi timer, weight class and round), on a TV or a tablet, as a screen board or as table-top flip cards: [try it in the demo](https://johnmorrisdotca.github.io/taisen-brackets/#board). `judoContestCard` and `judoMatQueue` draw the card shown when the athletes enter and the board of the next contests per mat, with a big mat number and colour ([demo](https://johnmorrisdotca.github.io/taisen-brackets/#queue)). `judoWins` and `judoRoadPanel` draw the road to the final of one judoka, the contests they have won on the way, most recent first ([demo](https://johnmorrisdotca.github.io/taisen-brackets/#judoroad)).
 
 <p align="center"><picture>
 <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/johnmorrisdotca/taisen-brackets/main/docs/images/judo-desk-dark.webp">
@@ -293,6 +293,7 @@ Put the string in a page (`element.innerHTML = svg`), write it to a file, or sen
 - **The champion in the centre**, with a slot for your trophy: your own SVG or image, or an emblem from [Dougu Sports](https://github.com/johnmorrisdotca/dougu-sports) (a hockey cup, a basketball trophy, a globe) through an optional plug-in, with no dependency added.
 - **Accessible**: `role="img"` with a title and a description, a tooltip sentence on every tie, and `bracketTable`.
 - **A judo scoreboard**: `judoScoreboard` draws one contest for a given state, in two styles (a board, and table-top flip cards) and three sizes, in five languages; live updating is yours.
+- **The road to the final of a judoka**: `judoWins` reads an athlete's wins from a bracket (a top seed's bye included) and `judoRoadPanel` draws them with the opponent's flag, code and name and how each was won.
 - **Judo screens for the hall**: `judoContestCard` (the category, the round, the white athlete over the blue one) and `judoMatQueue` (per mat, a big number and colour and the contests to come in order, with flags and codes), on a TV or a tablet, in five languages.
 - **Judo scoring**: `Matchup.judo` takes ippon, waza-ari, yuko, shido, hansoku-make, golden score and the contest time, checked against the IJF rules (`judoOutcome`); a box shows the marks, the shido cards and how the contest was won, and `judoBracket` adds the repechage and the two bronze medal contests ([docs/judo.md](./docs/judo.md)).
 - **Formats by era**: NHL, NBA, MLB, NFL, CFL, MLS and FIFA World Cup round names, series lengths and byes.
@@ -654,7 +655,7 @@ Everything is exported from `@johnmorrisdotca/taisen-brackets`; the layout part
 - `singleElimination(teams, options?)`, `advanceWinners(matchups)`, `standardSeeds(size)`: brackets for any number of teams.
 - `matchupsFromGames(games, options)`: matchups from a flat list of games.
 - `resolveMatchup`, `collectTeams`, `describeTie`, `noteParts`, `noteLong`: one tie's result, the teams of a bracket, a tie in a sentence.
-- `judoOutcome(result, winner?)`, `judoBracket(athletes, options?)`, `judoPodium(input)`, `judoCategoryLabel(category, locale?)`, `JUDO_WEIGHT_CLASSES`, `judoSeconds(time)`, `judoClock(seconds)`: judo results checked against the IJF rules, the bracket with its repechage and two bronze medal contests, the medallists, a weight category as a heading ([docs/judo.md](./docs/judo.md)). `judoScoreboard(contest, options?)`, `describeJudoContest(contest, options?)`, `JUDO_BOARD_SIZES`: the scoreboard of a contest as SVG and as a sentence. `judoContestCard(contest, options?)`, `judoMatQueue(mats, options?)`, `describeJudoCard`, `describeJudoQueue`, `JUDO_MAT_COLORS`: the contest card and the mat queue board as SVG and as sentences. `Matchup.judo` and `Matchup.stage` (`"repechage"`, `"bronze"`) carry them into `drawBracket`.
+- `judoOutcome(result, winner?)`, `judoBracket(athletes, options?)`, `judoPodium(input)`, `judoCategoryLabel(category, locale?)`, `JUDO_WEIGHT_CLASSES`, `judoSeconds(time)`, `judoClock(seconds)`: judo results checked against the IJF rules, the bracket with its repechage and two bronze medal contests, the medallists, a weight category as a heading ([docs/judo.md](./docs/judo.md)). `judoScoreboard(contest, options?)`, `describeJudoContest(contest, options?)`, `JUDO_BOARD_SIZES`: the scoreboard of a contest as SVG and as a sentence. `judoContestCard(contest, options?)`, `judoMatQueue(mats, options?)`, `describeJudoCard`, `describeJudoQueue`, `JUDO_MAT_COLORS`: the contest card and the mat queue board as SVG and as sentences. `judoWins(bracket, athlete, options?)`, `judoRoadPanel(source, options?)`, `describeJudoRoad`: an athlete's wins on the road to the final, and the panel. `Matchup.judo` and `Matchup.stage` (`"repechage"`, `"bronze"`) carry them into `drawBracket`.
 - `playoffFormat(league, year)`, `playoffEras(league)`, `LEAGUES`: the formats by era (`nhl`, `nba`, `mlb`, `nfl`, `cfl`, `mls`, `worldcup`). `LEAGUE_EMBLEMS`: each league's default emblem id.
 - `isEmblemId(value)`, and the types `EmblemRenderer`, `EmblemRequest`, `EmblemStyle`: the trophy emblems (see "Emblems for the trophy").
 - `roundName(remaining)`, `roundNamesFor(count)`, `roundLabel(layout, round, names, words)`: round names.
@@ -746,7 +747,7 @@ Any current browser, and Node 22 or later. The package makes no network request
 
 ## Roadmap
 
-- Judo: the road to the final of a judoka, double and full repechage ([docs/judo.md](./docs/judo.md)).
+- Judo: double and full repechage ([docs/judo.md](./docs/judo.md)).
 - Double elimination, and the group tables on one page with the knockout they lead to.
 - More languages (Portuguese, Italian, Korean, Chinese), and native review of the Spanish and German words.
 - A custom element and a React helper, as in the other packages of the family.

package/dist/index.d.ts

@@ -23,3 +23,5 @@ export { judoScoreboard, describeJudoContest, JUDO_BOARD_SIZES } from "./judo-bo
 export type { JudoAthlete, JudoBoardOptions, JudoBoardSizeName, JudoContest } from "./judo-board.ts";
 export { judoContestCard, describeJudoCard, judoMatQueue, describeJudoQueue, JUDO_MAT_COLORS } from "./judo-sheets.ts";
 export type { JudoCardContest, JudoMat, JudoQueueContest, JudoQueueOptions } from "./judo-sheets.ts";
+export { judoWins, judoRoadPanel, describeJudoRoad } from "./judo-road.ts";
+export type { JudoRoadOptions, JudoRoadSource, JudoWin, JudoWinsOptions } from "./judo-road.ts";

package/dist/index.js

@@ -13,3 +13,4 @@ export { playoffFormat, playoffEras, LEAGUES, LEAGUE_EMBLEMS } from "./presets.j
 export { judoBracket, judoPodium, judoCategoryLabel, judoOutcome, judoSeconds, judoClock, JUDO_WEIGHT_CLASSES } from "./judo.js";
 export { judoScoreboard, describeJudoContest, JUDO_BOARD_SIZES } from "./judo-board.js";
 export { judoContestCard, describeJudoCard, judoMatQueue, describeJudoQueue, JUDO_MAT_COLORS } from "./judo-sheets.js";
+export { judoWins, judoRoadPanel, describeJudoRoad } from "./judo-road.js";

package/dist/judo-road.d.ts

@@ -0,0 +1,53 @@
+/**
+ * The road to the final of one judoka as a panel for a broadcast or a hall screen: the athlete (flag, name, code, coach) and the contests they have won on the way, most
+ * recent first, each with its round, the opponent (flag, code, name) and how it was won. `judoWins` reads the wins from a bracket; `judoRoadPanel` draws them. Static SVG for a
+ * given state, like the other judo drawings.
+ */
+import type { JudoAthlete, JudoBoardOptions } from "./judo-board.ts";
+import type { BracketInput, BracketLayout, DrawOptions, Matchup, SideId, Team } from "./types.ts";
+/** One win on the road: the round it was in, the opponent (none for a bye), and how it was won in words ("ippon · 1:12", "decision · GS · 5:12", or a score). */
+export interface JudoWin {
+    round: string;
+    opponent?: JudoAthlete;
+    how: string;
+    bye?: boolean;
+}
+export interface JudoWinsOptions {
+    locale?: DrawOptions["locale"];
+    words?: DrawOptions["words"];
+    /** The names of the rounds, as for `drawBracket`. */
+    roundNames?: DrawOptions["roundNames"];
+    /** Turns a bracket's team into the athlete the panel draws. Default: its name, flag, mark and `code`. */
+    athlete?: (team: Team) => JudoAthlete;
+    /** Write a bye for each round the athlete skipped before their first contest. Default true. */
+    byes?: boolean;
+}
+/**
+ * The contests an athlete has won in a bracket, oldest first, with a bye for each round skipped at the start: the opponent, the round (a repechage and a bronze medal contest are named as
+ * such) and how it was won, from the judo result's notes or the score. Throws a `RangeError` for an athlete that is not in the bracket.
+ */
+export declare function judoWins(input: BracketLayout | readonly Matchup[] | BracketInput, athlete: SideId, options?: JudoWinsOptions): JudoWin[];
+export interface JudoRoadSource {
+    athlete: JudoAthlete;
+    /** Oldest first, as `judoWins` gives them. */
+    wins: readonly JudoWin[];
+}
+export interface JudoRoadOptions extends Omit<JudoBoardOptions, "style" | "swap" | "coaches"> {
+    /** The weight class as a heading (`judoCategoryLabel`), written at the right of the header. */
+    weight?: string;
+    /** The colour of the athlete's block: the white judogi's or the blue's. Default `blue`. */
+    side?: "white" | "blue";
+    /** `latest` (the default) puts the most recent win first, as a broadcast does; `first` the oldest. */
+    order?: "latest" | "first";
+    /** The most wins drawn. Default: as many as fit at a readable size, up to 8. */
+    rows?: number;
+    /** Write the coach under the code. Default true. */
+    coach?: boolean;
+}
+/** The road as a sentence, the drawing's description. */
+export declare function describeJudoRoad(source: JudoRoadSource, options?: Pick<JudoRoadOptions, "locale" | "words" | "weight" | "order">): string;
+/**
+ * The road-to-the-final panel for an athlete: their block (flag, name, code, coach) in the colour of a judogi, and a row for each contest won, most recent first: the round, the
+ * opponent's flag, code and name, and how it was won. A bye is a quiet row. Throws a `RangeError` for an athlete with no name, a win with no round, or a bad size, theme or `rows`.
+ */
+export declare function judoRoadPanel(source: JudoRoadSource, options?: JudoRoadOptions): string;

package/dist/judo-road.js

@@ -0,0 +1,207 @@
+import { bw, clampN, fitSize } from "./judo-board.js";
+import { judoNotes } from "./judo-text.js";
+import { check, frameOf, text, teamOf, wrap } from "./judo-sheets.js";
+import { layoutBracket } from "./layout.js";
+import { fill, voiceOf } from "./locales.js";
+import { drawMark } from "./marks.js";
+import { roundLabel } from "./rounds.js";
+import { fit, fitLines, num } from "./text.js";
+const asAthlete = (t) => ({ name: t.name, ...(t.code ? { code: t.code } : {}), ...(t.flag ? { flag: t.flag } : {}), ...(t.mark ? { mark: t.mark } : {}) });
+/**
+ * The contests an athlete has won in a bracket, oldest first, with a bye for each round skipped at the start: the opponent, the round (a repechage and a bronze medal contest are named as
+ * such) and how it was won, from the judo result's notes or the score. Throws a `RangeError` for an athlete that is not in the bracket.
+ */
+export function judoWins(input, athlete, options = {}) {
+    const layout = "ties" in input && "sides" in input ? input : layoutBracket(input);
+    const me = layout.teams.find((t) => t.id === athlete);
+    if (!me)
+        throw new RangeError(`taisen-brackets: ${JSON.stringify(athlete)} is not in the bracket`);
+    const v = voiceOf(options);
+    const w = v.words;
+    const map = options.athlete ?? asAthlete;
+    const label = (round) => roundLabel(layout, round, options.roundNames, v);
+    const order = (t) => (t.stage === "repechage" ? layout.rounds + 1 : t.stage === "bronze" ? layout.rounds + 2 : t.round);
+    const won = layout.ties
+        .filter((t) => t.winner !== null && t.sides[t.winner]?.id === athlete && (t.stage !== undefined || t.round > 0))
+        .sort((a, b) => order(a) - order(b) || a.index - b.index);
+    const rows = won.map((t) => {
+        const other = t.sides[(1 - t.winner)];
+        const how = t.judo
+            ? judoNotes(t, v, false).join(" · ")
+            : t.result.score ? fill(w.scoreText, { a: v.number(t.result.score[t.winner]), b: v.number(t.result.score[(1 - t.winner)]) }) : "";
+        const round = t.stage === "repechage" ? w.judoRepechage : t.stage === "bronze" ? w.judoBronze : label(t.round);
+        return { round, ...(other ? { opponent: map(other) } : {}), how };
+    });
+    const firstTree = won.find((t) => t.stage === undefined);
+    const byes = [];
+    if ((options.byes ?? true) && firstTree && firstTree.round > 1)
+        for (let r = 1; r < firstTree.round; r++)
+            byes.push({ round: label(r), how: w.bye, bye: true });
+    return [...byes, ...rows];
+}
+const ROAD_CSS = [
+    "$S .jr-row{fill:#f7f6f1;stroke:#bdbbae;stroke-width:1.5}",
+    "$S .jr-pill{fill:#dcdbd2}",
+    "$S .jr-ink{fill:#15181a}",
+    "$S .jr-sub{fill:#4a4f54}",
+    "$S .jr-bye{fill:#e9e8e1;stroke:#bdbbae;stroke-width:1.5}",
+].join("\n");
+/** The road as a sentence, the drawing's description. */
+export function describeJudoRoad(source, options = {}) {
+    const v = voiceOf(options);
+    const w = v.words;
+    const list = options.order === "first" ? [...source.wins] : [...source.wins].reverse();
+    const parts = [`${w.roadTitle}: ${source.athlete.name}${source.athlete.code ? ` (${source.athlete.code})` : ""}`];
+    if (options.weight)
+        parts.push(options.weight);
+    for (const x of list)
+        parts.push(x.bye ? `${x.round}: ${w.bye}` : `${x.round}: ${x.opponent?.name ?? ""}${x.how ? ` (${x.how})` : ""}`);
+    return parts.join(w.sep) + w.end;
+}
+/**
+ * The road-to-the-final panel for an athlete: their block (flag, name, code, coach) in the colour of a judogi, and a row for each contest won, most recent first: the round, the
+ * opponent's flag, code and name, and how it was won. A bye is a quiet row. Throws a `RangeError` for an athlete with no name, a win with no round, or a bad size, theme or `rows`.
+ */
+export function judoRoadPanel(source, options = {}) {
+    check(source.athlete, "road");
+    for (const x of source.wins) {
+        if (typeof x.round !== "string" || x.round === "")
+            throw new RangeError("taisen-brackets: every win on the road needs a round");
+        if (!x.bye && x.opponent)
+            check(x.opponent, `opponent in ${x.round}`);
+    }
+    if (options.side !== undefined && options.side !== "white" && options.side !== "blue")
+        throw new RangeError(`taisen-brackets: a road panel's side is "white" or "blue", not ${JSON.stringify(options.side)}`);
+    if (options.rows !== undefined && !(Number.isInteger(options.rows) && options.rows >= 1 && options.rows <= 20))
+        throw new RangeError("taisen-brackets: rows is a whole number from 1 to 20");
+    const f = frameOf(options, [source, options.side, options.order, options.rows, options.weight]);
+    const { W, H, v } = f;
+    const w = v.words;
+    const unit = Math.min(W, H);
+    const pad = Math.round(unit * 0.025);
+    const landscape = W >= H;
+    const body = [];
+    const headH = Math.round(H * (landscape ? 0.11 : 0.075));
+    body.push(`<rect class="jb-band" x="0" y="0" width="${num(W)}" height="${num(headH)}"/>`);
+    const hf = clampN(headH * 0.46, 13, 60);
+    const title = w.roadTitle;
+    {
+        const s = fitSize(title, hf, (W - pad * 2) * 0.55, 0.5);
+        body.push(text(pad, headH / 2 + s * 0.36, s, fit(title, s, (W - pad * 2) * 0.55, bw), "jb-ink", "start"));
+    }
+    if (options.weight) {
+        const s = fitSize(options.weight, hf, (W - pad * 2) * 0.4, 0.5);
+        body.push(text(W - pad, headH / 2 + s * 0.36, s, fit(options.weight, s, (W - pad * 2) * 0.4, bw), "jb-muted", "end"));
+    }
+    const top = headH + pad, availH = H - top - pad;
+    const side = options.side ?? "blue";
+    const A = source.athlete;
+    // The athlete's block.
+    const blockRect = landscape ? { x: pad, y: top, w: Math.round((W - pad * 3) * 0.4), h: availH } : { x: pad, y: top, w: W - pad * 2, h: Math.round(availH * 0.3) };
+    {
+        const g = [];
+        const rx = Math.round(unit * 0.014);
+        g.push(`<rect class="jb-panel" x="${num(blockRect.x)}" y="${num(blockRect.y)}" width="${num(blockRect.w)}" height="${num(blockRect.h)}" rx="${rx}"/>`);
+        const ip = Math.max(pad, blockRect.w * 0.05);
+        const inner = { x: blockRect.x + ip, y: blockRect.y + ip, w: blockRect.w - ip * 2, h: blockRect.h - ip * 2 };
+        const showCoach = (options.coach ?? true) && !!A.coach;
+        if (landscape) {
+            const flagD = Math.min(inner.w * 0.5, inner.h * 0.36);
+            g.push(drawMark(teamOf(A, "road"), inner.x + inner.w / 2, inner.y + flagD / 2, flagD, f.ctx));
+            const ty = inner.y + flagD + ip * 0.8;
+            const codeH = A.code ? inner.h * 0.07 : 0, coachH = showCoach ? inner.h * 0.045 : 0;
+            const fl = fitLines(A.name, inner.w, inner.h - flagD - ip * 0.8 - codeH - coachH - ip, Math.min(inner.h * 0.14, 150));
+            fl.lines.forEach((line, i) => g.push(text(inner.x + inner.w / 2, ty + fl.size * (i + 0.86), fl.size, fit(line, fl.size, inner.w + 1, bw), "jb-pink", "middle")));
+            let yy = ty + fl.height + ip * 0.3;
+            if (A.code) {
+                g.push(text(inner.x + inner.w / 2, yy + codeH * 0.9, codeH, A.code, "jb-psub", "middle", 800, ' letter-spacing=".1em"'));
+                yy += codeH + ip * 0.2;
+            }
+            if (showCoach)
+                g.push(text(inner.x + inner.w / 2, yy + coachH * 0.9, coachH, fit(fill(w.judoCoach, { name: A.coach }), coachH, inner.w, bw), "jb-psub", "middle", 600));
+        }
+        else {
+            const flagD = Math.min(inner.h * 0.8, inner.w * 0.22);
+            g.push(drawMark(teamOf(A, "road"), inner.x + flagD / 2, inner.y + inner.h / 2, flagD, f.ctx));
+            const tx = inner.x + flagD + ip, tw = inner.w - flagD - ip;
+            const codeH = A.code ? inner.h * 0.2 : 0, coachH = showCoach ? inner.h * 0.14 : 0;
+            const fl = fitLines(A.name, tw, inner.h - codeH - coachH - ip * 0.4, Math.min(inner.h * 0.42, 130));
+            const blockH = fl.height + codeH + coachH + (A.code ? ip * 0.2 : 0);
+            let yy = inner.y + (inner.h - blockH) / 2;
+            fl.lines.forEach((line, i) => g.push(text(tx, yy + fl.size * (i + 0.86), fl.size, fit(line, fl.size, tw + 1, bw), "jb-pink", "start")));
+            yy += fl.height + ip * 0.2;
+            if (A.code) {
+                g.push(text(tx, yy + codeH * 0.9, codeH, A.code, "jb-psub", "start", 800, ' letter-spacing=".1em"'));
+                yy += codeH;
+            }
+            if (showCoach)
+                g.push(text(tx, yy + coachH * 0.95, coachH, fit(fill(w.judoCoach, { name: A.coach }), coachH, tw, bw), "jb-psub", "start", 600));
+        }
+        body.push(`<g class="${side === "white" ? "jb-w" : "jb-b"}">${g.join("")}</g>`);
+    }
+    // The list.
+    const list = options.order === "first" ? [...source.wins] : [...source.wins].reverse();
+    const listRect = landscape ? { x: blockRect.x + blockRect.w + pad, y: top, w: W - blockRect.x - blockRect.w - pad * 2, h: availH } : { x: pad, y: top + blockRect.h + pad, w: W - pad * 2, h: availH - blockRect.h - pad };
+    const minRow = Math.max(40, unit * 0.06);
+    const capacity = Math.min(options.rows ?? 8, Math.max(1, Math.floor(listRect.h / minRow)));
+    const shown = list.slice(0, capacity);
+    if (shown.length) {
+        const rowH = Math.min(listRect.h / shown.length, unit * 0.15);
+        const gap = Math.max(4, rowH * 0.08);
+        const h = rowH - gap;
+        // Every round pill is as wide as the widest round name needs; where the list is narrow the result goes under the name, not beside it.
+        const stacked = listRect.w < h * 8;
+        const pillFont = h * 0.24;
+        const upper = (t) => t.toLocaleUpperCase(v.locale.tag);
+        const ip0 = h * 0.2;
+        const pillW = Math.min(listRect.w * 0.32, Math.max(...shown.map((x) => bw(upper(x.round), pillFont) * 0.8), listRect.w * 0.16) + ip0 * 1.4);
+        shown.forEach((x, i) => {
+            const y = listRect.y + i * rowH;
+            const g = [];
+            const rx = Math.round(unit * 0.01);
+            g.push(`<rect class="${x.bye ? "jr-bye" : "jr-row"}" x="${num(listRect.x)}" y="${num(y)}" width="${num(listRect.w)}" height="${num(h)}" rx="${rx}"/>`);
+            const ip = ip0;
+            g.push(`<rect class="jr-pill" x="${num(listRect.x + ip * 0.6)}" y="${num(y + h * 0.18)}" width="${num(pillW)}" height="${num(h * 0.64)}" rx="${num(h * 0.32)}"/>`);
+            const label = upper(x.round);
+            const rs = fitSize(label, pillFont, pillW - ip * 0.8, 0.4);
+            g.push(text(listRect.x + ip * 0.6 + pillW / 2, y + h / 2 + rs * 0.36, rs, fit(label, rs, pillW - ip * 0.6, bw), "jr-sub", "middle", 800, ' letter-spacing=".03em"'));
+            let cx = listRect.x + ip * 0.6 + pillW + ip;
+            const right = listRect.x + listRect.w - ip;
+            if (x.bye) {
+                const s = fitSize(upper(x.how), h * 0.34, right - cx, 0.4);
+                g.push(text(cx, y + h / 2 + s * 0.36, s, upper(x.how), "jr-sub", "start"));
+            }
+            else if (x.opponent) {
+                const d = h * 0.6;
+                g.push(drawMark(teamOf(x.opponent, `win-${i}`), cx + d / 2, y + h / 2, d, f.ctx));
+                cx += d + ip * 0.6;
+                const cs = h * 0.24;
+                if (x.opponent.code) {
+                    g.push(text(cx, y + h / 2 + cs * 0.36 - (stacked ? h * 0.2 : 0), cs, x.opponent.code, "jr-sub", "start", 800));
+                    cx += bw(x.opponent.code, cs) + ip * 0.6;
+                }
+                if (stacked) {
+                    const avail = right - cx;
+                    const ns = fitSize(x.opponent.name, Math.min(h * 0.34, 64), avail, 0.35);
+                    g.push(text(cx, y + h * 0.46, ns, fit(x.opponent.name, ns, avail + 1, bw), "jr-ink", "start"));
+                    if (x.how) {
+                        const hs = fitSize(x.how, h * 0.22, avail, 0.4);
+                        g.push(text(cx, y + h * 0.82, hs, fit(x.how, hs, avail + 1, bw), "jr-sub", "start", 700));
+                    }
+                }
+                else {
+                    const howW = Math.min(listRect.w * 0.3, bw(x.how, h * 0.28) * 0.85);
+                    const nameAvail = right - howW - ip * 0.6 - cx;
+                    const ns = fitSize(x.opponent.name, Math.min(h * 0.38, 64), nameAvail, 0.35);
+                    g.push(text(cx, y + h / 2 + ns * 0.36, ns, fit(x.opponent.name, ns, nameAvail + 1, bw), "jr-ink", "start"));
+                    if (x.how) {
+                        const hs = fitSize(x.how, h * 0.28, howW, 0.4);
+                        g.push(text(right, y + h / 2 + hs * 0.36, hs, fit(x.how, hs, howW + 1, bw), "jr-sub", "end", 700));
+                    }
+                }
+            }
+            body.push(`<g class="jr-win">${g.join("")}</g>`);
+        });
+    }
+    return wrap(f, options.title ?? w.roadTitle, describeJudoRoad(source, options), body, "road", ROAD_CSS);
+}

package/dist/judo-sheets.d.ts

@@ -4,6 +4,9 @@
  * and the blue athlete with flags and codes). Static SVG for a given state, like the scoreboard; showing the next state is the caller's job.
  */
 import type { JudoAthlete, JudoBoardOptions, JudoContest } from "./judo-board.ts";
+import { type Voice } from "./locales.ts";
+import { type MarkContext } from "./marks.ts";
+import type { Team } from "./types.ts";
 /** What the contest card shows: the two athletes and the header. The scores and the clock of a `JudoContest` are not drawn. */
 export type JudoCardContest = Pick<JudoContest, "white" | "blue" | "weight" | "round" | "mat" | "contest">;
 /** One contest of a mat's queue: its number (`"G-24"`, `24`) and the two athletes, and optionally the weight class and the round (for a caption). */
@@ -28,6 +31,23 @@ export interface JudoQueueOptions extends Omit<JudoBoardOptions, "style" | "coac
 }
 /** The IJF-style mat colours, in turn: red, green, yellow, purple, orange, teal. Each reads with the ink the board picks for it. */
 export declare const JUDO_MAT_COLORS: readonly string[];
+/** White or near-black, whichever reads better on a hex colour. */
+export declare function inkOn(color: string): string;
+export declare function sheetStyle(scope: string, theme: "auto" | "light" | "dark", extra?: string): string;
+export interface Frame {
+    W: number;
+    H: number;
+    v: Voice;
+    scope: string;
+    theme: "auto" | "light" | "dark";
+    ctx: MarkContext;
+    options: JudoBoardOptions;
+}
+export declare function frameOf(options: JudoBoardOptions, seed: unknown): Frame;
+export declare function wrap(f: Frame, title: string, desc: string, body: string[], label: string, extraCss?: string): string;
+export declare const text: (x: number, y: number, size: number, content: string, cls: string, anchor?: "start" | "middle" | "end", weight?: number, extra?: string) => string;
+export declare const teamOf: (a: JudoAthlete, id: string) => Team;
+export declare function check(a: JudoAthlete | undefined, side: string): void;
 /** The contest card as a sentence, the drawing's description. */
 export declare function describeJudoCard(contest: JudoCardContest, options?: Pick<JudoBoardOptions, "locale" | "words">): string;
 /**

package/dist/judo-sheets.js

@@ -5,7 +5,7 @@ import { emWidth, esc, fit, fitLines, hash, num } from "./text.js";
 /** The IJF-style mat colours, in turn: red, green, yellow, purple, orange, teal. Each reads with the ink the board picks for it. */
 export const JUDO_MAT_COLORS = Object.freeze(["#d2232a", "#1e9c4c", "#e7b800", "#7a3fb4", "#e8741a", "#12877f"]);
 /** White or near-black, whichever reads better on a hex colour. */
-function inkOn(color) {
+export function inkOn(color) {
     const hex = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(color.trim())?.[1];
     if (!hex)
         return "#ffffff";
@@ -14,7 +14,7 @@ function inkOn(color) {
     return 0.2126 * r + 0.7152 * g + 0.0722 * b < 0.4 ? "#ffffff" : "#15181a";
 }
 const HEX = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i;
-function sheetStyle(scope, theme) {
+export function sheetStyle(scope, theme, extra = "") {
     const base = (p, before) => rulesFor(p, `.${scope}`, before);
     const fixed = [
         `.${scope} .jb-w .jb-panel{fill:var(--jb-white-panel, ${WHITE_PANEL.panel});stroke:${WHITE_PANEL.edge};stroke-width:2}`,
@@ -32,13 +32,14 @@ function sheetStyle(scope, theme) {
         `.${scope} .tb-initials{fill:#1f2320}`,
         `.${scope} text{font-family:var(--jb-font, ${FONT});font-variant-numeric:tabular-nums}`,
     ].join("\n");
+    const tail = extra ? `${fixed}\n${extra.replaceAll("$S", `.${scope}`)}` : fixed;
     if (theme === "light")
-        return `${base(LIGHT, "")}\n${fixed}`;
+        return `${base(LIGHT, "")}\n${tail}`;
     if (theme === "dark")
-        return `${base(DARK, "")}\n${fixed}`;
-    return `${base(LIGHT, "")}\n@media (prefers-color-scheme: dark){\n${base(DARK, ':root:not([data-theme="light"]) ')}\n}\n${base(DARK, ':root[data-theme="dark"] ')}\n${fixed}`;
+        return `${base(DARK, "")}\n${tail}`;
+    return `${base(LIGHT, "")}\n@media (prefers-color-scheme: dark){\n${base(DARK, ':root:not([data-theme="light"]) ')}\n}\n${base(DARK, ':root[data-theme="dark"] ')}\n${tail}`;
 }
-function frameOf(options, seed) {
+export function frameOf(options, seed) {
     const v = voiceOf(options);
     const size = typeof options.size === "string" ? JUDO_BOARD_SIZES[options.size] : options.size ?? JUDO_BOARD_SIZES.tv;
     if (!size || !(size.width >= 200) || !(size.height >= 200))
@@ -50,20 +51,20 @@ function frameOf(options, seed) {
     const ctx = { radii: new Set(), symbols: new Map(), prefix: scope, shape: "round", theme: "inherit", flagCache: new Map(), ...(options.flags ? { flags: options.flags } : {}), ...(options.flagHref ? { flagHref: options.flagHref } : {}) };
     return { W: size.width, H: size.height, v, scope, theme, ctx, options };
 }
-function wrap(f, title, desc, body, label) {
+export function wrap(f, title, desc, body, label, extraCss = "") {
     return [
         `<svg xmlns="http://www.w3.org/2000/svg" lang="${esc(f.v.locale.code)}" class="taisen taisen-judo ${esc(f.scope)}${f.options.className ? ` ${esc(f.options.className)}` : ""}" viewBox="0 0 ${num(f.W)} ${num(f.H)}" width="${num(f.W)}" height="${num(f.H)}" style="max-width:100%;height:auto" role="img" aria-labelledby="${esc(f.scope)}-t ${esc(f.scope)}-d" data-board="${label}">`,
         `<title id="${esc(f.scope)}-t">${esc(title)}</title><desc id="${esc(f.scope)}-d">${esc(desc)}</desc>`,
-        `<style>${sheetStyle(f.scope, f.theme)}</style>`,
+        `<style>${sheetStyle(f.scope, f.theme, extraCss)}</style>`,
         markDefs(f.ctx) ? `<defs>${markDefs(f.ctx)}</defs>` : "",
         `<rect class="jb-bg" width="${num(f.W)}" height="${num(f.H)}"/>`,
         ...body,
         "</svg>",
     ].filter(Boolean).join("\n");
 }
-const text = (x, y, size, content, cls, anchor = "start", weight = 800, extra = "") => `<text class="${cls}" x="${num(x)}" y="${num(y)}" font-size="${num(size)}" font-weight="${weight}" text-anchor="${anchor}"${extra}>${esc(content)}</text>`;
-const teamOf = (a, id) => ({ id, name: a.name, abbr: (a.code ?? a.name).slice(0, 3).toUpperCase(), ...(a.flag ? { flag: a.flag } : {}), ...(a.mark ? { mark: a.mark } : {}) });
-function check(a, side) {
+export const text = (x, y, size, content, cls, anchor = "start", weight = 800, extra = "") => `<text class="${cls}" x="${num(x)}" y="${num(y)}" font-size="${num(size)}" font-weight="${weight}" text-anchor="${anchor}"${extra}>${esc(content)}</text>`;
+export const teamOf = (a, id) => ({ id, name: a.name, abbr: (a.code ?? a.name).slice(0, 3).toUpperCase(), ...(a.flag ? { flag: a.flag } : {}), ...(a.mark ? { mark: a.mark } : {}) });
+export function check(a, side) {
     if (!a || typeof a.name !== "string" || a.name.trim() === "")
         throw new RangeError(`taisen-brackets: the ${side} athlete needs a name`);
 }

package/dist/types.d.ts

@@ -33,6 +33,8 @@ export interface Team {
      * renderer, or one that has no flag for the code, the team's `mark` is drawn, or its initials: it never throws.
      */
     flag?: string;
+    /** The three letters of the team's country (`JPN`), which the judo screens write beside the name (`judoWins`, `judoRoadPanel`). */
+    code?: string;
 }
 /** One game of a tie: a match of a knockout, a game of a series, a leg of an aggregate, a replay. */
 export interface Game {

package/dist/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "0.9.0";
+export declare const VERSION = "0.10.0";

package/dist/version.js

@@ -1 +1 @@
-export const VERSION = "0.9.0";
+export const VERSION = "0.10.0";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@johnmorrisdotca/taisen-brackets",
-  "version": "0.9.0",
+  "version": "0.10.0",
   "description": "Taisen Brackets 対戦, knockout brackets as SVG: from a list of ties (games, best-of series, two legs, replays, byes, a third-place match) it works out the rounds and halves and draws the bracket with the halves meeting at the final, or left to right, wide, square, as a tall card or for a phone, in a classic or a road look (large round flags, big scores, a team's dotted path, a link on every box), in light, dark or a gold-on-navy poster look, in eight layouts (the tree, rows, shields, a score-update card, tall columns, the NBA's play-in, a series card and group tables), on one of twenty-five poster backgrounds (the playing surfaces of five sports among them) or your own, with each team's logo or round flag, the champion in the centre, and an accessible table; and the road to the final of either finalist. NHL, NBA, MLB, NFL, CFL, MLS and World Cup formats by era, in English, French, Japanese, Spanish and German. Zero dependencies.",
   "keywords": [
     "bracket",