@johnmorrisdotca/taisen-brackets 0.3.0 → 0.4.0

package/dist/road.draw.js

@@ -0,0 +1,256 @@
+// The road chart, drawn: the two finalists' big round marks with their names, the round names down the middle on a dotted road, each finalist's matches on its side as
+// the round marks of both teams with the score between them, and the group stage as a compact row at the foot. Each size has its own arrangement: `card`, `square` and
+// `phone` stack the finalists over the rounds; `wide` puts them at the two ends. Nothing is measured in a browser: type is set by estimates (`emWidth`).
+import { drawMark, markDefs } from "./marks.js";
+import { codeOf, decidedWords, nameOf, summaryOf } from "./road.model.js";
+import { SIZES } from "./render.js";
+import { styleFor } from "./theme.js";
+import { capitals, emWidth, esc, fitLines, num } from "./text.js";
+const clamp = (v, lo, hi) => Math.min(hi, Math.max(lo, v));
+/** A text centred on `y`, `size` high. */
+const text = (cls, x, y, size, content, anchor = "middle") => `<text class="${cls}" x="${num(x)}" y="${num(y + size * 0.36)}" font-size="${num(size)}" text-anchor="${anchor}">${esc(content)}</text>`;
+/** The width of a match's score block in ems of its number size: the two numbers and the dash. */
+const scoreEms = (v) => (v.whole !== undefined ? emWidth(v.whole) : emWidth(v.mine) + emWidth(v.theirs) + 1.1);
+/** The group stage's score as one text. */
+const sub0 = (v) => (v.note !== undefined ? v.note !== "" : v.says);
+const groupScore = (v) => v.whole ?? `${v.mine}–${v.theirs}`;
+/** Draw the chart as an SVG string. `gid` is the prefix of its ids. */
+export function drawRoad(model, o, gid) {
+    const size = o.size !== undefined && Object.prototype.hasOwnProperty.call(SIZES, o.size) ? o.size : "card";
+    const info = SIZES[size];
+    const w = model.words;
+    const W = info.width;
+    const phone = size === "phone";
+    const wide = size === "wide";
+    const [fa, fb] = model.finalists;
+    const rounds = [...model.rounds].reverse();
+    const R = rounds.length;
+    const nGroup = Math.max(model.group[0].length, model.group[1].length);
+    const emphasis = o.winner !== "none";
+    const codes = o.codes !== false;
+    const theme = o.theme ?? "auto";
+    const ctx = {
+        radii: new Set(),
+        symbols: new Map(),
+        prefix: gid,
+        shape: o.markShape === "square" ? "square" : "round",
+        look: "road",
+        flags: o.flags,
+        theme: theme === "light" ? "light" : theme === "dark" || theme === "poster" ? "dark" : "inherit",
+        flagCache: new Map(),
+    };
+    const markOf = (team, cx, cy, r, cls) => `<g class="${cls}">${drawMark(team, cx, cy, 2 * r, ctx, codeOf(team).slice(0, 3))}</g>`;
+    // ---- The type and the room round the edge. ----
+    const tall = info.height ?? 1e9;
+    const pad = phone ? 16 : Math.round(Math.min(W * 0.045, tall * 0.05));
+    const ts = clamp(Math.min(W * 0.044, tall * 0.056), 17, 48);
+    const es = clamp(Math.min(W * 0.0185, tall * 0.022), 9, 20);
+    const room = W - 2 * pad;
+    const titleFit = fitLines(model.title, room * 0.94, ts * 2.3, ts);
+    const subSize = model.subtitle === undefined ? 0 : Math.min(ts * 0.5, (room * 0.94) / Math.max(1, emWidth(model.subtitle)));
+    const headH = titleFit.height + (model.subtitle === undefined ? 0 : subSize * 1.5) + ts * 0.45;
+    const note = o.endnote === undefined ? "" : String(o.endnote).trim();
+    const endSize = note === "" ? 0 : Math.min(es, room / Math.max(1, emWidth(note, false)));
+    const footH = endSize === 0 ? 0 : endSize * 2.4;
+    // ---- The columns: the middle one holds the rounds' names; a wide chart has a column for each finalist at its end. ----
+    const cl = phone ? 70 : wide ? W * 0.12 : W * 0.175;
+    const fc = wide ? W * 0.17 : 0;
+    const sideW = (W - 2 * pad - cl - 2 * fc) / 2;
+    const lanes = [
+        { x0: pad + fc, x1: pad + fc + sideW },
+        { x0: W - pad - fc - sideW, x1: W - pad - fc },
+    ];
+    const cx = W / 2;
+    // ---- The group stage: how many marks in a row, and how large. ----
+    const maxCols = Math.max(1, Math.floor(sideW / (phone ? 46 : W * 0.062)));
+    const cols = nGroup === 0 ? 1 : Math.min(maxCols, nGroup <= 4 ? nGroup : Math.ceil(nGroup / 2));
+    const groupRows = nGroup === 0 ? 0 : Math.ceil(nGroup / cols);
+    const cw = sideW / cols;
+    const dm = Math.min(cw * 0.56, phone ? 36 : Math.min(W * 0.052, tall * 0.065));
+    const cellH = dm * 2.08;
+    const groupBlock = nGroup === 0 ? 0 : groupRows * cellH + (groupRows - 1) * dm * 0.2 + (phone ? 26 : dm * 0.1);
+    // ---- The big marks, the rows and the vertical room. ----
+    const rowLabelH = phone ? 22 : 0;
+    let H = info.height ?? 0;
+    let D = wide ? Math.min(fc * 0.8, H * 0.36) : Math.min(sideW * 0.68, tall * 0.19);
+    const names = (d) => [fa, fb].map((t) => fitLines(capitals(t.name), (wide ? fc : sideW) * 0.96, d * 0.17 * 2.3, d * 0.17));
+    const slots = wide ? R + 1 : R;
+    const minRow = W * 0.085;
+    let rowH = phone ? 76 : 0;
+    let bandH = 0;
+    let regionTop = 0;
+    let regionBottom = 0;
+    const gapS = phone ? 14 : (info.height ?? 1000) * 0.016;
+    for (let attempt = 0; attempt < 6; attempt += 1) {
+        bandH = D + D * 0.08 + Math.max(...names(D).map((n) => n.height));
+        if (phone) {
+            regionTop = pad + headH + bandH + gapS;
+            regionBottom = regionTop + R * (rowH + rowLabelH);
+            H = regionBottom + (nGroup > 0 ? gapS + groupBlock : 0) + footH + pad;
+            break;
+        }
+        regionTop = pad + headH + (wide ? 0 : bandH + gapS);
+        regionBottom = H - pad - footH - (nGroup > 0 ? groupBlock + gapS : 0);
+        rowH = slots > 0 ? (regionBottom - regionTop) / slots : 0;
+        if (wide || rowH >= minRow || D < sideW * 0.25)
+            break;
+        D *= 0.86;
+    }
+    rowH = Math.min(rowH, W * 0.2);
+    // ---- The pieces of a row: the marks, the numbers, the gaps. ----
+    const subRatio = 0.42;
+    let ns = rowH * 0.34;
+    let d = rowH * 0.58;
+    let ems = 2.2;
+    for (const key of rounds) {
+        for (const i of [0, 1]) {
+            const v = model.path[i].get(key);
+            if (v !== undefined)
+                ems = Math.max(ems, scoreEms(v), emWidth(decidedWords(v, w, true), false) * subRatio);
+        }
+    }
+    const fit = Math.min(1, (sideW * 0.97) / (2 * d + 2 * d * 0.14 + ems * ns));
+    ns *= fit;
+    d *= fit;
+    const pair = 2 * d + 2 * d * 0.14 + ems * ns;
+    // The top of a row, the first being the last round. A wide chart's first slot is the final.
+    const rowTop = (i) => {
+        if (phone)
+            return regionTop + i * (rowH + rowLabelH) + rowLabelH;
+        return regionTop + (regionBottom - regionTop - slots * rowH) / 2 + (wide ? i + 1 : i) * rowH;
+    };
+    const dimOf = (result, forFinalist) => (emphasis && ((forFinalist && result === "loss") || (!forFinalist && result === "win")) ? " tb-r-dim" : "");
+    // The round's name: a panel in the middle column, or a line over the row on a phone.
+    const panel = (words, yc, height, width) => {
+        const fitted = fitLines(words, width * 0.88, height * 0.74, height * 0.54);
+        const lines = fitted.lines.map((line, i) => text("tb-lab", cx, yc + (i - (fitted.lines.length - 1) / 2) * fitted.size * 1.1, fitted.size, line));
+        return `<rect class="tb-panel" x="${num(cx - width / 2)}" y="${num(yc - height / 2)}" width="${num(width)}" height="${num(height)}" rx="${num(height / 2)}"/>${lines.join("")}`;
+    };
+    const label = (key, yc) => {
+        const words = model.label(key);
+        if (!phone)
+            return panel(words, yc, Math.min(rowH * 0.34, cl * 0.2), cl * 0.94);
+        const y = yc - rowH / 2 - rowLabelH / 2;
+        const width = emWidth(words) * 11.5 + 20;
+        return `<rect class="tb-panel" x="${num(cx - width / 2)}" y="${num(y - 9)}" width="${num(width)}" height="18" rx="9"/>${text("tb-lab", cx, y, 11.5, words)}`;
+    };
+    // One finalist's match in a row: the two marks and the score between them.
+    const matchMarkup = (lane, side, yc, v) => {
+        const left = v.homeFirst !== undefined ? v.homeFirst : side === 0;
+        const xc = (lane.x0 + lane.x1) / 2;
+        const y = yc - rowH * 0.04;
+        const lx = xc - pair / 2 + d / 2;
+        const rx = xc + pair / 2 - d / 2;
+        let out = markOf(model.finalists[side], left ? lx : rx, y, d / 2, `tb-r-fin${dimOf(v.result, true)}`);
+        out += markOf(v.opponent, left ? rx : lx, y, d / 2, `tb-r-opp${dimOf(v.result, false)}`);
+        if (codes)
+            out += text(`tb-r-code${dimOf(v.result, false)}`, left ? rx : lx, y + d / 2 + d * 0.2, d * 0.2, codeOf(v.opponent));
+        out += scoreMarkup(v, xc, y, ns, left);
+        const sub = decidedWords(v, w, left);
+        return sub === "" ? out : out + text("tb-r-sub", xc, y + ns * 0.82, ns * subRatio, sub);
+    };
+    // The score: the two numbers either side of a dash, the loser's quiet. The first side's number is on the left when `left`.
+    const scoreMarkup = (v, x, y, n, left) => {
+        if (v.whole !== undefined)
+            return text("tb-r-n", x, y, n * 0.9, v.whole);
+        const [a, b, lowA, lowB] = left ? [v.mine, v.theirs, v.result === "loss", v.result === "win"] : [v.theirs, v.mine, v.result === "win", v.result === "loss"];
+        return (text(`tb-r-n${emphasis && lowA ? " tb-r-low" : ""}`, x - n * 0.4, y, n, a, "end") +
+            text("tb-r-dash", x, y, n * 0.8, "–") +
+            text(`tb-r-n${emphasis && lowB ? " tb-r-low" : ""}`, x + n * 0.4, y, n, b, "start"));
+    };
+    let body = "";
+    for (const [i, key] of rounds.entries()) {
+        const yc = rowTop(i) + rowH / 2;
+        body += label(key, yc);
+        for (const side of [0, 1]) {
+            const v = model.path[side].get(key);
+            if (v !== undefined)
+                body += matchMarkup(lanes[side], side, yc, v);
+        }
+    }
+    // ---- The finalists. ----
+    const final = model.final;
+    const lost = (side) => emphasis && final !== undefined && (side === 0 ? final.result === "loss" : final.result === "win");
+    const named = names(D);
+    const flagX = wide ? [pad + fc / 2, W - pad - fc / 2] : [(lanes[0].x0 + lanes[0].x1) / 2, (lanes[1].x0 + lanes[1].x1) / 2];
+    const flagY = wide ? (regionTop + regionBottom) / 2 - (D * 0.08 + Math.max(...named.map((n) => n.height))) / 2 : pad + headH + (phone ? 0 : (info.height ?? 1000) * 0.008) + D / 2;
+    let band = "";
+    for (const side of [0, 1]) {
+        const dim = lost(side) ? " tb-r-dim" : "";
+        band += markOf(model.finalists[side], flagX[side], flagY, D / 2, `tb-r-fin${dim}`);
+        const nb = named[side];
+        const top = flagY + D / 2 + D * 0.08;
+        band += nb.lines.map((line, k) => text(`tb-r-name${dim}`, flagX[side], top + nb.size * 0.55 + k * nb.size * 1.1, nb.size, line)).join("");
+    }
+    // The final between them: its name over its score, or "v" when it is not played.
+    const fy = wide ? rowTop(-1) + rowH / 2 : flagY;
+    const labelSize = clamp(cl * 0.13, 9, 26);
+    const fs = wide ? Math.min(clamp(cl * 0.27, 14, 58), rowH * 0.36) : clamp(cl * 0.27, 14, 58);
+    let middle = text("tb-r-sub", cx, fy - (wide ? fs * 0.95 : Math.min(D * 0.3, cl * 0.34)), labelSize, model.label("final"));
+    if (final === undefined)
+        middle += text("tb-r-vs", cx, fy + labelSize * 0.2, fs * 0.9, w.roadVs);
+    else {
+        middle += scoreMarkup(final, cx, fy, fs, true);
+        const sub = decidedWords(final, w, true);
+        if (sub !== "")
+            middle += text("tb-r-sub", cx, fy + fs * 0.85, fs * 0.4, sub);
+    }
+    // ---- The road: a dotted line down the middle, behind the round names, from the final down to the group stage. ----
+    const groupTop = phone ? regionBottom + gapS : H - pad - footH - groupBlock;
+    const roadTop = wide ? fy + rowH * 0.42 : fy + (final === undefined ? labelSize * 1.6 : fs * (sub0(final) ? 1.5 : 1.0));
+    const roadEnd = nGroup > 0 ? groupTop + (phone ? 0 : cellH / 2) : R > 0 ? rowTop(R - 1) + rowH / 2 : roadTop;
+    const spine = R > 0 && roadEnd > roadTop
+        ? `<path class="tb-spine" d="M${num(cx)} ${num(roadTop)}V${num(roadEnd)}" stroke-width="${num(clamp(W * 0.004, 1.5, 4))}" stroke-dasharray="0.1 ${num(clamp(W * 0.014, 5, 16))}"${theme === "none" ? ' stroke="currentColor" stroke-opacity=".4"' : ""}/>`
+        : "";
+    // ---- The group stage: small round marks with their codes and scores. ----
+    let groupMarkup = "";
+    if (nGroup > 0) {
+        const gy = groupTop + (phone ? 26 : 0);
+        if (phone) {
+            const width = emWidth(model.groupLabel) * 11.5 + 20;
+            groupMarkup += `<rect class="tb-panel" x="${num(cx - width / 2)}" y="${num(groupTop + 1)}" width="${num(width)}" height="18" rx="9"/>${text("tb-lab", cx, groupTop + 10, 11.5, model.groupLabel)}`;
+        }
+        else
+            groupMarkup += panel(model.groupLabel, gy + cellH / 2, Math.min(cellH * 0.42, cl * 0.2), cl * 0.94);
+        for (const side of [0, 1]) {
+            const lane = lanes[side];
+            model.group[side].forEach((v, k) => {
+                const row = Math.floor(k / cols);
+                const inRow = Math.min(cols, model.group[side].length - row * cols);
+                const x = (lane.x0 + lane.x1) / 2 - (inRow * cw) / 2 + (k % cols) * cw + cw / 2;
+                const y = gy + row * (cellH + dm * 0.2);
+                const dim = dimOf(v.result, false);
+                groupMarkup += markOf(v.opponent, x, y + dm / 2, dm / 2, `tb-r-opp${dim}`);
+                if (codes)
+                    groupMarkup += text(`tb-r-code${dim}`, x, y + dm * 1.27, dm * 0.3, codeOf(v.opponent));
+                groupMarkup += text(`tb-r-n${emphasis && v.result === "loss" ? " tb-r-low" : ""}`, x, y + dm * 1.78, dm * 0.44, groupScore(v));
+            });
+        }
+    }
+    // ---- The head and the foot. ----
+    let head = titleFit.lines.map((line, k) => text("tb-r-t", cx, pad + titleFit.size * 0.55 + k * titleFit.size * 1.1, titleFit.size, line)).join("");
+    if (model.subtitle !== undefined)
+        head += text("tb-r-s", cx, pad + titleFit.height + subSize * 0.7, subSize, model.subtitle);
+    const foot = endSize === 0 ? "" : text("tb-r-e", cx, H - pad - endSize * 0.2, endSize, note);
+    const defs = markDefs(ctx);
+    const style = theme === "none" ? "" : `<style>${styleFor(`.${gid}`, theme, { chart: true })}</style>`;
+    const bg = o.background === false ? "" : `<rect class="tb-bg" x="0" y="0" width="${num(W)}" height="${num(H)}"${theme === "none" ? ' fill="none"' : ""}/>`;
+    const extra = o.className ? ` ${esc(o.className)}` : "";
+    return [
+        `<svg xmlns="http://www.w3.org/2000/svg" lang="${esc(model.voice.locale.code)}" class="taisen tb-road ${gid}${extra}" viewBox="0 0 ${num(W)} ${num(H)}" width="${num(W)}" height="${num(H)}" style="max-width:100%;height:auto" role="img" aria-labelledby="${gid}-t ${gid}-d" data-size="${size}">`,
+        `<title id="${gid}-t">${esc(nameOf(model))}</title><desc id="${gid}-d">${esc(summaryOf(model))}</desc>`,
+        style,
+        defs === "" ? "" : `<defs>${defs}</defs>`,
+        bg,
+        head,
+        spine,
+        band,
+        middle,
+        body,
+        groupMarkup,
+        foot,
+        "</svg>",
+    ]
+        .filter(Boolean)
+        .join("\n");
+}

package/dist/road.js

@@ -0,0 +1,58 @@
+// The road-to-the-final chart: the two finalists of a tournament with the matches each played on the way, as round flags (or crests) of both teams with the score between
+// them, the rounds named down the middle, and the group stage as a compact row at the foot. The idea is that of the "road to the final" graphics that sports sites post
+// for a World Cup or a Stanley Cup; the arrangement, the type and the code are this package's own, and no one's artwork is used: the marks are the caller's flags and
+// logos, or the team's initials on its colour.
+import { SIZES } from "./render.js";
+import { drawRoad } from "./road.draw.js";
+import { nameOf, readModel, summaryOf, tableOf, totalsOf } from "./road.model.js";
+import { hash } from "./text.js";
+const check = (o) => {
+    if (o.size !== undefined && !Object.prototype.hasOwnProperty.call(SIZES, o.size))
+        throw new RangeError(`Unknown size "${String(o.size)}": use one of ${Object.keys(SIZES).join(", ")}`);
+};
+/**
+ * The road to the final: the two finalists as large round marks with their names at the top, each one's matches on its side (the round mark of both teams with the
+ * score between them, and FT, AET or the shoot-out under it), the round names down the middle, and the group stage as a compact row of small marks, codes and scores.
+ * `input` is a tournament, the same one `drawBracket` draws (a list of matchups, `{ matchups, teams }` or a layout): the two sides of its final are the finalists, each one's
+ * played ties (round-robin games, `round: 0`, as the group stage) are its road, and `team` puts one finalist on the left. Or it is the two finalists, each a team (`name`,
+ * `abbr`, `mark` or `logo` for the flag or crest, `flag` for a country code drawn by `flags`, `color`) with its `path`, the matches before the final, the earliest first,
+ * and optionally its `group`; a match is `{ round, opponent, score: [for, against], decidedBy, pens }`, a round a key (`quarter-final`) with words in every language, or any
+ * key you name in `labels`, so a series (`First round`, `4-2`) draws as well as a knockout. A team with no mark is its initials on its colour. The side that won each match
+ * is brighter; the sizes are `card` (1080 by 1350, the default), `square`, `wide` (1200 by 675) and `phone` (390 wide). `table()` lists every match as text.
+ * @example
+ * ```ts
+ * import { roadToFinal, type RoadFinalist } from "@johnmorrisdotca/taisen-brackets";
+ * const owls: RoadFinalist = { name: "Northern Owls", abbr: "NOW", color: "#3a2d6b", path: [
+ *   { round: "quarter-final", opponent: { name: "Coastal Pines", abbr: "CPN" }, score: [2, 0] },
+ *   { round: "semi-final", opponent: { name: "Valley Stars", abbr: "VAL" }, score: [1, 1], decidedBy: "pens", pens: [4, 3] },
+ * ] };
+ * const gulls: RoadFinalist = { name: "Harbour City Gulls", abbr: "HCG", color: "#1d4f91", path: [
+ *   { round: "quarter-final", opponent: { name: "Summit Peaks", abbr: "SMT" }, score: [3, 1] },
+ *   { round: "semi-final", opponent: { name: "Metro Bolts", abbr: "MTB" }, score: [2, 1], decidedBy: "aet" },
+ * ] };
+ * const chart = roadToFinal([owls, gulls], { title: "Northern Cup 2030", size: "square" });
+ * console.log(chart.totals.rounds.join(" "), chart.draw().startsWith("<svg"), chart.table().includes("Semi-final"));
+ * // quarter-final semi-final true true
+ * ```
+ */
+export function roadToFinal(input, options = {}) {
+    if (typeof options !== "object" || options === null)
+        throw new TypeError("options is an object");
+    check(options);
+    const model = readModel(input, options);
+    const build = (extra = {}) => {
+        const merged = { ...options, ...extra };
+        check(merged);
+        const m = readModel(input, merged);
+        const prefix = merged.id ?? `tb-${hash(JSON.stringify([m.voice.locale.code, m.finalists.map((t) => t.name), [...m.path[0].values()].map((v) => [v.round, v.mine, v.theirs]), [...m.path[1].values()].map((v) => [v.round, v.mine, v.theirs]), m.rounds, merged.size, merged.theme, merged.title, merged.subtitle, merged.final ?? null, merged.endnote, merged.winner, merged.codes, merged.markShape]))}`;
+        return drawRoad(m, merged, prefix);
+    };
+    return {
+        options: { ...options },
+        title: nameOf(model),
+        summary: summaryOf(model),
+        totals: totalsOf(model),
+        draw: build,
+        table: (tableOptions = {}) => tableOf(tableOptions.locale === undefined ? model : readModel(input, { ...options, locale: tableOptions.locale }), tableOptions),
+    };
+}

package/dist/road.model.d.ts

@@ -0,0 +1,63 @@
+import { type Voice } from "./locales.ts";
+import type { RoadDecided, RoadInput, RoadOptions, RoadTotals } from "./road.types.ts";
+import type { Team, Words } from "./types.ts";
+/** Who won a match, from the finalist's side. `unknown` when the score is not a pair of numbers. */
+export type Result = "win" | "loss" | "draw" | "unknown";
+/** A match as it is drawn: the two scores written, who won, and how it was decided. */
+export interface MatchView {
+    /** The round's key; empty for a match of the group stage. */
+    round: string;
+    opponent: Team;
+    /** The finalist's score and the opponent's, written. For a score that is one text that could not be split, `whole` is that text and the two are empty. */
+    mine: string;
+    theirs: string;
+    whole?: string;
+    result: Result;
+    decided: RoadDecided;
+    pens?: [string, string];
+    /** The words that replace the usual ones under the score, or undefined. */
+    note?: string;
+    /** Whether the usual words (FT, AET, the shoot-out) are written: always for a knockout match, only when asked for a group match. */
+    says: boolean;
+    homeFirst?: boolean;
+}
+/** The chart's data, ready to draw. */
+export interface Model {
+    voice: Voice;
+    words: Words;
+    finalists: [Team, Team];
+    /** The matches of the group stage, for each finalist. */
+    group: [MatchView[], MatchView[]];
+    /** The knockout matches for each finalist, by round key. */
+    path: [Map<string, MatchView>, Map<string, MatchView>];
+    /** The rounds, the earliest first. */
+    rounds: string[];
+    /** The final, if played: the scores of the first finalist and the second. */
+    final?: MatchView;
+    label(key: string): string;
+    groupLabel: string;
+    title: string;
+    subtitle: string | undefined;
+}
+/** A number from a number or from text that is one, else undefined. */
+export declare function numeric(value: unknown): number | undefined;
+/** The rounds of two paths, the earliest first: a round both have is once, and a round only one has stays after the round before it. */
+export declare function mergeRounds(paths: readonly (readonly string[])[]): string[];
+/** Read and check what `roadToFinal` was given. */
+export declare function readModel(input: RoadInput, options: RoadOptions): Model;
+/** The words under a score: FT, AET or the shoot-out (the first side's numbers first), a note in their place, or nothing. */
+export declare function decidedWords(view: MatchView, w: Words, mineFirst: boolean): string;
+/** The score of a match as one text, the first side's first. */
+export declare function scoreText(view: MatchView, w: Words, mineFirst?: boolean): string;
+/** The abbreviation written under a mark: the team's own, else made from its name. */
+export declare function codeOf(team: Team): string;
+/** The numbers behind the chart. */
+export declare function totalsOf(model: Model): RoadTotals;
+/** The chart's accessible name. */
+export declare function nameOf(model: Model): string;
+/** What the chart shows, in a sentence or two. */
+export declare function summaryOf(model: Model): string;
+/** One HTML table with a row for every match: the group stage, the knockout rounds in order, and the final. */
+export declare function tableOf(model: Model, options?: {
+    className?: string;
+}): string;