@johnmorrisdotca/taisen-brackets 0.4.0 → 0.5.0

package/dist/text.js

@@ -29,13 +29,13 @@ export function textWidth(text, size) {
     return em * size;
 }
 /** The text cut to fit a width, with an ellipsis where it was cut. */
-export function fit(text, size, width) {
-    if (textWidth(text, size) <= width)
+export function fit(text, size, width, measure = textWidth) {
+    if (measure(text, size) <= width)
         return text;
     const chars = [...text];
-    while (chars.length > 1 && textWidth(`${chars.join("")}…`, size) > width)
+    while (chars.length > 1 && measure(`${chars.join("")}…`, size) > width)
         chars.pop();
-    return chars.length <= 1 && textWidth(text, size) > width * 2 ? "…" : `${chars.join("").trimEnd()}…`;
+    return chars.length <= 1 && measure(text, size) > width * 2 ? "…" : `${chars.join("").trimEnd()}…`;
 }
 /** A short name for a small box: the initials of a name of several words ("NYR"), else its first three letters; capitals. */
 export function abbreviate(name) {

package/dist/theme.d.ts

@@ -1,3 +1,4 @@
+import type { BackgroundInk } from "./family-backgrounds.ts";
 import type { ThemeName } from "./types.ts";
 /** The colours of one look. Each is the fallback of a CSS custom property of the same name: `--tb-ink` and so on. */
 export interface Palette {
@@ -31,10 +32,17 @@ export interface StyleParts {
     links?: boolean;
     /** A team's path is highlighted: the other ties are quieter and the path is dotted. */
     follow?: boolean;
+    /** A background with a light and a dark picture in one drawing: the one that does not fit the look is hidden. */
+    bgAuto?: boolean;
+}
+/** The colours a background says to draw in (`backgroundSvg`'s `ink`): what `styleFor` takes in place of a look's own palette. */
+export interface BackgroundInks {
+    light?: BackgroundInk;
+    dark?: BackgroundInk;
 }
 /**
  * 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. `parts` adds the rules the road look, the road chart, links and a highlighted path need.
  */
-export declare function styleFor(scope: string, theme: Exclude<ThemeName, "none">, parts?: StyleParts): string;
+export declare function styleFor(scope: string, theme: Exclude<ThemeName, "none">, parts?: StyleParts, inks?: BackgroundInks): string;

package/dist/theme.js

@@ -10,8 +10,15 @@ 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';
+/** 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, r, poster, withFont, parts) {
+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;
@@ -38,7 +45,7 @@ function rules(p, r, poster, withFont, parts) {
         [[".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`]);
+        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`]);
@@ -52,6 +59,10 @@ function rules(p, r, poster, withFont, parts) {
     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;
@@ -62,16 +73,20 @@ const write = (scope, list, before = "") => list.map(([sel, body]) => `${sel.map
  * `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. `parts` adds the rules the road look, the road chart, links and a highlighted path need.
  */
-export function styleFor(scope, theme, parts = {}) {
+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, ROAD_THEMES.light, false, true, parts));
+        return write(scope, rules(lp, lr, false, true, parts, "light"));
     if (theme === "dark")
-        return write(scope, rules(THEMES.dark, ROAD_THEMES.dark, false, true, parts));
+        return write(scope, rules(dp, dr, false, true, parts, "dark"));
     if (theme === "poster")
-        return write(scope, rules(THEMES.poster, ROAD_THEMES.poster, true, true, parts));
-    const dark = rules(THEMES.dark, ROAD_THEMES.dark, false, false, parts);
+        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, ROAD_THEMES.light, false, true, parts)),
+        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).
@@ -100,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 {
@@ -134,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";
@@ -343,6 +349,29 @@ 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, `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 | {
@@ -354,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… */
@@ -368,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";
@@ -394,6 +431,16 @@ export interface DrawOptions extends LayoutOptions {
      * 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.

package/dist/version.d.ts

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

package/dist/version.js

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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@johnmorrisdotca/taisen-brackets",
-  "version": "0.4.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, 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.",
+  "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",
@@ -67,6 +67,11 @@
       "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": [
@@ -93,6 +98,7 @@
     "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": {