@johnmorrisdotca/taisen-brackets 0.5.0 → 0.6.0

package/dist/groups.js

@@ -0,0 +1,204 @@
+import { layoutBracket } from "./layout.js";
+import { fill, voiceOf } from "./locales.js";
+import { abbrOf } from "./matchup.js";
+import { drawMark } from "./marks.js";
+import { bold, headingTexts, titleHeight } from "./furniture.js";
+import { esc, fit, num } from "./text.js";
+const isLayout = (x) => typeof x === "object" && x !== null && "ties" in x && "sides" in x && "rounds" in x;
+/**
+ * The tables of the group stage: one for each group, from the round-robin games (`round: 0`) of the ties. A team's group is its `group`; teams with none take the group of the teams they
+ * played (the games make groups of the teams they join), and a group the teams do not name is lettered A, B, C. Rows are in order of points, then goal difference, then goals scored, then
+ * name (`standings: "record"` orders by wins, then fewest losses).
+ */
+export function groupStandings(input, options = {}) {
+    const v = voiceOf(options);
+    const layout = isLayout(input) ? input : layoutBracket(input);
+    return tablesOf(layout, options.standings ?? "points", v);
+}
+function tablesOf(layout, mode, v) {
+    const games = layout.robin.map((i) => layout.ties[i]).filter((t) => t.sides[0] !== null && t.sides[1] !== null);
+    // The games join teams into groups.
+    const parent = new Map();
+    const find = (a) => { let r = a; while (parent.get(r) !== r)
+        r = parent.get(r); return r; };
+    for (const t of games)
+        for (const s of t.sides)
+            if (s && !parent.has(s.id))
+                parent.set(s.id, s.id);
+    for (const t of games)
+        parent.set(find(t.sides[0].id), find(t.sides[1].id));
+    const named = new Map();
+    for (const t of layout.teams)
+        if (typeof t.group === "string" && t.group !== "")
+            named.set(t.id, t.group);
+    // A joined set of teams takes the group its teams name (the most common one).
+    const joined = new Map();
+    for (const id of parent.keys()) {
+        const g = named.get(id);
+        if (!g)
+            continue;
+        const root = find(id);
+        const counts = joined.get(root) ?? new Map();
+        counts.set(g, (counts.get(g) ?? 0) + 1);
+        joined.set(root, counts);
+    }
+    const keyOf = (team) => {
+        const own = named.get(team.id);
+        if (own)
+            return own;
+        if (!parent.has(team.id))
+            return null;
+        const counts = joined.get(find(team.id));
+        if (counts)
+            return [...counts].sort((a, b) => b[1] - a[1] || (a[0] < b[0] ? -1 : 1))[0][0];
+        return `#${String(find(team.id))}`;
+    };
+    const byKey = new Map();
+    for (const team of layout.teams) {
+        const key = keyOf(team);
+        if (key === null)
+            continue;
+        byKey.set(key, [...(byKey.get(key) ?? []), team]);
+    }
+    const order = [...byKey.keys()].sort((a, b) => (a.startsWith("#") !== b.startsWith("#") ? (a.startsWith("#") ? 1 : -1) : a.localeCompare(b, "en", { numeric: true })));
+    let lettered = 0;
+    return order.map((key) => {
+        const members = byKey.get(key);
+        const ids = new Set(members.map((t) => t.id));
+        const rows = members.map((team) => ({ team, played: 0, won: 0, drawn: 0, lost: 0, goalsFor: 0, goalsAgainst: 0, diff: 0, points: 0 }));
+        const rowOf = new Map(rows.map((r) => [r.team.id, r]));
+        for (const t of games) {
+            if (!ids.has(t.sides[0].id) || !ids.has(t.sides[1].id) || t.result.score === null)
+                continue;
+            const [a, b] = t.result.score;
+            const ra = rowOf.get(t.sides[0].id), rb = rowOf.get(t.sides[1].id);
+            for (const [r, f, g] of [[ra, a, b], [rb, b, a]]) {
+                r.played++;
+                r.goalsFor += f;
+                r.goalsAgainst += g;
+                if (f > g) {
+                    r.won++;
+                    r.points += 3;
+                }
+                else if (f < g)
+                    r.lost++;
+                else {
+                    r.drawn++;
+                    r.points += 1;
+                }
+            }
+        }
+        for (const r of rows)
+            r.diff = r.goalsFor - r.goalsAgainst;
+        const byName = (x, y) => (x.team.name < y.team.name ? -1 : x.team.name > y.team.name ? 1 : 0);
+        rows.sort(mode === "record" ? (x, y) => y.won - x.won || x.lost - y.lost || byName(x, y) : (x, y) => y.points - x.points || y.diff - x.diff || y.goalsFor - x.goalsFor || byName(x, y));
+        const letter = String.fromCharCode(65 + lettered);
+        const auto = key.startsWith("#");
+        if (auto)
+            lettered++;
+        const name = auto ? fill(v.words.groupName, { n: letter }) : /^[A-Za-z0-9]$/.test(key) ? fill(v.words.groupName, { n: key.toUpperCase() }) : key;
+        return { key: auto ? letter : key, name, rows };
+    });
+}
+/** The table of the groups as HTML, for a reader the drawing does not serve: one `<table>` a group, its caption the group's name, a row a team. */
+export function groupsTable(input, options = {}) {
+    const v = voiceOf(options);
+    const w = v.words;
+    const mode = options.standings ?? "points";
+    const layout = isLayout(input) ? input : layoutBracket(input);
+    const heads = mode === "points" ? [w.colPlayed, w.colWon, w.colDrawn, w.colLost, w.colDiff, w.colPoints] : [w.colWon, w.colLost];
+    return tablesOf(layout, mode, v).map((g) => [
+        `<table class="${esc(options.className ?? "tb-table")}" lang="${esc(v.locale.code)}">`,
+        `<caption>${esc(g.name)}</caption>`,
+        `<thead><tr><th scope="col">${esc(w.columnTie)}</th>${heads.map((h) => `<th scope="col">${esc(h)}</th>`).join("")}</tr></thead>`,
+        `<tbody>${g.rows.map((r) => `<tr><th scope="row">${esc(v.team(r.team))}</th>${cells(r, mode, v).map((c) => `<td>${esc(c)}</td>`).join("")}</tr>`).join("")}</tbody>`,
+        "</table>",
+    ].join("\n")).join("\n");
+}
+const signed = (n, v) => (n > 0 ? `+${v.number(n)}` : v.number(n));
+const cells = (r, mode, v) => mode === "points" ? [v.number(r.played), v.number(r.won), v.number(r.drawn), v.number(r.lost), signed(r.diff, v), v.number(r.points)] : [v.number(r.won), v.number(r.lost)];
+/** Draws the group tables as cards in a grid. */
+export function drawGroups(layout, o, v, size, ctx, road, linked) {
+    void linked;
+    const mode = o.standings ?? "points";
+    const tables = tablesOf(layout, mode, v);
+    if (tables.length === 0)
+        throw new RangeError("taisen-brackets: the groups layout needs round-robin games (round: 0) or teams with a group");
+    const w = v.words;
+    const W = size.width;
+    const pad = W < 500 ? 14 : 22;
+    const heads = mode === "points" ? [w.colPlayed, w.colWon, w.colDrawn, w.colLost, w.colDiff, w.colPoints] : [w.colWon, w.colLost];
+    const colW = mode === "points" ? (W < 500 ? 31 : 36) : 44;
+    const colsW = heads.length * colW;
+    const gap = 14;
+    const rowH = road ? 34 : 30;
+    const maxRows = Math.max(...tables.map((t) => t.rows.length));
+    const tileH = 28;
+    const headH = 18;
+    const cardH = 10 + tileH + 6 + headH + maxRows * rowH + 10;
+    const minCard = colsW + 150;
+    const avail = W - 2 * pad;
+    const maxPer = Math.max(1, Math.min(tables.length, Math.floor((avail + gap) / (minCard + gap))));
+    const lines = Math.ceil(tables.length / maxPer);
+    const per = Math.ceil(tables.length / lines);
+    const cardW = Math.min(400, (avail - gap * (per - 1)) / per);
+    const titleH = titleHeight(o);
+    const top0 = pad + titleH;
+    const content = lines * cardH + (lines - 1) * gap;
+    const height = Math.max(size.height ?? 0, top0 + content + pad);
+    const y00 = top0 + Math.max(0, (height - top0 - pad - content) / 2);
+    const md = clamp(rowH - 9, 14, 28);
+    const qualify = Math.max(0, Math.floor(o.qualify ?? 0));
+    const body = [];
+    const descParts = [];
+    tables.forEach((g, n) => {
+        const line = Math.floor(n / per);
+        const inLine = Math.min(per, tables.length - line * per);
+        const x = pad + (avail - (inLine * cardW + (inLine - 1) * gap)) / 2 + (n % per) * (cardW + gap);
+        const y = y00 + line * (cardH + gap);
+        const parts = [];
+        parts.push(`<rect class="tb-box tb-gcard" x="${num(x)}" y="${num(y)}" width="${num(cardW)}" height="${num(cardH)}" rx="10"${o.theme === "none" ? ' fill="none" stroke="currentColor" stroke-opacity=".4"' : ""}/>`);
+        parts.push(`<rect class="tb-gtile" x="${num(x + 8)}" y="${num(y + 10)}" width="${num(cardW - 16)}" height="${tileH}" rx="7"/>`);
+        parts.push(`<text class="tb-gtile-t" x="${num(x + cardW / 2)}" y="${num(y + 10 + tileH / 2 + 5)}" font-size="14" letter-spacing=".06em" text-anchor="middle">${esc(fit(o.theme === "poster" ? v.upper(g.name) : g.name, 14, cardW - 36, (t, s) => bold(t, s) * 1.06))}</text>`);
+        const headY = y + 10 + tileH + 6;
+        const colsX = x + cardW - 10 - colsW;
+        heads.forEach((h, i) => parts.push(`<text class="tb-ghead" x="${num(colsX + i * colW + colW / 2)}" y="${num(headY + 12)}" font-size="10" text-anchor="middle">${esc(h)}</text>`));
+        const rows0 = headY + headH;
+        g.rows.forEach((r, i) => {
+            const ry = rows0 + i * rowH;
+            const cy = ry + rowH / 2;
+            const out = i < qualify;
+            if (i > 0)
+                parts.push(`<line class="tb-gsep" x1="${num(x + 10)}" x2="${num(x + cardW - 10)}" y1="${num(ry)}" y2="${num(ry)}"/>`);
+            if (out)
+                parts.push(`<rect class="tb-qual" x="${num(x + 6)}" y="${num(ry + 1)}" width="${num(cardW - 12)}" height="${num(rowH - 2)}" rx="6"/>`);
+            const row = [];
+            let nx = x + 12;
+            if (ctx.shape !== "none") {
+                row.push(drawMark(r.team, nx + md / 2, cy, md, ctx));
+                nx += md + 8;
+            }
+            const room = colsX - 6 - nx;
+            let nf = road ? 14 : 13;
+            const full = r.team.name;
+            const abbr = abbrOf(r.team, v);
+            let label = full;
+            while (nf > 10 && bold(label, nf) > room)
+                nf -= 0.5;
+            if (bold(label, nf) > room) {
+                label = abbr;
+                nf = road ? 14 : 13;
+                while (nf > 10 && bold(label, nf) > room)
+                    nf -= 0.5;
+            }
+            row.push(`<text class="tb-gname" x="${num(nx)}" y="${num(cy + nf * 0.35)}" font-size="${num(nf)}">${esc(fit(label, nf, Math.max(room, 8), bold))}</text>`);
+            cells(r, mode, v).forEach((c, k) => row.push(`<text class="tb-gcell${k === heads.length - 1 ? " tb-gcell-p" : ""}" x="${num(colsX + k * colW + colW / 2)}" y="${num(cy + 4.2)}" font-size="12.5" text-anchor="middle">${esc(c)}</text>`));
+            parts.push(`<g class="tb-grow${out ? " tb-qualified" : ""}">${row.join("")}</g>`);
+        });
+        const summary = g.rows.map((r) => `${v.team(r.team)} ${cells(r, mode, v).join(" ")}`).join(w.noteJoin);
+        descParts.push(`${g.name}: ${summary}`);
+        body.push(`<g class="tb-group"><title>${esc(`${g.name}: ${summary}`)}</title>${parts.join("")}</g>`);
+    });
+    return { width: W, height, body, texts: headingTexts(v, o, W, pad), desc: `${descParts.join(w.sep)}${w.end}` };
+}
+const clamp = (n, lo, hi) => Math.min(hi, Math.max(lo, n));

package/dist/index.d.ts

@@ -1,10 +1,12 @@
 export * from "./layout-entry.ts";
-export { drawBracket, describeBracket, localizedLayout, SIZES } from "./render.ts";
+export { drawBracket, describeBracket, localizedLayout, bracketStyle, SIZES, LAYOUTS } from "./render.ts";
+export { groupStandings, groupsTable } from "./groups.ts";
+export type { GroupRow, GroupTable } from "./groups.ts";
 export { bracketTable } from "./table.ts";
 export type { TableOptions } from "./table.ts";
 export { roadToFinal } from "./road.ts";
 export type { RoadChart, RoadDecided, RoadFinal, RoadFinalist, RoadGroupMatch, RoadInput, RoadMatch, RoadOptions, RoadRecord, RoadScore, RoadSize, RoadTeam, RoadTotals } from "./road.ts";
-export { THEMES, ROAD_THEMES } from "./theme.ts";
+export { THEMES, ROAD_THEMES, CONFERENCE_COLORS } from "./theme.ts";
 export type { Palette, RoadPalette } from "./theme.ts";
 export { cleanSvg, safeUrl, safeHref, isEmblemId } from "./marks.ts";
 export { abbreviate } from "./text.ts";

package/dist/index.js

@@ -1,8 +1,9 @@
 export * from "./layout-entry.js";
-export { drawBracket, describeBracket, localizedLayout, SIZES } from "./render.js";
+export { drawBracket, describeBracket, localizedLayout, bracketStyle, SIZES, LAYOUTS } from "./render.js";
+export { groupStandings, groupsTable } from "./groups.js";
 export { bracketTable } from "./table.js";
 export { roadToFinal } from "./road.js";
-export { THEMES, ROAD_THEMES } from "./theme.js";
+export { THEMES, ROAD_THEMES, CONFERENCE_COLORS } from "./theme.js";
 export { cleanSvg, safeUrl, safeHref, isEmblemId } from "./marks.js";
 export { abbreviate } from "./text.js";
 export { BACKGROUND_PRESETS, FAMILY_BACKGROUNDS_VERSION, backgroundSvg, contrastRatio } from "./family-backgrounds.js";

package/dist/layout.js

@@ -17,10 +17,52 @@ export function layoutBracket(input, options = {}) {
             throw new Error(`taisen-brackets: two matchups have the id ${JSON.stringify(t.id)}`);
         byId.set(t.id, t.index);
     }
-    const thirds = ties.filter((t) => t.third).map((t) => t.index);
-    const robin = ties.filter((t) => !t.third && matchups[t.index].round === 0).map((t) => t.index);
-    const inTree = ties.filter((t) => !t.third && matchups[t.index].round !== 0).map((t) => t.index);
+    // A play-in game is outside the tree; so are a third-place match and a round-robin game.
+    const playIns = ties.filter((t) => matchups[t.index].stage === "play-in").map((t) => t.index);
+    const isPlayIn = new Set(playIns);
+    const thirds = ties.filter((t) => t.third && !isPlayIn.has(t.index)).map((t) => t.index);
+    const robin = ties.filter((t) => !t.third && !isPlayIn.has(t.index) && matchups[t.index].round === 0).map((t) => t.index);
+    const inTree = ties.filter((t) => !t.third && !isPlayIn.has(t.index) && matchups[t.index].round !== 0).map((t) => t.index);
     const isTree = new Set(inTree);
+    // Where each side comes from, when `feeds` says so with more than a tie's winner (`{ tie, result }`), or names a play-in game: those edges are not the tree's.
+    const feedOf = (f) => (typeof f === "string" ? { id: f, result: "winner" } : { id: f.tie, result: f.result });
+    const from = new Map();
+    for (const t of ties) {
+        const feeds = matchups[t.index].feeds;
+        if (!feeds)
+            continue;
+        const sources = feeds.map((f) => {
+            if (f == null)
+                return null;
+            const { id, result } = feedOf(f);
+            if (result !== "winner" && result !== "loser")
+                throw new Error(`taisen-brackets: matchup ${JSON.stringify(t.id)} is fed by the ${JSON.stringify(String(result))} of ${JSON.stringify(id)}: a feed's result is "winner" or "loser"`);
+            const c = byId.get(id);
+            if (c === undefined)
+                throw new Error(`taisen-brackets: matchup ${JSON.stringify(t.id)} is fed by ${JSON.stringify(id)}, which is not a matchup`);
+            if (c === t.index)
+                throw new Error(`taisen-brackets: matchup ${JSON.stringify(t.id)} is fed by itself`);
+            return { tie: c, result };
+        });
+        const special = isPlayIn.has(t.index) || feeds.some((f) => f != null && (typeof f !== "string" || isPlayIn.has(byId.get(f) ?? -1)));
+        if (special)
+            from.set(t.index, sources);
+    }
+    // A tie cannot be fed, through winners or losers, by a tie it feeds.
+    const state = new Map();
+    const visit = (i, trail) => {
+        if (state.get(i) === 2)
+            return;
+        if (state.get(i) === 1)
+            throw new Error(`taisen-brackets: matchups feed each other in a circle: ${[...trail.slice(trail.indexOf(i)), i].map((k) => JSON.stringify(ties[k].id)).join(" -> ")}`);
+        state.set(i, 1);
+        for (const src of matchups[i].feeds ?? [])
+            if (src != null)
+                visit(byId.get(feedOf(src).id) ?? i, [...trail, i]);
+        state.set(i, 2);
+    };
+    for (const t of ties)
+        visit(t.index, []);
     const winnerId = (i) => (ties[i].winner === null ? null : ties[i].sides[ties[i].winner]?.id ?? null);
     const sideIdOf = (i, k) => ties[i].sides[k]?.id ?? null;
     // Explicit feeds: the tie named for side k is a child of this one.
@@ -34,10 +76,14 @@ export function layoutBracket(input, options = {}) {
             continue;
         explicit.add(j);
         const list = [];
-        feeds.forEach((id, k) => {
-            if (id == null)
+        feeds.forEach((feed, k) => {
+            if (feed == null)
                 return;
+            const { id, result } = feedOf(feed);
             const c = byId.get(id);
+            // A loser, or a play-in game's winner, goes where `from` says; it takes no part in the tree.
+            if (result === "loser" || (c !== undefined && isPlayIn.has(c)))
+                return;
             if (c === undefined)
                 throw new Error(`taisen-brackets: matchup ${JSON.stringify(ties[j].id)} is fed by ${JSON.stringify(id)}, which is not a matchup`);
             if (!isTree.has(c))
@@ -121,6 +167,10 @@ export function layoutBracket(input, options = {}) {
         ties[i] = { ...ties[i], round: round[i] };
     for (const i of robin)
         ties[i] = { ...ties[i], round: 0 };
+    for (const i of playIns)
+        ties[i] = { ...ties[i], round: 0, playIn: true };
+    for (const [i, sources] of from)
+        ties[i] = { ...ties[i], from: sources };
     const place = new Array(n).fill("o");
     const subtree = (i) => [i, ...(children.get(i) ?? []).flatMap(subtree)];
     const groupOf = (t) => t?.group ?? null;
@@ -265,7 +315,7 @@ export function layoutBracket(input, options = {}) {
     return {
         ties, shape, sides, final, finalIndex: fin, columns, rounds,
         rows: Math.max(1, ...sides.map((s) => s.rows)),
-        other, robin, third: thirds[0] ?? null, place, parent, champion,
+        other, robin, playIn: playIns, third: thirds[0] ?? null, place, parent, champion,
         teams: [...teamMap.values()],
     };
 }

package/dist/layouts.d.ts

@@ -0,0 +1,48 @@
+import type { DrawOptions, Place, Tie } from "./types.ts";
+import type { Voice } from "./locales.ts";
+import { type MarkContext } from "./marks.ts";
+export type VariantKind = "rows" | "shields" | "update" | "columns" | "series";
+/** What one box is drawn from. */
+export interface PaintEnv {
+    kind: VariantKind;
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+    tie: Tie;
+    /** Which side is drawn on top, then which below. */
+    order: readonly [0 | 1, 0 | 1];
+    /** The half of the tree the box is in: `l`, `r`, `f` the final, `o` elsewhere. */
+    side: Place;
+    final: boolean;
+    road: boolean;
+    /** How much a box says: `full` names, `compact` abbreviations, `mark` marks alone. */
+    detail: "full" | "compact" | "mark";
+    vertical: boolean;
+    /** Seed tags are drawn: the seed, the tag or the tie's own. */
+    tags: boolean;
+    /** A team's three letters under its mark where a box is marks alone. */
+    codes: boolean;
+    scoresOn: boolean;
+    v: Voice;
+    ctx: MarkContext;
+    o: DrawOptions;
+    /** The class of a team's group: won, lost or pending. */
+    cls: (k: 0 | 1) => string;
+    /** Wraps a team's row in its link, where the drawing has one. */
+    link: (k: 0 | 1, inner: string, x: number, y: number, w: number, h: number) => string;
+    /** The seed tag of a side (`""` for none). */
+    tagOf: (tie: Tie, k: 0 | 1) => string;
+    /** The widest name and the widest three-letter name of the whole drawing, in ems, so that every box makes the same choice about what fits. */
+    em: {
+        full: number;
+        abbr: number;
+        tag: number;
+    };
+}
+/** The shield's outline as a path, `size` across and as high, its top left at (x, y). */
+export declare function shieldPath(x: number, y: number, size: number): string;
+/** The parts of one box, after its own `<rect class="tb-box">`. */
+export declare function paintVariant(e: PaintEnv): string[];
+/** The width a one-line series needs: "1 BOS 4–0 MIA 8" set at `size`. */
+export declare function seriesLineWidth(tie: Tie, v: Voice, size: number, scoresOn: boolean): number;