@johnmorrisdotca/taisen-brackets 0.6.1 → 0.8.0

package/dist/render.js

@@ -1,5 +1,6 @@
 import { layoutBracket } from "./layout.js";
 import { abbrOf, describeTie, noteParts } from "./matchup.js";
+import { shidoCards, sideScore } from "./judo-text.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";
@@ -115,7 +116,7 @@ export function drawBracket(input, options = {}) {
     const orientation = options.orientation && options.orientation !== "auto" ? options.orientation : kind === "series" || sizeName === "phone" || sizeName === "card" || (size.height !== null && size.width < size.height * 0.8) ? "vertical" : "horizontal";
     const road = options.look === "road";
     const hasBg = typeof options.background === "string" || (typeof options.background === "object" && options.background !== null);
-    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, ...(hasBg ? [options.background, options.vs, options.codes, options.seeds] : []), ...(options.flagHref ? ["h"] : []), ...(kind !== "tree" ? [kind, options.at, options.standings, options.qualify] : []), ...(options.headers ? ["head"] : [])]))}`;
+    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, ...(t.judo ? [t.judo.method, t.judo.goldenScore, t.judo.seconds, t.judo.sides] : [])]), 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, ...(hasBg ? [options.background, options.vs, options.codes, options.seeds] : []), ...(options.flagHref ? ["h"] : []), ...(kind !== "tree" ? [kind, options.at, options.standings, options.qualify] : []), ...(options.headers ? ["head"] : [])]))}`;
     const ctx = { radii: new Set(), symbols: new Map(), prefix, shape: options.markShape ?? "round", look: road ? "road" : "classic", flags: options.flags, flagHref: options.flagHref, theme: theme === "light" ? "light" : theme === "dark" || theme === "poster" ? "dark" : "inherit", flagCache: new Map(), defs: new Map() };
     const path = pathOf(layout, options.highlightPath);
     const linked = { count: 0 };
@@ -124,10 +125,10 @@ export function drawBracket(input, options = {}) {
     // The group tables and the play-in are not the tree: they plan and draw their own parts, and share the frame (the style, the background, the title) with it.
     const own = kind === "groups" ? drawGroups(layout, options, v, size, ctx, road, linked) : kind === "playin" ? drawPlayIn(layout, options, v, size, ctx, road, linked) : null;
     if (own)
-        return frame({ prefix, v, options, theme, road, kind, title, desc: own.desc ?? desc, width: own.width, height: own.height, followed: false, links: [], parts: [...own.body, ...own.texts], linkCount: linked.count, ctx });
+        return frame({ prefix, v, options, theme, road, kind, title, desc: own.desc ?? desc, width: own.width, height: own.height, followed: false, links: [], parts: [...own.body, ...own.texts], linkCount: linked.count, ctx, judo: layout.ties.some((t) => t.judo !== undefined) });
     const plan = planBracket(layout, options, v, size, orientation === "vertical", ctx, road, path, kind);
     const drawn = plan.boxes.map((b) => drawBox(b, plan, options, v, ctx, linked, layout.place[b.tie.index])); // draws the marks, so before the defs are written
-    return frame({ prefix, v, options, theme, road, kind, title, desc, width: plan.width, height: plan.height, followed: path.size > 0, links: plan.links, parts: [...drawn, ...plan.texts, ...plan.extras], linkCount: linked.count, ctx });
+    return frame({ prefix, v, options, theme, road, kind, title, desc, width: plan.width, height: plan.height, followed: path.size > 0, links: plan.links, parts: [...drawn, ...plan.texts, ...plan.extras], linkCount: linked.count, ctx, judo: layout.ties.some((t) => t.judo !== undefined) });
 }
 /** The drawing's frame: the root `<svg>` with its title, its style, the defs the marks wrote and the background, round the parts a layout drew. */
 function frame(f) {
@@ -135,7 +136,7 @@ function frame(f) {
     const picture = resolveBackground(options.background, theme, f.width, f.height, prefix);
     const defs = markDefs(ctx) + (picture?.defs ?? "");
     const scope = scopeOf(options, prefix);
-    const style = theme === "none" || options.style === false ? "" : `<style>${styleFor(`.${scope}`, theme, { road, links: f.linkCount > 0, follow: f.followed, bgAuto: picture?.auto, layout: f.kind !== "tree" || options.headers === true }, picture?.inks)}</style>`;
+    const style = theme === "none" || options.style === false ? "" : `<style>${styleFor(`.${scope}`, theme, { road, links: f.linkCount > 0, follow: f.followed, bgAuto: picture?.auto, layout: f.kind !== "tree" || options.headers === true, judo: f.judo }, picture?.inks)}</style>`;
     const bg = options.background === false ? "" : `<rect class="tb-bg" width="${num(f.width)}" height="${num(f.height)}"${theme === "none" ? ' fill="none"' : ""}/>${picture?.body ?? ""}`;
     return [
         `<svg xmlns="http://www.w3.org/2000/svg" lang="${esc(v.locale.code)}" class="taisen ${prefix}${scope !== prefix ? ` ${scope}` : ""}${road ? " tb-look-road" : ""}${f.followed ? " tb-follow" : ""}${options.className ? ` ${esc(options.className)}` : ""}" viewBox="0 0 ${num(f.width)} ${num(f.height)}" width="${num(f.width)}" height="${num(f.height)}" style="max-width:100%;height:auto" role="img" aria-labelledby="${prefix}-t ${prefix}-d">`,
@@ -168,7 +169,7 @@ export function bracketStyle(options) {
     if (theme === "none")
         return "";
     const picture = resolveBackground(options.background, theme, 100, 100, "x");
-    return styleFor(`.${scope}`, theme, { road: options.look === "road", links: typeof options.href === "function", follow: options.highlightPath !== undefined, bgAuto: picture?.auto, layout: (options.layout ?? "tree") !== "tree" || options.headers === true }, picture?.inks);
+    return styleFor(`.${scope}`, theme, { road: options.look === "road", links: typeof options.href === "function", follow: options.highlightPath !== undefined, bgAuto: picture?.auto, layout: (options.layout ?? "tree") !== "tree" || options.headers === true, judo: options.judo === true }, picture?.inks);
 }
 /** The groups' names with the east first, for the series card: the names the teams carry, ordered so that a name with "east" comes before one with "west". */
 function eastFirst(input) {
@@ -181,6 +182,8 @@ function eastFirst(input) {
 }
 // ---------------------------------------------------------------------------------------------- the plan
 function planBracket(layout, o, v, size, vertical, ctx, road, path, kind) {
+    // The ties kept apart below the tree are a little taller in the road look when any of them has a note to write (a judo contest's method and time), so that the note has its line.
+    const OH = road && [...layout.other, ...layout.robin, ...layout.playIn].some((i) => noteParts(layout.ties[i], v).length > 0) ? 66 : OTHER_H;
     // The layouts that draw each tie their own way take the tree's places and lines, and fill the boxes themselves.
     const V = VARIANTS.includes(kind) ? kind : null;
     const pad = vertical ? 14 : 22;
@@ -238,7 +241,7 @@ function planBracket(layout, o, v, size, vertical, ctx, road, path, kind) {
         const top = pad + titleH + (hasGroups ? groupRoom : 0) + labelRoom;
         others = othersOf(layout);
         ow = clamp(D * 1.1, 120, 200);
-        extraH0 = othersHeight(others.length, W0, pad, ow, OTHER_H) + thirdBlock;
+        extraH0 = othersHeight(others.length, W0, pad, ow, OH) + thirdBlock;
         const bodyH = size.height === null ? rows * 60 : size.height - top - pad - extraH0;
         rowStep = bodyH / rows;
         S = clamp(rowStep - (road ? 7 : 9), 24, road ? 132 : 104);
@@ -264,6 +267,8 @@ function planBracket(layout, o, v, size, vertical, ctx, road, path, kind) {
     const tagW = tagsOn ? Math.max(...layout.ties.flatMap((t) => [tagOf(t, 0), tagOf(t, 1)]).map((x) => boldWidth(x, 8))) + 8 : 0;
     // 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 widest score a row may carry: two digits, or a judo contest's marks ("W2 Y3").
+    const probe = layout.ties.reduce((best, t) => [0, 1].reduce((b, k) => { const x = sideScore(t, k, v); return wide(x, 10) > wide(b, 10) ? x : b; }, best), "00");
     // 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) => {
@@ -273,7 +278,7 @@ function planBracket(layout, o, v, size, vertical, ctx, road, path, kind) {
         const anyPens = layout.ties.some((t) => t.result.pens !== null);
         const extra = (anyBye ? wide(v.words.bye, Math.max(font - 2, 8)) + 8 : 0) + (anyPens ? wide("(00)", Math.max(score * 0.55, 8)) + 5 : 0);
         const fixed = clamp(rowH * 0.16, 5, 12) + clamp(rowH * 0.18, 5, 10) + 8 + 10 + (tagW > 0 ? tagW + 3 : 0);
-        const varying = md + (named === "full" ? longest : longestAbbr) * (font / 13) + wide("00", score) + extra;
+        const varying = md + (named === "full" ? longest : longestAbbr) * (font / 13) + wide(probe, score) + extra;
         return Math.min(1, (w - fixed) / varying);
     };
     let fitNow = 1;
@@ -284,7 +289,7 @@ function planBracket(layout, o, v, size, vertical, ctx, road, path, kind) {
         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 ? boldWidth(v.words.bye, Math.max(font - 2, 8)) + 8 : 0) + (anyPens ? boldWidth("(00)", Math.max(font - 2, 8)) + 3 : 0);
-        const needed = 6 + md + 5 + longest * (font / 13) + 8 + boldWidth("00", score) + extra + 14;
+        const needed = 6 + md + 5 + longest * (font / 13) + 8 + boldWidth(probe, 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;
     };
@@ -389,7 +394,7 @@ function planBracket(layout, o, v, size, vertical, ctx, road, path, kind) {
             dl = pick(wl, hl);
         const strays = othersOf(layout);
         const ows = Math.min(availW, 200);
-        const strayH = othersHeight(strays.length, W0, pad, ows, OTHER_H);
+        const strayH = othersHeight(strays.length, W0, pad, ows, OH);
         const labelH = showLabels ? 22 : 8;
         const content = (champ ? champH + 14 : 0) + labelH + hl + (withThird ? 8 + 18 + hl + 8 : 0) + strayH;
         const top0 = pad + titleH;
@@ -410,7 +415,7 @@ function planBracket(layout, o, v, size, vertical, ctx, road, path, kind) {
             y += 8 + 18 + hl + 8;
         }
         if (strays.length > 0)
-            othersBlock(layout, strays, y + 6, W0, pad, ows, OTHER_H, v, road, boxes, texts);
+            othersBlock(layout, strays, y + 6, W0, pad, ows, OH, v, road, boxes, texts);
         texts.push(...headings(v, o, W0, pad, poster));
         return finish({ width: W0, height, boxes, links: [], texts, extras, detail: dl, vertical, road, path, fit: fitNow, notes: anyNotes, markScores, markCols, tags: tagsOn, codes: codesOn, variant: V, em: { full: longest / 13, abbr: longestAbbr / 13, tag: tagsOn ? Math.max(...layout.ties.flatMap((t) => [tagOf(t, 0), tagOf(t, 1)]).map((x) => boldWidth(x, 1))) : 0 } });
     }
@@ -518,7 +523,7 @@ function planBracket(layout, o, v, size, vertical, ctx, road, path, kind) {
         }
         if (bottomThird)
             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);
+        othersBlock(layout, others, height - pad - extraH0 + thirdBlock + 6, width, pad, ow, OH, v, road, boxes, texts);
         texts.push(...headings(v, o, width, pad, poster));
         return finish({ width, height, boxes, links: orderLinks(links), texts, extras, detail, vertical, road, path, fit: fitNow, notes: anyNotes, markScores, markCols, tags: tagsOn, codes: codesOn, variant: V, em: { full: longest / 13, abbr: longestAbbr / 13, tag: tagsOn ? Math.max(...layout.ties.flatMap((t) => [tagOf(t, 0), tagOf(t, 1)]).map((x) => boldWidth(x, 1))) : 0 } });
     }
@@ -531,7 +536,7 @@ function planBracket(layout, o, v, size, vertical, ctx, road, path, kind) {
     const bandCount = halves ? 2 * bandsPerSide : nc + (champ ? 1 : 0);
     others = othersOf(layout);
     ow = Math.min(W0 - 2 * pad, 150);
-    const othersV = othersHeight(others.length, W0, pad, ow, OTHER_H);
+    const othersV = othersHeight(others.length, W0, pad, ow, OH);
     // 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 = V === "columns" ? Math.max(h, finalH) : detail === "mark" ? Math.max(h, 52) : h;
@@ -664,7 +669,7 @@ function planBracket(layout, o, v, size, vertical, ctx, road, path, kind) {
     }
     if (bottomThird)
         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);
+    othersBlock(layout, others, totalT - pad + thirdBlockV + 6, W0, pad, ow, OH, v, road, boxes, texts);
     texts.push(...headings(v, o, W0, pad, poster));
     return finish({ width: W0, height, boxes, links: orderLinks(links), texts, extras, detail, vertical, road, path, fit: fitNow, notes: anyNotes, markScores, markCols, tags: tagsOn, codes: codesOn, variant: V, em: { full: longest / 13, abbr: longestAbbr / 13, tag: tagsOn ? Math.max(...layout.ties.flatMap((t) => [tagOf(t, 0), tagOf(t, 1)]).map((x) => boldWidth(x, 1))) : 0 } });
 }
@@ -868,7 +873,10 @@ function othersBlock(layout, list, y0, width, pad, ow, oh, v, road, boxes, texts
         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, road, v.words.other, width / 2, y0 + 12, "middle"));
+    const stages = new Set(list.map((i) => layout.ties[i].stage ?? "other"));
+    const w = v.words;
+    const heading = stages.size === 1 && stages.has("repechage") ? w.judoRepechage : stages.size === 1 && stages.has("bronze") ? w.judoBronze : [...stages].every((x) => x === "repechage" || x === "bronze") ? w.judoRepechageBronze : w.other;
+    texts.push(label(v, road, heading, 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 });
@@ -932,7 +940,7 @@ function drawBox(p, plan, o, v, ctx, linked, side) {
         const withScore = plan.markScores && scoresOn && r.score !== null;
         const tags = [0, 1].map((k) => (plan.tags ? tagOf(tie, k) : ""));
         const tagH = tags.some((t) => t !== "") ? 12 : 0;
-        const scoreOf = (k) => (withScore && r.score ? v.number(r.score[k]) : "");
+        const scoreOf = (k) => (withScore ? sideScore(tie, k, v) : "");
         const pensOf = (k) => (withScore && r.pens ? `(${v.number(r.pens[k])})` : "");
         const hasPens = withScore && r.pens !== null;
         const lay = (m) => {
@@ -1028,7 +1036,13 @@ function drawBox(p, plan, o, v, ctx, linked, side) {
                 rowParts.push(`<rect class="tb-tagbox" x="${num(tx)}" y="${num(cy - (tf + 4) / 2)}" width="${num(tw)}" height="${num(tf + 4)}" rx="${num((tf + 4) / 2)}"/><text class="tb-tag" x="${num(tx + tw / 2)}" y="${num(cy + tf * 0.35)}" font-size="${num(tf)}" text-anchor="middle">${esc(tag)}</text>`);
                 tx += tw + 3;
             }
-            const score = scoresOn && r.score ? v.number(r.score[k]) : "";
+            const score = scoresOn ? sideScore(tie, k, v) : "";
+            // A judo contest: a bar at the row's edge in the colour of the side (the first is white, the second blue) and its shido cards beside the score.
+            if (tie.judo)
+                rowParts.push(`<rect class="${k === 0 ? "tb-jw" : "tb-jb"}" x="${num(x + 1.5)}" y="${num(cy - rowH * 0.3)}" width="3" height="${num(rowH * 0.6)}" rx="1.5"/>`);
+            const cards = tie.judo && scoresOn ? shidoCards(tie, k) : [];
+            const cardSize = Math.max(5, Math.min(9, rowH * 0.3));
+            const cardsW = cards.length ? cards.length * (cardSize * 0.72 + 2) + 4 : 0;
             const pensText = scoresOn && r.pens ? `(${v.number(r.pens[k])})` : "";
             const bye = p.byes.includes(k);
             const right = x + w - padX;
@@ -1040,7 +1054,8 @@ function drawBox(p, plan, o, v, ctx, linked, side) {
             const byeFits = bye && right - tx - (scoreW + pensW) - (mw(v.words.bye, small2) + 6) - 6 >= mw(`${seed}${nm}`, font);
             const byeText = byeFits ? v.words.bye : "";
             const byeW = byeText ? mw(byeText, small2) : 0;
-            const avail = right - tx - (scoreW + pensW) - (byeW ? byeW + 6 : 0) - 6;
+            const cardsOn = cardsW > 0 && right - tx - (scoreW + pensW) - cardsW - 6 >= 36;
+            const avail = right - tx - (scoreW + pensW) - (byeW ? byeW + 6 : 0) - 6 - (cardsOn ? cardsW : 0);
             // A name that does not fit is set a little smaller before it is cut.
             let nameFont = font;
             while (nameFont > 9.5 && mw(`${seed}${nm}`, nameFont) > avail)
@@ -1049,6 +1064,10 @@ function drawBox(p, plan, o, v, ctx, linked, side) {
             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 + scoreFont * 0.35)}" font-size="${num(scoreFont)}" text-anchor="end" font-variant-numeric="tabular-nums">${esc(score)}</text>`);
+            if (cardsOn) {
+                const cw = cardSize * 0.72;
+                cards.forEach((c, n) => rowParts.push(`<rect class="${c === "r" ? "tb-sh-r" : "tb-sh-y"}" x="${num(right - scoreW - pensW - cardsW + 2 + n * (cw + 2))}" y="${num(cy - cardSize / 2)}" width="${num(cw)}" height="${num(cardSize)}" rx="1"/>`));
+            }
             if (pensText)
                 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)
@@ -1059,7 +1078,7 @@ function drawBox(p, plan, o, v, ctx, linked, side) {
         if (noteH) {
             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>`);
+            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, boldWidth))}</text>`);
         }
     }
     const extra = tieClassOf(o, tie);

package/dist/table.js

@@ -1,5 +1,6 @@
 import { layoutBracket } from "./layout.js";
 import { noteLong } from "./matchup.js";
+import { sideScore } from "./judo-text.js";
 import { fill, voiceOf } from "./locales.js";
 import { localizedLayout } from "./render.js";
 import { roundLabel } from "./rounds.js";
@@ -23,12 +24,12 @@ export function bracketTable(input, options = {}) {
         const text = team ? esc(team.name) : esc(w.tbd);
         return t.winner === k ? `<strong>${text}</strong>` : text;
     };
-    const score = (t) => (t.result.score ? fill(w.scoreText, { a: v.number(t.result.score[0]), b: v.number(t.result.score[1]) }) : "");
+    const score = (t) => (t.result.score ? fill(w.scoreText, { a: sideScore(t, 0, v), b: sideScore(t, 1, v) }) : "");
     // Where a side comes from, in words, when the tie says so: "Loser of A v B".
     const named = (i) => fill(w.tieVs, { a: layout.ties[i].sides[0]?.name ?? w.tbd, b: layout.ties[i].sides[1]?.name ?? w.tbd });
     const origins = (t) => (t.from ?? []).flatMap((s) => (s ? [fill(s.result === "loser" ? w.loserOf : w.winnerOf, { name: named(s.tie) })] : []));
     const rows = order.map((t) => {
-        const roundText = t.third ? w.thirdPlace : t.playIn ? w.playIn : t.round === 0 ? "" : roundLabel(layout, t.round, options.roundNames, v);
+        const roundText = t.third ? w.thirdPlace : t.stage === "repechage" ? w.judoRepechage : t.stage === "bronze" ? w.judoBronze : t.playIn ? w.playIn : t.round === 0 ? "" : roundLabel(layout, t.round, options.roundNames, v);
         const date = dated ? `<td>${esc(v.date(t.date) ?? "")}</td>` : "";
         return `<tr><th scope="row">${esc(roundText)}</th>${date}<td>${name(t, 0)}</td><td>${esc(score(t))}</td><td>${name(t, 1)}</td><td>${esc([...noteLong(t, v), ...origins(t)].join(w.noteJoin))}</td></tr>`;
     });

package/dist/theme.d.ts

@@ -36,7 +36,16 @@ export interface StyleParts {
     bgAuto?: boolean;
     /** The rules of the layouts of their own (slots, shields, conference colours, header tiles, arrows, group cards). */
     layout?: boolean;
+    /** A judo bracket: the white and blue side bars and the shido cards (`--tb-judo-white`, `--tb-judo-blue`, `--tb-shido`, `--tb-hansoku`). */
+    judo?: boolean;
 }
+/** The colours of a judo contest: the white and the blue judogi, the yellow shido card and the red hansoku-make card. */
+export declare const JUDO_COLORS: Readonly<{
+    white: "#ffffff";
+    blue: "#1f4fa8";
+    shido: "#f0c000";
+    hansoku: "#d3302a";
+}>;
 /** The colours of the two halves (conferences) of the layouts that colour them, each with white letters on it: `--tb-conf-a` and `--tb-conf-b`. Both read 5 to 1 or more against white. */
 export declare const CONFERENCE_COLORS: readonly [string, string];
 /** The colours a background says to draw in (`backgroundSvg`'s `ink`): what `styleFor` takes in place of a look's own palette. */

package/dist/theme.js

@@ -10,6 +10,8 @@ export const ROAD_THEMES = Object.freeze({
     poster: { ring: "#f6f1e3", edge: "rgba(0,0,0,.5)", panel: "#1b2766", spine: "#d9b24c" },
 });
 const FONT = 'system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Hiragino Sans", "Yu Gothic UI", "Noto Sans CJK JP", Meiryo, sans-serif';
+/** The colours of a judo contest: the white and the blue judogi, the yellow shido card and the red hansoku-make card. */
+export const JUDO_COLORS = Object.freeze({ white: "#ffffff", blue: "#1f4fa8", shido: "#f0c000", hansoku: "#d3302a" });
 /** The colours of the two halves (conferences) of the layouts that colour them, each with white letters on it: `--tb-conf-a` and `--tb-conf-b`. Both read 5 to 1 or more against white. */
 export const CONFERENCE_COLORS = Object.freeze(["#2457c5", "#b3261e"]);
 /** A palette and a road palette from a background's ink. */
@@ -59,6 +61,9 @@ function rules(p, r, poster, withFont, parts, side) {
         const [ca, cb] = CONFERENCE_COLORS;
         list.push([[".tb-slot"], `fill:${v("plain")};fill-opacity:.55;stroke:${v("edge")};stroke-width:1`], [[".tb-won .tb-slot"], `fill-opacity:.9;stroke:${v("win")};stroke-width:1.6`], [[".tb-lost .tb-slot"], "fill-opacity:.35"], [[".tb-emptybar"], `fill:${v("plain")};opacity:.8`], [[".tb-seed"], "font-variant-numeric:tabular-nums"], [[".tb-seedn"], `fill:${v("muted")};opacity:.85`], [[".tb-shield"], `fill:none;stroke:${v("edge")};stroke-width:1.4`], [[".tb-won .tb-shield"], `stroke:${v("win")};stroke-width:2.2`], [[".tb-shield.tb-empty"], `fill:${v("plain")};fill-opacity:.5`], [[".tb-vs", ".tb-code"], `fill:${v("muted")};font-weight:700`], [[".tb-c0 .tb-box"], `stroke:var(--tb-conf-a, ${ca});stroke-width:1.6`], [[".tb-c1 .tb-box"], `stroke:var(--tb-conf-b, ${cb});stroke-width:1.6`], [[".tb-atag"], `fill:${v("ink")}`], [[".tb-atag-t"], `fill:${v("bg")}`], [[".tb-c0 .tb-atag"], `fill:var(--tb-conf-a, ${ca})`], [[".tb-c1 .tb-atag"], `fill:var(--tb-conf-b, ${cb})`], [[".tb-c0 .tb-atag-t", ".tb-c1 .tb-atag-t"], "fill:#fff"], [[".tb-head"], `fill:${rv("panel", "panel")}`], [[".tb-head.tb-c0"], `fill:var(--tb-conf-a, ${ca})`], [[".tb-head.tb-c1"], `fill:var(--tb-conf-b, ${cb})`], [[".tb-head-t"], `fill:${v("ink")};font-weight:800`], [[".tb-head.tb-c0 + .tb-head-t", ".tb-head.tb-c1 + .tb-head-t"], "fill:#fff"], [[".tb-arrow"], `stroke:${v("line")};stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round`], [[".tb-arrow-loser"], "stroke-dasharray:5 4"], [[".tb-arrowhead"], `fill:${v("line")};stroke:none`], [[".tb-gcard"], `fill:${v("box")};stroke:${v("edge")};stroke-width:1`], [[".tb-gtile"], `fill:var(--tb-conf-a, ${ca})`], [[".tb-gtile-t"], "fill:#fff;font-weight:800"], [[".tb-ghead"], `fill:${v("muted")};font-weight:700`], [[".tb-gcell"], `fill:${v("ink")};font-variant-numeric:tabular-nums`], [[".tb-gcell-p"], "font-weight:800"], [[".tb-gname"], `fill:${v("ink")};font-weight:700`], [[".tb-qual"], `fill:${v("win")};fill-opacity:.16`], [[".tb-gsep"], `stroke:${v("edge")};stroke-width:1;stroke-opacity:.6`]);
     }
+    if (parts.judo === true) {
+        list.push([[".tb-jw"], `fill:var(--tb-judo-white, ${JUDO_COLORS.white});stroke:${v("edge")};stroke-width:.8`], [[".tb-jb"], `fill:var(--tb-judo-blue, ${JUDO_COLORS.blue});stroke:${v("edge")};stroke-width:.8`], [[".tb-sh-y"], `fill:var(--tb-shido, ${JUDO_COLORS.shido});stroke:rgba(0,0,0,.35);stroke-width:.6`], [[".tb-sh-r"], `fill:var(--tb-hansoku, ${JUDO_COLORS.hansoku});stroke:rgba(0,0,0,.35);stroke-width:.6`]);
+    }
     if (parts.follow === true) {
         list.push([[".tb-tie"], "opacity:.4"], [[".tb-tie.tb-on-path"], "opacity:1"], [[".tb-on-path .tb-box"], `stroke:${v("win")};stroke-width:2.2`], [[".tb-line"], "stroke-opacity:.25"], [[".tb-line.tb-path"], `stroke:${v("win")};stroke-width:4.5;stroke-opacity:1;stroke-linecap:round;stroke-dasharray:.1 9`]);
     }

package/dist/types.d.ts

@@ -2,6 +2,7 @@
  * The types of Taisen: what goes in (teams and matchups), what the layout works out (ties, rounds, halves) and what
  * the drawing takes as options. Nothing here runs; the functions are in `matchup.ts`, `layout.ts` and `render.ts`.
  */
+import type { JudoOutcome, JudoResult } from "./judo-model.ts";
 /** A side's key: a team code, a franchise id, anything that is unique within one bracket. */
 export type SideId = string | number;
 /** A side of a tie: a team, with the marks and labels a drawing needs. Only `id` and `name` are required. */
@@ -106,8 +107,13 @@ export interface Matchup {
     walkover?: boolean;
     /** This is the third-place match: it leads nowhere and is drawn apart. */
     third?: boolean;
-    /** `"play-in"`: a game of a play-in (the NBA's) that is outside the rounds of the tree: its winner (and loser, see `feeds`) goes on to a place the tree's ties name. Drawn by the `playin` layout and, apart, under the other layouts' trees. */
-    stage?: "play-in";
+    /**
+     * `"play-in"`: a game of a play-in (the NBA's) that is outside the rounds of the tree: its winner (and loser, see `feeds`) goes on to a place the tree's ties name. Drawn by the `playin` layout and, apart, under the other layouts' trees.
+     * `"repechage"` and `"bronze"`: a judo repechage contest and a bronze medal contest, fed by the losers of the tree's ties (`judoBracket` writes them); drawn apart under the tree.
+     */
+    stage?: "play-in" | "repechage" | "bronze";
+    /** A judo contest's scores: ippon, waza-ari, yuko, shido, hansoku-make, golden score and time. The first side is white, the second blue. The score, the winner and the notes come from it; see `judoOutcome`. */
+    judo?: JudoResult;
     /** The side playing at home (0 or 1), for the `at` wording of the `columns` layout: the home side is drawn second, after "AT". Left out, the second side. */
     home?: 0 | 1;
     note?: string;
@@ -151,8 +157,12 @@ export interface Tie {
     seeds?: readonly [string | number | null, string | number | null];
     /** Where each side comes from, when the matchup's `feeds` name it: another tie's winner or its loser. Left out for a tie that says nothing of the kind. */
     from?: readonly [Source | null, Source | null];
-    /** The tie is a play-in game (`Matchup.stage`). */
+    /** The tie is a play-in game, a judo repechage contest or a bronze medal contest (`Matchup.stage`). */
     playIn?: boolean;
+    /** The tie's `Matchup.stage`, when it has one. */
+    stage?: "play-in" | "repechage" | "bronze";
+    /** A judo contest's result, checked and worked out (`Matchup.judo`). */
+    judo?: JudoOutcome;
     /** The side at home (`Matchup.home`), when given. */
     home?: 0 | 1;
 }
@@ -342,6 +352,46 @@ export interface Words {
     /** `{name}`: a side that is the winner or loser of another tie, in a sentence or a table: "Loser of {name}". */
     winnerOf: string;
     loserOf: string;
+    /** Judo. The marks of the scores on a box (ippon, waza-ari, yuko), the same written out, and how a contest was won. */
+    judoIppon: string;
+    judoWazaAri: string;
+    judoYuko: string;
+    judoIpponLong: string;
+    judoWazaAriLong: string;
+    judoYukoLong: string;
+    judoMethodIppon: string;
+    judoMethodAwasete: string;
+    judoMethodScore: string;
+    judoMethodHansoku: string;
+    judoMethodFusen: string;
+    judoMethodKiken: string;
+    /** Golden score, short and in a sentence. */
+    judoGolden: string;
+    judoGoldenLong: string;
+    /** `{t}`: the contest time ("3:42"). */
+    judoTime: string;
+    /** `{name}`, `{n}`: a side's shido ("Kenji Nakamura: 2 shido"). */
+    judoShidoOf: string;
+    /** `{a}`, `{b}`: the sides' shido in a short note. */
+    judoShidoShort: string;
+    /** The headings over the repechage contests and the bronze medal contests, alone and together; the sides' colours. */
+    judoRepechage: string;
+    judoBronze: string;
+    judoRepechageBronze: string;
+    judoWhite: string;
+    judoBlue: string;
+    /** `{sex}`, `{w}` (the number of kilograms, no sign): a weight category up to and including that weight ("Men -66 kg"), one over it ("Women +78 kg"), and the two sexes' words. */
+    judoWeightClass: string;
+    judoWeightOver: string;
+    judoMen: string;
+    judoWomen: string;
+    /** The scoreboard of a contest: the osaekomi timer's label, the shido row's, a mat (`{n}`), a contest (`{n}`), the coach (`{name}`), and the drawing's default title. */
+    judoOsaekomi: string;
+    judoShido: string;
+    judoMat: string;
+    judoContest: string;
+    judoCoach: string;
+    judoBoardTitle: string;
 }
 /** A language: its words, the names of the rounds (by their English names), and the tag `Intl` formats numbers and dates for. */
 export interface Locale {
@@ -352,6 +402,7 @@ export interface Locale {
     /** Round names by their English name: `{ "Round of 16": "Huitièmes de finale" }`. A round with no entry keeps its name (or `roundOf`). */
     rounds: Readonly<Record<string, string>>;
 }
+export type { JudoMethod, JudoOutcome, JudoResult, JudoSide } from "./judo-model.ts";
 export type ThemeName = "auto" | "light" | "dark" | "poster" | "none";
 export type SizeName = "wide" | "square" | "phone" | "card";
 export interface Size {
@@ -434,6 +485,8 @@ export interface DrawOptions extends LayoutOptions {
     standings?: "points" | "record";
     /** In the `groups` layout, how many teams of each group go through: their rows are marked. Default 0, none. */
     qualify?: number;
+    /** For `bracketStyle`: include the judo rules (the white and blue side bars, the shido cards). `drawBracket` adds them by itself when a tie has judo scores. */
+    judo?: boolean;
     /** Write the `<style>` into the drawing. Default true; false leaves it out, for a second drawing of a page that shares the first's (`styleScope`, `bracketStyle`). */
     style?: boolean;
     /** A class that carries this drawing's rules in place of its own: two drawings with the same `styleScope` take their colours from one `<style>`, and the second can leave it out (`style: false`). A word of letters, digits, `-` and `_`. */

package/dist/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "0.6.1";
+export declare const VERSION = "0.8.0";

package/dist/version.js

@@ -1 +1 @@
-export const VERSION = "0.6.1";
+export const VERSION = "0.8.0";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@johnmorrisdotca/taisen-brackets",
-  "version": "0.6.1",
+  "version": "0.8.0",
   "description": "Taisen Brackets 対戦, knockout brackets as SVG: from a list of ties (games, best-of series, two legs, replays, byes, a third-place match) it works out the rounds and halves and draws the bracket with the halves meeting at the final, or left to right, wide, square, as a tall card or for a phone, in a classic or a road look (large round flags, big scores, a team's dotted path, a link on every box), in light, dark or a gold-on-navy poster look, in eight layouts (the tree, rows, shields, a score-update card, tall columns, the NBA's play-in, a series card and group tables), on one of twenty-five poster backgrounds (the playing surfaces of five sports among them) or your own, with each team's logo or round flag, the champion in the centre, and an accessible table; and the road to the final of either finalist. NHL, NBA, MLB, NFL, CFL, MLS and World Cup formats by era, in English, French, Japanese, Spanish and German. Zero dependencies.",
   "keywords": [
     "bracket",