@johnmorrisdotca/taisen-brackets 0.2.1 → 0.4.0

package/dist/render.js

@@ -1,18 +1,37 @@
 import { layoutBracket } from "./layout.js";
 import { abbrOf, describeTie, noteParts } from "./matchup.js";
-import { cleanSvg, clipId, drawMark, safeUrl } from "./marks.js";
+import { cleanSvg, drawEmblem, drawMark, hasTrophy as hasTrophyOf, isEmblemId, markDefs, safeHref, safeUrl } from "./marks.js";
 import { roundLabel } from "./rounds.js";
 import { styleFor } from "./theme.js";
 import { esc, fit, hash, num, textWidth } from "./text.js";
 import { fill, voiceOf } from "./locales.js";
-/** 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 const SIZES = Object.freeze({
     wide: { width: 1200, height: 675 },
     square: { width: 1080, height: 1080 },
+    card: { width: 1080, height: 1350 },
     phone: { width: 390, height: null },
 });
 const clamp = (v, lo, hi) => Math.min(hi, Math.max(lo, v));
 const isLayout = (x) => typeof x === "object" && x !== null && "ties" in x && "sides" in x && "rounds" in x;
+/** The sizes of one row of a box: the name, the mark and the score. The road look has larger marks and a big, heavy score. */
+function metrics(rowH, road) {
+    if (road)
+        return { font: clamp(rowH * 0.46, 9, 20), md: clamp(rowH * 0.8, 12, 56), score: clamp(rowH * 0.68, 11, 38) };
+    const font = clamp(rowH * 0.5, 8.5, 16);
+    return { font, md: clamp(rowH * 0.7, 10, 28), score: font + 1 };
+}
+/** The ties a team played on its way to the final: the tree's ties it is a side of, never the third-place match or a round-robin game. */
+function pathOf(layout, team) {
+    const out = new Set();
+    if (team === undefined || team === null)
+        return out;
+    const id = String(team);
+    for (const t of layout.ties)
+        if (!t.third && t.round > 0 && t.sides.some((s) => s !== null && String(s.id) === id))
+            out.add(t.index);
+    return out;
+}
 /** The layout with each team's name in the language: what the drawing, the table and the description are written from. */
 export function localizedLayout(layout, v) {
     const named = new Map(layout.teams.map((t) => [t.id, { ...t, name: v.team(t) }]));
@@ -42,21 +61,21 @@ export function drawBracket(input, options = {}) {
     const theme = options.theme ?? "auto";
     const sizeName = typeof options.size === "string" || options.size === undefined ? options.size ?? "wide" : null;
     const size = sizeName ? SIZES[sizeName] : { width: options.size.width, height: options.size.height ?? null };
-    const orientation = options.orientation && options.orientation !== "auto" ? options.orientation : sizeName === "phone" || (size.height !== null && size.width < size.height * 0.8) ? "vertical" : "horizontal";
-    const prefix = options.id ?? `tb-${hash(JSON.stringify([v.locale.code, layout.teams.map((t) => t.name), layout.ties.map((t) => [t.id, t.sides.map((s) => s?.id ?? null), t.winner, t.result.score, t.round]), options.size, orientation, options.detail, theme, options.title, options.subtitle, options.seeds, options.scores, options.champion, options.markShape, options.roundLabels, options.thirdPlace, options.trophy ? 1 : 0]))}`;
-    const ctx = { radii: new Set(), symbols: new Map(), prefix, shape: options.markShape ?? "round" };
-    const plan = planBracket(layout, options, v, size, orientation === "vertical", ctx);
-    const drawn = plan.boxes.map((b) => drawBox(b, plan, options, v, ctx)); // draws the marks, so before the defs are written
+    const orientation = options.orientation && options.orientation !== "auto" ? options.orientation : sizeName === "phone" || sizeName === "card" || (size.height !== null && size.width < size.height * 0.8) ? "vertical" : "horizontal";
+    const road = options.look === "road";
+    const prefix = options.id ?? `tb-${hash(JSON.stringify([v.locale.code, layout.teams.map((t) => t.name), layout.ties.map((t) => [t.id, t.sides.map((s) => s?.id ?? null), t.winner, t.result.score, t.round]), options.size, orientation, options.detail, theme, options.title, options.subtitle, options.seeds, options.scores, options.champion, options.markShape, options.roundLabels, options.thirdPlace, options.trophy ? 1 : 0, road ? 1 : 0, options.highlightPath ?? null, options.flags ? 1 : 0]))}`;
+    const ctx = { radii: new Set(), symbols: new Map(), prefix, shape: options.markShape ?? "round", look: road ? "road" : "classic", flags: options.flags, theme: theme === "light" ? "light" : theme === "dark" || theme === "poster" ? "dark" : "inherit", flagCache: new Map() };
+    const path = pathOf(layout, options.highlightPath);
+    const plan = planBracket(layout, options, v, size, orientation === "vertical", ctx, road, path);
+    const linked = { count: 0 };
+    const drawn = plan.boxes.map((b) => drawBox(b, plan, options, v, ctx, linked)); // draws the marks, so before the defs are written
     const title = options.title ?? v.words.title;
     const desc = describeBracket(layout, options);
-    const defs = [
-        ...[...ctx.radii].sort((a, b) => a - b).map((r) => `<clipPath id="${clipId(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("");
-    const style = theme === "none" ? "" : `<style>${styleFor(`.${prefix}`, theme)}</style>`;
+    const defs = markDefs(ctx);
+    const style = theme === "none" ? "" : `<style>${styleFor(`.${prefix}`, theme, { road, links: linked.count > 0, follow: path.size > 0 })}</style>`;
     const bg = options.background === false ? "" : `<rect class="tb-bg" width="${num(plan.width)}" height="${num(plan.height)}"${theme === "none" ? ' fill="none"' : ""}/>`;
     return [
-        `<svg xmlns="http://www.w3.org/2000/svg" lang="${esc(v.locale.code)}" class="taisen ${prefix}${options.className ? ` ${esc(options.className)}` : ""}" viewBox="0 0 ${num(plan.width)} ${num(plan.height)}" width="${num(plan.width)}" height="${num(plan.height)}" style="max-width:100%;height:auto" role="img" aria-labelledby="${prefix}-t ${prefix}-d">`,
+        `<svg xmlns="http://www.w3.org/2000/svg" lang="${esc(v.locale.code)}" class="taisen ${prefix}${road ? " tb-look-road" : ""}${path.size > 0 ? " tb-follow" : ""}${options.className ? ` ${esc(options.className)}` : ""}" viewBox="0 0 ${num(plan.width)} ${num(plan.height)}" width="${num(plan.width)}" height="${num(plan.height)}" style="max-width:100%;height:auto" role="img" aria-labelledby="${prefix}-t ${prefix}-d">`,
         `<title id="${prefix}-t">${esc(title)}</title><desc id="${prefix}-d">${esc(desc)}</desc>`,
         style,
         defs ? `<defs>${defs}</defs>` : "",
@@ -69,7 +88,7 @@ export function drawBracket(input, options = {}) {
     ].filter(Boolean).join("\n");
 }
 // ---------------------------------------------------------------------------------------------- the plan
-function planBracket(layout, o, v, size, vertical, ctx) {
+function planBracket(layout, o, v, size, vertical, ctx, road, path) {
     const pad = vertical ? 14 : 22;
     const showLabels = o.roundLabels ?? true;
     const poster = o.theme === "poster";
@@ -88,7 +107,7 @@ function planBracket(layout, o, v, size, vertical, ctx) {
     const halves = layout.shape === "halves";
     const nc = layout.columns.length;
     const rows = layout.rows;
-    const hasTrophy = !!o.trophy && champ;
+    const hasTrophy = hasTrophyOf(o) && champ;
     // ----- slots along the rounds' axis (t): the columns of the left half, the centre, the columns of the right half.
     // Horizontal: t is x. Vertical: t is y, and the left half is the top.
     const slotCount = halves ? 2 * nc + 1 : nc + (champ || layout.finalIndex !== null ? 1 : 0);
@@ -118,7 +137,7 @@ function planBracket(layout, o, v, size, vertical, ctx) {
         extraH0 = othersHeight(others.length, W0, pad, ow, OTHER_H) + thirdBlock;
         const bodyH = size.height === null ? rows * 60 : size.height - top - pad - extraH0;
         rowStep = bodyH / rows;
-        S = clamp(rowStep - 9, 24, 104);
+        S = clamp(rowStep - (road ? 7 : 9), 24, road ? 132 : 104);
         rowStep = Math.max(rowStep, S + 6);
         rowStep = Math.min(rowStep, S + 40);
         boxW = D;
@@ -127,38 +146,91 @@ function planBracket(layout, o, v, size, vertical, ctx) {
     else {
         const availW = W0 - 2 * pad;
         const slot = availW / Math.max(rows, 1);
-        S = clamp(slot - 5, 30, 150);
+        S = clamp(slot - 5, 30, road ? 340 : 150);
         rowStep = Math.min(slot, S + 5);
         boxW = S;
     }
     // Full boxes (names) only where the longest name fits beside its mark and a score.
     const longest = Math.max(0, ...layout.teams.map((t) => textWidth(t.name, 13)));
+    const longestAbbr = Math.max(0, ...layout.teams.map((t) => textWidth(abbrOf(t, v), 13)));
+    // The road look's marks and scores are large: they are scaled down together until a row fits its box, before a name is dropped for its abbreviation.
+    const anyNotes = layout.ties.some((t) => noteParts(t, v).length > 0);
+    // The road look's boxes of marks alone carry each score under its mark, unless marks alone were asked for.
+    const markScores = road && o.detail !== "mark" && (o.scores ?? true) && layout.ties.some((t) => t.result.score !== null);
+    const fitOf = (w, h, named) => {
+        const rowH = (h - (anyNotes && h >= 62 ? 15 : 0)) / 2;
+        const { font, md, score } = metrics(rowH, road);
+        const anyBye = layout.sides.some((sd) => sd.boxes.some((b) => b.byes.length > 0));
+        const anyPens = layout.ties.some((t) => t.result.pens !== null);
+        const extra = (anyBye ? textWidth(v.words.bye, Math.max(font - 2, 8)) + 8 : 0) + (anyPens ? textWidth("(00)", Math.max(score * 0.55, 8)) + 3 : 0);
+        const fixed = clamp(rowH * 0.16, 5, 12) + clamp(rowH * 0.18, 5, 10) + 8 + 10;
+        const varying = md + (named === "full" ? longest : longestAbbr) * (font / 13) + textWidth("00", score) + extra;
+        return Math.min(1, (w - fixed) / varying);
+    };
+    let fitNow = 1;
     const pick = (w, h) => {
         const rowH = h / 2;
-        const font = clamp(rowH * 0.5, 8.5, 16);
-        const md = clamp(rowH * 0.7, 10, 28);
+        const { font, md, score } = metrics(rowH, false);
         // Room for the score, and for the words some boxes carry beside it: a bye, a shoot-out's score.
         const anyBye = layout.sides.some((sd) => sd.boxes.some((b) => b.byes.length > 0));
         const anyPens = layout.ties.some((t) => t.result.pens !== null);
         const extra = (anyBye ? textWidth(v.words.bye, Math.max(font - 2, 8)) + 8 : 0) + (anyPens ? textWidth("(00)", Math.max(font - 2, 8)) + 3 : 0);
-        const needed = 6 + md + 5 + longest * (font / 13) + 8 + textWidth("00", font + 1) + extra + 14;
+        const needed = 6 + md + 5 + longest * (font / 13) + 8 + textWidth("00", score) + extra + 14;
         const named = o.detail && o.detail !== "auto" ? o.detail : w >= needed && h >= 36 ? "full" : w >= 76 && h >= 28 ? "compact" : "mark";
         return named === "mark" && o.markShape === "none" ? "compact" : named;
     };
-    const detail = pick(boxW, vertical ? 48 : boxH);
-    if (vertical)
-        boxH = detail === "full" ? 50 : detail === "compact" ? 42 : boxW >= 76 ? 38 : 2 * Math.min(boxW - 8, 24) + 8;
+    // The road look: a box is as high as its width lets the large marks and scores be. A name is kept (full) only where that leaves rows of 28 or more;
+    // else the abbreviation (compact) where rows of 18 or more fit; else only the marks.
+    const roadPick = (w, hMax) => {
+        const search = (named, hMin) => {
+            let h = hMax;
+            while (h > hMin && fitOf(w, h, named) < 0.94)
+                h -= 2;
+            h = Math.max(h, Math.min(hMin, hMax));
+            return { detail: named, h, ok: fitOf(w, h, named) >= 0.94 };
+        };
+        const forced = o.detail && o.detail !== "auto" ? o.detail : null;
+        let chosen = null;
+        if (forced === "full" || forced === "compact")
+            chosen = search(forced, forced === "full" ? 56 : 36);
+        else if (forced === null) {
+            const full = search("full", 56);
+            const compact = search("compact", 36);
+            chosen = full.ok ? full : compact.ok ? compact : o.markShape === "none" ? compact : null;
+        }
+        const m = Math.min((w - 12) / 2 - 2, 56);
+        chosen ??= { detail: o.markShape === "none" ? "compact" : "mark", h: Math.min(hMax, markScores ? m + clamp(m * 0.5, 10, 24) * 1.3 + 14 : 2 * Math.min(w - 8, 60) + 8) };
+        if (chosen.detail !== "mark")
+            fitNow = Math.min(1, fitOf(w, chosen.h, chosen.detail));
+        return chosen;
+    };
+    let detail;
+    if (road) {
+        const picked = roadPick(boxW, vertical ? clamp(boxW * 0.42, 48, 124) : boxH);
+        detail = picked.detail;
+        if (vertical)
+            boxH = picked.h;
+        else {
+            S = picked.h;
+            boxH = S;
+        }
+    }
+    else {
+        detail = pick(boxW, vertical ? 48 : boxH);
+        if (vertical)
+            boxH = detail === "full" ? 50 : detail === "compact" ? 42 : boxW >= 76 ? 38 : 2 * Math.min(boxW - 8, 24) + 8;
+    }
     if (vertical) {
         D = boxH;
         gapT = showLabels ? 26 : 16;
     }
     // The champion's block: a trophy, a large mark, the name and the word; and the third-place match below the final.
-    const champMark = vertical ? 54 : clamp(centreT * 0.34, 44, 84);
+    const champMark = vertical ? (road ? clamp(size.width * 0.14, 54, 96) : 54) : clamp(centreT * (road ? 0.4 : 0.34), 44, road ? 96 : 84);
     const trophyH = hasTrophy ? (vertical ? 56 : clamp(centreT * 0.45, 48, 84)) : 0;
     const nameFont = clamp(champMark * 0.3, 13, 20);
     const champH = champ ? trophyH + (hasTrophy ? 6 : 0) + champMark + 8 + nameFont + 6 + 11 + 2 : 0;
     const finalW = halves ? (vertical ? Math.min(size.width - 2 * pad, Math.max(boxW, 160)) : Math.min(centreT - 12, Math.max(D * 1.1, 120))) : D;
-    const finalH = vertical ? (detail === "mark" ? Math.max(boxH, 52) : boxH) : boxH;
+    let finalH = vertical ? (detail === "mark" ? Math.max(boxH, 52) : boxH) : boxH;
     const thirdH = withThird && !bottomThird ? 18 + boxH + 14 : 0;
     // ----- the slot positions along t
     if (!vertical) {
@@ -201,14 +273,14 @@ function planBracket(layout, o, v, size, vertical, ctx) {
             rects.set(layout.final.i, rect);
             boxes.push({ rect, tie: layout.ties[layout.final.i], order: layout.final.order, bye: null, byes: [], final: true, champion: champ });
             if (showLabels)
-                texts.push(label(v, roundLabel(layout, layout.rounds, o.roundNames, v), midX, rect.y - 7, "middle"));
+                texts.push(label(v, road, roundLabel(layout, layout.rounds, o.roundNames, v), midX, rect.y - 7, "middle"));
             if (champ)
                 extras.push(...championBlock(layout.champion, midX, rect.y - 22 - champH, champMark, trophyH, nameFont, o, v, ctx, poster));
             if (withThird) {
                 const t3 = layout.ties[layout.third];
                 const r3 = { x: midX - finalW / 2, y: rect.y + rect.h + 14 + 18, w: finalW, h: boxH };
                 rects.set(layout.third, r3);
-                texts.push(label(v, v.words.thirdPlace, midX, r3.y - 6, "middle"));
+                texts.push(label(v, road, v.words.thirdPlace, midX, r3.y - 6, "middle"));
                 boxes.push({ rect: r3, tie: t3, order: [0, 1], bye: null, byes: [], final: false, champion: false });
             }
         }
@@ -229,7 +301,7 @@ function planBracket(layout, o, v, size, vertical, ctx) {
                 const ks = halves ? [slotOfColumn("l", ci), slotOfColumn("r", ci)] : [ci];
                 const used = layout.sides.length > 1 || !halves ? (halves ? [0, 1] : [0]) : [0];
                 ks.forEach((k, n) => { if (used.includes(n) && (!halves || n < layout.sides.length))
-                    texts.push(label(v, name, starts[k] + D / 2, top - 9, "middle", D + gapT * 0.8)); });
+                    texts.push(label(v, road, name, starts[k] + D / 2, top - 9, "middle", D + gapT * 0.8)); });
             }
         }
         if (hasGroups) {
@@ -253,26 +325,48 @@ function planBracket(layout, o, v, size, vertical, ctx) {
             const x0 = goingRight ? a.x + a.w : a.x, x1 = goingRight ? b.x : b.x + b.w;
             const y0 = a.y + a.h / 2, y1 = b.y + b.h / 2;
             const xm = (x0 + x1) / 2;
-            links.push(`<path class="tb-line" d="M${num(x0)} ${num(y0)}H${num(xm)}V${num(y1)}H${num(x1)}"${lineAttrs(o)}/>`);
+            links.push(`<path class="${lineClass(path, t.index, p)}" d="M${num(x0)} ${num(y0)}H${num(xm)}V${num(y1)}H${num(x1)}"${lineAttrs(o)}/>`);
         }
         if (bottomThird)
-            thirdAtFoot(layout, height - pad - extraH0 + 6, width / 2, ow, OTHER_H, v, boxes, texts);
-        othersBlock(layout, others, height - pad - extraH0 + thirdBlock + 6, width, pad, ow, OTHER_H, v, boxes, texts);
+            thirdAtFoot(layout, height - pad - extraH0 + 6, width / 2, ow, OTHER_H, v, road, boxes, texts);
+        othersBlock(layout, others, height - pad - extraH0 + thirdBlock + 6, width, pad, ow, OTHER_H, v, road, boxes, texts);
         texts.push(...headings(v, o, width, pad, poster));
-        return { width, height, boxes, links, texts, extras, detail, vertical };
+        return { width, height, boxes, links: orderLinks(links), texts, extras, detail, vertical, road, path, fit: fitNow, notes: anyNotes, markScores };
     }
     // ----- vertical: the rounds are rows. The left half is the top; the final is a band in the middle.
-    const bandT = D + gapT;
     const groupBand = hasGroups ? 26 : 0;
     // On a tall page the champion sits at the top, as the page's first thing; the lines into the final must not run through it.
     const champTop = halves && champ ? champH + 14 : 0;
-    const centreBand = (showLabels ? 32 : 0) + 6 + finalH + 14;
     const topT = pad + titleH + champTop + groupBand + (showLabels ? 14 : 0);
     const bandsPerSide = nc;
-    const totalT = halves ? topT + bandsPerSide * bandT + centreBand + bandsPerSide * bandT + groupBand + pad : topT + (nc + (champ ? 1 : 0)) * bandT + (champ ? champH : 0) + pad;
+    const bandCount = halves ? 2 * bandsPerSide : nc + (champ ? 1 : 0);
     others = othersOf(layout);
     ow = Math.min(W0 - 2 * pad, 150);
-    const extraV = othersHeight(others.length, W0, pad, ow, OTHER_H) + thirdBlock;
+    const othersV = othersHeight(others.length, W0, pad, ow, OTHER_H);
+    // The height the page needs for boxes `h` high with `gap` between the rounds, and what it keeps for the final's band and the third-place match.
+    const needOf = (h, gap) => {
+        const finalHere = detail === "mark" ? Math.max(h, 52) : h;
+        const centre = (showLabels ? 32 : 0) + 6 + finalHere + 14;
+        const thirdV = bottomThird ? 18 + (road ? h : 52) + 16 : 0;
+        const band = h + gap;
+        return (halves ? topT + bandsPerSide * band + centre + bandsPerSide * band + groupBand + pad : topT + (nc + (champ ? 1 : 0)) * band + (champ ? champH : 0) + pad) + othersV + thirdV;
+    };
+    // The road look fits a tall page: the boxes are made lower until the rounds fit, or, with room to spare, the room left over is shared between the rounds.
+    if (road && size.height !== null) {
+        while (boxH > 40 && needOf(boxH, gapT) > size.height)
+            boxH -= 2;
+        const slack = size.height - needOf(boxH, gapT);
+        if (slack > 0 && bandCount > 0)
+            gapT += Math.min(slack / bandCount, boxH * 0.5);
+        D = boxH;
+        finalH = detail === "mark" ? Math.max(boxH, 52) : boxH;
+    }
+    const centreBand = (showLabels ? 32 : 0) + 6 + finalH + 14;
+    const thirdH2 = road ? boxH : 52;
+    const thirdBlockV = bottomThird ? 18 + thirdH2 + 16 : 0;
+    const bandT = D + gapT;
+    const totalT = needOf(boxH, gapT) - othersV - thirdBlockV;
+    const extraV = othersV + thirdBlockV;
     const height = Math.max(size.height ?? 0, totalT + extraV);
     const treeW = rows * rowStep;
     const x0 = pad + (W0 - 2 * pad - treeW) / 2;
@@ -300,7 +394,7 @@ function planBracket(layout, o, v, size, vertical, ctx) {
         if (champ)
             extras.push(...championBlock(layout.champion, midX, pad + titleH + 4, champMark, trophyH, nameFont, o, v, ctx, poster));
         if (showLabels) {
-            texts.push(label(v, roundLabel(layout, layout.rounds, o.roundNames, v), midX, y + 12, "middle"));
+            texts.push(label(v, road, roundLabel(layout, layout.rounds, o.roundNames, v), midX, y + 12, "middle"));
             y += 16;
         }
         const rect = { x: midX - finalW / 2, y: y + 6, w: finalW, h: finalH };
@@ -316,7 +410,7 @@ function planBracket(layout, o, v, size, vertical, ctx) {
             const name = roundLabel(layout, c, o.roundNames, v);
             const sides = halves ? (layout.sides.length > 1 ? ["l", "r"] : ["l"]) : ["l"];
             for (const sd of sides)
-                texts.push(`<text class="tb-round tb-halo" x="${num(pad)}" y="${num(bandStart(sd, ci) - 8)}" font-size="11" font-weight="600" letter-spacing=".08em">${esc(v.upper(name))}</text>`);
+                texts.push(road ? label(v, road, name, pad, bandStart(sd, ci) - 8, "start") : `<text class="tb-round tb-halo" x="${num(pad)}" y="${num(bandStart(sd, ci) - 8)}" font-size="11" font-weight="600" letter-spacing=".08em">${esc(v.upper(name))}</text>`);
         });
     }
     if (hasGroups) {
@@ -338,21 +432,39 @@ function planBracket(layout, o, v, size, vertical, ctx) {
         const y0 = down ? a.y + a.h : a.y, y1 = down ? b.y : b.y + b.h;
         const x0c = a.x + a.w / 2, x1c = b.x + b.w / 2;
         const ym = down ? y0 + gapT * 0.4 : y0 - gapT * 0.4;
-        links.push(`<path class="tb-line" d="M${num(x0c)} ${num(y0)}V${num(ym)}H${num(x1c)}V${num(y1)}"${lineAttrs(o)}/>`);
+        links.push(`<path class="${lineClass(path, t.index, p)}" d="M${num(x0c)} ${num(y0)}V${num(ym)}H${num(x1c)}V${num(y1)}"${lineAttrs(o)}/>`);
     }
     if (bottomThird)
-        thirdAtFoot(layout, totalT - pad + 6, W0 / 2, Math.min(W0 - 2 * pad, 200), 52, v, boxes, texts);
-    othersBlock(layout, others, totalT - pad + thirdBlock + 6, W0, pad, ow, OTHER_H, v, boxes, texts);
+        thirdAtFoot(layout, totalT - pad + 6, W0 / 2, Math.min(W0 - 2 * pad, road ? Math.max(boxW, 200) : 200), thirdH2, v, road, boxes, texts);
+    othersBlock(layout, others, totalT - pad + thirdBlockV + 6, W0, pad, ow, OTHER_H, v, road, boxes, texts);
     texts.push(...headings(v, o, W0, pad, poster));
-    return { width: W0, height, boxes, links, texts, extras, detail, vertical };
+    return { width: W0, height, boxes, links: orderLinks(links), texts, extras, detail, vertical, road, path, fit: fitNow, notes: anyNotes, markScores };
+}
+/** A line's class: `tb-path` when both ties it joins are on the highlighted team's path. */
+function lineClass(path, from, to) {
+    return path.has(from) && path.has(to) ? "tb-line tb-path" : "tb-line";
+}
+/** The lines of the highlighted path are drawn last, over the others. */
+function orderLinks(links) {
+    return [...links.filter((l) => !l.includes("tb-path")), ...links.filter((l) => l.includes("tb-path"))];
 }
 const OTHER_H = 50;
 const centreMinLtr = (d) => d * 1.1;
 function lineAttrs(o) {
     return o.theme === "none" ? ' fill="none" stroke="currentColor" stroke-opacity=".5"' : "";
 }
-function label(v, text, x, y, anchor, maxWidth = 1e9) {
-    return `<text class="tb-round" x="${num(x)}" y="${num(y)}" font-size="11" font-weight="600" letter-spacing=".08em" text-anchor="${anchor}">${esc(fit(v.upper(text), 11 * 1.18, maxWidth))}</text>`;
+function label(v, road, text, x, y, anchor, maxWidth = 1e9) {
+    if (!road)
+        return `<text class="tb-round" x="${num(x)}" y="${num(y)}" font-size="11" font-weight="600" letter-spacing=".08em" text-anchor="${anchor}">${esc(fit(v.upper(text), 11 * 1.18, maxWidth))}</text>`;
+    // The road look names a round on a pill, set a little smaller (to 9) before the name is cut.
+    const upper = v.upper(text);
+    let s = 11;
+    while (s > 9 && textWidth(upper, s * 1.18) > maxWidth - 18)
+        s -= 0.5;
+    const shown = fit(upper, s * 1.18, maxWidth - 18);
+    const w = textWidth(shown, s * 1.18) + 18;
+    const x0 = anchor === "middle" ? x - w / 2 : x;
+    return `<rect class="tb-panel" x="${num(x0)}" y="${num(y - 14.5)}" width="${num(w)}" height="20" rx="10"/><text class="tb-lab" x="${num(x0 + w / 2)}" y="${num(y)}" font-size="${num(s)}" font-weight="700" letter-spacing=".08em" text-anchor="middle">${esc(shown)}</text>`;
 }
 function headings(v, o, width, pad, poster) {
     const out = [];
@@ -372,10 +484,13 @@ function championBlock(team, cx, top, mark, trophyH, nameFont, o, v, ctx, poster
     let y = top;
     if (o.trophy && trophyH) {
         const t = o.trophy.trim();
-        const svg = t.startsWith("<") ? cleanSvg(t) : null;
-        if (svg)
+        const emblem = isEmblemId(t) ? drawEmblem(t, Number(num(trophyH)), o) : null;
+        const svg = emblem ? null : t.startsWith("<") ? cleanSvg(t) : null;
+        if (emblem)
+            out.push(`<svg class="tb-emblem" x="${num(cx - trophyH / 2)}" y="${num(y)}" width="${num(trophyH)}" height="${num(trophyH)}" viewBox="${esc(emblem.viewBox)}" preserveAspectRatio="xMidYMid meet" aria-hidden="true">${emblem.inner}</svg>`);
+        else if (svg)
             out.push(`<svg class="tb-gold" x="${num(cx - trophyH / 2)}" y="${num(y)}" width="${num(trophyH)}" height="${num(trophyH)}" viewBox="${esc(svg.viewBox)}" preserveAspectRatio="xMidYMid meet">${svg.inner}</svg>`);
-        else if (safeUrl(t))
+        else if (!isEmblemId(t) && safeUrl(t))
             out.push(`<image href="${esc(t)}" x="${num(cx - trophyH / 2)}" y="${num(y)}" width="${num(trophyH)}" height="${num(trophyH)}" preserveAspectRatio="xMidYMid meet"/>`);
         y += trophyH + 6;
     }
@@ -398,75 +513,123 @@ function othersHeight(count, width, pad, ow, oh) {
     const cols = Math.max(1, Math.floor((width - 2 * pad + 10) / (ow + 10)));
     return 26 + Math.ceil(count / cols) * (oh + 10) + 6;
 }
-function othersBlock(layout, list, y0, width, pad, ow, oh, v, boxes, texts) {
+function othersBlock(layout, list, y0, width, pad, ow, oh, v, road, boxes, texts) {
     if (!list.length)
         return;
     const cols = Math.max(1, Math.floor((width - 2 * pad + 10) / (ow + 10)));
     const x0 = pad + (width - 2 * pad - (Math.min(cols, list.length) * (ow + 10) - 10)) / 2;
-    texts.push(label(v, v.words.other, width / 2, y0 + 12, "middle"));
+    texts.push(label(v, road, v.words.other, width / 2, y0 + 12, "middle"));
     list.forEach((i, n) => {
         const rect = { x: x0 + (n % cols) * (ow + 10), y: y0 + 24 + Math.floor(n / cols) * (oh + 10), w: ow, h: oh };
         boxes.push({ rect, tie: layout.ties[i], order: [0, 1], bye: null, byes: [], final: false, champion: false });
     });
 }
 /** The third-place match with its label, centred on `cx`, its label at `y0`. */
-function thirdAtFoot(layout, y0, cx, w, h, v, boxes, texts) {
-    texts.push(label(v, v.words.thirdPlace, cx, y0 + 12, "middle"));
+function thirdAtFoot(layout, y0, cx, w, h, v, road, boxes, texts) {
+    texts.push(label(v, road, v.words.thirdPlace, cx, y0 + 12, "middle"));
     boxes.push({ rect: { x: cx - w / 2, y: y0 + 18, w, h }, tie: layout.ties[layout.third], order: [0, 1], bye: null, byes: [], final: false, champion: false });
 }
-// ---------------------------------------------------------------------------------------------- one box
-function drawBox(p, plan, o, v, ctx) {
+/** The address `href` gives for a tie (or for one side of it), when it is one a drawing may link to; `null` otherwise. */
+function hrefOf(o, tie, side) {
+    if (typeof o.href !== "function")
+        return null;
+    const url = side === undefined ? o.href(tie) : o.href(tie, side);
+    return typeof url === "string" && safeHref(url) ? url.trim() : null;
+}
+function drawBox(p, plan, o, v, ctx, linked) {
     const { rect, tie } = p;
     const { x, y, w, h } = rect;
     const detail = plan.detail;
+    const road = plan.road;
     const scoresOn = o.scores ?? true;
     const seedsOn = o.seeds ?? false;
     const highlight = o.winnerHighlight ?? true;
+    const description = describeTie(tie, v);
+    // A link on the whole box wins; with none, each side that has an address is a link on its own row.
+    const boxHref = hrefOf(o, tie);
+    const sideHref = (k) => (boxHref !== null || tie.sides[k] === null ? null : hrefOf(o, tie, k));
+    const anchor = (url, name, inner) => {
+        linked.count++;
+        return `<a class="tb-link" href="${esc(url)}" aria-label="${esc(name)}">${inner}</a>`;
+    };
     const parts = [];
-    parts.push(`<rect class="tb-box" x="${num(x)}" y="${num(y)}" width="${num(w)}" height="${num(h)}" rx="${num(Math.min(7, h / 4))}"${o.theme === "none" ? ' fill="none" stroke="currentColor" stroke-opacity=".4"' : ""}/>`);
+    parts.push(`<rect class="tb-box" x="${num(x)}" y="${num(y)}" width="${num(w)}" height="${num(h)}" rx="${num(road ? Math.min(14, h / 3.2) : Math.min(7, h / 4))}"${boxHref !== null ? ' pointer-events="all"' : ""}${o.theme === "none" ? ' fill="none" stroke="currentColor" stroke-opacity=".4"' : ""}/>`);
     const r = tie.result;
     const notes = noteParts(tie, v);
-    const noteH = detail !== "mark" && h >= 50 && notes.length ? 13 : 0;
+    // In the road look every box keeps the strip for the note when any tie has one, so that all the rows are the same size.
+    const noteH = detail !== "mark" && h >= (road ? 62 : 50) && (road ? plan.notes : notes.length > 0) ? (road ? 15 : 13) : 0;
     const rowH = (h - noteH) / 2;
     const rowsOrder = p.order;
     const cls = (k) => (highlight && tie.winner !== null ? (tie.winner === k ? "tb-won" : "tb-lost") : "tb-pending");
-    if (detail === "mark") {
-        const stack = Math.min((h - 8) / 2, w - 8, 44);
-        const side = Math.min(h - 8, (w - 12) / 2, 44);
+    const row = (k, inner, rx, ry, rw, rh) => {
+        const url = sideHref(k);
+        const team = tie.sides[k];
+        if (url === null || team === null)
+            return inner;
+        return anchor(url, `${team.name}: ${description}`, `<rect class="tb-hit" x="${num(rx)}" y="${num(ry)}" width="${num(rw)}" height="${num(rh)}" fill="transparent"/>${inner}`);
+    };
+    if (detail === "mark" && plan.markScores) {
+        // Two columns: each team's mark with its score under it.
+        const colW = (w - 12) / 2;
+        const m = Math.min(colW - 2, 56, h - 14);
+        const sf = clamp(m * 0.5, 10, 24);
+        const withScore = scoresOn && r.score !== null;
+        const markH = withScore ? m : h - 12;
+        const top = y + (h - (m + (withScore ? sf * 1.3 : 0))) / 2;
+        rowsOrder.forEach((k, n) => {
+            const team = tie.sides[k];
+            const cx = x + 6 + colW / 2 + n * colW;
+            const cy = top + m / 2;
+            const inner = [drawMark(team, cx, cy, withScore ? m : markH, ctx)];
+            if (withScore && r.score) {
+                const pens = r.pens ? ` (${v.number(r.pens[k])})` : "";
+                inner.push(`<text class="tb-score" x="${num(cx)}" y="${num(top + m + sf * 1.05)}" font-size="${num(sf)}" text-anchor="middle" font-variant-numeric="tabular-nums">${esc(v.number(r.score[k]))}${r.pens ? `<tspan class="tb-muted" font-size="${num(sf * 0.6)}" font-weight="600">${esc(pens)}</tspan>` : ""}</text>`);
+            }
+            parts.push(row(k, `<g class="${cls(k)}">${inner.join("")}</g>`, cx - colW / 2, y, colW, h));
+        });
+    }
+    else if (detail === "mark") {
+        const stack = Math.min((h - 8) / 2, w - 8, road ? 60 : 44);
+        const side = Math.min(h - 8, (w - 12) / 2, road ? 60 : 44);
         const stacked = stack >= side;
         const md2 = Math.max(stacked ? stack : side, 8);
         rowsOrder.forEach((k, n) => {
             const team = tie.sides[k];
             const cx = stacked ? x + w / 2 : x + w / 2 + (n === 0 ? -1 : 1) * (md2 / 2 + 3);
             const cy = stacked ? y + h / 2 + (n === 0 ? -1 : 1) * (md2 / 2 + 1) : y + h / 2;
-            parts.push(`<g class="${cls(k)}">${drawMark(team, cx, cy, md2, ctx)}</g>`);
+            parts.push(row(k, `<g class="${cls(k)}">${drawMark(team, cx, cy, md2, ctx)}</g>`, cx - md2 / 2, cy - md2 / 2, md2, md2));
         });
     }
     else {
-        const font = clamp(rowH * 0.5, 8.5, 16);
-        const md = clamp(rowH * 0.7, 10, 28);
+        const base = metrics(rowH, road);
+        const f = plan.fit;
+        const font = road ? Math.max(base.font * f, 8.5) : base.font, md = road ? base.md * f : base.md, scoreFont = road ? base.score * f : base.score;
+        const padX = road ? clamp(rowH * 0.16, 5, 12) : 6;
+        const gap = road ? clamp(rowH * 0.18, 5, 10) : 5;
+        const small = Math.max(road ? scoreFont * 0.55 : font - 2, 8);
+        const small2 = Math.max(font - 2, 8);
         rowsOrder.forEach((k, n) => {
             const team = tie.sides[k];
             const ry = y + n * rowH;
             const cy = ry + rowH / 2;
             const rowParts = [];
-            let tx = x + 6;
+            let tx = x + padX;
             if (o.markShape !== "none") {
-                rowParts.push(drawMark(team, x + 6 + md / 2, cy, md, ctx));
-                tx = x + 6 + md + 5;
+                rowParts.push(drawMark(team, x + padX + md / 2, cy, md, ctx));
+                tx = x + padX + md + gap;
             }
             const score = scoresOn && r.score ? v.number(r.score[k]) : "";
             const pensText = scoresOn && r.pens ? `(${v.number(r.pens[k])})` : "";
             const bye = p.byes.includes(k);
-            const right = x + w - 6;
-            const scoreW = score ? textWidth(score, font + 1) : 0;
-            const pensW = pensText ? textWidth(pensText, font - 2) + 3 : 0;
+            const right = x + w - padX;
+            const scoreW = score ? textWidth(score, scoreFont) : 0;
+            const pensW = pensText ? textWidth(pensText, small) + 3 : 0;
             const seed = seedsOn && team?.seed !== undefined ? `${v.number(team.seed)} ` : "";
             const nm = team ? (detail === "full" ? team.name : abbrOf(team, v)) : v.words.tbd;
             // The word for a bye goes beside the score only where the name still fits beside it.
-            const byeFits = bye && right - tx - (scoreW + pensW) - (textWidth(v.words.bye, Math.max(font - 2, 8)) + 6) - 6 >= textWidth(`${seed}${nm}`, font);
+            const byeFits = bye && right - tx - (scoreW + pensW) - (textWidth(v.words.bye, small2) + 6) - 6 >= textWidth(`${seed}${nm}`, font);
             const byeText = byeFits ? v.words.bye : "";
-            const byeW = byeText ? textWidth(byeText, Math.max(font - 2, 8)) : 0;
+            const byeW = byeText ? textWidth(byeText, small2) : 0;
             const avail = right - tx - (scoreW + pensW) - (byeW ? byeW + 6 : 0) - 6;
             // A name that does not fit is set a little smaller before it is cut.
             let nameFont = font;
@@ -475,19 +638,21 @@ function drawBox(p, plan, o, v, ctx) {
             const text = fit(`${seed}${nm}`, nameFont, Math.max(avail, 8));
             rowParts.push(`<text class="tb-name${team ? "" : " tb-muted"}" x="${num(tx)}" y="${num(cy + nameFont * 0.35)}" font-size="${num(nameFont)}">${esc(text)}</text>`);
             if (score)
-                rowParts.push(`<text class="tb-score" x="${num(right)}" y="${num(cy + (font + 1) * 0.35)}" font-size="${num(font + 1)}" text-anchor="end" font-variant-numeric="tabular-nums">${esc(score)}</text>`);
+                rowParts.push(`<text class="tb-score" x="${num(right)}" y="${num(cy + scoreFont * 0.35)}" font-size="${num(scoreFont)}" text-anchor="end" font-variant-numeric="tabular-nums">${esc(score)}</text>`);
             if (pensText)
-                rowParts.push(`<text class="tb-muted" x="${num(right - scoreW - 3)}" y="${num(cy + (font - 2) * 0.35)}" font-size="${num(Math.max(font - 2, 8))}" text-anchor="end">${esc(pensText)}</text>`);
+                rowParts.push(`<text class="tb-muted" x="${num(right - scoreW - (road ? 4 : 3))}" y="${num(cy + small * 0.35)}" font-size="${num(small)}" text-anchor="end">${esc(pensText)}</text>`);
             if (byeText)
-                rowParts.push(`<text class="tb-muted" x="${num(right - (scoreW + pensW) - (scoreW || pensW ? 6 : 0))}" y="${num(cy + (font - 2) * 0.35)}" font-size="${num(Math.max(font - 2, 8))}" font-style="italic" text-anchor="end">${esc(byeText)}</text>`);
-            parts.push(`<g class="${cls(k)}">${rowParts.join("")}</g>`);
+                rowParts.push(`<text class="tb-muted" x="${num(right - (scoreW + pensW) - (scoreW || pensW ? 6 : 0))}" y="${num(cy + small2 * 0.35)}" font-size="${num(small2)}" font-style="italic" text-anchor="end">${esc(byeText)}</text>`);
+            parts.push(row(k, `<g class="${cls(k)}">${rowParts.join("")}</g>`, x, ry, w, rowH));
         });
-        parts.push(`<line class="tb-line" x1="${num(x + 4)}" x2="${num(x + w - 4)}" y1="${num(y + rowH)}" y2="${num(y + rowH)}" stroke-opacity=".35"${o.theme === "none" ? ' stroke="currentColor"' : ""}/>`);
+        parts.push(`<line class="${road ? "tb-sep" : "tb-line"}" x1="${num(x + 4)}" x2="${num(x + w - 4)}" y1="${num(y + rowH)}" y2="${num(y + rowH)}" stroke-opacity=".35"${o.theme === "none" ? ' stroke="currentColor"' : ""}/>`);
         if (noteH) {
-            const f = 9.5;
-            parts.push(`<text class="tb-muted" x="${num(x + w / 2)}" y="${num(y + h - 4)}" font-size="${f}" text-anchor="middle">${esc(fit(notes.join(" · "), f, w - 8))}</text>`);
+            const f = road ? 9 : 9.5;
+            const line = road ? v.upper(notes.join(" · ")) : notes.join(" · ");
+            parts.push(`<text class="tb-muted${road ? " tb-note" : ""}" x="${num(x + w / 2)}" y="${num(y + h - (road ? 5 : 4))}" font-size="${f}"${road ? ' font-weight="700" letter-spacing=".05em"' : ""} text-anchor="middle">${esc(fit(line, f * (road ? 1.1 : 1), w - 8))}</text>`);
         }
     }
-    const cls2 = `tb-tie${p.final ? " tb-final" : ""}${p.champion ? " tb-has-champ" : ""}`;
-    return `<g class="${cls2}"><title>${esc(describeTie(tie, v))}</title>${parts.join("")}</g>`;
+    const cls2 = `tb-tie${p.final ? " tb-final" : ""}${p.champion ? " tb-has-champ" : ""}${plan.path.has(tie.index) ? " tb-on-path" : ""}`;
+    const body = boxHref !== null ? anchor(boxHref, description, parts.join("")) : parts.join("");
+    return `<g class="${cls2}"><title>${esc(description)}</title>${body}</g>`;
 }

package/dist/road-entry.d.ts

@@ -0,0 +1,2 @@
+export { roadToFinal } from "./road.ts";
+export type { RoadChart, RoadDecided, RoadFinal, RoadFinalist, RoadGroupMatch, RoadInput, RoadMatch, RoadOptions, RoadRecord, RoadScore, RoadSize, RoadTeam, RoadTotals } from "./road.ts";

package/dist/road-entry.js

@@ -0,0 +1 @@
+export { roadToFinal } from "./road.js";

package/dist/road.d.ts

@@ -0,0 +1,28 @@
+import type { RoadChart, RoadInput, RoadOptions } from "./road.types.ts";
+export type { RoadChart, RoadDecided, RoadFinal, RoadFinalist, RoadGroupMatch, RoadInput, RoadMatch, RoadOptions, RoadRecord, RoadScore, RoadSize, RoadTeam, RoadTotals } from "./road.types.ts";
+/**
+ * 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 declare function roadToFinal(input: RoadInput, options?: RoadOptions): RoadChart;

package/dist/road.draw.d.ts

@@ -0,0 +1,4 @@
+import { type Model } from "./road.model.ts";
+import type { RoadOptions } from "./road.types.ts";
+/** Draw the chart as an SVG string. `gid` is the prefix of its ids. */
+export declare function drawRoad(model: Model, o: RoadOptions, gid: string): string;