@johnmorrisdotca/taisen-brackets 0.3.0 → 0.5.0

package/dist/locales.js

@@ -13,6 +13,12 @@ const EN = {
     tieVs: "{a} v {b}", tieScore: "{a} {sa}, {b} {sb}", scoreText: "{a}–{b}", winnerIs: "Winner: {name}", championIs: "Champion: {name}", finalLine: "{round}: {tie}",
     summary: "{n} teams, {r} rounds", summaryOne: "{n} teams, 1 round", sep: ". ", end: ".", note: " ({notes})", noteJoin: ", ",
     columnRound: "Round", columnTie: "Tie", columnNote: "Note", columnDate: "Date", title: "Knockout bracket",
+    roadTitle: "Road to the final", roadVs: "v", roadGroup: "Group stage", roadFt: "FT", roadAet: "AET", roadPens: "{a}–{b} pens",
+    roadWon: "Won", roadLost: "Lost", roadDrew: "Drew", roadQuarterFinal: "Quarter-final", roadSemiFinal: "Semi-final",
+    roadTableTeam: "Team", roadTableOpponent: "Opponent", roadTableScore: "Score", roadTableDecided: "Decided", roadTableResult: "Result",
+    roadCaption: "{a} and {b}: every match on the way to the final. Scores are written with the team in the first column first.",
+    roadName: "{a} and {b}: {title}", roadSummary: "Matches played before the final: {a} ({an}) and {b} ({bn}).",
+    roadFinal: "The final: {a} {score} {b} ({how}).", roadChampion: "{name} won the final.", roadToPlay: "The final is still to be played.",
 };
 const FR = {
     tbd: "À déterminer", bye: "exempt", walkover: "forfait", champion: "Champion", thirdPlace: "Match pour la troisième place", other: "Autres rencontres",
@@ -22,6 +28,12 @@ const FR = {
     tieVs: "{a} contre {b}", tieScore: "{a} {sa}, {b} {sb}", scoreText: "{a}–{b}", winnerIs: "Vainqueur : {name}", championIs: "Champion : {name}", finalLine: "{round} : {tie}",
     summary: "{n} équipes, {r} tours", summaryOne: "{n} équipes, 1 tour", sep: ". ", end: ".", note: " ({notes})", noteJoin: ", ",
     columnRound: "Tour", columnTie: "Rencontre", columnNote: "Note", columnDate: "Date", title: "Tableau à élimination directe",
+    roadTitle: "Parcours vers la finale", roadVs: "vs", roadGroup: "Phase de groupes", roadFt: "t.r.", roadAet: "a.p.", roadPens: "{a}–{b} t.a.b.",
+    roadWon: "Victoire", roadLost: "Défaite", roadDrew: "Nul", roadQuarterFinal: "Quart de finale", roadSemiFinal: "Demi-finale",
+    roadTableTeam: "Équipe", roadTableOpponent: "Adversaire", roadTableScore: "Score", roadTableDecided: "Décidé en", roadTableResult: "Résultat",
+    roadCaption: "{a} et {b} : tous les matchs jusqu’à la finale. Chaque score commence par celui de l’équipe de la première colonne.",
+    roadName: "{a} et {b} : {title}", roadSummary: "Matchs joués avant la finale : {a} ({an}) et {b} ({bn}).",
+    roadFinal: "La finale : {a} {score} {b} ({how}).", roadChampion: "{name} a remporté la finale.", roadToPlay: "La finale reste à jouer.",
 };
 const JA = {
     tbd: "未定", bye: "シード", walkover: "不戦勝", champion: "優勝", thirdPlace: "3位決定戦", other: "その他の対戦",
@@ -31,6 +43,12 @@ const JA = {
     tieVs: "{a} 対 {b}", tieScore: "{a} {sa}–{sb} {b}", scoreText: "{a}–{b}", winnerIs: "勝者：{name}", championIs: "優勝：{name}", finalLine: "{round}：{tie}",
     summary: "{n}チーム、{r}ラウンド", summaryOne: "{n}チーム、1ラウンド", sep: "。", end: "。", note: "（{notes}）", noteJoin: "、",
     columnRound: "ラウンド", columnTie: "対戦", columnNote: "備考", columnDate: "日付", title: "トーナメント表",
+    roadTitle: "決勝への道", roadVs: "対", roadGroup: "グループステージ", roadFt: "規定時間", roadAet: "延長", roadPens: "PK戦 {a}–{b}",
+    roadWon: "勝ち", roadLost: "負け", roadDrew: "引き分け", roadQuarterFinal: "準々決勝", roadSemiFinal: "準決勝",
+    roadTableTeam: "チーム", roadTableOpponent: "対戦相手", roadTableScore: "スコア", roadTableDecided: "決着", roadTableResult: "結果",
+    roadCaption: "{a}と{b}：決勝までの全試合。スコアは「チーム」列のチームの得点を先に書いています。",
+    roadName: "{a}と{b}：{title}", roadSummary: "{a}は決勝までに{an}試合、{b}は{bn}試合を戦いました。",
+    roadFinal: "決勝は{a} {score} {b}（{how}）でした。", roadChampion: "{name}が優勝しました。", roadToPlay: "決勝はまだ行われていません。",
 };
 const ES = {
     tbd: "Por definir", bye: "exento", walkover: "incomparecencia", champion: "Campeón", thirdPlace: "Partido por el tercer puesto", other: "Otros partidos",
@@ -40,6 +58,12 @@ const ES = {
     tieVs: "{a} vs. {b}", tieScore: "{a} {sa}, {b} {sb}", scoreText: "{a}–{b}", winnerIs: "Ganador: {name}", championIs: "Campeón: {name}", finalLine: "{round}: {tie}",
     summary: "{n} equipos, {r} rondas", summaryOne: "{n} equipos, 1 ronda", sep: ". ", end: ".", note: " ({notes})", noteJoin: ", ",
     columnRound: "Ronda", columnTie: "Partido", columnNote: "Nota", columnDate: "Fecha", title: "Cuadro de eliminatorias",
+    roadTitle: "El camino a la final", roadVs: "vs.", roadGroup: "Fase de grupos", roadFt: "T. reg.", roadAet: "Prórroga", roadPens: "{a}–{b} en los penales",
+    roadWon: "Ganó", roadLost: "Perdió", roadDrew: "Empató", roadQuarterFinal: "Cuartos de final", roadSemiFinal: "Semifinal",
+    roadTableTeam: "Equipo", roadTableOpponent: "Rival", roadTableScore: "Marcador", roadTableDecided: "Decidido en", roadTableResult: "Resultado",
+    roadCaption: "{a} y {b}: todos los partidos hasta la final. Los marcadores empiezan por el equipo de la primera columna.",
+    roadName: "{a} y {b}: {title}", roadSummary: "Partidos jugados hasta la final: {a} ({an}) y {b} ({bn}).",
+    roadFinal: "La final: {a} {score} {b} ({how}).", roadChampion: "{name} ganó la final.", roadToPlay: "La final aún no se ha jugado.",
 };
 const DE = {
     tbd: "offen", bye: "Freilos", walkover: "kampflos", champion: "Turniersieger", thirdPlace: "Spiel um Platz 3", other: "Weitere Begegnungen",
@@ -49,6 +73,12 @@ const DE = {
     tieVs: "{a} gegen {b}", tieScore: "{a} {sa}, {b} {sb}", scoreText: "{a}:{b}", winnerIs: "Sieger: {name}", championIs: "Turniersieger: {name}", finalLine: "{round}: {tie}",
     summary: "{n} Teams, {r} Runden", summaryOne: "{n} Teams, 1 Runde", sep: ". ", end: ".", note: " ({notes})", noteJoin: ", ",
     columnRound: "Runde", columnTie: "Begegnung", columnNote: "Hinweis", columnDate: "Datum", title: "Turnierbaum",
+    roadTitle: "Der Weg ins Finale", roadVs: "vs.", roadGroup: "Gruppenphase", roadFt: "reg. Zeit", roadAet: "n. V.", roadPens: "{a}:{b} i. E.",
+    roadWon: "Sieg", roadLost: "Niederlage", roadDrew: "Remis", roadQuarterFinal: "Viertelfinale", roadSemiFinal: "Halbfinale",
+    roadTableTeam: "Team", roadTableOpponent: "Gegner", roadTableScore: "Ergebnis", roadTableDecided: "Entschieden", roadTableResult: "Ausgang",
+    roadCaption: "{a} und {b}: alle Spiele auf dem Weg ins Finale. Die Ergebnisse beginnen mit dem Team der ersten Spalte.",
+    roadName: "{a} und {b}: {title}", roadSummary: "Spiele bis zum Finale: {a} ({an}) und {b} ({bn}).",
+    roadFinal: "Das Finale: {a} {score} {b} ({how}).", roadChampion: "{name} gewann das Finale.", roadToPlay: "Das Finale steht noch aus.",
 };
 /**
  * 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

@@ -1,4 +1,4 @@
-import type { DrawOptions, Team } from "./types.ts";
+import type { DrawOptions, FlagRenderer, FlagRequest, Team } from "./types.ts";
 /**
  * Takes inline SVG markup from a caller and makes it safe to put inside a drawing: the outer `<svg>`'s viewBox is kept,
  * and scripts, event handlers, `<style>`, `<foreignObject>`, comments and `javascript:` addresses are removed. Returns the
@@ -34,7 +34,24 @@ export interface MarkContext {
     }>;
     prefix: string;
     shape: "round" | "square" | "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. */
+    flags?: FlagRenderer;
+    /** The address of a team's flag by its `flag` code, for a flag that is a picture to load and not markup to inline; tried where `flags` gives none. */
+    flagHref?: (code: string) => string | null | undefined;
+    /** The theme a flag renderer is told about. */
+    theme?: FlagRequest["theme"];
+    /** The flags already asked for, by code, shape and size, so that a renderer is called once for each. */
+    flagCache?: Map<string, {
+        viewBox: string;
+        inner: string;
+    } | null>;
 }
+/** Whether an address may be a link in a drawing: http(s), a relative path or a `#` fragment. `javascript:`, `data:` and every other scheme are refused. */
+export declare function safeHref(url: string): boolean;
+/** The `<defs>` content the marks drawn with a context need: a circular clip for each radius, and each inline mark or flag once as a `<symbol>`. Written after the marks are drawn. */
+export declare function markDefs(ctx: MarkContext): string;
 /** The id of the circular clip for a radius. */
 export declare const clipId: (prefix: string, r: number) => string;
 /**

package/dist/marks.js

@@ -78,6 +78,44 @@ export function safeUrl(url) {
         return true;
     return !/^[a-z][a-z0-9+.-]*:/i.test(u) && !u.startsWith("//") ? u.length > 0 : false;
 }
+/** Whether an address may be a link in a drawing: http(s), a relative path or a `#` fragment. `javascript:`, `data:` and every other scheme are refused. */
+export function safeHref(url) {
+    const u = url.trim();
+    // eslint-disable-next-line no-control-regex
+    if (u.length === 0 || /[\u0000-\u001f\u007f]/.test(u))
+        return false;
+    if (/^https?:\/\//i.test(u))
+        return true;
+    return !/^[a-z][a-z0-9+.-]*:/i.test(u) && !u.startsWith("//");
+}
+/** The flag a renderer makes for a code, cleaned like any inline SVG, or `null` when there is no renderer, it has no flag for the code, it throws, or what it returns is not an `<svg>`. */
+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 key = `${code.trim()}|${shape}|${Math.round(size)}`;
+    const cache = ctx.flagCache;
+    if (cache?.has(key))
+        return cache.get(key) ?? null;
+    let made = null;
+    try {
+        const markup = ctx.flags(code.trim(), { shape, size: Math.round(size), theme: ctx.theme ?? "inherit" });
+        if (typeof markup === "string")
+            made = cleanSvg(markup);
+    }
+    catch {
+        made = null;
+    }
+    cache?.set(key, made);
+    return made;
+}
+/** The `<defs>` content the marks drawn with a context need: a circular clip for each radius, and each inline mark or flag once as a `<symbol>`. Written after the marks are drawn. */
+export function markDefs(ctx) {
+    return [
+        ...[...ctx.radii].sort((a, b) => a - b).map((r) => `<clipPath id="${clipId(ctx.prefix, r)}"><circle r="${num(r)}"/></clipPath>`),
+        ...[...ctx.symbols.values()].map((s) => `<symbol id="${s.id}" viewBox="${esc(s.viewBox)}" preserveAspectRatio="xMidYMid slice">${s.inner}</symbol>`),
+    ].join("");
+}
 /** The id of the circular clip for a radius. */
 export const clipId = (prefix, r) => `${prefix}-c${String(num(r)).replace(".", "_")}`;
 /**
@@ -94,8 +132,39 @@ export function drawMark(team, cx, cy, size, ctx, abbrText) {
         ctx.radii.add(r);
     const wrapOpen = clip ? `<g class="tb-mark" transform="translate(${num(cx)} ${num(cy)})" clip-path="url(#${clipId(ctx.prefix, r)})">` : `<g class="tb-mark">`;
     const ox = clip ? -r : x, oy = clip ? -r : y;
-    const ring = clip ? `<circle class="tb-ring" cx="${num(cx)}" cy="${num(cy)}" r="${num(r)}"/>` : `<rect class="tb-ring" x="${num(x)}" y="${num(y)}" width="${num(size)}" height="${num(size)}" rx="2"/>`;
-    const mark = team.mark?.trim();
+    const road = ctx.look === "road";
+    const rw = Math.max(r * 0.09, 0.5);
+    const hair = num(Math.max(rw * 0.3, 0.3));
+    const ring = road
+        ? clip
+            ? `<circle class="tb-ring tb-ring-r" cx="${num(cx)}" cy="${num(cy)}" r="${num(r - rw / 2)}" stroke-width="${num(rw)}"/><circle class="tb-edge" cx="${num(cx)}" cy="${num(cy)}" r="${num(r)}" stroke-width="${hair}"/>`
+            : `<rect class="tb-ring tb-ring-r" x="${num(x + rw / 2)}" y="${num(y + rw / 2)}" width="${num(size - rw)}" height="${num(size - rw)}" rx="2" stroke-width="${num(rw)}"/><rect class="tb-edge" x="${num(x)}" y="${num(y)}" width="${num(size)}" height="${num(size)}" rx="2" stroke-width="${hair}"/>`
+        : clip
+            ? `<circle class="tb-ring" cx="${num(cx)}" cy="${num(cy)}" r="${num(r)}"/>`
+            : `<rect class="tb-ring" x="${num(x)}" y="${num(y)}" width="${num(size)}" height="${num(size)}" rx="2"/>`;
+    const flag = flagOf(team.flag, size, ctx);
+    if (flag) {
+        const key = `flag:${flag.viewBox}:${flag.inner}`;
+        let symbol = ctx.symbols.get(key);
+        if (!symbol) {
+            symbol = { id: `${ctx.prefix}-m${ctx.symbols.size + 1}`, ...flag };
+            ctx.symbols.set(key, symbol);
+        }
+        return `${wrapOpen}<use href="#${symbol.id}" x="${num(ox)}" y="${num(oy)}" width="${num(size)}" height="${num(size)}"/></g>${ring}`;
+    }
+    // A flag that is an address (`flagHref`) is the mark in place of the team's own, and, like every picture address, is written once.
+    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);
@@ -109,10 +178,27 @@ export function drawMark(team, cx, cy, size, ctx, abbrText) {
             }
         }
         else if (safeUrl(mark)) {
-            return `${wrapOpen}<image href="${esc(mark)}" x="${num(ox)}" y="${num(oy)}" width="${num(size)}" height="${num(size)}" preserveAspectRatio="xMidYMid slice"/></g>${ring}`;
+            // Each distinct address is written once, as a symbol that holds the image, and used wherever the team appears: a long data address or a URL repeated per use would be written again and again.
+            const key = `url:${mark}`;
+            let symbol = ctx.symbols.get(key);
+            if (!symbol) {
+                symbol = { id: `${ctx.prefix}-m${ctx.symbols.size + 1}`, viewBox: "0 0 100 100", inner: `<image href="${esc(mark)}" x="0" y="0" width="100" height="100" preserveAspectRatio="xMidYMid slice"/>` };
+                ctx.symbols.set(key, symbol);
+            }
+            return `${wrapOpen}<use href="#${symbol.id}" x="${num(ox)}" y="${num(oy)}" width="${num(size)}" height="${num(size)}"/></g>${ring}`;
         }
     }
     const text = (abbrText ?? team.abbr ?? abbreviate(team.name)).slice(0, 3);
+    if (road) {
+        // No flag or logo: the road look draws a tile with the abbreviation on it, so that a team without a picture looks meant. A team colour fills the tile (the letters are white or
+        // near-black, whichever reads on it); with none the tile is neutral.
+        const rx = size * 0.24;
+        const tile = `<rect class="tb-plain tb-tile" x="${num(x)}" y="${num(y)}" width="${num(size)}" height="${num(size)}" rx="${num(rx)}"${team.color ? ` style="fill:${esc(team.color)}"` : ""}/>`;
+        const tileInk = team.color ? inkOn(team.color) : null;
+        const tileRing = `<rect class="tb-ring tb-ring-r" x="${num(x + rw / 2)}" y="${num(y + rw / 2)}" width="${num(size - rw)}" height="${num(size - rw)}" rx="${num(Math.max(rx - rw / 2, 1))}" stroke-width="${num(rw)}"/><rect class="tb-edge" x="${num(x)}" y="${num(y)}" width="${num(size)}" height="${num(size)}" rx="${num(rx)}" stroke-width="${hair}"/>`;
+        const letters = [...text].length;
+        return `<g class="tb-mark">${tile}<text class="tb-initials" x="${num(cx)}" y="${num(cy + size * 0.13)}" font-size="${num(size * (letters <= 2 ? 0.4 : 0.31))}" font-weight="800" letter-spacing=".02em" text-anchor="middle"${tileInk ? ` style="fill:${tileInk}"` : ""}>${esc(text)}</text></g>${tileRing}`;
+    }
     const fill = team.color ? ` style="fill:${esc(team.color)}"` : "";
     const shape = clip ? `<circle class="tb-plain" cx="${num(cx)}" cy="${num(cy)}" r="${num(r)}"${fill}/>` : `<rect class="tb-plain" x="${num(x)}" y="${num(y)}" width="${num(size)}" height="${num(size)}" rx="2"${fill}/>`;
     const ink = team.color ? inkOn(team.color) : null;

package/dist/matchup.js

@@ -102,6 +102,7 @@ export function resolveMatchup(m, index, teams) {
         third: !!m.third,
         walkover: !!m.walkover,
         note: m.note ?? null,
+        ...(m.seeds ? { seeds: m.seeds } : {}),
     };
 }
 /** The short name of a team for a small box. */

package/dist/render.d.ts

@@ -1,6 +1,6 @@
 import type { BracketInput, BracketLayout, DrawOptions, Matchup, Size, SizeName } from "./types.ts";
 import { type Voice } from "./locales.ts";
-/** The sizes by name. A phone's drawing is 390 wide and as tall as the bracket needs. */
+/** The sizes by name. A phone's drawing is 390 wide and as tall as the bracket needs; a card is 1080 by 1350, a tall post. */
 export declare const SIZES: Readonly<Record<SizeName, Size>>;
 /** The layout with each team's name in the language: what the drawing, the table and the description are written from. */
 export declare function localizedLayout(layout: BracketLayout, v: Voice): BracketLayout;