@johnmorrisdotca/taisen-brackets 0.14.0 → 0.15.0

package/CHANGELOG.md

@@ -6,6 +6,19 @@ All notable changes to this project are written here. The format follows
 
 ## [Unreleased]
 
+## [0.15.0] - 2026-10-20
+
+Broadcast boards, step 1: the results board.
+
+### Added
+
+- **`resultsBoard({ title, phase?, columns?, rows }, options)`**: a results board in the manner of a television results graphic, as one standalone SVG: a title band (the event in capitals, with an icon square), a light sub bar (the phase, and the heading of each score column), and a row for each athlete: a rank in a box (`rankStyle`: a red box, gold, silver and bronze boxes, or a plain numeral), the country code, a 4:3 flag, the name, a record badge (`record: "OR"`, `["WR", "NR"]`) and one or more columns of numbers at the sport's own precision (per column, then `precision`) or texts (`1:08.34`); `note` (`DNS`, `DQ`) in place of the values; equal results share a rank. Looks `blue`, `night` and `paper` (`BROADCAST_LOOKS`), icons `medal`, `stopwatch`, `none` or an `iconMark` of your own, `nameCase`, `nameStyle`, five languages, `--bc-*` custom properties, up to 24 rows. `describeResultsBoard`.
+- **`resultsBoardSize(rowCount, { width })`**: the board's size before it is drawn, for placing it: the width (1280 by default, 720 to 4000) and a height of 64 + 36 + 20 + 54 a row, scaled. The SVG carries the same size, has nothing outside its panel and scales as a picture.
+- **Flags drawn 4:3**: a board asks the `flags` function for the shape `rect` (Hata's `"4:3"`); a row with no flag is a rectangular badge with its code.
+- Nothing of any games, federation, sponsor or broadcaster is drawn: no rings, pictograms, emblems or timing company's name; the type is a stack of free condensed fonts, none shipped.
+- One word for the sub bar, in the five languages (Result, Résultat, `結果`, Resultado, Ergebnis: the plain word of each).
+- The demo has a Broadcast boards section with five made-up finals (a gymnastics apparatus final, an all-around, a swimming final with a record badge, athletics 100 m and speed skating), the look, rank style, icon, width and capitals in the address, and the board's size shown. [docs/broadcast.md](docs/broadcast.md).
+
 ## [0.14.0] - 2026-10-20
 
 A medal table for any sport.

package/README.md

@@ -11,7 +11,7 @@ Give it the games, series, two-legged ties or replays of a tournament and it wor
   <img alt="TypeScript" src="https://img.shields.io/badge/types-TypeScript-3178c6">
 </p>
 
-<p align="center"><a href="https://johnmorrisdotca.github.io/taisen-brackets/"><strong>Open the demo →</strong></a> · <a href="./docs/layout.md">Layout</a> · <a href="./docs/layouts.md">Layouts</a> · <a href="./docs/drawing.md">Drawing</a> · <a href="./docs/road.md">Road to the final</a> · <a href="./docs/backgrounds.md">Backgrounds</a> · <a href="./docs/judo.md">Judo</a> · <a href="./docs/rankings.md">Rankings</a> · <a href="./docs/medals.md">Medal table</a> · <a href="./docs/formats.md">Formats</a> · <a href="./docs/compare.md">How it compares</a></p>
+<p align="center"><a href="https://johnmorrisdotca.github.io/taisen-brackets/"><strong>Open the demo →</strong></a> · <a href="./docs/layout.md">Layout</a> · <a href="./docs/layouts.md">Layouts</a> · <a href="./docs/drawing.md">Drawing</a> · <a href="./docs/road.md">Road to the final</a> · <a href="./docs/backgrounds.md">Backgrounds</a> · <a href="./docs/judo.md">Judo</a> · <a href="./docs/rankings.md">Rankings</a> · <a href="./docs/medals.md">Medal table</a> · <a href="./docs/broadcast.md">Broadcast boards</a> · <a href="./docs/formats.md">Formats</a> · <a href="./docs/compare.md">How it compares</a></p>
 
 <p align="center">
 <picture>
@@ -264,6 +264,14 @@ A judo contest is a tie with a `judo` result: ippon, waza-ari, yuko and shido as
 <img alt="A medal table on a 4:5 card: ten countries with rank, flag or badge, name, gold, silver and bronze counts in tinted cells and the total." src="https://raw.githubusercontent.com/johnmorrisdotca/taisen-brackets/main/docs/images/medal-table-portrait-light.webp" width="480">
 </picture><br><em>A made-up medal table (invented results).</em></p>
 
+## 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)
+
+<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">
+</picture><br><em>A made-up apparatus final (invented athletes and scores).</em></p>
+
 ## In 30 seconds
 
 ```sh
@@ -314,6 +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)).
 - **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.
@@ -677,6 +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)).
 - `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/broadcast-kit.d.ts

@@ -0,0 +1,92 @@
+/**
+ * What the broadcast-style boards share: the looks (blue, night, paper), the frame (a width, a voice, flags drawn 4:3), the stylesheet, the panel with its title bar, its icon and its
+ * sub bar, and the small shapes (a rank box, a record badge, a medal disc). A broadcast board is a standalone SVG of a given width and a height that follows from its rows
+ * (`resultsBoardSize`, `boutBoardSize`, `broadcastMedalSize`), with nothing outside the panel, so that it can be placed over a picture. It is made in the manner of a results graphic on a
+ * television broadcast (a title band, rows with a rank, a flag and a code, columns of scores, a badge for a record) and carries no mark of any games, federation or broadcaster.
+ */
+import type { DrawOptions, Locale, Words } from "./types.ts";
+import { bw, clampN, fitSize } from "./rank-kit.ts";
+import { type Voice } from "./locales.ts";
+import { type MarkContext } from "./marks.ts";
+export type BroadcastLook = "blue" | "night" | "paper";
+/** The looks: `blue` (a broadcast's deep blue with a bright title band), `night` (near black with a cyan band) and `paper` (white, with the same blue band). */
+export declare const BROADCAST_LOOKS: readonly BroadcastLook[];
+/** The icons of the title band's square, drawn by the package: a medal and a stopwatch. `none` leaves the band whole. */
+export type BroadcastIcon = "medal" | "stopwatch" | "none";
+export interface BroadcastOptions {
+    /** The width of the board; the height follows from the rows. Default 1280, from 320 to 4000. */
+    width?: number;
+    /** `blue` (the default), `night` or `paper`. */
+    look?: BroadcastLook;
+    /** The icon in the square at the left of the title: `medal` (the default), `stopwatch`, `none`, or an `iconMark` of your own. */
+    icon?: BroadcastIcon;
+    /** A mark of your own for that square (inline SVG or an image address), in place of `icon`. */
+    iconMark?: string;
+    /** Draws a flag from its code, as for `drawBracket`; it is asked for the shape `rect` (Hata's `"4:3"`). */
+    flags?: DrawOptions["flags"];
+    /** The address of a flag as a picture to load, tried where `flags` gives none. */
+    flagHref?: DrawOptions["flagHref"];
+    locale?: string | Locale;
+    words?: Partial<Words>;
+    /** The `<title>` of the drawing. Default: the board's own heading. */
+    title?: string;
+    id?: string;
+    className?: string;
+}
+/** The sizes in a drawing, in units of its width over 1280. */
+export declare const BC: Readonly<{
+    title: 64;
+    sub: 36;
+    row: 52;
+    gap: 2;
+    pad: 10;
+    band: 38;
+    official: 40;
+    athlete: 62;
+}>;
+export interface BroadcastFrame {
+    W: number;
+    H: number;
+    u: number;
+    v: Voice;
+    scope: string;
+    ctx: MarkContext;
+    options: BroadcastOptions;
+    look: BroadcastLook;
+}
+/** The width and look checked, the voice, and the flag context (flags drawn 4:3). `height` is the board's, from its rows, in the unit of 1280 wide. */
+export declare function broadcastFrame(options: BroadcastOptions, seed: unknown, heightUnits: number): BroadcastFrame;
+export declare const BROADCAST_FONT = "\"Roboto Condensed\", \"Liberation Sans Narrow\", \"Archivo Narrow\", \"Helvetica Neue\", Arial, \"Hiragino Sans\", \"Yu Gothic UI\", \"Noto Sans CJK JP\", Meiryo, sans-serif";
+/** The stylesheet of a board in a look. Every colour is a custom property with the look's value as its fallback (`--bc-title-a`, `--bc-row-a`, `--bc-rank` and the rest). */
+export declare function broadcastStyle(scope: string, look: BroadcastLook, fixed?: string): string;
+/** The gradients every board uses, by id: the panel's, the title band's, the sub bar's, the icon's and the gloss over a row. */
+export declare function broadcastDefs(scope: string): string;
+export declare function broadcastWrap(f: BroadcastFrame, title: string, desc: string, body: string[], kind: string, fixed?: string): string;
+export declare const t: (x: number, y: number, size: number, content: string, cls: string, anchor?: "start" | "middle" | "end", weight?: number, extra?: string) => string;
+export declare const box: (x: number, y: number, w: number, h: number, cls: string, rx?: number, extra?: string) => string;
+/** The panel's background and edge, from (0, 0) to the board's size, with the corners cut a little. */
+export declare function panel(f: BroadcastFrame): string;
+/** The title band: the icon square at the left, the title in capitals, from y to y + the band's height. Returns the shapes and the x where the title text starts. */
+export declare function titleBand(f: BroadcastFrame, y: number, title: string, right?: string): {
+    svg: string;
+    h: number;
+};
+/** The light sub bar under the title: `text` at the left in capitals, and labels over columns at the right (each `{ x, label }`, centred on x). */
+export declare function subBar(f: BroadcastFrame, y: number, text: string, labels?: readonly {
+    x: number;
+    w: number;
+    label: string;
+}[], bold?: boolean): {
+    svg: string;
+    h: number;
+};
+/** A rank in a box: `box` (the broadcast's red square), `medal` (gold, silver and bronze for the first three, else the box) or `plain` (a white numeral). */
+export declare function rankBox(x: number, cy: number, w: number, h: number, text: string, rank: number | null, style: "box" | "medal" | "plain", u: number): string;
+/** A record badge ("OR", "WR", "NR"): an orange rounded plate with the letters, right-aligned at `right`. Returns the shapes and the width. */
+export declare function recordBadge(right: number, cy: number, h: number, text: string, u: number): {
+    svg: string;
+    w: number;
+};
+/** The gloss over a row: a faint white gradient from the top edge. */
+export declare const gloss: (f: BroadcastFrame, x: number, y: number, w: number, h: number) => string;
+export { bw, clampN, fitSize };

package/dist/broadcast-kit.js

@@ -0,0 +1,216 @@
+import { bw, clampN, fitSize } from "./rank-kit.js";
+import { voiceOf } from "./locales.js";
+import { cleanSvg, markDefs, safeUrl } from "./marks.js";
+import { esc, fit, hash, num } from "./text.js";
+/** The looks: `blue` (a broadcast's deep blue with a bright title band), `night` (near black with a cyan band) and `paper` (white, with the same blue band). */
+export const BROADCAST_LOOKS = Object.freeze(["blue", "night", "paper"]);
+/** The sizes in a drawing, in units of its width over 1280. */
+export const BC = Object.freeze({ title: 64, sub: 36, row: 52, gap: 2, pad: 10, band: 38, official: 40, athlete: 62 });
+const safeId = (id) => (id === undefined ? undefined : /^[A-Za-z]/.test(id) ? id.replace(/[^\w-]/g, "-") : `bc-${id.replace(/[^\w-]/g, "-")}`);
+/** The width and look checked, the voice, and the flag context (flags drawn 4:3). `height` is the board's, from its rows, in the unit of 1280 wide. */
+export function broadcastFrame(options, seed, heightUnits) {
+    const width = options.width ?? 1280;
+    if (!(typeof width === "number" && width >= 320 && width <= 4000))
+        throw new RangeError(`taisen-brackets: a board's width is from 320 to 4000, not ${JSON.stringify(options.width)}`);
+    const look = options.look ?? "blue";
+    if (!BROADCAST_LOOKS.includes(look))
+        throw new RangeError(`taisen-brackets: a look is ${BROADCAST_LOOKS.map((l) => `"${l}"`).join(", ")}, not ${JSON.stringify(options.look)}`);
+    if (options.icon !== undefined && !["medal", "stopwatch", "none"].includes(options.icon))
+        throw new RangeError(`taisen-brackets: an icon is "medal", "stopwatch" or "none", not ${JSON.stringify(options.icon)}`);
+    const v = voiceOf(options);
+    const u = width / 1280;
+    const scope = safeId(options.id) ?? `bc-${hash(JSON.stringify([seed, width, look, options.icon, options.iconMark, v.locale.code, options.flags ? 1 : 0, options.flagHref ? 1 : 0, options.title]))}`;
+    const ctx = { radii: new Set(), symbols: new Map(), prefix: scope, shape: "rect", theme: "inherit", flagCache: new Map(), ...(options.flags ? { flags: options.flags } : {}), ...(options.flagHref ? { flagHref: options.flagHref } : {}) };
+    return { W: width, H: Math.round(heightUnits * u), u, v, scope, ctx, options, look };
+}
+const LOOKS = {
+    blue: {
+        panelTop: "#14449a", panelBottom: "#061a4d", edge: "#8fb4ee",
+        titleA: "#2a86e0", titleB: "#0c3b92", titleInk: "#ffffff",
+        subA: "#eef2f9", subB: "#c1ccdf", subInk: "#0c2252",
+        rowA: "#0b2a6c", rowB: "#123a88", ink: "#ffffff", sub: "#bcd0f3",
+        rank: "#b3161f", rankEdge: "#f2a6a6", rankInk: "#ffffff",
+        gold: "#e4b232", silver: "#c3cbd7", bronze: "#c9864a", medalInk: "#2a1c00",
+        badge: "#f28a1b", badgeInk: "#ffffff",
+        red: "#c9202b", blue: "#2c6bd2",
+        band: "#1fa6d4", bandInk: "#04243a",
+        iconA: "#f6bd3c", iconB: "#d9860f", iconInk: "#ffffff",
+    },
+    night: {
+        panelTop: "#161c29", panelBottom: "#080b11", edge: "#3b475c",
+        titleA: "#2c3648", titleB: "#141a26", titleInk: "#ffffff",
+        subA: "#2a3446", subB: "#1d2535", subInk: "#d3dcec",
+        rowA: "#10151f", rowB: "#181f2d", ink: "#f2f5fb", sub: "#9fadc4",
+        rank: "#14a9cc", rankEdge: "#9fe7f7", rankInk: "#031821",
+        gold: "#e4b232", silver: "#c3cbd7", bronze: "#c9864a", medalInk: "#2a1c00",
+        badge: "#ffb020", badgeInk: "#1b1200",
+        red: "#d3303d", blue: "#2d73e0",
+        band: "#14a9cc", bandInk: "#031821",
+        iconA: "#27c0e6", iconB: "#0f86a6", iconInk: "#ffffff",
+    },
+    paper: {
+        panelTop: "#ffffff", panelBottom: "#e8edf5", edge: "#b7c3d8",
+        titleA: "#2a6fc6", titleB: "#14346b", titleInk: "#ffffff",
+        subA: "#e9eef7", subB: "#d3dbea", subInk: "#14346b",
+        rowA: "#ffffff", rowB: "#eef2f9", ink: "#0f1b33", sub: "#566680",
+        rank: "#b3161f", rankEdge: "#7a0e15", rankInk: "#ffffff",
+        gold: "#e4b232", silver: "#c3cbd7", bronze: "#c9864a", medalInk: "#2a1c00",
+        badge: "#e56d0c", badgeInk: "#ffffff",
+        red: "#c9202b", blue: "#2c6bd2",
+        band: "#2a6fc6", bandInk: "#ffffff",
+        iconA: "#f6bd3c", iconB: "#d9860f", iconInk: "#ffffff",
+    },
+};
+export const BROADCAST_FONT = '"Roboto Condensed", "Liberation Sans Narrow", "Archivo Narrow", "Helvetica Neue", Arial, "Hiragino Sans", "Yu Gothic UI", "Noto Sans CJK JP", Meiryo, sans-serif';
+/** The stylesheet of a board in a look. Every colour is a custom property with the look's value as its fallback (`--bc-title-a`, `--bc-row-a`, `--bc-rank` and the rest). */
+export function broadcastStyle(scope, look, fixed = "") {
+    const p = LOOKS[look];
+    const s = (sel, body) => `.${scope} ${sel}{${body}}`;
+    const v = (name, value) => `var(--bc-${name}, ${value})`;
+    return [
+        s(".bc-gp-a", `stop-color:${v("panel-top", p.panelTop)}`), s(".bc-gp-b", `stop-color:${v("panel-bottom", p.panelBottom)}`),
+        s(".bc-gt-a", `stop-color:${v("title-a", p.titleA)}`), s(".bc-gt-b", `stop-color:${v("title-b", p.titleB)}`),
+        s(".bc-gs-a", `stop-color:${v("sub-a", p.subA)}`), s(".bc-gs-b", `stop-color:${v("sub-b", p.subB)}`),
+        s(".bc-gi-a", `stop-color:${v("icon-a", p.iconA)}`), s(".bc-gi-b", `stop-color:${v("icon-b", p.iconB)}`),
+        s(".bc-edge", `fill:none;stroke:${v("edge", p.edge)};stroke-width:2`),
+        s(".bc-titleink", `fill:${v("title-ink", p.titleInk)}`),
+        s(".bc-subink", `fill:${v("sub-ink", p.subInk)}`),
+        s(".bc-rowa", `fill:${v("row-a", p.rowA)}`), s(".bc-rowb", `fill:${v("row-b", p.rowB)}`),
+        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-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)}`),
+        s(".bc-iconink", `fill:none;stroke:${v("icon-ink", p.iconInk)};stroke-linecap:round;stroke-linejoin:round`), s(".bc-iconfill", `fill:${v("icon-ink", p.iconInk)}`),
+        s(".bc-gloss-a", "stop-color:#ffffff;stop-opacity:.16"), s(".bc-gloss-b", "stop-color:#ffffff;stop-opacity:0"),
+        s(".tb-ring", "fill:none;stroke:rgba(255,255,255,.55);stroke-width:1"), s(".tb-plain", "fill:#2c3e6a"), s(".tb-initials", "fill:#ffffff"),
+        s("text", `font-family:var(--bc-font, ${BROADCAST_FONT});font-variant-numeric:tabular-nums`),
+        fixed.replaceAll("$S", `.${scope}`),
+    ].filter(Boolean).join("\n");
+}
+/** The gradients every board uses, by id: the panel's, the title band's, the sub bar's, the icon's and the gloss over a row. */
+export function broadcastDefs(scope) {
+    const g = (id, a, b, horizontal) => `<linearGradient id="${esc(scope)}-${id}" x1="0" y1="0" x2="${horizontal ? 1 : 0}" y2="${horizontal ? 0 : 1}"><stop class="${a}" offset="0"/><stop class="${b}" offset="1"/></linearGradient>`;
+    return [g("gp", "bc-gp-a", "bc-gp-b", false), g("gt", "bc-gt-a", "bc-gt-b", true), g("gs", "bc-gs-a", "bc-gs-b", false), g("gi", "bc-gi-a", "bc-gi-b", false), g("gl", "bc-gloss-a", "bc-gloss-b", false)].join("");
+}
+export function broadcastWrap(f, title, desc, body, kind, fixed = "") {
+    const marks = markDefs(f.ctx);
+    return [
+        `<svg xmlns="http://www.w3.org/2000/svg" lang="${esc(f.v.locale.code)}" class="taisen taisen-broadcast ${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="${kind}">`,
+        `<title id="${esc(f.scope)}-t">${esc(title)}</title><desc id="${esc(f.scope)}-d">${esc(desc)}</desc>`,
+        `<style>${broadcastStyle(f.scope, f.look, fixed)}</style>`,
+        `<defs>${broadcastDefs(f.scope)}${marks}</defs>`,
+        ...body,
+        "</svg>",
+    ].join("\n");
+}
+// ------------------------------------------------------------------------------------------------ shapes
+export const t = (x, y, size, content, cls, anchor = "start", weight = 700, 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 box = (x, y, w, h, cls, rx = 0, extra = "") => `<rect class="${cls}" x="${num(x)}" y="${num(y)}" width="${num(w)}" height="${num(h)}"${rx ? ` rx="${num(rx)}"` : ""}${extra}/>`;
+/** The panel's background and edge, from (0, 0) to the board's size, with the corners cut a little. */
+export function panel(f) {
+    const r = 8 * f.u;
+    return `<rect fill="url(#${esc(f.scope)}-gp)" x="0" y="0" width="${num(f.W)}" height="${num(f.H)}" rx="${num(r)}"/><rect class="bc-edge" x="1" y="1" width="${num(f.W - 2)}" height="${num(f.H - 2)}" rx="${num(r)}"/>`;
+}
+/** The title band: the icon square at the left, the title in capitals, from y to y + the band's height. Returns the shapes and the x where the title text starts. */
+export function titleBand(f, y, title, right) {
+    const { u, v } = f;
+    const h = BC.title * u;
+    const out = [];
+    const r = 8 * u;
+    // The band is square at the bottom and rounded at the top, like the panel.
+    out.push(`<path fill="url(#${esc(f.scope)}-gt)" d="M0 ${num(y + h)} V${num(y + r)} Q0 ${num(y)} ${num(r)} ${num(y)} H${num(f.W - r)} Q${num(f.W)} ${num(y)} ${num(f.W)} ${num(y + r)} V${num(y + h)} Z"/>`);
+    let x = 22 * u;
+    const icon = f.options.iconMark ? "custom" : f.options.icon ?? "medal";
+    if (icon !== "none") {
+        const s = h;
+        out.push(`<path fill="url(#${esc(f.scope)}-gi)" d="M0 ${num(y + s)} V${num(y + r)} Q0 ${num(y)} ${num(r)} ${num(y)} H${num(s)} V${num(y + s)} Z"/>`);
+        out.push(iconShape(f, icon, s / 2, y + s / 2, s * 0.62));
+        x = s + 20 * u;
+    }
+    const rightText = right ? v.upper(right) : "";
+    const rs = 20 * u;
+    const rw = rightText ? bw(rightText, rs) : 0;
+    const avail = f.W - x - 22 * u - (rw ? rw + 20 * u : 0);
+    const text = v.upper(title);
+    const ts = fitSize(text, 34 * u, avail, 0.55);
+    out.push(t(x, y + h / 2 + ts * 0.36, ts, fit(text, ts, avail + 1, bw), "bc-titleink", "start", 800));
+    if (rightText)
+        out.push(t(f.W - 22 * u, y + h / 2 + rs * 0.36, rs, rightText, "bc-titleink", "end", 700, ' letter-spacing=".04em"'));
+    return { svg: out.join(""), h };
+}
+/** An icon in the square, drawn in strokes: a medal on its ribbon, a stopwatch, or the caller's own mark. */
+function iconShape(f, icon, cx, cy, size) {
+    const u = size / 100;
+    const sw = num(Math.max(2.2 * u * 1.6, 1.5));
+    if (icon === "stopwatch") {
+        return [
+            `<circle class="bc-iconink" cx="${num(cx)}" cy="${num(cy + 6 * u)}" r="${num(38 * u)}" stroke-width="${sw}"/>`,
+            `<path class="bc-iconink" d="M${num(cx - 10 * u)} ${num(cy - 40 * u)} H${num(cx + 10 * u)} M${num(cx)} ${num(cy - 40 * u)} V${num(cy - 32 * u)} M${num(cx + 30 * u)} ${num(cy - 22 * u)} l${num(8 * u)} ${num(-8 * u)}" stroke-width="${sw}"/>`,
+            `<path class="bc-iconink" d="M${num(cx)} ${num(cy + 6 * u)} L${num(cx + 18 * u)} ${num(cy - 10 * u)}" stroke-width="${sw}"/>`,
+            `<circle class="bc-iconfill" cx="${num(cx)}" cy="${num(cy + 6 * u)}" r="${num(4 * u)}"/>`,
+        ].join("");
+    }
+    if (icon === "custom") {
+        const mark = (f.options.iconMark ?? "").trim();
+        const side = size * 1.1;
+        if (mark.startsWith("<")) {
+            const svg = cleanSvg(mark);
+            if (svg)
+                return `<svg x="${num(cx - side / 2)}" y="${num(cy - side / 2)}" width="${num(side)}" height="${num(side)}" viewBox="${esc(svg.viewBox)}">${svg.inner}</svg>`;
+        }
+        else if (safeUrl(mark))
+            return `<image href="${esc(mark)}" x="${num(cx - side / 2)}" y="${num(cy - side / 2)}" width="${num(side)}" height="${num(side)}" preserveAspectRatio="xMidYMid meet"/>`;
+        return "";
+    }
+    // The medal: a disc with a star-less rim and a V of ribbon above it.
+    return [
+        `<path class="bc-iconink" d="M${num(cx - 26 * u)} ${num(cy - 44 * u)} L${num(cx - 6 * u)} ${num(cy - 8 * u)} M${num(cx + 26 * u)} ${num(cy - 44 * u)} L${num(cx + 6 * u)} ${num(cy - 8 * u)}" stroke-width="${sw}"/>`,
+        `<circle class="bc-iconink" cx="${num(cx)}" cy="${num(cy + 18 * u)}" r="${num(28 * u)}" stroke-width="${sw}"/>`,
+        `<circle class="bc-iconink" cx="${num(cx)}" cy="${num(cy + 18 * u)}" r="${num(17 * u)}" stroke-width="${num(Math.max(1.2 * u * 1.6, 1))}"/>`,
+        `<path class="bc-iconfill" d="M${num(cx)} ${num(cy + 7 * u)} l${num(3.4 * u)} ${num(7 * u)} l${num(7.6 * u)} ${num(1.1 * u)} l${num(-5.5 * u)} ${num(5.3 * u)} l${num(1.3 * u)} ${num(7.6 * u)} l${num(-6.8 * u)} ${num(-3.6 * u)} l${num(-6.8 * u)} ${num(3.6 * u)} l${num(1.3 * u)} ${num(-7.6 * u)} l${num(-5.5 * u)} ${num(-5.3 * u)} l${num(7.6 * u)} ${num(-1.1 * u)} Z"/>`,
+    ].join("");
+}
+/** The light sub bar under the title: `text` at the left in capitals, and labels over columns at the right (each `{ x, label }`, centred on x). */
+export function subBar(f, y, text, labels = [], bold = true) {
+    const { u, v } = f;
+    const h = BC.sub * u;
+    const out = [box(0, y, f.W, h, "", 0, ` fill="url(#${esc(f.scope)}-gs)"`)];
+    const fs = 20 * u;
+    const leftEnd = labels.length ? Math.min(...labels.map((l) => l.x - l.w / 2)) - 12 * u : f.W - 18 * u;
+    const txt = v.upper(text);
+    if (txt) {
+        // The letters are spaced, which the width estimate does not know of: leave 7% for it.
+        const room = (leftEnd - 20 * u) / 1.07;
+        const z = fitSize(txt, fs, room, 0.6);
+        out.push(t(20 * u, y + h / 2 + z * 0.36, z, fit(txt, z, room, bw), "bc-subink", "start", bold ? 800 : 700, ' letter-spacing=".02em"'));
+    }
+    for (const l of labels) {
+        const lab = v.upper(l.label);
+        const z = fitSize(lab, fs * 0.85, l.w / 1.07, 0.55);
+        out.push(t(l.x, y + h / 2 + z * 0.36, z, fit(lab, z, l.w / 1.07, bw), "bc-subink", "middle", 800, ' letter-spacing=".02em"'));
+    }
+    return { svg: out.join(""), h };
+}
+/** A rank in a box: `box` (the broadcast's red square), `medal` (gold, silver and bronze for the first three, else the box) or `plain` (a white numeral). */
+export function rankBox(x, cy, w, h, text, rank, style, u) {
+    const size = fitSize(text, h * 0.62, w * 0.86, 0.5);
+    if (style === "plain") {
+        const ps = fitSize(text, 27 * u, w * 0.96, 0.5);
+        return t(x + w / 2, cy + ps * 0.36, ps, text, "bc-ink", "middle", 800);
+    }
+    const medal = style === "medal" && rank !== null && rank >= 1 && rank <= 3;
+    const cls = medal ? `bc-g${rank}` : "bc-rank";
+    const ink = medal ? "bc-medalink" : "bc-rankink";
+    return `${box(x, cy - h / 2, w, h, cls, 3 * u)}${t(x + w / 2, cy + size * 0.36, size, text, ink, "middle", 800)}`;
+}
+/** A record badge ("OR", "WR", "NR"): an orange rounded plate with the letters, right-aligned at `right`. Returns the shapes and the width. */
+export function recordBadge(right, cy, h, text, u) {
+    const size = h * 0.62;
+    const w = bw(text, size) + h * 0.8;
+    return { svg: `${box(right - w, cy - h / 2, w, h, "bc-badge", h * 0.28)}${t(right - w / 2, cy + size * 0.36, size, text, "bc-badgeink", "middle", 800, ' letter-spacing=".04em"')}`, w: w + 6 * u };
+}
+/** The gloss over a row: a faint white gradient from the top edge. */
+export const gloss = (f, x, y, w, h) => box(x, y, w, h * 0.55, "", 0, ` fill="url(#${esc(f.scope)}-gl)"`);
+export { bw, clampN, fitSize };

package/dist/index.d.ts

@@ -35,3 +35,7 @@ export { rankingMatchup, describeMatchup, matchupRecord } from "./ranking-matchu
 export type { MatchupOptions, MatchupSource, RankingMeeting } from "./ranking-matchup.ts";
 export { medalTable, medalRanks, tallyMedals, describeMedalTable } from "./medals.ts";
 export type { MedalAward, MedalFilter, MedalRow, MedalTableOptions, MedalTableSource } from "./medals.ts";
+export { resultsBoard, resultsBoardSize, describeResultsBoard } from "./results-board.ts";
+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";

package/dist/index.js

@@ -19,3 +19,5 @@ export { BOARD_SIZES } from "./rank-kit.js";
 export { rankingNumberOnes, describeNumberOnes, rankingEntryList, describeEntryList, NUMBER_ONE_COLORS } from "./ranking-cards.js";
 export { rankingMatchup, describeMatchup, matchupRecord } from "./ranking-matchup.js";
 export { medalTable, medalRanks, tallyMedals, describeMedalTable } from "./medals.js";
+export { resultsBoard, resultsBoardSize, describeResultsBoard } from "./results-board.js";
+export { BROADCAST_LOOKS } from "./broadcast-kit.js";

package/dist/locales.js

@@ -33,6 +33,7 @@ const EN = {
     rankNumberOnes: "Number ones", rankNumberOneIn: "#1 in {category}", rankEntryTitle: "Entry list", rankColRanking: "Ranking", rankUnranked: "NR",
     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",
 };
 const FR = {
     tbd: "À déterminer", bye: "exempt", walkover: "forfait", champion: "Champion", thirdPlace: "Match pour la troisième place", other: "Autres rencontres",
@@ -62,6 +63,7 @@ const FR = {
     rankNumberOnes: "Les numéros un", rankNumberOneIn: "N°\u00a01 en {category}", rankEntryTitle: "Liste des engagés", rankColRanking: "Classement", rankUnranked: "NC",
     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",
 };
 const JA = {
     tbd: "未定", bye: "シード", walkover: "不戦勝", champion: "優勝", thirdPlace: "3位決定戦", other: "その他の対戦",
@@ -91,6 +93,7 @@ const JA = {
     rankNumberOnes: "各階級の1位", rankNumberOneIn: "{category} 1位", rankEntryTitle: "エントリーリスト", rankColRanking: "ランキング", rankUnranked: "圏外",
     rankMatchTitle: "直接対決", rankMeetings: "過去の対戦", rankNoMeetings: "過去の対戦はありません", rankMore: "ほか{n}試合",
     medalTitle: "メダル獲得表", medalNone: "まだメダルはありません", medalGold: "金メダル", medalSilver: "銀メダル", medalBronze: "銅メダル", medalGoldShort: "金", medalSilverShort: "銀", medalBronzeShort: "銅", medalTotal: "合計", medalLine: "金{g}、銀{s}、銅{b}、合計{t}", medalRank: "{n}位",
+    rbResult: "結果",
 };
 const ES = {
     tbd: "Por definir", bye: "exento", walkover: "incomparecencia", champion: "Campeón", thirdPlace: "Partido por el tercer puesto", other: "Otros partidos",
@@ -120,6 +123,7 @@ const ES = {
     rankNumberOnes: "Los números uno", rankNumberOneIn: "N.º 1 en {category}", rankEntryTitle: "Lista de inscritos", rankColRanking: "Clasificación", rankUnranked: "SC",
     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",
 };
 const DE = {
     tbd: "offen", bye: "Freilos", walkover: "kampflos", champion: "Turniersieger", thirdPlace: "Spiel um Platz 3", other: "Weitere Begegnungen",
@@ -149,6 +153,7 @@ const DE = {
     rankNumberOnes: "Die Nummer Eins", rankNumberOneIn: "Nr. 1 in {category}", rankEntryTitle: "Meldeliste", rankColRanking: "Rangliste", rankUnranked: "o. R.",
     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",
 };
 /**
  * The round names, English name first. The football rounds are the terms of each language's Wikipedia article on the World Cup;

package/dist/marks.d.ts

@@ -33,7 +33,8 @@ export interface MarkContext {
         inner: string;
     }>;
     prefix: string;
-    shape: "round" | "square" | "none";
+    /** `rect` draws a flag 4:3: `size` is its height and its width a third more (`FlagRequest.shape` is then `rect`, which Hata calls `"4:3"`). */
+    shape: "round" | "square" | "rect" | "none";
     /** The look: `road` draws a team's mark with a wide ring and a hairline outside it. */
     look?: "classic" | "road";
     /** Draws a team's `flag` code; with none a team's `mark` or initials are drawn. */

package/dist/marks.js

@@ -92,7 +92,7 @@ export function safeHref(url) {
 function flagOf(code, size, ctx) {
     if (typeof ctx.flags !== "function" || typeof code !== "string" || code.trim() === "")
         return null;
-    const shape = ctx.shape === "square" ? "square" : "round";
+    const shape = ctx.shape === "square" ? "square" : ctx.shape === "rect" ? "rect" : "round";
     const key = `${code.trim()}|${shape}|${Math.round(size)}`;
     const cache = ctx.flagCache;
     if (cache?.has(key))
@@ -124,6 +124,8 @@ export const clipId = (prefix, r) => `${prefix}-c${String(num(r)).replace(".", "
  * with no mark, or one that cannot be used, is its initials on a plain disc. Returns SVG text.
  */
 export function drawMark(team, cx, cy, size, ctx, abbrText) {
+    if (ctx.shape === "rect")
+        return drawRectMark(team, cx, cy, size, ctx, abbrText);
     const r = size / 2;
     if (!team)
         return `<circle class="tb-plain tb-mark" cx="${num(cx)}" cy="${num(cy)}" r="${num(r)}" opacity=".5"/>`;
@@ -205,3 +207,49 @@ export function drawMark(team, cx, cy, size, ctx, abbrText) {
     const ink = team.color ? inkOn(team.color) : null;
     return `<g class="tb-mark">${shape}<text class="tb-initials" x="${num(cx)}" y="${num(cy + size * 0.12)}" font-size="${num(size * 0.36)}" font-weight="700" text-anchor="middle"${ink ? ` style="fill:${ink}"` : ""}>${esc(text)}</text></g>${ring}`;
 }
+/** A flag, a mark or a badge in a 4:3 box `h` high (the shape of a national flag, as a scoreboard draws it), centred at (cx, cy). */
+function drawRectMark(team, cx, cy, h, ctx, abbrText) {
+    const w = h * (4 / 3);
+    const x = cx - w / 2, y = cy - h / 2;
+    const rx = Math.max(h * 0.08, 1);
+    const box = (cls, extra = "") => `<rect class="${cls}" x="${num(x)}" y="${num(y)}" width="${num(w)}" height="${num(h)}" rx="${num(rx)}"${extra}/>`;
+    if (!team)
+        return box("tb-plain tb-mark", ' opacity=".5"');
+    const ring = box("tb-ring");
+    const used = (key, markup) => {
+        let symbol = ctx.symbols.get(key);
+        if (!symbol) {
+            symbol = { id: `${ctx.prefix}-m${ctx.symbols.size + 1}`, ...markup };
+            ctx.symbols.set(key, symbol);
+        }
+        return `<g class="tb-mark"><use href="#${symbol.id}" x="${num(x)}" y="${num(y)}" width="${num(w)}" height="${num(h)}"/></g>${ring}`;
+    };
+    const flag = flagOf(team.flag, w, ctx);
+    if (flag)
+        return used(`flag:${flag.viewBox}:${flag.inner}`, flag);
+    let fromCode;
+    if (typeof ctx.flagHref === "function" && typeof team.flag === "string" && team.flag.trim() !== "") {
+        try {
+            const href = ctx.flagHref(team.flag.trim());
+            if (typeof href === "string" && !href.trim().startsWith("<") && safeUrl(href))
+                fromCode = href;
+        }
+        catch {
+            fromCode = undefined;
+        }
+    }
+    const mark = (fromCode ?? team.mark)?.trim();
+    if (mark) {
+        if (mark.startsWith("<")) {
+            const svg = cleanSvg(mark);
+            if (svg)
+                return used(mark, svg);
+        }
+        else if (safeUrl(mark))
+            return used(`url:${mark}`, { viewBox: "0 0 100 100", inner: `<image href="${esc(mark)}" x="0" y="0" width="100" height="100" preserveAspectRatio="xMidYMid slice"/>` });
+    }
+    const text = (abbrText ?? team.abbr ?? abbreviate(team.name)).slice(0, 3);
+    const fillStyle = team.color ? ` style="fill:${esc(team.color)}"` : "";
+    const ink = team.color ? inkOn(team.color) : null;
+    return `<g class="tb-mark">${box("tb-plain", fillStyle)}<text class="tb-initials" x="${num(cx)}" y="${num(cy + h * 0.14)}" font-size="${num(Math.max(h * (text.length <= 2 ? 0.46 : 0.4), 9))}" font-weight="700" text-anchor="middle"${ink ? ` style="fill:${ink}"` : ""}>${esc(text)}</text></g>${ring}`;
+}

package/dist/results-board.d.ts

@@ -0,0 +1,62 @@
+/**
+ * A results board in the manner of a television graphic: a title band (the event, in capitals, with an icon square), a sub bar (the phase, and the heading of each score column), and a row for
+ * each athlete: a rank in a box, the country code and 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. It is
+ * a standalone SVG of a width you choose and a height that follows from the rows (`resultsBoardSize`), made to be placed over a picture. No mark of any games or broadcaster is drawn.
+ */
+import { type BroadcastOptions } from "./broadcast-kit.ts";
+import { type RankingName, type RankingOptions } from "./ranking.ts";
+/** One line of a results board. Only `name` is needed. */
+export interface ResultsRow {
+    /** The name as it is to be written ("A. SACRAMONE", "Svetlana Khorkina"), or its two parts (set by `nameStyle`). */
+    name: string | RankingName;
+    /** The rank: a number, or a text ("=3", "DQ"). Left out, the place in the list (equal results share one, see `ties`). */
+    rank?: number | string;
+    /** The country's three letters, written before the flag. */
+    code?: string;
+    /** A code for the `flags` function (`US`, `CA-BC`), drawn 4:3. */
+    flag?: string;
+    /** A mark of your own (an image address or inline SVG) in place of a flag. */
+    mark?: string;
+    /** One value for each column: a number (written to the column's `precision` decimals), a text (written as it is: `1:08.34`), or none. */
+    values?: readonly (number | string | null)[];
+    /** A record badge or several beside the last value: `"OR"`, `["WR", "NR"]`. */
+    record?: string | readonly string[];
+    /** Written in place of the values when there are none to show: `DNS`, `DNF`, `DQ`. */
+    note?: string;
+}
+/** A column of scores: its heading in the sub bar, and the decimals of its numbers. */
+export interface ResultsColumn {
+    label?: string;
+    precision?: number;
+}
+export interface ResultsBoardSource {
+    /** The event, in capitals in the title band ("Women's apparatus final"). */
+    title: string;
+    /** The phase in the sub bar ("Result", "Final", "Preliminaries"). Default: the language's "Result". */
+    phase?: string;
+    /** The score columns, left to right. Default: one column per value of the longest row, with no heading. */
+    columns?: readonly ResultsColumn[];
+    rows: readonly ResultsRow[];
+}
+export interface ResultsBoardOptions extends BroadcastOptions, Pick<RankingOptions, "nameStyle"> {
+    /** `box` (the default: a red square, as a broadcast has it), `medal` (gold, silver and bronze boxes for the first three) or `plain` (a white numeral). */
+    rankStyle?: "box" | "medal" | "plain";
+    /** Decimals for numeric values where a column names none (`3` writes `38.387`). Default: as many as the number has, up to three. */
+    precision?: number;
+    /** Equal results share a rank (`1, 2, 2, 4`). Default true. */
+    ties?: boolean;
+    /** `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 results board with `rowCount` rows: the width given (1280 by default) and a height of 64 + 36 + 20 + 54 a row, in units of the width over 1280. */
+export declare function resultsBoardSize(rowCount: number, options?: Pick<BroadcastOptions, "width">): {
+    width: number;
+    height: number;
+};
+/** The board as a sentence, the drawing's description. */
+export declare function describeResultsBoard(source: ResultsBoardSource, options?: Pick<ResultsBoardOptions, "locale" | "words" | "nameStyle" | "precision" | "ties" | "nameCase">): string;
+/**
+ * The results board as a standalone SVG. Throws a `RangeError` for a board with no title or no rows, more than 24 rows, a row with no name, a value that is not a number, a text or null, a precision
+ * that is not a whole number from 0 to 6, an unknown option value, or a width outside 720 to 4000.
+ */
+export declare function resultsBoard(source: ResultsBoardSource, options?: ResultsBoardOptions): string;

package/dist/results-board.js

@@ -0,0 +1,173 @@
+/**
+ * A results board in the manner of a television graphic: a title band (the event, in capitals, with an icon square), a sub bar (the phase, and the heading of each score column), and a row for
+ * each athlete: a rank in a box, the country code and 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. It is
+ * a standalone SVG of a width you choose and a height that follows from the rows (`resultsBoardSize`), made to be placed over a picture. No mark of any games or broadcaster is drawn.
+ */
+import { BC, box, broadcastFrame, broadcastWrap, bw, fitSize, gloss, panel, rankBox, recordBadge, subBar, t, titleBand } from "./broadcast-kit.js";
+import { voiceOf } from "./locales.js";
+import { drawMark } from "./marks.js";
+import { nameText } from "./ranking.js";
+import { abbreviate, fit } from "./text.js";
+const MAX_ROWS = 24;
+/** The width and the height of a results board with `rowCount` rows: the width given (1280 by default) and a height of 64 + 36 + 20 + 54 a row, in units of the width over 1280. */
+export function resultsBoardSize(rowCount, options = {}) {
+    const width = options.width ?? 1280;
+    const u = width / 1280;
+    return { width, height: Math.round((BC.title + BC.sub + BC.pad * 2 + rowCount * (BC.row + BC.gap)) * u) };
+}
+function validate(source, options) {
+    if (!source || typeof source.title !== "string" || source.title.trim() === "")
+        throw new RangeError("taisen-brackets: a results board needs a title");
+    if (!Array.isArray(source.rows) || source.rows.length === 0)
+        throw new RangeError("taisen-brackets: a results board needs at least one row");
+    if (source.rows.length > MAX_ROWS)
+        throw new RangeError(`taisen-brackets: a results board has at most ${MAX_ROWS} rows (it is a screen graphic): cut the list or draw a ranking list`);
+    source.rows.forEach((r, i) => {
+        const n = r?.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: row ${i + 1} of the results board needs a name`);
+        if (r.values !== undefined) {
+            if (!Array.isArray(r.values))
+                throw new RangeError(`taisen-brackets: the values of row ${i + 1} are a list`);
+            r.values.forEach((x) => { if (x !== null && typeof x !== "number" && typeof x !== "string")
+                throw new RangeError(`taisen-brackets: a value of row ${i + 1} is a number, a text or null`); if (typeof x === "number" && !Number.isFinite(x))
+                throw new RangeError(`taisen-brackets: a value of row ${i + 1} is not a finite number`); });
+        }
+    });
+    source.columns?.forEach((c) => { if (c.precision !== undefined && !(Number.isInteger(c.precision) && c.precision >= 0 && c.precision <= 6))
+        throw new RangeError("taisen-brackets: a column's precision is a whole number from 0 to 6"); });
+    if (options.precision !== undefined && !(Number.isInteger(options.precision) && options.precision >= 0 && options.precision <= 6))
+        throw new RangeError("taisen-brackets: precision is a whole number from 0 to 6");
+    if (options.rankStyle !== undefined && !["box", "medal", "plain"].includes(options.rankStyle))
+        throw new RangeError(`taisen-brackets: rankStyle is "box", "medal" or "plain", not ${JSON.stringify(options.rankStyle)}`);
+    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)}`);
+}
+const records = (r) => (r.record === undefined ? [] : typeof r.record === "string" ? [r.record] : [...r.record]).filter((x) => x.trim() !== "");
+/** A value as it is written: a number to its precision, a text as it is, none as a dash. */
+function valueText(x, precision, v) {
+    if (x === null || x === undefined)
+        return "";
+    if (typeof x === "string")
+        return x;
+    return precision === undefined ? v.number(x) : new Intl.NumberFormat(v.locale.tag, { minimumFractionDigits: precision, maximumFractionDigits: precision }).format(x);
+}
+/** The ranks as the board writes them, in the order of the rows. */
+function ranksOf(rows, ties) {
+    const out = [];
+    rows.forEach((r, i) => {
+        if (r.rank !== undefined) {
+            out.push(r.rank);
+            return;
+        }
+        const prev = rows[i - 1];
+        const same = ties && prev && prev.rank === undefined && r.values && prev.values && r.values.length > 0 && r.values.length === prev.values.length && r.values.every((x, k) => x === prev.values[k]);
+        out.push(same ? out[i - 1] : i + 1);
+    });
+    return out;
+}
+/** The board as a sentence, the drawing's description. */
+export function describeResultsBoard(source, options = {}) {
+    const v = voiceOf(options);
+    const w = v.words;
+    const parts = [source.title, source.phase ?? w.rbResult];
+    const ranks = ranksOf(source.rows, options.ties ?? true);
+    source.rows.forEach((r, i) => {
+        const name = nameText(r.name, options.nameStyle ?? "surname-first", v);
+        const vals = (r.values ?? []).map((x, k) => valueText(x, source.columns?.[k]?.precision ?? options.precision, v)).filter(Boolean);
+        const bits = [String(ranks[i]), options.nameCase === "upper" ? v.upper(name) : name, r.code ?? "", ...(r.note ? [r.note] : vals), ...records(r)].filter(Boolean);
+        parts.push(bits.join(w.rankJoin));
+    });
+    return parts.join(w.sep) + w.end;
+}
+/**
+ * The results board as a standalone SVG. Throws a `RangeError` for a board with no title or no rows, more than 24 rows, a row with no name, a value that is not a number, a text or null, a precision
+ * that is not a whole number from 0 to 6, an unknown option value, or a width outside 720 to 4000.
+ */
+export function resultsBoard(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 n = source.rows.length;
+    const size = resultsBoardSize(n, options);
+    const f = broadcastFrame(options, [source, options.rankStyle, options.precision, options.ties, options.nameCase, options.nameStyle], size.height / (size.width / 1280));
+    const { W, u, v } = f;
+    const w = v.words;
+    const style = options.nameStyle ?? "surname-first";
+    const ranks = ranksOf(source.rows, options.ties ?? true);
+    const body = [panel(f)];
+    const title = titleBand(f, 0, source.title);
+    body.push(title.svg);
+    // The columns, from the right: the widest value or heading sets a column's width.
+    const cols = Math.max(source.columns?.length ?? 0, ...source.rows.map((r) => r.values?.length ?? 0));
+    const vs = 27 * u, ls = 17 * u;
+    const texts = source.rows.map((r) => Array.from({ length: cols }, (_, k) => valueText(r.values?.[k], source.columns?.[k]?.precision ?? options.precision, v)));
+    const widths = Array.from({ length: cols }, (_, k) => Math.max(...texts.map((row) => bw(row[k], vs)), bw(v.upper(source.columns?.[k]?.label ?? ""), ls * 1.1)) + 30 * u);
+    const right = W - 14 * u;
+    const centres = [];
+    let edge = right;
+    for (let k = cols - 1; k >= 0; k--) {
+        centres[k] = edge - widths[k] / 2;
+        edge -= widths[k];
+    }
+    const labels = source.columns?.map((c, k) => ({ x: centres[k], w: widths[k], label: c.label ?? "" })).filter((l) => l.label) ?? [];
+    const sub = subBar(f, title.h, source.phase ?? w.rbResult, labels);
+    body.push(sub.svg);
+    const top = title.h + sub.h + BC.pad * u;
+    const h = BC.row * u;
+    const anyFlag = source.rows.some((r) => r.flag || r.mark);
+    const anyCode = source.rows.some((r) => r.code);
+    const rankW = 46 * u;
+    const cs = 24 * u;
+    const codeW = anyCode ? Math.max(...source.rows.map((r) => bw(r.code ?? "", cs))) + 12 * u : 0;
+    const flagH = 28 * u, flagW = flagH * (4 / 3);
+    source.rows.forEach((r, i) => {
+        const y = top + i * (h + BC.gap * u);
+        const cy = y + h / 2;
+        const g = [];
+        g.push(box(0, y, W, h, i % 2 === 0 ? "bc-rowa" : "bc-rowb"));
+        g.push(gloss(f, 0, y, W, h));
+        let x = 12 * u;
+        const rank = ranks[i];
+        g.push(rankBox(x, cy, rankW, 36 * u, typeof rank === "number" ? v.number(rank) : rank, typeof rank === "number" ? rank : null, options.rankStyle ?? "box", u));
+        x += rankW + 14 * u;
+        if (anyCode) {
+            g.push(t(x, cy + cs * 0.36, cs, r.code ?? "", "bc-ink", "start", 700));
+            x += codeW;
+        }
+        if (anyFlag) {
+            if (r.flag || r.mark)
+                g.push(drawMark({ id: `r${i}`, name: String(typeof r.name === "string" ? r.name : r.name.surname), abbr: (r.code ?? abbreviate(typeof r.name === "string" ? r.name : r.name.surname)).slice(0, 3), ...(r.flag ? { flag: r.flag } : {}), ...(r.mark ? { mark: r.mark } : {}) }, x + flagW / 2, cy, flagH, f.ctx));
+            x += flagW + 14 * u;
+        }
+        // The values at the right, then the badges before the last value, then the name in what is left.
+        let nameRight = (cols > 0 ? edge : right) - 8 * u;
+        const vals = [];
+        if (r.note)
+            vals.push(t(right - 6 * u, cy + vs * 0.36, vs * 0.85, r.note, "bc-sub", "end", 700));
+        else
+            texts[i].forEach((text, k) => { if (text)
+                vals.push(t(centres[k] + widths[k] / 2 - 14 * u, cy + vs * 0.36, vs, text, "bc-ink", "end", k === cols - 1 ? 800 : 700)); });
+        if (r.note)
+            nameRight = right - bw(r.note, vs * 0.85) - 18 * u;
+        const badges = [];
+        let bx = cols > 0 && !r.note ? edge - 4 * u : nameRight;
+        for (const rec of records(r)) {
+            const b = recordBadge(bx, cy, 26 * u, rec, u);
+            badges.push(b.svg);
+            bx -= b.w;
+        }
+        if (badges.length)
+            nameRight = bx - 4 * u;
+        const name = options.nameCase === "upper" ? v.upper(nameText(r.name, style, v)) : nameText(r.name, style, v);
+        const avail = Math.max(40 * u, nameRight - x);
+        const ns = fitSize(name, 27 * u, avail, 0.6);
+        g.push(t(x, cy + ns * 0.36, ns, fit(name, ns, avail + 1, bw), "bc-ink", "start", 700));
+        g.push(...badges, ...vals);
+        body.push(`<g class="bc-row">${g.join("")}</g>`);
+    });
+    return broadcastWrap(f, options.title ?? source.title, describeResultsBoard(source, options), body, "results-board");
+}

package/dist/types.d.ts

@@ -438,6 +438,8 @@ export interface Words {
     medalLine: string;
     /** A rank in the row sentence (`{n}`): "3", and "3位" in Japanese. */
     medalRank: string;
+    /** The broadcast-style boards (`resultsBoard`, `boutBoard`, `broadcastMedalTable`): the sub bar\'s word for a result. */
+    rbResult: 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.14.0";
+export declare const VERSION = "0.15.0";

package/dist/version.js

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

package/package.json

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