@johnmorrisdotca/taisen-brackets 0.3.0 → 0.5.0

package/dist/theme.js

@@ -4,10 +4,24 @@ export const THEMES = Object.freeze({
     dark: { bg: "#141614", ink: "#ece8dc", muted: "#9aa095", line: "#6c7168", box: "#1e211d", edge: "#3b403a", win: "#e0705a", gold: "#e0b43b", plain: "#3b403a" },
     poster: { bg: "#0a1130", ink: "#f6f1e3", muted: "#a9b2d3", line: "#d9b24c", box: "#111b47", edge: "#8e7632", win: "#f0c64a", gold: "#f0c64a", plain: "#26336b" },
 });
+export const ROAD_THEMES = Object.freeze({
+    light: { ring: "#ffffff", edge: "rgba(0,0,0,.3)", panel: "#e7e3d6", spine: "#b9b39f" },
+    dark: { ring: "#e9ece6", edge: "rgba(0,0,0,.6)", panel: "#252b28", spine: "#4a524d" },
+    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';
+/** A palette and a road palette from a background's ink. */
+function fromInk(ink) {
+    return [
+        { bg: ink.base, ink: ink.text, muted: ink.muted, line: ink.line, box: ink.box, edge: ink.edge, win: ink.accent, gold: ink.accent, plain: ink.plain },
+        { ring: ink.ring, edge: ink.dark ? "rgba(0,0,0,.55)" : "rgba(0,0,0,.35)", panel: ink.panel, spine: ink.spine },
+    ];
+}
 /** The rules for one palette, each colour read from its custom property with the palette's value as the fallback. */
-function rules(p, poster, withFont) {
+function rules(p, r, poster, withFont, parts, side) {
     const v = (name) => `var(--tb-${name}, ${p[name]})`;
+    const rv = (name, css) => `var(--tb-${css}, ${r[name]})`;
+    const road = parts.road === true || parts.chart === true;
     const list = [
         [[".tb-bg"], `fill:${v("bg")}`],
         [[".tb-line"], `stroke:${v("line")};stroke-width:${poster ? 1.6 : 1.3};fill:none;stroke-opacity:${poster ? 0.95 : 0.8}`],
@@ -17,17 +31,38 @@ function rules(p, poster, withFont) {
         [[".tb-muted", ".tb-round", ".tb-sub"], `fill:${v("muted")}`],
         [[".tb-won .tb-name", ".tb-won .tb-score"], "font-weight:700"],
         [[".tb-lost .tb-name", ".tb-lost .tb-score", ".tb-lost .tb-mark"], "opacity:.55"],
-        [[".tb-ring"], `fill:none;stroke:${v("edge")};stroke-width:1`],
-        [[".tb-won .tb-ring"], `stroke:${v("win")};stroke-width:2`],
+        road
+            ? [[".tb-ring"], `fill:none;stroke:${rv("ring", "mark-ring")}`]
+            : [[".tb-ring"], `fill:none;stroke:${v("edge")};stroke-width:1`],
+        ...(road ? [] : [[[".tb-won .tb-ring"], `stroke:${v("win")};stroke-width:2`]]),
         [[".tb-plain"], `fill:${v("plain")}`],
         [[".tb-initials"], `fill:${v("ink")}`],
         [[".tb-half"], `fill:${v("ink")}`],
         [[".tb-gold"], `fill:${v("gold")}`],
         [[".tb-emblem"], `color:${v("ink")}`],
-        [[".tb-champ .tb-ring"], `stroke:${v("gold")};stroke-width:3`],
+        road ? [[".tb-champ .tb-ring"], `stroke:${v("gold")}`] : [[".tb-champ .tb-ring"], `stroke:${v("gold")};stroke-width:3`],
         [[".tb-champ-label"], `fill:${v("gold")}`],
         [[".tb-halo"], `paint-order:stroke;stroke:${v("bg")};stroke-width:4px;stroke-linejoin:round`],
     ];
+    if (road) {
+        list.push([[".tb-edge"], `fill:none;stroke:${rv("edge", "mark-edge")}`], [[".tb-lost .tb-ring-r", ".tb-lost .tb-edge"], "opacity:.55"], [[".tb-panel"], `fill:${rv("panel", "panel")}`], [[".tb-lab"], `fill:${v("ink")};font-weight:700`], [[".tb-spine"], `stroke:${rv("spine", "spine")};fill:none;stroke-linecap:round`], [[".tb-tagbox"], `fill:${rv("panel", "panel")}`], [[".tb-tag"], `fill:${v("ink")};font-weight:700`], [[".tb-code", ".tb-vs"], `fill:${v("muted")};font-weight:700`]);
+    }
+    if (parts.road === true) {
+        list.push([[".tb-name"], "font-weight:700"], [[".tb-score"], "font-weight:800"], [[".tb-lost .tb-score"], `fill:${v("muted")};opacity:1`], [[".tb-line"], `stroke-linecap:round;stroke-linejoin:round;stroke-width:${poster ? 2 : 1.8};stroke-opacity:.55`]);
+    }
+    if (parts.chart === true) {
+        list.push([[".tb-r-t"], `fill:${v("ink")};font-weight:800`], [[".tb-r-s", ".tb-r-e", ".tb-r-sub", ".tb-r-code", ".tb-r-vs", ".tb-r-dash"], `fill:${v("muted")};font-weight:700`], [[".tb-r-name", ".tb-r-n"], `fill:${v("ink")};font-weight:800`], [[".tb-r-n.tb-r-low"], `fill:${v("muted")}`], [[".tb-r-dim"], "opacity:.5"], [["text"], "font-variant-numeric:tabular-nums"]);
+    }
+    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`]);
+    }
+    if (parts.links === true) {
+        list.push([[".tb-link"], "cursor:pointer;outline:none"], [[".tb-link:hover .tb-box", ".tb-link:focus-visible .tb-box"], `stroke:${v("win")};stroke-width:2.5`], [[".tb-link:hover .tb-name", ".tb-link:focus-visible .tb-name"], "text-decoration:underline"], [[".tb-link:focus-visible"], `outline:2px solid ${v("win")};outline-offset:2px`]);
+    }
+    if (parts.bgAuto === true)
+        list.push(side === "dark" ? [[".tb-bgl"], "display:none"] : [[".tb-bgd"], "display:none"]);
+    if (parts.bgAuto === true && side === "dark")
+        list.push([[".tb-bgd"], "display:inline"]);
     if (withFont)
         list.push([["text"], `font-family:var(--tb-font, ${FONT})`]);
     return list;
@@ -36,18 +71,22 @@ const write = (scope, list, before = "") => list.map(([sel, body]) => `${sel.map
 /**
  * The `<style>` text of a drawing. `auto` is the light look and, under `prefers-color-scheme: dark` or a page that says
  * `data-theme="dark"` on `<html>`, the dark one; `light`, `dark` and `poster` are one look always. Every colour can be
- * set from the page with a `--tb-*` custom property.
+ * set from the page with a `--tb-*` custom property. `parts` adds the rules the road look, the road chart, links and a highlighted path need.
  */
-export function styleFor(scope, theme) {
+export function styleFor(scope, theme, parts = {}, inks = {}) {
+    // A look takes the ink of the picture drawn for it; a picture asked for in the other variant (`background.theme`) gives its ink to both.
+    const only = inks.light ?? inks.dark;
+    const [lp, lr] = (inks.light ?? only) ? fromInk((inks.light ?? only)) : [THEMES.light, ROAD_THEMES.light];
+    const [dp, dr] = (inks.dark ?? only) ? fromInk((inks.dark ?? only)) : [THEMES.dark, ROAD_THEMES.dark];
     if (theme === "light")
-        return write(scope, rules(THEMES.light, false, true));
+        return write(scope, rules(lp, lr, false, true, parts, "light"));
     if (theme === "dark")
-        return write(scope, rules(THEMES.dark, false, true));
+        return write(scope, rules(dp, dr, false, true, parts, "dark"));
     if (theme === "poster")
-        return write(scope, rules(THEMES.poster, true, true));
-    const dark = rules(THEMES.dark, false, false);
+        return write(scope, only ? rules(dp, dr, true, true, parts, "dark") : rules(THEMES.poster, ROAD_THEMES.poster, true, true, parts, "dark"));
+    const dark = rules(dp, dr, false, false, parts, "dark");
     return [
-        write(scope, rules(THEMES.light, false, true)),
+        write(scope, rules(lp, lr, false, true, parts, "light")),
         `@media (prefers-color-scheme: dark){\n${write(scope, dark, ':root:not([data-theme="light"]) ')}\n}`,
         write(scope, dark, ':root[data-theme="dark"] '),
     ].join("\n");

package/dist/types.d.ts

@@ -12,6 +12,8 @@ export interface Team {
     abbr?: string;
     /** The seed, shown beside the name when `seeds` is on. */
     seed?: number;
+    /** A tag for the road look's seed tags (`C1`, `WC2`, `M3`): written small beside the mark when `seeds` is on, in place of the number. A tie's `seeds` win over it. */
+    tag?: string;
     /**
      * The team's mark: a logo or a flag. Either the address of an image (`https://`, `data:image/…`, or a relative
      * path) or inline SVG markup (`<svg …>`; a round flag from `@johnmorrisdotca/hata` goes here as it is).
@@ -25,6 +27,11 @@ export interface Team {
     names?: Readonly<Record<string, string>>;
     /** An ISO 3166 region code (`DE`), for `countryName` and a `teamName` that uses it. */
     region?: string;
+    /**
+     * A country code (`ca`, `GB-ENG`) for a round flag drawn by the `flags` option's renderer (`@johnmorrisdotca/hata` has one). With no
+     * renderer, or one that has no flag for the code, the team's `mark` is drawn, or its initials: it never throws.
+     */
+    flag?: string;
 }
 /** One game of a tie: a match of a knockout, a game of a series, a leg of an aggregate, a replay. */
 export interface Game {
@@ -95,6 +102,8 @@ export interface Matchup {
     /** This is the third-place match: it leads nowhere and is drawn apart. */
     third?: boolean;
     note?: string;
+    /** The seed tags of the two sides for this tie (`["C1", "WC2"]`), written beside the marks in the road look when `seeds` is on; a side's `Team.tag` is used where this has none. */
+    seeds?: readonly [string | number | null, string | number | null];
 }
 /** What a tie came to, worked out from its games. */
 export interface Result {
@@ -129,6 +138,8 @@ export interface Tie {
     third: boolean;
     walkover: boolean;
     note: string | null;
+    /** The seed tags given for the tie's sides (`Matchup.seeds`). */
+    seeds?: readonly [string | number | null, string | number | null];
 }
 /** Where the layout put a tie. */
 export type Place = "l" | "r" | "f" | "o";
@@ -259,6 +270,33 @@ export interface Words {
     columnDate: string;
     /** The `<title>` of a drawing with no `title` option. */
     title: string;
+    /** The road-to-the-final chart (`roadToFinal`): its title, the "v" between two finalists, the group stage, FT, AET, `{a}`, `{b}` the shoot-out, and the results. */
+    roadTitle: string;
+    roadVs: string;
+    roadGroup: string;
+    roadFt: string;
+    roadAet: string;
+    roadPens: string;
+    roadWon: string;
+    roadLost: string;
+    roadDrew: string;
+    /** The names of the two rounds a road names one match of (the other rounds come from the round names of the language). */
+    roadQuarterFinal: string;
+    roadSemiFinal: string;
+    /** The road's table: the headings, the caption (`{a}`, `{b}`), the chart's name (`{a}`, `{b}`, `{title}`), the summary (`{a}`, `{b}`, `{an}`, `{bn}`) and its sentences. */
+    roadTableTeam: string;
+    roadTableOpponent: string;
+    roadTableScore: string;
+    roadTableDecided: string;
+    roadTableResult: string;
+    roadCaption: string;
+    roadName: string;
+    roadSummary: string;
+    /** `{a}`, `{b}`, `{score}`, `{how}`. */
+    roadFinal: string;
+    /** `{name}`. */
+    roadChampion: string;
+    roadToPlay: 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 {
@@ -270,7 +308,7 @@ export interface Locale {
     rounds: Readonly<Record<string, string>>;
 }
 export type ThemeName = "auto" | "light" | "dark" | "poster" | "none";
-export type SizeName = "wide" | "square" | "phone";
+export type SizeName = "wide" | "square" | "phone" | "card";
 export interface Size {
     /** The width of the drawing, in pixels. */
     width: number;
@@ -279,6 +317,24 @@ export interface Size {
 }
 /** How much a box shows: both names and scores, an abbreviation and the score, or only the marks. */
 export type Detail = "auto" | "full" | "compact" | "mark";
+/** How a flag is framed: `round` in a circle, `square`, or `rect` in its own proportions. */
+export type FlagShape = "round" | "square" | "rect";
+/** What a drawing asks a `flags` renderer for. */
+export interface FlagRequest {
+    shape: FlagShape;
+    /** Width and height in pixels (the diameter, for a round flag). */
+    size: number;
+    /** `light` or `dark` for a drawing in that look (`poster` is dark); `inherit` for `auto` and `none`. */
+    theme: "inherit" | "light" | "dark";
+}
+/**
+ * A function from a country code and a request to an SVG string, or `null` or `undefined` for a code it has no flag for. It must be
+ * synchronous: a drawing is a pure function of its options. `@johnmorrisdotca/hata`'s `flag()` is asynchronous, so load the flags first
+ * (`await flag(code, { shape: "round" })` for each code) and pass `(code) => loaded[code]`.
+ */
+export type FlagRenderer = (code: string, request: FlagRequest) => string | null | undefined;
+/** How a bracket is drawn: `classic` (the default) or `road`, with large round marks, big scores and a dotted path. */
+export type Look = "classic" | "road";
 /** How an emblem is drawn; the names are those of `@johnmorrisdotca/dougu-sports`. */
 export type EmblemStyle = "metal" | "line" | "color";
 /** What `drawBracket` asks an `emblems` renderer for. */
@@ -293,8 +349,31 @@ export interface EmblemRequest {
 }
 /** A function from an emblem id and a request to an SVG string; `renderEmblem` of `@johnmorrisdotca/dougu-sports/emblems` is one. */
 export type EmblemRenderer = (id: string, options: EmblemRequest) => string;
+/** A background preset's name. */
+export type { BackgroundPresetName } from "./family-backgrounds.ts";
+import type { BackgroundPresetName } from "./family-backgrounds.ts";
+/** A preset, tuned: your own colours (hex or `rgb()`, the first two the ground), the gradient's angle, how strong the pattern is (0 to 1, default 0.6), a seed for the scattered parts, and which of its two variants. */
+export interface BackgroundOptions {
+    /** Default `midnight`. */
+    preset?: BackgroundPresetName;
+    colors?: readonly string[];
+    angle?: number;
+    intensity?: number;
+    seed?: number;
+    /** `light` or `dark`: the variant to draw. By default the one of the drawing's look. */
+    theme?: "light" | "dark";
+}
+/** Your own picture as the background: an image address (http(s), relative or `data:image/…`; anything else is refused), laid under a veil so the text reads. */
+export interface BackgroundImageOptions {
+    image: string;
+    /** `cover` (the default) fills the drawing; `contain` shows all of the picture. */
+    fit?: "cover" | "contain";
+    /** How dark (or, in a light look, how pale) the veil is, 0 to 1. Default 0.5. */
+    dim?: number;
+    theme?: "light" | "dark";
+}
 export interface DrawOptions extends LayoutOptions {
-    /** `wide` 1200 by 675, `square` 1080 by 1080, `phone` 390 wide and as tall as it needs; or a size of your own. Default `wide`. */
+    /** `wide` 1200 by 675, `square` 1080 by 1080, `card` 1080 by 1350 (a tall post), `phone` 390 wide and as tall as it needs; or a size of your own. Default `wide`. */
     size?: SizeName | {
         width: number;
         height?: number | null;
@@ -304,8 +383,16 @@ export interface DrawOptions extends LayoutOptions {
     detail?: Detail;
     /** `auto` follows the page's light or dark; `poster` is dark with gold lines; `none` writes no style, for your own CSS. Default `auto`. */
     theme?: ThemeName;
-    /** Draw a background. Default true; false for a transparent drawing. */
-    background?: boolean;
+    /**
+     * The background. `true` (the default) is the look's plain colour and `false` a transparent drawing. A preset's name (`"midnight"`, `"ice"`, see `BACKGROUND_PRESETS`) draws that
+     * poster background in the look's light or dark variant (`auto` draws both and shows the one that fits the page), and the text, lines, boxes and marks take the colours that
+     * read over it. An object tunes a preset (`{ preset, colors, angle, intensity, seed }`) or draws your own picture (`{ image, fit, dim }`).
+     */
+    background?: boolean | BackgroundPresetName | BackgroundOptions | BackgroundImageOptions;
+    /** In the road look, write a small `vs` between the two marks of a box of marks alone. Default false. */
+    vs?: boolean;
+    /** In the road look, write each team's three-letter code under its mark in a box of marks alone. Default false for a bracket (a chart's `codes` is on by default). */
+    codes?: boolean;
     title?: string;
     subtitle?: string;
     /** Names of the rounds, first round first (or just the last ones). Default: Final, Semi-finals, Quarter-finals, Round of 16… */
@@ -318,7 +405,7 @@ export interface DrawOptions extends LayoutOptions {
     roundLabels?: boolean;
     /** Show the scores. Default true. */
     scores?: boolean;
-    /** Show seeds before names. Default false. */
+    /** Show seeds: the number before the name in the classic look, and in the road look a small tag (`C1`, `WC2`: `Matchup.seeds`, else `Team.tag`, else `Team.seed`) beside each mark. Default false. */
     seeds?: boolean;
     /** `round` (the default), `square`, or `none` (names only). */
     markShape?: "round" | "square" | "none";
@@ -339,6 +426,34 @@ export interface DrawOptions extends LayoutOptions {
     emblemStyle?: EmblemStyle;
     /** A colour for the emblem's main part (a hex colour or `rgb()`), passed to the renderer as `tint`. */
     emblemTint?: string;
+    /**
+     * Draws the flag a team's `flag` code names: a synchronous function from a code and `{ shape, size, theme }` to an SVG string, such as one
+     * made from `@johnmorrisdotca/hata`. With none, or when it returns nothing for a code, the team's `mark` or its initials are drawn.
+     */
+    flags?: FlagRenderer;
+    /**
+     * The address of the flag a team's `flag` code names, for a flag that is a picture to load (a file on your own server) and not SVG to inline, which can be 80 kB for one flag. Tried where `flags` gives
+     * none; the address must be http(s), relative or `data:image/…`, and is written once as a symbol however many times the flag appears.
+     */
+    flagHref?: (code: string) => string | null | undefined;
+    /**
+     * A class for each tie's group, from the tie: `(tie) => tie.sides.some(inDivision) ? "mine" : "other"`. A word of letters, digits, `-` and `_` is added to the group's classes (anything else is left out),
+     * so that a page's own style can highlight or dim ties: `.mine .tb-box { stroke: … }`. `undefined` or an empty text adds none.
+     */
+    tieClass?: (tie: Tie) => string | null | undefined;
+    /**
+     * `classic` (the default) or `road`: the look of the road-to-the-final chart, with large round marks, big bold scores, the loser quiet, the
+     * rounds named on pills and a dotted path. Every other option works in both.
+     */
+    look?: Look;
+    /**
+     * A link for each tie's box, from the tie and, for a link on one team's row, its side (0 or 1). Called with the tie alone first: an address
+     * makes the whole box a link; when that gives none, each side is asked, and a row with an address is a link of its own. Each is a real
+     * `<a href>` in the SVG with an accessible name; an address that is not http(s), relative or a `#` fragment is refused. `undefined` is no link.
+     */
+    href?: (tie: Tie, side?: 0 | 1) => string | null | undefined;
+    /** The id of a team whose path to the final is drawn as a dotted line in the look's highlight, the rest quieter. */
+    highlightPath?: SideId;
     /** Where the third-place match goes: `below` the final (the default) or `hide`. */
     thirdPlace?: "below" | "hide";
     /** Highlight the side that went through. Default true. */

package/dist/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "0.3.0";
+export declare const VERSION = "0.5.0";

package/dist/version.js

@@ -1 +1 @@
-export const VERSION = "0.3.0";
+export const VERSION = "0.5.0";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@johnmorrisdotca/taisen-brackets",
-  "version": "0.3.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 or for a phone, in light, dark or a gold-on-navy poster look, with each team's logo or round flag, the champion in the centre, and an accessible table. NHL, NBA, MLB, NFL, CFL, MLS and World Cup formats by era, in English, French, Japanese, Spanish and German. Zero dependencies.",
+  "version": "0.5.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, 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",
     "tournament",
@@ -62,6 +62,16 @@
       "types": "./dist/presets-entry.d.ts",
       "import": "./dist/presets-entry.js",
       "default": "./dist/presets-entry.js"
+    },
+    "./road": {
+      "types": "./dist/road-entry.d.ts",
+      "import": "./dist/road-entry.js",
+      "default": "./dist/road-entry.js"
+    },
+    "./backgrounds": {
+      "types": "./dist/backgrounds-entry.d.ts",
+      "import": "./dist/backgrounds-entry.js",
+      "default": "./dist/backgrounds-entry.js"
     }
   },
   "files": [
@@ -88,14 +98,19 @@
     "flags": "node scripts/make-flags.mjs",
     "site": "pnpm build && node scripts/site.mjs",
     "test:demo": "pnpm site && playwright test",
+    "images": "pnpm site && node scripts/screenshots.mjs",
     "screenshots": "pnpm site && node scripts/screenshots.mjs"
   },
   "peerDependencies": {
-    "@johnmorrisdotca/dougu-sports": ">=0.1.0 <1"
+    "@johnmorrisdotca/dougu-sports": ">=0.1.0 <1",
+    "@johnmorrisdotca/hata": ">=1.5.0 <2"
   },
   "peerDependenciesMeta": {
     "@johnmorrisdotca/dougu-sports": {
       "optional": true
+    },
+    "@johnmorrisdotca/hata": {
+      "optional": true
     }
   },
   "devDependencies": {