@johnmorrisdotca/taisen-brackets 0.15.0 → 0.17.0

package/CHANGELOG.md

@@ -6,6 +6,28 @@ All notable changes to this project are written here. The format follows
 
 ## [Unreleased]
 
+## [0.17.0] - 2026-10-20
+
+Broadcast boards, step 3: the medal table.
+
+### Added
+
+- **`broadcastMedalTable({ title?, subtitle?, date?, source?, rows }, options)`**: the medal table in the manner of a television graphic, as one standalone SVG: a title band (the heading, with the date at its right), a sub bar with the three medal discs over their columns and the word total, and a row for each country or team with its rank, a 4:3 flag, its code or name (`labels`) and the gold, silver and bronze counts each beside its disc, and the total. The same source as `medalTable`, ranked and tied by the same rules (`sort`, `ties`, `top`, `skipEmpty`), so `tallyMedals` feeds it; `ranks: false`. Looks, icons, languages and `--bc-*` custom properties as for the other boards; up to 24 rows.
+- **`broadcastMedalSize(rowCount, { width })`**: the size before it is drawn: the width (1280 by default, 720 to 4000) and a height of 64 + 36 + 10 + 48 a row + 10, scaled.
+- The three boards now have a section on placing them over something: the size is read before drawing, nothing is drawn outside the panel, and the SVG scales as a picture. [docs/broadcast.md](docs/broadcast.md).
+- The demo's Broadcast boards section has the medal table, with the look, icon and width in the address.
+
+## [0.16.0] - 2026-10-20
+
+Broadcast boards, step 2: the bout presentation board.
+
+### Added
+
+- **`boutBoard({ title, phase?, bout?, red, blue, officials? }, options)`**: the screen shown as two athletes are about to compete, as one standalone SVG: a title band (the event, with the phase at its right), a bar "Bout presentation" with the bout's number ("Bout: 142"), the two athletes in a red band and a blue one (code, 4:3 flag, name), a bar "Referee and judges", and a row for each official (code, flag, name, role). A role is `"referee"`, `"judge"` (numbered in the order given, in the language's words) or a text of your own. Looks, icons, `nameCase`, `nameStyle`, languages and `--bc-*` custom properties as for the results board; up to 12 officials. `describeBoutBoard`.
+- **`boutBoardSize(officialCount, { width })`**: the size before it is drawn, for placing it: the width (1280 by default, 720 to 4000) and a height of 64 + 38 + 10 + 62 + 10 + 38 + 42 an official + 10, scaled.
+- Words for the board in the five languages: the bout, the two bars, the referee and a judge (the French and Japanese were read by native-language reviewers; the Spanish and German were not).
+- The demo's Broadcast boards section has the bout presentation (a made-up wrestling bout with a referee and five judges), in the three looks. [docs/broadcast.md](docs/broadcast.md).
+
 ## [0.15.0] - 2026-10-20
 
 Broadcast boards, step 1: the results board.

package/README.md

@@ -266,7 +266,7 @@ A judo contest is a tie with a `judo` result: ippon, waza-ari, yuko and shido as
 
 ## Broadcast boards
 
-`resultsBoard` draws a results board in the manner of a television graphic: a title band with an icon, a sub bar, and a row for each athlete with a rank in a box, the country code, a 4:3 flag, the name, a record badge (`OR`, `WR`, `NR`) and one or more columns of scores or times at the sport's own precision (a gymnastics final, an all-around, a swimming final, athletics, speed skating). It is one standalone SVG of a width you choose and a height that follows from the rows (`resultsBoardSize`), made to be placed over a picture, in three looks and with no mark of any games or broadcaster. [docs/broadcast.md](./docs/broadcast.md) · [try it in the demo](https://johnmorrisdotca.github.io/taisen-brackets/#boards)
+`resultsBoard` draws a results board in the manner of a television graphic: a title band with an icon, a sub bar, and a row for each athlete with a rank in a box, the country code, a 4:3 flag, the name, a record badge (`OR`, `WR`, `NR`) and one or more columns of scores or times at the sport's own precision (a gymnastics final, an all-around, a swimming final, athletics, speed skating). It is one standalone SVG of a width you choose and a height that follows from the rows (`resultsBoardSize`), made to be placed over a picture, in three looks and with no mark of any games or broadcaster. `boutBoard` draws the bout presentation: the two athletes in a red and a blue band, the referee and the judges. `broadcastMedalTable` draws the medal table with a disc for each medal. [docs/broadcast.md](./docs/broadcast.md) · [try it in the demo](https://johnmorrisdotca.github.io/taisen-brackets/#boards)
 
 <p align="center"><picture>
 <img alt="A results board in the blue look: a gymnastics apparatus final with a title band, a sub bar with three score columns, and eight rows with a red rank box, country code, flag, name and scores." src="https://raw.githubusercontent.com/johnmorrisdotca/taisen-brackets/main/docs/images/results-apparatus-blue.webp" width="640">
@@ -322,7 +322,7 @@ Put the string in a page (`element.innerHTML = svg`), write it to a file, or sen
 - **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.
 - **Rankings**: `rankingList` draws a ranking from your data, text first: rank, flag (a country or a Canadian province), name, club, points, movement arrows, a podium, a champion row, ties and paging; `rankingNumberOnes` the number one of each category and `rankingEntryList` an event's entry list with each athlete's ranking and `rankingMatchup` a head-to-head card ([docs/rankings.md](./docs/rankings.md)).
 - **A medal table for any sport**: `medalTable` ranks countries or teams gold first or by the total, with shared ranks, flags or badges, filters by sport, weight class and Games through `tallyMedals`, and former countries as rows of their own ([docs/medals.md](./docs/medals.md)).
-- **Broadcast boards**: `resultsBoard` draws a results graphic (title band, rank boxes, 4:3 flags, record badges, columns of scores) as a standalone SVG that follows from its rows, to place over a picture, in three looks and with no mark of any games ([docs/broadcast.md](./docs/broadcast.md)).
+- **Broadcast boards**: `resultsBoard` draws a results graphic (title band, rank boxes, 4:3 flags, record badges, columns of scores) and `boutBoard` the bout presentation (the two athletes, the referee and the judges) and `broadcastMedalTable` the medal table as a standalone SVG that follows from its rows, to place over a picture, in three looks and with no mark of any games ([docs/broadcast.md](./docs/broadcast.md)).
 - **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.
@@ -686,7 +686,7 @@ Everything is exported from `@johnmorrisdotca/taisen-brackets`; the layout part
 - `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`.
 - `rankingList(source, options?)`, `rankingRanks(entries, options?)`, `rankingCategoryLabel(category, locale?)`, `describeRanking(source, options?)`, `BOARD_SIZES`: a ranking list as SVG, its ranks as data, a category as a heading and the drawing as a sentence. `rankingNumberOnes(source, options?)`, `describeNumberOnes`, `NUMBER_ONE_COLORS`: the number one of each category as cards. `rankingEntryList(source, options?)`, `describeEntryList`: an event's entry list with each athlete's ranking. `rankingMatchup(source, options?)`, `describeMatchup`, `matchupRecord(meetings)`: the head-to-head card of two athletes and their meetings ([docs/rankings.md](./docs/rankings.md)).
 - `medalTable(source, options?)`, `medalRanks(rows, options?)`, `tallyMedals(awards, filter?)`, `describeMedalTable(source, options?)`: a medal table as SVG, its ranks as data, a list of medals added up and filtered, and the table as a sentence ([docs/medals.md](./docs/medals.md)).
-- `resultsBoard(source, options?)`, `resultsBoardSize(rowCount, options?)`, `describeResultsBoard(source, options?)`, `BROADCAST_LOOKS`: a broadcast-style results board as a standalone SVG, its size from its rows, and the board as a sentence ([docs/broadcast.md](./docs/broadcast.md)).
+- `resultsBoard(source, options?)`, `resultsBoardSize(rowCount, options?)`, `describeResultsBoard(source, options?)`, `BROADCAST_LOOKS`: a broadcast-style results board as a standalone SVG, its size from its rows, and the board as a sentence. `boutBoard(source, options?)`, `boutBoardSize(officialCount, options?)`, `describeBoutBoard(source, options?)`: the bout presentation board, its size and its description. `broadcastMedalTable(source, options?)`, `broadcastMedalSize(rowCount, options?)`: the medal table in the broadcast style and its size ([docs/broadcast.md](./docs/broadcast.md)).
 - `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.

package/dist/bout-board.d.ts

@@ -0,0 +1,52 @@
+/**
+ * The bout presentation board: the screen shown as two athletes are about to compete. A title band with the event and the phase, a bar that says "Bout presentation" with the bout's number, the
+ * two athletes (a red band and a blue one, each with a code, a 4:3 flag and a name), and a bar that says "Referee and judges" over a row for each official with the country code, flag, name and role.
+ * One standalone SVG of a width you choose and a height that follows from the officials (`boutBoardSize`), made to be placed over a picture. Nothing of any games or broadcaster is drawn.
+ */
+import { type BroadcastOptions } from "./broadcast-kit.ts";
+import { type RankingName, type RankingOptions } from "./ranking.ts";
+/** One of the two athletes of a bout. Only `name` is needed. */
+export interface BoutAthlete {
+    /** The name as it is to be written (`MAYER M.`), or its two parts (set by `nameStyle`). */
+    name: string | RankingName;
+    /** The country's three letters. */
+    code?: string;
+    /** A code for the `flags` function, drawn 4:3. */
+    flag?: string;
+    /** A mark of your own in place of a flag. */
+    mark?: string;
+}
+/** A referee or a judge. Only `name` is needed. */
+export interface BoutOfficial extends BoutAthlete {
+    /** `referee` (the language's word), `judge` (numbered 1, 2, 3 in the order given, in the language's words), or any text you want written (`Chair`, `Mat president`). Default `judge`. */
+    role?: "referee" | "judge" | (string & {});
+}
+export interface BoutBoardSource {
+    /** The event, in capitals in the title band ("Women's 57-60 kg"). */
+    title: string;
+    /** The phase, at the right of the title band ("Preliminaries"). */
+    phase?: string;
+    /** The bout's number (`142`, `"A-12"`), written "Bout: 142" at the right of the first bar. */
+    bout?: string | number;
+    /** The athlete in the red band, at the left, and the one in the blue band, at the right. */
+    red: BoutAthlete;
+    blue: BoutAthlete;
+    /** The referee and the judges, in the order they are written. */
+    officials?: readonly BoutOfficial[];
+}
+export interface BoutBoardOptions extends BroadcastOptions, Pick<RankingOptions, "nameStyle"> {
+    /** `upper` writes the names in capitals; `as-is` (the default) leaves them as given. */
+    nameCase?: "as-is" | "upper";
+}
+/** The width and the height of a bout board with `officialCount` officials: the width given (1280 by default) and a height of 64 + 38 + 10 + 62 + 10 + 38 + 42 an official + 10, in units of the width over 1280. */
+export declare function boutBoardSize(officialCount: number, options?: Pick<BroadcastOptions, "width">): {
+    width: number;
+    height: number;
+};
+/** The board as a sentence, the drawing's description. */
+export declare function describeBoutBoard(source: BoutBoardSource, options?: Pick<BoutBoardOptions, "locale" | "words" | "nameStyle" | "nameCase">): string;
+/**
+ * The bout presentation board as a standalone SVG. Throws a `RangeError` for a board with no title, an athlete or official with no name, more than 12 officials, a role that is not a text, an unknown option
+ * value, or a width outside 720 to 4000.
+ */
+export declare function boutBoard(source: BoutBoardSource, options?: BoutBoardOptions): string;

package/dist/bout-board.js

@@ -0,0 +1,194 @@
+/**
+ * The bout presentation board: the screen shown as two athletes are about to compete. A title band with the event and the phase, a bar that says "Bout presentation" with the bout's number, the
+ * two athletes (a red band and a blue one, each with a code, a 4:3 flag and a name), and a bar that says "Referee and judges" over a row for each official with the country code, flag, name and role.
+ * One standalone SVG of a width you choose and a height that follows from the officials (`boutBoardSize`), made to be placed over a picture. Nothing of any games or broadcaster is drawn.
+ */
+import { BC, box, broadcastFrame, broadcastWrap, bw, fitSize, gloss, panel, t, titleBand } from "./broadcast-kit.js";
+import { fill, voiceOf } from "./locales.js";
+import { drawMark } from "./marks.js";
+import { nameText } from "./ranking.js";
+import { abbreviate, fit } from "./text.js";
+const MAX_OFFICIALS = 12;
+/** The width and the height of a bout board with `officialCount` officials: the width given (1280 by default) and a height of 64 + 38 + 10 + 62 + 10 + 38 + 42 an official + 10, in units of the width over 1280. */
+export function boutBoardSize(officialCount, options = {}) {
+    const width = options.width ?? 1280;
+    const u = width / 1280;
+    return { width, height: Math.round((BC.title + BC.band + BC.pad + BC.athlete + BC.pad + BC.band + (officialCount > 0 ? officialCount * (BC.official + BC.gap) : 0) + BC.pad) * u) };
+}
+function nameOf(n) {
+    return typeof n === "string" ? n : n.surname;
+}
+function validate(source, options) {
+    if (!source || typeof source.title !== "string" || source.title.trim() === "")
+        throw new RangeError("taisen-brackets: a bout board needs a title");
+    const who = (a, side) => {
+        const n = a?.name;
+        const ok = typeof n === "string" ? n.trim() !== "" : !!n && typeof n === "object" && typeof n.surname === "string" && n.surname.trim() !== "";
+        if (!ok)
+            throw new RangeError(`taisen-brackets: the ${side} needs a name`);
+    };
+    who(source.red, "red athlete");
+    who(source.blue, "blue athlete");
+    const officials = source.officials ?? [];
+    if (!Array.isArray(officials))
+        throw new RangeError("taisen-brackets: officials is a list");
+    if (officials.length > MAX_OFFICIALS)
+        throw new RangeError(`taisen-brackets: a bout board has at most ${MAX_OFFICIALS} officials`);
+    officials.forEach((o, i) => { who(o, `official ${i + 1}`); if (o.role !== undefined && (typeof o.role !== "string" || o.role.trim() === ""))
+        throw new RangeError(`taisen-brackets: the role of official ${i + 1} is a text`); });
+    if (source.bout !== undefined && (typeof source.bout === "number" ? !Number.isFinite(source.bout) : typeof source.bout !== "string"))
+        throw new RangeError("taisen-brackets: the bout number is a number or a text");
+    if (options.nameCase !== undefined && !["as-is", "upper"].includes(options.nameCase))
+        throw new RangeError(`taisen-brackets: nameCase is "as-is" or "upper", not ${JSON.stringify(options.nameCase)}`);
+    if (options.nameStyle !== undefined && !["surname-first", "given-first", "as-is"].includes(options.nameStyle))
+        throw new RangeError(`taisen-brackets: nameStyle is "surname-first", "given-first" or "as-is", not ${JSON.stringify(options.nameStyle)}`);
+}
+/** The role of each official as it is written: the language's words for a referee and a judge (numbered in order), any other text as it is. */
+function roles(officials, v) {
+    let judges = 0;
+    return officials.map((o) => {
+        const role = o.role ?? "judge";
+        if (role === "referee")
+            return v.words.rbReferee;
+        if (role === "judge") {
+            judges += 1;
+            return fill(v.words.rbJudge, { n: v.number(judges) });
+        }
+        return role;
+    });
+}
+/** The board as a sentence, the drawing's description. */
+export function describeBoutBoard(source, options = {}) {
+    const v = voiceOf(options);
+    const w = v.words;
+    const style = options.nameStyle ?? "surname-first";
+    const name = (a) => { const n = nameText(a.name, style, v); return `${options.nameCase === "upper" ? v.upper(n) : n}${a.code ? ` (${a.code})` : ""}`; };
+    const parts = [source.title];
+    if (source.phase)
+        parts.push(source.phase);
+    parts.push(`${w.rbBoutPresentation}${source.bout !== undefined ? `: ${fill(w.rbBout, { n: String(source.bout) })}` : ""}`);
+    parts.push(fill(w.tieVs, { a: name(source.red), b: name(source.blue) }));
+    const officials = source.officials ?? [];
+    if (officials.length) {
+        const rs = roles(officials, v);
+        parts.push(`${w.rbOfficials}: ${officials.map((o, i) => `${rs[i]} ${name(o)}`).join(w.noteJoin)}`);
+    }
+    return parts.join(w.sep) + w.end;
+}
+/**
+ * The bout presentation board as a standalone SVG. Throws a `RangeError` for a board with no title, an athlete or official with no name, more than 12 officials, a role that is not a text, an unknown option
+ * value, or a width outside 720 to 4000.
+ */
+export function boutBoard(source, options = {}) {
+    validate(source, options);
+    if (options.width !== undefined && options.width < 720)
+        throw new RangeError("taisen-brackets: a board's width is from 720 to 4000");
+    const officials = source.officials ?? [];
+    const size = boutBoardSize(officials.length, options);
+    const f = broadcastFrame(options, [source, options.nameStyle, options.nameCase], size.height / (size.width / 1280));
+    const { W, u, v } = f;
+    const w = v.words;
+    const style = options.nameStyle ?? "surname-first";
+    const written = (a) => { const n = nameText(a.name, style, v); return options.nameCase === "upper" ? v.upper(n) : n; };
+    const body = [panel(f)];
+    const title = titleBand(f, 0, source.title, source.phase);
+    body.push(title.svg);
+    let y = title.h;
+    // The first bar: "Bout presentation" and the number.
+    body.push(bar(f, y, v.upper(w.rbBoutPresentation), source.bout !== undefined ? v.upper(fill(w.rbBout, { n: String(source.bout) })) : ""));
+    y += BC.band * u + BC.pad * u;
+    // The two athletes: a red band and a blue one with a dash between.
+    const ah = BC.athlete * u;
+    const gapMid = 44 * u;
+    const pad = 12 * u;
+    const half = (W - pad * 2 - gapMid) / 2;
+    const sides = [[source.red, "bc-red", pad], [source.blue, "bc-blue", pad + half + gapMid]];
+    const flagH = 34 * u, flagW = flagH * (4 / 3);
+    sides.forEach(([a, cls, x0], k) => {
+        const g = [box(x0, y, half, ah, cls, 4 * u), gloss(f, x0, y, half, ah)];
+        const cy = y + ah / 2;
+        const name = written(a);
+        const cs = 28 * u;
+        const codeW = a.code ? bw(a.code, cs) + 12 * u : 0;
+        const inner = 16 * u;
+        const mark = a.flag || a.mark ? drawMark({ id: `a${k}`, name: nameOf(a.name), abbr: (a.code ?? abbreviate(nameOf(a.name))).slice(0, 3), ...(a.flag ? { flag: a.flag } : {}), ...(a.mark ? { mark: a.mark } : {}) }, 0, cy, flagH, f.ctx) : "";
+        const markAt = (x) => (mark ? `<g transform="translate(${x + flagW / 2} 0)">${mark}</g>` : "");
+        const flagSpace = mark ? flagW + 14 * u : 0;
+        if (k === 0) {
+            // Red: the code, the flag, then the name.
+            let x = x0 + inner;
+            if (a.code) {
+                g.push(t(x, cy + cs * 0.36, cs, a.code, "bc-ink", "start", 800));
+                x += codeW;
+            }
+            if (mark) {
+                g.push(markAt(x));
+                x += flagSpace;
+            }
+            const avail = x0 + half - inner - x;
+            const ns = fitSize(name, 32 * u, avail, 0.55);
+            g.push(t(x, cy + ns * 0.36, ns, fit(name, ns, avail + 1, bw), "bc-ink", "start", 800));
+        }
+        else {
+            // Blue: the name (to the flag), the flag, then the code; written in that order, so the markup reads as the band does.
+            let right = x0 + half - inner;
+            const codeSvg = a.code ? t(right, cy + cs * 0.36, cs, a.code, "bc-ink", "end", 800) : "";
+            if (a.code)
+                right -= codeW;
+            const flagSvg = mark ? markAt(right - flagW) : "";
+            if (mark)
+                right -= flagSpace;
+            const avail = right - (x0 + inner);
+            const ns = fitSize(name, 32 * u, avail, 0.55);
+            g.push(t(right, cy + ns * 0.36, ns, fit(name, ns, avail + 1, bw), "bc-ink", "end", 800), flagSvg, codeSvg);
+        }
+        body.push(`<g class="bc-athlete">${g.join("")}</g>`);
+    });
+    body.push(t(W / 2, y + ah / 2 + 18 * u * 0.36 * 1.4, 36 * u, "–", "bc-ink", "middle", 800));
+    y += ah + BC.pad * u;
+    // The second bar and a row for each official.
+    body.push(bar(f, y, v.upper(w.rbOfficials), ""));
+    y += BC.band * u;
+    const rs = roles(officials, v);
+    const oh = BC.official * u;
+    const cs = 22 * u, ns0 = 24 * u;
+    const anyCode = officials.some((o) => o.code);
+    const anyFlag = officials.some((o) => o.flag || o.mark);
+    const codeW = anyCode ? Math.max(...officials.map((o) => bw(o.code ?? "", cs))) + 12 * u : 0;
+    officials.forEach((o, i) => {
+        const ry = y + BC.gap * u + i * (oh + BC.gap * u);
+        const cy = ry + oh / 2;
+        const g = [box(0, ry, W, oh, i % 2 === 0 ? "bc-rowa" : "bc-rowb"), gloss(f, 0, ry, W, oh)];
+        let x = 14 * u;
+        if (anyCode) {
+            if (o.code)
+                g.push(t(x, cy + cs * 0.36, cs, o.code, "bc-ink", "start", 700));
+            x += codeW;
+        }
+        if (anyFlag) {
+            if (o.flag || o.mark)
+                g.push(drawMark({ id: `o${i}`, name: nameOf(o.name), abbr: (o.code ?? abbreviate(nameOf(o.name))).slice(0, 3), ...(o.flag ? { flag: o.flag } : {}), ...(o.mark ? { mark: o.mark } : {}) }, x + (26 * u * 4) / 3 / 2, cy, 26 * u, f.ctx));
+            x += (26 * u * 4) / 3 + 14 * u;
+        }
+        const role = v.upper(rs[i]);
+        const rz = fitSize(role, cs, Math.max(60 * u, W * 0.3), 0.6);
+        const roleSvg = t(W - 16 * u, cy + rz * 0.36, rz, role, "bc-ink", "end", 800, ' letter-spacing=".03em"');
+        const nameRight = W - 16 * u - bw(role, rz) * 1.07 - 24 * u;
+        const name = written(o);
+        const avail = Math.max(60 * u, nameRight - x);
+        const nz = fitSize(name, ns0, avail, 0.6);
+        g.push(t(x, cy + nz * 0.36, nz, fit(name, nz, avail + 1, bw), "bc-ink", "start", 700), roleSvg);
+        body.push(`<g class="bc-official">${g.join("")}</g>`);
+    });
+    return broadcastWrap(f, options.title ?? source.title, describeBoutBoard(source, options), body, "bout-board");
+}
+/** A bar in the band colour with text at the left and, optionally, at the right. */
+function bar(f, y, left, right) {
+    const { u, W } = f;
+    const h = BC.band * u;
+    const fs = 21 * u;
+    const rw = right ? bw(right, fs) * 1.07 : 0;
+    const room = (W - 40 * u - (rw ? rw + 24 * u : 0)) / 1.07;
+    const lz = fitSize(left, fs, room, 0.6);
+    return `${box(0, y, W, h, "bc-band")}${t(20 * u, y + h / 2 + lz * 0.36, lz, fit(left, lz, room, bw), "bc-bandink", "start", 800, ' letter-spacing=".03em"')}${right ? t(W - 20 * u, y + h / 2 + fs * 0.36, fs, right, "bc-bandink", "end", 800, ' letter-spacing=".03em"') : ""}`;
+}

package/dist/broadcast-kit.js

@@ -79,6 +79,7 @@ export function broadcastStyle(scope, look, fixed = "") {
         s(".bc-ink", `fill:${v("ink", p.ink)}`), s(".bc-sub", `fill:${v("sub", p.sub)}`),
         s(".bc-rank", `fill:${v("rank", p.rank)};stroke:${v("rank-edge", p.rankEdge)};stroke-width:1.5`), s(".bc-rankink", `fill:${v("rank-ink", p.rankInk)}`),
         s(".bc-g1", `fill:${v("gold", p.gold)};stroke:none`), s(".bc-g2", `fill:${v("silver", p.silver)};stroke:none`), s(".bc-g3", `fill:${v("bronze", p.bronze)};stroke:none`), s(".bc-medalink", `fill:${v("medal-ink", p.medalInk)}`),
+        s(".bc-discrim", "fill:none;stroke:rgba(255,255,255,.55);stroke-width:1.5"),
         s(".bc-badge", `fill:${v("badge", p.badge)}`), s(".bc-badgeink", `fill:${v("badge-ink", p.badgeInk)}`),
         s(".bc-red", `fill:${v("red", p.red)}`), s(".bc-blue", `fill:${v("blue", p.blue)}`),
         s(".bc-band", `fill:${v("band", p.band)}`), s(".bc-bandink", `fill:${v("band-ink", p.bandInk)}`),

package/dist/broadcast-medals.d.ts

@@ -0,0 +1,23 @@
+/**
+ * The medal table in the manner of a television graphic: a title band (the heading, with the date at its right), a sub bar with the three medal discs and the total over their columns, and a row
+ * for each country or team with its rank, a 4:3 flag, the country code (or the name) and the gold, silver and bronze counts, each beside its disc, and the total. The rows are ranked and tied as
+ * `medalTable` ranks them. One standalone SVG of a width you choose and a height that follows from the rows (`broadcastMedalSize`), made to be placed over a picture.
+ */
+import { type BroadcastOptions } from "./broadcast-kit.ts";
+import { type MedalTableOptions, type MedalTableSource } from "./medals.ts";
+export interface BroadcastMedalOptions extends BroadcastOptions, Pick<MedalTableOptions, "sort" | "ties" | "top" | "skipEmpty"> {
+    /** Write each row's `code` (the default where every row has one) or its `name`. */
+    labels?: "code" | "name";
+    /** Write the rank before each row. Default true. */
+    ranks?: boolean;
+}
+/** The width and the height of a broadcast medal table of `rowCount` rows: the width given (1280 by default) and a height of 64 + 36 + 10 + 48 a row + 10, in units of the width over 1280. */
+export declare function broadcastMedalSize(rowCount: number, options?: Pick<BroadcastOptions, "width">): {
+    width: number;
+    height: number;
+};
+/**
+ * The broadcast-style medal table as a standalone SVG. Throws a `RangeError` for what `medalTable` refuses, more than 24 rows after `top` and `skipEmpty`, a `labels` that is not `code` or `name`,
+ * a look or icon that is not one of its values, or a width outside 720 to 4000.
+ */
+export declare function broadcastMedalTable(source: MedalTableSource, options?: BroadcastMedalOptions): string;

package/dist/broadcast-medals.js

@@ -0,0 +1,109 @@
+/**
+ * The medal table in the manner of a television graphic: a title band (the heading, with the date at its right), a sub bar with the three medal discs and the total over their columns, and a row
+ * for each country or team with its rank, a 4:3 flag, the country code (or the name) and the gold, silver and bronze counts, each beside its disc, and the total. The rows are ranked and tied as
+ * `medalTable` ranks them. One standalone SVG of a width you choose and a height that follows from the rows (`broadcastMedalSize`), made to be placed over a picture.
+ */
+import { BC, box, broadcastFrame, broadcastWrap, bw, fitSize, gloss, panel, t, titleBand } from "./broadcast-kit.js";
+import { chosenMedalRows, describeMedalTable, validateMedalSource } from "./medals.js";
+import { drawMark } from "./marks.js";
+import { abbreviate, esc, fit, num } from "./text.js";
+const MAX_ROWS = 24;
+/** The height of a row of this table, in units of the width over 1280. */
+const ROW = 46;
+/** The width and the height of a broadcast medal table of `rowCount` rows: the width given (1280 by default) and a height of 64 + 36 + 10 + 48 a row + 10, in units of the width over 1280. */
+export function broadcastMedalSize(rowCount, options = {}) {
+    const width = options.width ?? 1280;
+    const u = width / 1280;
+    return { width, height: Math.round((BC.title + BC.sub + BC.pad + rowCount * (ROW + BC.gap) + BC.pad) * u) };
+}
+const count = (n) => n ?? 0;
+/** A medal disc: a filled circle in the medal's colour with a lighter rim and a highlight. */
+function disc(cx, cy, r, kind) {
+    return `<circle class="bc-g${kind}" cx="${num(cx)}" cy="${num(cy)}" r="${num(r)}"/><circle class="bc-discrim" cx="${num(cx)}" cy="${num(cy)}" r="${num(r * 0.72)}"/>`;
+}
+/**
+ * The broadcast-style medal table as a standalone SVG. Throws a `RangeError` for what `medalTable` refuses, more than 24 rows after `top` and `skipEmpty`, a `labels` that is not `code` or `name`,
+ * a look or icon that is not one of its values, or a width outside 720 to 4000.
+ */
+export function broadcastMedalTable(source, options = {}) {
+    const rule = { ...(options.sort !== undefined ? { sort: options.sort } : {}), ...(options.ties !== undefined ? { ties: options.ties } : {}), ...(options.top !== undefined ? { top: options.top } : {}), ...(options.skipEmpty !== undefined ? { skipEmpty: options.skipEmpty } : {}) };
+    validateMedalSource(source, rule);
+    if (options.labels !== undefined && options.labels !== "code" && options.labels !== "name")
+        throw new RangeError(`taisen-brackets: labels is "code" or "name", not ${JSON.stringify(options.labels)}`);
+    if (options.width !== undefined && options.width < 720)
+        throw new RangeError("taisen-brackets: a board's width is from 720 to 4000");
+    const rows = chosenMedalRows(source, rule);
+    if (rows.length > MAX_ROWS)
+        throw new RangeError(`taisen-brackets: a broadcast medal table has at most ${MAX_ROWS} rows (it is a screen graphic): cut the list with top`);
+    const size = broadcastMedalSize(rows.length, options);
+    const f = broadcastFrame(options, [source, options.sort, options.ties, options.top, options.skipEmpty, options.labels, options.ranks], size.height / (size.width / 1280));
+    const { W, u, v } = f;
+    const w = v.words;
+    const body = [panel(f)];
+    const title = titleBand(f, 0, source.title ?? w.medalTitle, source.date);
+    body.push(title.svg);
+    // The columns, from the right: a disc and a count for each medal, then the total.
+    const ns = 28 * u;
+    const maxMedal = Math.max(1, ...rows.map(({ row }) => Math.max(count(row.gold), count(row.silver), count(row.bronze))));
+    const maxTotal = Math.max(1, ...rows.map(({ row }) => count(row.gold) + count(row.silver) + count(row.bronze)));
+    const discR = 11 * u;
+    const medalW = discR * 2 + 12 * u + bw(v.number(maxMedal), ns) + 22 * u;
+    const totalLabel = v.upper(w.medalTotal);
+    const totalW = Math.max(bw(v.number(maxTotal), ns), bw(totalLabel, 18 * u * 1.07)) + 30 * u;
+    const right = W - 16 * u;
+    const totalX = right - totalW / 2;
+    const medalX = [0, 1, 2].map((k) => right - totalW - (2 - k) * medalW - medalW / 2);
+    const left = medalX[0] - medalW / 2;
+    // The sub bar: the subtitle at the left, the discs over their columns and the word total.
+    const sub = { svg: "", h: BC.sub * u };
+    const sy = title.h;
+    const subParts = [box(0, sy, W, sub.h, "", 0, ` fill="url(#${esc(f.scope)}-gs)"`)];
+    const fs = 20 * u;
+    const subText = v.upper(source.subtitle ?? "");
+    if (subText) {
+        const room = (left - 20 * u - 14 * u) / 1.07;
+        const z = fitSize(subText, fs, room, 0.6);
+        subParts.push(t(20 * u, sy + sub.h / 2 + z * 0.36, z, fit(subText, z, room, bw), "bc-subink", "start", 800, ' letter-spacing=".02em"'));
+    }
+    [1, 2, 3].forEach((k, i) => {
+        const name = [w.medalGold, w.medalSilver, w.medalBronze][i];
+        subParts.push(`<g class="bc-medalhead"><title>${esc(name)}</title>${disc(medalX[i] - medalW / 2 + discR + 4 * u, sy + sub.h / 2, 12 * u, k)}</g>`);
+    });
+    const tz = fitSize(totalLabel, 18 * u, (totalW - 8 * u) / 1.07, 0.6);
+    subParts.push(t(totalX, sy + sub.h / 2 + tz * 0.36, tz, fit(totalLabel, tz, (totalW - 8 * u) / 1.07, bw), "bc-subink", "middle", 800, ' letter-spacing=".02em"'));
+    body.push(subParts.join(""));
+    const top = title.h + sub.h + BC.pad * u;
+    const h = ROW * u;
+    const showRank = options.ranks ?? true;
+    const useCode = (options.labels ?? (rows.every(({ row }) => row.code) ? "code" : "name")) === "code";
+    const labelOf = (r) => (useCode ? r.code ?? abbreviate(r.name).slice(0, 3).toUpperCase() : r.name);
+    const rankTexts = rows.map(({ rank }) => String(v.number(rank)));
+    const rankW = showRank ? Math.max(...rankTexts.map((x) => bw(x, ns))) + 18 * u : 0;
+    const flagH = 28 * u, flagW = flagH * (4 / 3);
+    rows.forEach(({ row }, i) => {
+        const y = top + i * (h + BC.gap * u);
+        const cy = y + h / 2;
+        const g = [box(0, y, W, h, i % 2 === 0 ? "bc-rowa" : "bc-rowb"), gloss(f, 0, y, W, h)];
+        let x = 14 * u;
+        if (showRank) {
+            g.push(t(x + rankW / 2 - 6 * u, cy + ns * 0.36, ns * 0.9, rankTexts[i], "bc-ink", "middle", 800));
+            x += rankW;
+        }
+        g.push(drawMark({ id: `m${i}`, name: row.name, abbr: (row.code ?? abbreviate(row.name)).slice(0, 3).toUpperCase(), ...(row.flag ? { flag: row.flag } : {}), ...(row.mark ? { mark: row.mark } : {}) }, x + flagW / 2, cy, flagH, f.ctx));
+        x += flagW + 14 * u;
+        const label = labelOf(row);
+        const avail = Math.max(40 * u, left - 12 * u - x);
+        const lz = fitSize(label, 28 * u, avail, 0.6);
+        g.push(t(x, cy + lz * 0.36, lz, fit(label, lz, avail + 1, bw), "bc-ink", "start", 700));
+        [row.gold, row.silver, row.bronze].forEach((c, k) => {
+            const cx = medalX[k];
+            g.push(disc(cx - medalW / 2 + discR + 4 * u, cy, discR, (k + 1)));
+            g.push(t(cx + medalW / 2 - 14 * u, cy + ns * 0.36, ns, v.number(count(c)), "bc-ink", "end", 700));
+        });
+        g.push(t(totalX + totalW / 2 - 14 * u, cy + ns * 0.36 * 1.05, ns * 1.05, v.number(count(row.gold) + count(row.silver) + count(row.bronze)), "bc-ink", "end", 800));
+        body.push(`<g class="bc-row">${g.join("")}</g>`);
+    });
+    if (rows.length === 0)
+        body.push(t(20 * u, top + 30 * u, 24 * u, w.medalNone, "bc-sub", "start", 700));
+    return broadcastWrap(f, options.title ?? source.title ?? w.medalTitle, describeMedalTable(source, { ...rule, ...(options.locale !== undefined ? { locale: options.locale } : {}), ...(options.words !== undefined ? { words: options.words } : {}) }), body, "broadcast-medal-table");
+}

package/dist/index.d.ts

@@ -39,3 +39,7 @@ export { resultsBoard, resultsBoardSize, describeResultsBoard } from "./results-
 export type { ResultsBoardOptions, ResultsBoardSource, ResultsColumn, ResultsRow } from "./results-board.ts";
 export { BROADCAST_LOOKS } from "./broadcast-kit.ts";
 export type { BroadcastIcon, BroadcastLook, BroadcastOptions } from "./broadcast-kit.ts";
+export { boutBoard, boutBoardSize, describeBoutBoard } from "./bout-board.ts";
+export type { BoutAthlete, BoutBoardOptions, BoutBoardSource, BoutOfficial } from "./bout-board.ts";
+export { broadcastMedalTable, broadcastMedalSize } from "./broadcast-medals.ts";
+export type { BroadcastMedalOptions } from "./broadcast-medals.ts";

package/dist/index.js

@@ -21,3 +21,5 @@ export { rankingMatchup, describeMatchup, matchupRecord } from "./ranking-matchu
 export { medalTable, medalRanks, tallyMedals, describeMedalTable } from "./medals.js";
 export { resultsBoard, resultsBoardSize, describeResultsBoard } from "./results-board.js";
 export { BROADCAST_LOOKS } from "./broadcast-kit.js";
+export { boutBoard, boutBoardSize, describeBoutBoard } from "./bout-board.js";
+export { broadcastMedalTable, broadcastMedalSize } from "./broadcast-medals.js";

package/dist/locales.js

@@ -34,6 +34,7 @@ const EN = {
     rankMatchTitle: "Head to head", rankMeetings: "Previous meetings", rankNoMeetings: "No previous meetings", rankMore: "+{n} more",
     medalTitle: "Medal table", medalNone: "No medals yet", medalGold: "Gold", medalSilver: "Silver", medalBronze: "Bronze", medalGoldShort: "G", medalSilverShort: "S", medalBronzeShort: "B", medalTotal: "Total", medalLine: "{g} gold, {s} silver, {b} bronze, {t} total", medalRank: "{n}",
     rbResult: "Result",
+    rbBoutPresentation: "Bout presentation", rbBout: "Bout: {n}", rbOfficials: "Referee and judges", rbReferee: "Referee", rbJudge: "Judge {n}",
 };
 const FR = {
     tbd: "À déterminer", bye: "exempt", walkover: "forfait", champion: "Champion", thirdPlace: "Match pour la troisième place", other: "Autres rencontres",
@@ -64,6 +65,7 @@ const FR = {
     rankMatchTitle: "Face-à-face", rankMeetings: "Confrontations précédentes", rankNoMeetings: "Aucune confrontation précédente", rankMore: "+{n} de plus",
     medalTitle: "Tableau des médailles", medalNone: "Aucune médaille pour l’instant", medalGold: "Or", medalSilver: "Argent", medalBronze: "Bronze", medalGoldShort: "O", medalSilverShort: "A", medalBronzeShort: "B", medalTotal: "Total", medalLine: "{g} or, {s} argent, {b} bronze, {t} au total", medalRank: "{n}",
     rbResult: "Résultat",
+    rbBoutPresentation: "Présentation du combat", rbBout: "Combat\u00a0: {n}", rbOfficials: "Arbitre et juges", rbReferee: "Arbitre", rbJudge: "Juge {n}",
 };
 const JA = {
     tbd: "未定", bye: "シード", walkover: "不戦勝", champion: "優勝", thirdPlace: "3位決定戦", other: "その他の対戦",
@@ -94,6 +96,7 @@ const JA = {
     rankMatchTitle: "直接対決", rankMeetings: "過去の対戦", rankNoMeetings: "過去の対戦はありません", rankMore: "ほか{n}試合",
     medalTitle: "メダル獲得表", medalNone: "まだメダルはありません", medalGold: "金メダル", medalSilver: "銀メダル", medalBronze: "銅メダル", medalGoldShort: "金", medalSilverShort: "銀", medalBronzeShort: "銅", medalTotal: "合計", medalLine: "金{g}、銀{s}、銅{b}、合計{t}", medalRank: "{n}位",
     rbResult: "結果",
+    rbBoutPresentation: "試合紹介", rbBout: "第{n}試合", rbOfficials: "審判", rbReferee: "主審", rbJudge: "副審{n}",
 };
 const ES = {
     tbd: "Por definir", bye: "exento", walkover: "incomparecencia", champion: "Campeón", thirdPlace: "Partido por el tercer puesto", other: "Otros partidos",
@@ -124,6 +127,7 @@ const ES = {
     rankMatchTitle: "Cara a cara", rankMeetings: "Enfrentamientos anteriores", rankNoMeetings: "Sin enfrentamientos anteriores", rankMore: "+{n} más",
     medalTitle: "Medallero", medalNone: "Aún no hay medallas", medalGold: "Oro", medalSilver: "Plata", medalBronze: "Bronce", medalGoldShort: "O", medalSilverShort: "P", medalBronzeShort: "B", medalTotal: "Total", medalLine: "{g} oro, {s} plata, {b} bronce, {t} en total", medalRank: "{n}",
     rbResult: "Resultado",
+    rbBoutPresentation: "Presentación del combate", rbBout: "Combate: {n}", rbOfficials: "Árbitro y jueces", rbReferee: "Árbitro", rbJudge: "Juez {n}",
 };
 const DE = {
     tbd: "offen", bye: "Freilos", walkover: "kampflos", champion: "Turniersieger", thirdPlace: "Spiel um Platz 3", other: "Weitere Begegnungen",
@@ -154,6 +158,7 @@ const DE = {
     rankMatchTitle: "Direkter Vergleich", rankMeetings: "Bisherige Duelle", rankNoMeetings: "Noch keine Duelle", rankMore: "+{n} weitere",
     medalTitle: "Medaillenspiegel", medalNone: "Noch keine Medaillen", medalGold: "Gold", medalSilver: "Silber", medalBronze: "Bronze", medalGoldShort: "G", medalSilverShort: "S", medalBronzeShort: "B", medalTotal: "Gesamt", medalLine: "{g} Gold, {s} Silber, {b} Bronze, {t} gesamt", medalRank: "{n}",
     rbResult: "Ergebnis",
+    rbBoutPresentation: "Kampfvorstellung", rbBout: "Kampf: {n}", rbOfficials: "Kampfrichter", rbReferee: "Mattenleiter", rbJudge: "Punktrichter {n}",
 };
 /**
  * The round names, English name first. The football rounds are the terms of each language's Wikipedia article on the World Cup;

package/dist/medals.d.ts

@@ -76,6 +76,13 @@ export interface MedalFilter {
 export declare function tallyMedals(awards: readonly MedalAward[], filter?: MedalFilter): MedalRow[];
 /** The ranks of a list of rows, as `medalTable` draws them (`[1, 2, 2, 4]`), in the order they are drawn. */
 export declare function medalRanks(rows: readonly MedalRow[], options?: Pick<MedalTableOptions, "sort" | "ties">): number[];
+/** Checks a medal table's source and options (shared by the broadcast-style table). */
+export declare function validateMedalSource(source: MedalTableSource, options: MedalTableOptions): void;
+/** The rows that are drawn: sorted, ranked, with the empty ones and all but the top N left out when asked. */
+export declare function chosenMedalRows(source: MedalTableSource, options: Pick<MedalTableOptions, "sort" | "ties" | "skipEmpty" | "top">): {
+    row: MedalRow;
+    rank: number;
+}[];
 /** The table as a sentence, the drawing's description. */
 export declare function describeMedalTable(source: MedalTableSource, options?: Pick<MedalTableOptions, "locale" | "words" | "sort" | "ties" | "top" | "skipEmpty">): string;
 /**

package/dist/medals.js

@@ -54,7 +54,8 @@ function ordered(rows, sort, ties) {
 export function medalRanks(rows, options = {}) {
     return ordered(rows, options.sort ?? "gold", options.ties ?? true).map((x) => x.rank);
 }
-function validate(source, options) {
+/** Checks a medal table's source and options (shared by the broadcast-style table). */
+export function validateMedalSource(source, options) {
     if (!source || !Array.isArray(source.rows))
         throw new RangeError("taisen-brackets: a medal table needs a list of rows");
     source.rows.forEach((r, i) => {
@@ -79,7 +80,7 @@ function validate(source, options) {
         throw new RangeError("taisen-brackets: page is a whole number from 0");
 }
 /** The rows that are drawn: sorted, ranked, with the empty ones and all but the top N left out when asked. */
-function chosen(source, options) {
+export function chosenMedalRows(source, options) {
     let list = ordered(source.rows, options.sort ?? "gold", options.ties ?? true);
     if (options.skipEmpty)
         list = list.filter((x) => totalOf(x.row) > 0);
@@ -94,7 +95,7 @@ export function describeMedalTable(source, options = {}) {
         parts.push(source.subtitle);
     if (source.date)
         parts.push(source.date);
-    const list = chosen(source, options);
+    const list = chosenMedalRows(source, options);
     if (list.length === 0)
         parts.push(w.medalNone);
     for (const { row, rank } of list)
@@ -106,13 +107,13 @@ const teamFor = (r, id) => ({ id, name: r.name, abbr: (r.code ?? abbreviate(r.na
  * The medal table as an SVG. Throws a `RangeError` for a row with no name, a medal count that is not a whole number from 0, an option that is not one of its values, or a bad size or theme.
  */
 export function medalTable(source, options = {}) {
-    validate(source, options);
+    validateMedalSource(source, options);
     const f = boardFrame(options, [source, options.sort, options.ties, options.rankStyle, options.top, options.rows, options.page, options.columns, options.highlight, options.skipEmpty]);
     const { W, H, v } = f;
     const w = v.words;
     const unit = Math.min(W, H);
     const pad = Math.round(unit * 0.035);
-    const all = chosen(source, options);
+    const all = chosenMedalRows(source, options);
     const columns = options.columns ?? (W / H >= 1.5 && all.length > 10 ? 2 : 1);
     const head = heading(f, source.title ?? w.medalTitle, source.subtitle, source.date, pad, columns === 2 ? W - pad * 2 : Math.min(W - pad * 2, unit * 1.3), source.source);
     const body = [...head.svg];

package/dist/types.d.ts

@@ -440,6 +440,12 @@ export interface Words {
     medalRank: string;
     /** The broadcast-style boards (`resultsBoard`, `boutBoard`, `broadcastMedalTable`): the sub bar\'s word for a result. */
     rbResult: string;
+    /** The bout presentation board (`boutBoard`): the first bar, the bout's number (`{n}`), the second bar, the referee and a judge (`{n}`). */
+    rbBoutPresentation: string;
+    rbBout: string;
+    rbOfficials: string;
+    rbReferee: string;
+    rbJudge: 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.15.0";
+export declare const VERSION = "0.17.0";

package/dist/version.js

@@ -1 +1 @@
-export const VERSION = "0.15.0";
+export const VERSION = "0.17.0";

package/package.json

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