@johnmorrisdotca/taisen-brackets 0.8.0 → 0.9.0

package/CHANGELOG.md

@@ -6,6 +6,17 @@ All notable changes to this project are written here. The format follows
 
 ## [Unreleased]
 
+## [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)).
 
 <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.
+- **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 +654,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. `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 +746,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: the road to the final of a judoka, 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,5 @@ 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";

package/dist/index.js

@@ -12,3 +12,4 @@ 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";

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-sheets.d.ts

@@ -0,0 +1,45 @@
+/**
+ * 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";
+/** 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[];
+/** 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,267 @@
+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. */
+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;
+function sheetStyle(scope, theme) {
+    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");
+    if (theme === "light")
+        return `${base(LIGHT, "")}\n${fixed}`;
+    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}`;
+}
+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 };
+}
+function wrap(f, title, desc, body, label) {
+    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>`,
+        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) {
+    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

@@ -392,6 +392,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.9.0";

package/dist/version.js

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

package/package.json

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