@johnmorrisdotca/taisen-brackets 0.2.1 → 0.4.0

package/dist/marks.js

@@ -24,6 +24,42 @@ export function cleanSvg(markup) {
         .replace(/(\s(?:xlink:)?href\s*=\s*)(["'])\s*javascript:[^"']*\2/gi, "$1$2#$2");
     return { viewBox: box, inner };
 }
+const EMBLEM_ID = /^[a-z][a-z0-9-]*:[a-z0-9][a-z0-9-]*(?:\/(?:metal|line|color))?$/;
+/** Whether a `trophy` value names an emblem (`"trophy:hockey-cup"`, `"medal:gold/line"`) rather than being inline SVG or an image address. */
+export function isEmblemId(value) {
+    return EMBLEM_ID.test(value.trim());
+}
+/** Whether `drawBracket` has something to draw for this `trophy` and `emblems`: an emblem id needs a renderer; SVG and addresses do not. */
+export function hasTrophy(o) {
+    const t = o.trophy?.trim();
+    if (!t)
+        return false;
+    return isEmblemId(t) ? typeof o.emblems === "function" : true;
+}
+/**
+ * The emblem a renderer makes for an id, cleaned like any inline SVG and with its `<title>` removed (the drawing says what it shows in its own
+ * words), or `null` when the renderer throws or returns something that is not an `<svg>`. The look decides the ink: `light` and `dark` are
+ * forced, `poster` is dark, and `auto` and `none` are `inherit`, which the drawing's stylesheet colours from `--tb-ink`.
+ */
+export function drawEmblem(id, size, o) {
+    if (typeof o.emblems !== "function")
+        return null;
+    const look = o.theme ?? "auto";
+    const request = { style: o.emblemStyle ?? "metal", size, theme: look === "light" ? "light" : look === "dark" || look === "poster" ? "dark" : "inherit" };
+    if (o.emblemTint)
+        request.tint = o.emblemTint;
+    let markup;
+    try {
+        markup = o.emblems(id.trim(), request);
+    }
+    catch {
+        return null;
+    }
+    if (typeof markup !== "string")
+        return null;
+    const svg = cleanSvg(markup);
+    return svg ? { viewBox: svg.viewBox, inner: svg.inner.replace(/<title\b[\s\S]*?<\/title\s*>/gi, "") } : null;
+}
 /** Readable text on a team colour: white on a dark one, near-black on a light one; `null` when the colour is not a hex one this can read. */
 function inkOn(color) {
     const hex = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(color.trim())?.[1];
@@ -42,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(".", "_")}`;
 /**
@@ -58,7 +132,26 @@ 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 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}`;
+    }
     const mark = team.mark?.trim();
     if (mark) {
         if (mark.startsWith("<")) {

package/dist/presets-entry.d.ts

@@ -1,3 +1,3 @@
-export { playoffFormat, playoffEras, LEAGUES } from "./presets.ts";
+export { playoffFormat, playoffEras, LEAGUES, LEAGUE_EMBLEMS } from "./presets.ts";
 export type { League, PlayoffFormat, PlayoffRound } from "./presets.ts";
 export { roundName, roundNamesFor } from "./rounds.ts";

package/dist/presets-entry.js

@@ -1,2 +1,2 @@
-export { playoffFormat, playoffEras, LEAGUES } from "./presets.js";
+export { playoffFormat, playoffEras, LEAGUES, LEAGUE_EMBLEMS } from "./presets.js";
 export { roundName, roundNamesFor } from "./rounds.js";

package/dist/presets.d.ts

@@ -29,9 +29,16 @@ export interface PlayoffFormat {
     /** The names of the two halves, left first, or null where the bracket is not split in two. */
     groups: readonly [string, string] | null;
     note?: string;
+    /** The league's default emblem id (`LEAGUE_EMBLEMS`), for `trophy` with an `emblems` renderer. */
+    emblem: string;
     /** The English Wikipedia articles this entry was checked against (CC BY-SA 4.0; only facts are used). */
     sources: readonly string[];
 }
+/**
+ * The emblem each league's champion gets by default: an id of `@johnmorrisdotca/dougu-sports` (generic forms, no league's own mark). Pass it as
+ * `trophy` together with an `emblems` renderer; with no renderer it draws nothing. A cup for MLS because the MLS Cup is one.
+ */
+export declare const LEAGUE_EMBLEMS: Readonly<Record<League, string>>;
 /** The leagues that have a format here. */
 export declare const LEAGUES: readonly League[];
 /**

package/dist/presets.js

@@ -4,6 +4,19 @@
  * Wikipedia articles in its `sources` (2026-10-13); where a season did something of its own (a strike, a pandemic) it has
  * its own entry. The year is the year the playoffs are played in (the NHL's and the NBA's 2024 are the 2024 playoffs, of the 2023-24 season), except for the NFL, whose year is its season's: 2024 is the season played in 2024, with playoffs in January and February 2025.
  */
+/**
+ * The emblem each league's champion gets by default: an id of `@johnmorrisdotca/dougu-sports` (generic forms, no league's own mark). Pass it as
+ * `trophy` together with an `emblems` renderer; with no renderer it draws nothing. A cup for MLS because the MLS Cup is one.
+ */
+export const LEAGUE_EMBLEMS = Object.freeze({
+    nhl: "trophy:hockey-cup",
+    nba: "trophy:basketball",
+    mlb: "trophy:baseball",
+    nfl: "trophy:football",
+    cfl: "trophy:canadian-bowl",
+    mls: "trophy:cup",
+    worldcup: "trophy:soccer-globe",
+});
 /** The address of English Wikipedia articles, by title. */
 const wiki = (...titles) => titles.map((t) => `https://en.wikipedia.org/wiki/${t.replace(/ /g, "_")}`);
 const r = (name, bestOf = 7) => ({ name, bestOf });
@@ -76,9 +89,9 @@ export function playoffFormat(league, year) {
     const { years: _years, except: _except, ...rest } = hit;
     void _years;
     void _except;
-    return { ...rest, year };
+    return { ...rest, year, emblem: LEAGUE_EMBLEMS[league] };
 }
 /** Every era of a league, oldest first. */
 export function playoffEras(league) {
-    return ERAS[league].map(({ years: _y, except: _e, ...rest }) => { void _y; void _e; return { ...rest, year: rest.from }; });
+    return ERAS[league].map(({ years: _y, except: _e, ...rest }) => { void _y; void _e; return { ...rest, year: rest.from, emblem: LEAGUE_EMBLEMS[league] }; });
 }

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;