@johnmorrisdotca/taisen-brackets 0.8.0 → 0.10.0

package/CHANGELOG.md

@@ -6,6 +6,27 @@ 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.
+
+### Added
+
+- **`judoContestCard(contest, options)`**: the card shown when the athletes enter. The weight class, the round, the mat and the contest number in a header, then the white athlete over the blue one as two wide bands with the flag, the name as big as the band allows (two lines at a space when that is clearly bigger) and the three-letter code. `describeJudoCard`.
+- **`judoMatQueue(mats, options)`**: the board of the contests to come, per mat. A mat is `{ mat, color?, contests }` and a contest `{ number, white, blue }`; each mat is a tall strip in its colour with its number big (white or near-black, whichever reads on the colour) and a row for each contest in order: the contest number (green for the one on now, `current: false` turns that off), the white athlete (name, code, flag) and the blue (flag, code, name). One to eight mats, in columns on a wide board (as many as leave each mat room for its names) and stacked on an upright tablet; `rows` cuts a long queue; `colors` and `JUDO_MAT_COLORS` (red, green, yellow, purple, orange, teal). `describeJudoQueue`.
+- Both take the scoreboard's `size` (`tv`, `tablet`, `tablet-tall`, your own), `theme`, `swap`, `flags`, `flagHref`, `locale`, `words`, `title`, `id` and `className`; a missing name, a mat with no number, a colour that is not a hex code, nine mats or a bad size are a `RangeError`. Words for the two titles in the five languages (the French and Japanese were read by native-language reviewers).
+- The demo has a section for them: the screen (queue or card), one to six mats, size, look and blue first, with the call that draws it; the state is in the address. Tests hold every text inside the drawing, in every size and several languages, and every name inside its side of its row.
+
 ## [0.8.0] - 2026-10-20
 
 Judo, step 2: the scoreboard of one contest.

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).
+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,8 @@ 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.
 - **Five languages**: English, French, Japanese, Spanish and German, for every word the drawing, the tooltips, the description and the table write, with the football terms of each language; countries named by `Intl` from their ISO code; numbers and dates by `Intl`. Add a language of your own.
@@ -653,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. `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.
@@ -745,7 +747,7 @@ Any current browser, and Node 22 or later. The package makes no network request
 
 ## Roadmap
 
-- Judo: a contest card and a mat queue board, 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

@@ -21,3 +21,7 @@ export { judoBracket, judoPodium, judoCategoryLabel, judoOutcome, judoSeconds, j
 export type { JudoBracketOptions, JudoCategory, JudoMethod, JudoOutcome, JudoPodium, JudoResult, JudoSide, JudoSystem } from "./judo.ts";
 export { judoScoreboard, describeJudoContest, JUDO_BOARD_SIZES } from "./judo-board.ts";
 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

@@ -12,3 +12,5 @@ export { VERSION } from "./version.js";
 export { playoffFormat, playoffEras, LEAGUES, LEAGUE_EMBLEMS } from "./presets.js";
 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-board.d.ts

@@ -78,6 +78,36 @@ export interface JudoBoardOptions {
     id?: string;
     className?: string;
 }
+export declare const clampN: (n: number, lo: number, hi: number) => number;
+export declare const bw: (text: string, size: number) => number;
+export interface Palette {
+    bg: string;
+    ink: string;
+    muted: string;
+    band: string;
+    box: string;
+    boxInk: string;
+    gold: string;
+}
+export declare const LIGHT: Palette;
+export declare const DARK: Palette;
+export declare const FONT = "system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Hiragino Sans\", \"Yu Gothic UI\", \"Noto Sans CJK JP\", Meiryo, sans-serif";
+/** The panels' own colours: the white and the blue judogi, the ink and the tiles on each. White on #1f4fa8 reads 8 to 1, and the dark ink on the white panel more. */
+export declare const WHITE_PANEL: {
+    panel: string;
+    ink: string;
+    sub: string;
+    tile: string;
+    edge: string;
+};
+export declare const BLUE_PANEL: {
+    panel: "#1f4fa8";
+    ink: string;
+    sub: string;
+    tile: string;
+    edge: string;
+};
+export declare function rulesFor(p: Palette, scope: string, side: string): string;
 /** The words of the state in a sentence, for the drawing's description. */
 export declare function describeJudoContest(contest: JudoContest, options?: Pick<JudoBoardOptions, "locale" | "words">): string;
 /**
@@ -85,3 +115,11 @@ export declare function describeJudoContest(contest: JudoContest, options?: Pick
  * past 20 seconds is clamped to 20).
  */
 export declare function judoScoreboard(contest: JudoContest, options?: JudoBoardOptions): string;
+export interface R {
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+}
+/** The size a text can be set at to fit a width, from the size asked for. */
+export declare function fitSize(text: string, size: number, width: number, floor?: number): number;

package/dist/judo-board.js

@@ -10,15 +10,15 @@ export const JUDO_BOARD_SIZES = Object.freeze({
     tablet: { width: 1280, height: 800 },
     "tablet-tall": { width: 800, height: 1280 },
 });
-const clampN = (n, lo, hi) => Math.min(hi, Math.max(lo, n));
-const bw = (text, size) => emWidth(text) * size;
-const LIGHT = { bg: "#ecebe4", ink: "#1b1e1c", muted: "#585d57", band: "#dcdad0", box: "#141716", boxInk: "#f4f1e6", gold: "#e0b43b" };
-const DARK = { bg: "#0e1011", ink: "#eceae0", muted: "#9aa097", band: "#1b1f21", box: "#050606", boxInk: "#f4f1e6", gold: "#e0b43b" };
-const FONT = 'system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Hiragino Sans", "Yu Gothic UI", "Noto Sans CJK JP", Meiryo, sans-serif';
+export const clampN = (n, lo, hi) => Math.min(hi, Math.max(lo, n));
+export const bw = (text, size) => emWidth(text) * size;
+export const LIGHT = { bg: "#ecebe4", ink: "#1b1e1c", muted: "#585d57", band: "#dcdad0", box: "#141716", boxInk: "#f4f1e6", gold: "#e0b43b" };
+export const DARK = { bg: "#0e1011", ink: "#eceae0", muted: "#9aa097", band: "#1b1f21", box: "#050606", boxInk: "#f4f1e6", gold: "#e0b43b" };
+export const FONT = 'system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Hiragino Sans", "Yu Gothic UI", "Noto Sans CJK JP", Meiryo, sans-serif';
 /** The panels' own colours: the white and the blue judogi, the ink and the tiles on each. White on #1f4fa8 reads 8 to 1, and the dark ink on the white panel more. */
-const WHITE_PANEL = { panel: "#f7f6f1", ink: "#15181a", sub: "#464b50", tile: "#e0dfd6", edge: "#bdbbae" };
-const BLUE_PANEL = { panel: JUDO_COLORS.blue, ink: "#ffffff", sub: "#dbe5fa", tile: "#173b86", edge: "#0f2a63" };
-function rulesFor(p, scope, side) {
+export const WHITE_PANEL = { panel: "#f7f6f1", ink: "#15181a", sub: "#464b50", tile: "#e0dfd6", edge: "#bdbbae" };
+export const BLUE_PANEL = { panel: JUDO_COLORS.blue, ink: "#ffffff", sub: "#dbe5fa", tile: "#173b86", edge: "#0f2a63" };
+export function rulesFor(p, scope, side) {
     const s = (sel, body) => `${side}${scope} ${sel}{${body}}`;
     const v = (name, value) => `var(--jb-${name}, ${value})`;
     return [
@@ -389,7 +389,7 @@ export function judoScoreboard(contest, options = {}) {
     ].filter(Boolean).join("\n");
 }
 /** The size a text can be set at to fit a width, from the size asked for. */
-function fitSize(text, size, width, floor = 0.62) {
+export function fitSize(text, size, width, floor = 0.62) {
     const need = bw(text, size);
     return need <= width ? size : Math.max(size * (width / need), size * floor);
 }

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

@@ -0,0 +1,65 @@
+/**
+ * Two more drawings for a judo event's screens: the contest card (who fights, in which category and round: the white athlete over the blue one, big, for the
+ * moment the athletes enter) and the mat queue board (per mat, a big mat number and colour and the contests to come, in order, with their numbers, the white
+ * 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). */
+export interface JudoQueueContest {
+    number: string | number;
+    white: JudoAthlete;
+    blue: JudoAthlete;
+}
+/** One mat: its number or name, its colour (any CSS colour that a hex code gives, default by position) and its contests in the order they will be fought. */
+export interface JudoMat {
+    mat: string | number;
+    color?: string;
+    contests: readonly JudoQueueContest[];
+}
+export interface JudoQueueOptions extends Omit<JudoBoardOptions, "style" | "coaches"> {
+    /** The most contests drawn for a mat. Default: as many as fit at a readable size, up to 12. */
+    rows?: number;
+    /** Show the first contest of each mat as the one on now (a green number). Default true. */
+    current?: boolean;
+    /** The colours the mats take in turn where a mat names none. Hex codes. */
+    colors?: readonly string[];
+}
+/** 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;
+/**
+ * The contest card: the weight class and the round on top, then the white athlete over the blue one, each as a wide band with the flag, the name as big as the band lets it be,
+ * and the country code. Throws a `RangeError` for an athlete with no name or a bad size or theme. `swap` draws blue first.
+ */
+export declare function judoContestCard(contest: JudoCardContest, options?: JudoBoardOptions): string;
+/** The mat queue as a sentence: for each mat, its contests in order. */
+export declare function describeJudoQueue(mats: JudoMat | readonly JudoMat[], options?: Pick<JudoBoardOptions, "locale" | "words">): string;
+/**
+ * The mat queue board: for each mat a big number in the mat's colour and the contests to come, in order, each a row with the contest number, the white athlete and the blue
+ * one (name, code, flag). The mats are in columns on a wide board and stacked on an upright one. A mat with more contests than fit is cut at `rows`. Throws a `RangeError`
+ * for no mat, a mat with no number, a contest with no number or no athlete name, a colour that is not a hex code, or a bad size or theme.
+ */
+export declare function judoMatQueue(input: JudoMat | readonly JudoMat[], options?: JudoQueueOptions): string;

package/dist/judo-sheets.js

@@ -0,0 +1,268 @@
+import { BLUE_PANEL, DARK, FONT, JUDO_BOARD_SIZES, LIGHT, WHITE_PANEL, bw, clampN, fitSize, rulesFor } from "./judo-board.js";
+import { fill, voiceOf } from "./locales.js";
+import { drawMark, markDefs } from "./marks.js";
+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. */
+export function inkOn(color) {
+    const hex = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(color.trim())?.[1];
+    if (!hex)
+        return "#ffffff";
+    const full = hex.length === 3 ? [...hex].map((c) => c + c).join("") : hex;
+    const [r, g, b] = [0, 2, 4].map((i) => parseInt(full.slice(i, i + 2), 16) / 255).map((c) => (c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4));
+    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;
+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}`,
+        `.${scope} .jb-w .jb-pink{fill:${WHITE_PANEL.ink}}`,
+        `.${scope} .jb-w .jb-psub{fill:${WHITE_PANEL.sub}}`,
+        `.${scope} .jb-b .jb-panel{fill:var(--jb-blue-panel, ${BLUE_PANEL.panel});stroke:${BLUE_PANEL.edge};stroke-width:2}`,
+        `.${scope} .jb-b .jb-pink{fill:${BLUE_PANEL.ink}}`,
+        `.${scope} .jb-b .jb-psub{fill:${BLUE_PANEL.sub}}`,
+        `.${scope} .jq-num{fill:#d9d8cf}`,
+        `.${scope} .jq-numt{fill:#15181a}`,
+        `.${scope} .jq-now{fill:var(--jb-now, #1d9a4a)}`,
+        `.${scope} .jq-nowt{fill:#ffffff}`,
+        `.${scope} .tb-ring{fill:none;stroke:rgba(0,0,0,.35);stroke-width:2}`,
+        `.${scope} .tb-plain{fill:#d9d3c2}`,
+        `.${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${tail}`;
+    if (theme === "dark")
+        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}`;
+}
+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))
+        throw new RangeError(`taisen-brackets: a size is "tv", "tablet", "tablet-tall" or { width, height } of 200 or more, not ${JSON.stringify(options.size)}`);
+    const theme = options.theme ?? "auto";
+    if (theme !== "auto" && theme !== "light" && theme !== "dark")
+        throw new RangeError(`taisen-brackets: a theme is "auto", "light" or "dark", not ${JSON.stringify(theme)}`);
+    const scope = options.id ?? `jb-${hash(JSON.stringify([seed, options.size, theme, options.swap, v.locale.code, options.flags ? 1 : 0, options.flagHref ? 1 : 0, options.title]))}`;
+    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 };
+}
+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, 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");
+}
+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`);
+}
+// ------------------------------------------------------------------------------------------------ the contest card
+/** The contest card as a sentence, the drawing's description. */
+export function describeJudoCard(contest, options = {}) {
+    const v = voiceOf(options);
+    const w = v.words;
+    const parts = [];
+    if (contest.weight)
+        parts.push(contest.weight);
+    if (contest.round)
+        parts.push(contest.round);
+    if (contest.mat !== undefined)
+        parts.push(fill(w.judoMat, { n: String(contest.mat) }));
+    if (contest.contest !== undefined)
+        parts.push(fill(w.judoContest, { n: String(contest.contest) }));
+    parts.push(`${w.judoWhite}: ${contest.white.name}${contest.white.code ? ` (${contest.white.code})` : ""}`);
+    parts.push(`${w.judoBlue}: ${contest.blue.name}${contest.blue.code ? ` (${contest.blue.code})` : ""}`);
+    return parts.join(w.sep) + w.end;
+}
+/**
+ * The contest card: the weight class and the round on top, then the white athlete over the blue one, each as a wide band with the flag, the name as big as the band lets it be,
+ * and the country code. Throws a `RangeError` for an athlete with no name or a bad size or theme. `swap` draws blue first.
+ */
+export function judoContestCard(contest, options = {}) {
+    check(contest.white, "white");
+    check(contest.blue, "blue");
+    const f = frameOf(options, contest);
+    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 headH = Math.round(H * (landscape ? 0.15 : 0.1));
+    const body = [];
+    body.push(`<rect class="jb-band" x="0" y="0" width="${num(W)}" height="${num(headH)}"/>`);
+    const hf = clampN(headH * 0.5, 14, 90);
+    const where = [contest.mat !== undefined ? fill(w.judoMat, { n: String(contest.mat) }) : "", contest.contest !== undefined ? fill(w.judoContest, { n: String(contest.contest) }) : ""].filter(Boolean).join(" · ");
+    const inner = W - pad * 2;
+    const leftT = contest.weight ?? "";
+    const rightT = contest.round ?? "";
+    const midT = where;
+    if (leftT) {
+        const s = fitSize(leftT, hf, inner * 0.4, 0.5);
+        body.push(text(pad, headH / 2 + s * 0.36, s, fit(leftT, s, inner * 0.4, bw), "jb-ink", "start"));
+    }
+    if (rightT) {
+        const s = fitSize(rightT, hf, inner * 0.4, 0.5);
+        body.push(text(W - pad, headH / 2 + s * 0.36, s, fit(rightT, s, inner * 0.4, bw), "jb-ink", "end"));
+    }
+    if (midT && landscape) {
+        const s = fitSize(midT, hf * 0.7, inner * 0.28, 0.5);
+        body.push(text(W / 2, headH / 2 + s * 0.36, s, fit(midT, s, inner * 0.28, bw), "jb-muted", "middle"));
+    }
+    const top = headH + pad;
+    const avail = H - top - pad;
+    const bandH = (avail - pad) / 2;
+    const order = (options.swap ? [1, 0] : [0, 1]);
+    order.forEach((k, i) => {
+        const a = k === 0 ? contest.white : contest.blue;
+        const y = top + i * (bandH + pad);
+        const g = [];
+        g.push(`<rect class="jb-panel" x="${num(pad)}" y="${num(y)}" width="${num(W - pad * 2)}" height="${num(bandH)}" rx="${Math.round(unit * 0.014)}"/>`);
+        const ip = Math.max(pad, bandH * 0.1);
+        const flagD = Math.min(bandH - ip * 2, (W - pad * 2) * 0.22);
+        g.push(drawMark(teamOf(a, k === 0 ? "white" : "blue"), pad + ip + flagD / 2, y + bandH / 2, flagD, f.ctx));
+        const tx = pad + ip * 2 + flagD;
+        const tw = W - pad - ip - tx;
+        const codeH = a.code ? bandH * 0.2 : 0;
+        const fl = fitLines(a.name, tw, bandH - ip * 2 - codeH - (a.code ? ip * 0.4 : 0), Math.min(bandH * 0.5, 220));
+        const blockH = fl.height + (a.code ? ip * 0.4 + codeH : 0);
+        let yy = y + (bandH - blockH) / 2;
+        fl.lines.forEach((line, li) => g.push(text(tx, yy + fl.size * (li + 0.86), fl.size, fit(line, fl.size, tw + 1, bw), "jb-pink", "start")));
+        yy += fl.height + ip * 0.4;
+        if (a.code)
+            g.push(text(tx, yy + codeH * 0.86, codeH, a.code, "jb-psub", "start", 800, ' letter-spacing=".1em"'));
+        body.push(`<g class="${k === 0 ? "jb-w" : "jb-b"}">${g.join("")}</g>`);
+    });
+    const title = options.title ?? w.judoCardTitle;
+    return wrap(f, title, describeJudoCard(contest, options), body, "card");
+}
+// ------------------------------------------------------------------------------------------------ the mat queue board
+/** The mat queue as a sentence: for each mat, its contests in order. */
+export function describeJudoQueue(mats, options = {}) {
+    const v = voiceOf(options);
+    const w = v.words;
+    const list = Array.isArray(mats) ? mats : [mats];
+    return list.map((m) => `${fill(w.judoMat, { n: String(m.mat) })}: ${m.contests.map((c) => `${c.number} ${fill(w.tieVs, { a: `${c.white.name} (${w.judoWhite})`, b: `${c.blue.name} (${w.judoBlue})` })}`).join("; ") || "-"}`).join(w.sep) + w.end;
+}
+/**
+ * The mat queue board: for each mat a big number in the mat's colour and the contests to come, in order, each a row with the contest number, the white athlete and the blue
+ * one (name, code, flag). The mats are in columns on a wide board and stacked on an upright one. A mat with more contests than fit is cut at `rows`. Throws a `RangeError`
+ * for no mat, a mat with no number, a contest with no number or no athlete name, a colour that is not a hex code, or a bad size or theme.
+ */
+export function judoMatQueue(input, options = {}) {
+    const mats = Array.isArray(input) ? input : [input];
+    if (mats.length === 0)
+        throw new RangeError("taisen-brackets: a mat queue board needs at least one mat");
+    if (mats.length > 8)
+        throw new RangeError("taisen-brackets: a mat queue board draws eight mats at most");
+    for (const m of mats) {
+        if (m.mat === undefined || String(m.mat).trim() === "")
+            throw new RangeError("taisen-brackets: every mat needs a number or a name");
+        if (m.color !== undefined && !HEX.test(m.color))
+            throw new RangeError(`taisen-brackets: a mat's colour is a hex code ("#d2232a"), not ${JSON.stringify(m.color)}`);
+        m.contests.forEach((c, i) => {
+            if (c.number === undefined || String(c.number).trim() === "")
+                throw new RangeError(`taisen-brackets: contest ${i + 1} of mat ${m.mat} needs a number`);
+            check(c.white, `white of contest ${c.number}`);
+            check(c.blue, `blue of contest ${c.number}`);
+        });
+    }
+    if (options.rows !== undefined && !(Number.isInteger(options.rows) && options.rows >= 1 && options.rows <= 40))
+        throw new RangeError("taisen-brackets: rows is a whole number from 1 to 40");
+    const palette = options.colors ?? JUDO_MAT_COLORS;
+    for (const c of palette)
+        if (!HEX.test(c))
+            throw new RangeError(`taisen-brackets: a mat colour is a hex code, not ${JSON.stringify(c)}`);
+    const f = frameOf(options, mats);
+    const { W, H, v } = f;
+    const w = v.words;
+    const unit = Math.min(W, H);
+    const pad = Math.round(unit * 0.02);
+    const n = mats.length;
+    // As many columns as leave each mat room for its names: about six tenths of the short side.
+    const cols = Math.max(1, Math.min(n, Math.floor((W - pad) / (unit * 0.62 + pad))));
+    const rowsN = Math.ceil(n / cols);
+    const title = options.title ?? w.judoQueueTitle;
+    const body = [];
+    const cellW = (W - pad * (cols + 1)) / cols;
+    const cellH = (H - pad * (rowsN + 1)) / rowsN;
+    const longest = Math.max(...mats.map((m) => m.contests.length), 1);
+    const minRow = Math.max(36, unit * 0.045);
+    const fits = Math.max(1, Math.floor(cellH / minRow));
+    const capacity = Math.min(options.rows ?? 12, fits);
+    const shown = Math.min(longest, capacity);
+    const rowH = Math.min(cellH / Math.max(shown, 1), unit * 0.11);
+    // The widest contest number in ems, so that every mat's number column is the same width.
+    const widest = Math.max(...mats.flatMap((m) => m.contests.slice(0, shown).map((q) => emWidth(String(q.number)))), 1);
+    mats.forEach((m, mi) => {
+        const col = mi % cols, row = Math.floor(mi / cols);
+        const x = pad + col * (cellW + pad), y = pad + row * (cellH + pad);
+        const color = m.color ?? palette[mi % palette.length];
+        const g = [];
+        const stripW = Math.min(cellW * 0.12, cellH * 0.22 + 30);
+        const rx = Math.round(unit * 0.012);
+        g.push(`<rect x="${num(x)}" y="${num(y)}" width="${num(stripW)}" height="${num(cellH)}" rx="${rx}" style="fill:${color}"/>`);
+        const label = String(m.mat);
+        const ns = Math.min(stripW * 0.8, cellH * 0.5, (stripW - 12) / (label.length * 0.66));
+        g.push(`<g><title>${esc(fill(w.judoMat, { n: label }))}</title><text x="${num(x + stripW / 2)}" y="${num(y + Math.min(cellH * 0.5, rowH * 2.2) / 2 + ns * 0.4)}" font-size="${num(ns)}" font-weight="800" text-anchor="middle" style="fill:${inkOn(color)}">${esc(label)}</text></g>`);
+        const rx0 = x + stripW + pad * 0.5;
+        const rowW = cellW - stripW - pad * 0.5;
+        m.contests.slice(0, shown).forEach((c, ci) => {
+            const ry = y + ci * rowH;
+            const h = rowH - Math.max(2, rowH * 0.05);
+            const current = (options.current ?? true) && ci === 0;
+            const numFont = h * 0.4;
+            const numW = Math.min(rowW * 0.26, Math.max(h * 1.2, widest * numFont * 1.04 + h * 0.35));
+            g.push(`<rect class="${current ? "jq-now" : "jq-num"}" x="${num(rx0)}" y="${num(ry)}" width="${num(numW)}" height="${num(h)}"/>`);
+            const nl = String(c.number);
+            const ns2 = Math.min(numFont, (numW - 8) / (nl.length * 0.68));
+            g.push(text(rx0 + numW / 2, ry + h / 2 + ns2 * 0.36, ns2, nl, current ? "jq-nowt" : "jq-numt", "middle"));
+            const sideW = (rowW - numW) / 2;
+            const sides = [[options.swap ? 1 : 0, rx0 + numW], [options.swap ? 0 : 1, rx0 + numW + sideW]];
+            sides.forEach(([k, sx], si) => {
+                const a = k === 0 ? c.white : c.blue;
+                const cls = k === 0 ? "jb-w" : "jb-b";
+                const gg = [];
+                gg.push(`<rect class="jb-panel" x="${num(sx)}" y="${num(ry)}" width="${num(sideW)}" height="${num(h)}" style="stroke-width:0"/>`);
+                const u = Math.min(h, sideW * 0.27);
+                const d = u * 0.56, ip = u * 0.16;
+                const code = a.code ?? "";
+                const cs = u * 0.26;
+                const codeW = code ? bw(code, cs) + ip * 0.5 : 0;
+                const flagX = si === 0 ? sx + sideW - ip - d / 2 : sx + ip + d / 2;
+                gg.push(drawMark(teamOf(a, `${m.mat}-${c.number}-${k}`), flagX, ry + h / 2, d, f.ctx));
+                // The first column (left): name, then code, then flag at the right edge; the second: flag at the left edge, then code, then name.
+                const nameFont = Math.min(u * 0.36, 64);
+                if (si === 0) {
+                    const avail = sideW - ip * 3 - d - codeW;
+                    const sz = fitSize(a.name, nameFont, avail, 0.3);
+                    gg.push(text(sx + ip, ry + h / 2 + sz * 0.36, sz, fit(a.name, sz, avail + 1, bw), "jb-pink", "start"));
+                    if (code)
+                        gg.push(text(sx + sideW - ip * 1.5 - d, ry + h / 2 + cs * 0.36, cs, code, "jb-psub", "end"));
+                }
+                else {
+                    const nx = sx + ip * 1.5 + d + codeW + ip * 0.5;
+                    const avail = sx + sideW - ip - nx;
+                    const sz = fitSize(a.name, nameFont, avail, 0.3);
+                    if (code)
+                        gg.push(text(sx + ip * 1.5 + d, ry + h / 2 + cs * 0.36, cs, code, "jb-psub", "start"));
+                    gg.push(text(nx, ry + h / 2 + sz * 0.36, sz, fit(a.name, sz, avail + 1, bw), "jb-pink", "start"));
+                }
+                g.push(`<g class="${cls}">${gg.join("")}</g>`);
+            });
+        });
+        body.push(`<g class="jq-mat">${g.join("")}</g>`);
+    });
+    return wrap(f, title, describeJudoQueue(mats, options), body, "queue");
+}

package/dist/locales.js

@@ -27,6 +27,7 @@ const EN = {
     judoRepechage: "Repechage", judoBronze: "Bronze medal contest", judoRepechageBronze: "Repechage and bronze medal contests", judoWhite: "white", judoBlue: "blue",
     judoWeightClass: "{sex} -{w} kg", judoWeightOver: "{sex} +{w} kg", judoMen: "Men", judoWomen: "Women",
     judoOsaekomi: "Osaekomi", judoShido: "Shido", judoMat: "Mat {n}", judoContest: "Contest {n}", judoCoach: "Coach: {name}", judoBoardTitle: "Judo contest scoreboard",
+    judoCardTitle: "Judo contest card", judoQueueTitle: "Judo mat queue",
 };
 const FR = {
     tbd: "À déterminer", bye: "exempt", walkover: "forfait", champion: "Champion", thirdPlace: "Match pour la troisième place", other: "Autres rencontres",
@@ -50,6 +51,7 @@ const FR = {
     judoRepechage: "Repêchage", judoBronze: "Combat pour la médaille de bronze", judoRepechageBronze: "Repêchages et combats pour la médaille de bronze", judoWhite: "blanc", judoBlue: "bleu",
     judoWeightClass: "{sex} -{w}\u00a0kg", judoWeightOver: "{sex} +{w}\u00a0kg", judoMen: "Hommes", judoWomen: "Femmes",
     judoOsaekomi: "Osaekomi", judoShido: "Shido", judoMat: "Tapis {n}", judoContest: "Combat {n}", judoCoach: "Entraîneur\u00a0: {name}", judoBoardTitle: "Tableau d’affichage d’un combat de judo",
+    judoCardTitle: "Présentation d’un combat de judo", judoQueueTitle: "Prochains combats par tapis",
 };
 const JA = {
     tbd: "未定", bye: "シード", walkover: "不戦勝", champion: "優勝", thirdPlace: "3位決定戦", other: "その他の対戦",
@@ -73,6 +75,7 @@ const JA = {
     judoRepechage: "敗者復活戦", judoBronze: "銅メダル決定戦", judoRepechageBronze: "敗者復活戦と銅メダル決定戦", judoWhite: "白", judoBlue: "青",
     judoWeightClass: "{sex}{w}kg級", judoWeightOver: "{sex}{w}kg超級", judoMen: "男子", judoWomen: "女子",
     judoOsaekomi: "抑え込み", judoShido: "指導", judoMat: "第{n}試合場", judoContest: "試合 {n}", judoCoach: "コーチ：{name}", judoBoardTitle: "柔道試合のスコアボード",
+    judoCardTitle: "柔道の対戦カード", judoQueueTitle: "各試合場の次の試合",
 };
 const ES = {
     tbd: "Por definir", bye: "exento", walkover: "incomparecencia", champion: "Campeón", thirdPlace: "Partido por el tercer puesto", other: "Otros partidos",
@@ -96,6 +99,7 @@ const ES = {
     judoRepechage: "Repesca", judoBronze: "Combate por la medalla de bronce", judoRepechageBronze: "Repesca y combates por la medalla de bronce", judoWhite: "blanco", judoBlue: "azul",
     judoWeightClass: "{sex} -{w} kg", judoWeightOver: "{sex} +{w} kg", judoMen: "Hombres", judoWomen: "Mujeres",
     judoOsaekomi: "Osaekomi", judoShido: "Shido", judoMat: "Tatami {n}", judoContest: "Combate {n}", judoCoach: "Entrenador: {name}", judoBoardTitle: "Marcador de un combate de judo",
+    judoCardTitle: "Ficha de un combate de judo", judoQueueTitle: "Próximos combates por tatami",
 };
 const DE = {
     tbd: "offen", bye: "Freilos", walkover: "kampflos", champion: "Turniersieger", thirdPlace: "Spiel um Platz 3", other: "Weitere Begegnungen",
@@ -119,6 +123,7 @@ const DE = {
     judoRepechage: "Hoffnungsrunde", judoBronze: "Kampf um Bronze", judoRepechageBronze: "Hoffnungsrunde und Kämpfe um Bronze", judoWhite: "weiß", judoBlue: "blau",
     judoWeightClass: "{sex} -{w} kg", judoWeightOver: "{sex} +{w} kg", judoMen: "Herren", judoWomen: "Damen",
     judoOsaekomi: "Osaekomi", judoShido: "Shido", judoMat: "Matte {n}", judoContest: "Kampf {n}", judoCoach: "Trainer: {name}", judoBoardTitle: "Anzeigetafel eines Judokampfes",
+    judoCardTitle: "Kampfkarte eines Judokampfes", judoQueueTitle: "Nächste Kämpfe je Matte",
 };
 /**
  * The round names, English name first. The football rounds are the terms of each language's Wikipedia article on the World Cup;

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 {
@@ -392,6 +394,9 @@ export interface Words {
     judoContest: string;
     judoCoach: string;
     judoBoardTitle: string;
+    /** The default titles of the contest card and of the mat queue board. */
+    judoCardTitle: string;
+    judoQueueTitle: string;
 }
 /** A language: its words, the names of the rounds (by their English names), and the tag `Intl` formats numbers and dates for. */
 export interface Locale {

package/dist/version.d.ts

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

package/dist/version.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@johnmorrisdotca/taisen-brackets",
-  "version": "0.8.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",