@johnmorrisdotca/taisen-brackets 0.1.1 → 0.2.1

package/dist/table.js

@@ -1,34 +1,38 @@
 import { layoutBracket } from "./layout.js";
-import { noteParts } from "./matchup.js";
+import { noteLong } from "./matchup.js";
+import { fill, voiceOf } from "./locales.js";
+import { localizedLayout } from "./render.js";
 import { roundLabel } from "./rounds.js";
 import { esc } from "./text.js";
-import { fill, wordsWith } from "./words.js";
 /**
  * The bracket as an HTML table, for a reader the drawing does not serve: one row for every tie, round by round, with the
- * two sides, the score, the winner in bold and a note. It is a plain, valid `<table>` with a caption and header cells.
+ * two sides, the score, the winner in bold, the date where the tie has one (written as the language writes dates) and a note.
+ * It is a plain, valid `<table>` with a caption and header cells, in the language of `locale`.
  */
 export function bracketTable(input, options = {}) {
-    const layout = "ties" in input && "rounds" in input ? input : layoutBracket(input);
-    const words = wordsWith(options.words);
-    const caption = options.caption ?? fill(layout.rounds === 1 ? words.summaryOne : words.summary, { n: layout.teams.length, r: layout.rounds });
+    const v = voiceOf(options);
+    const layout = localizedLayout("ties" in input && "rounds" in input ? input : layoutBracket(input), v);
+    const w = v.words;
+    const caption = options.caption ?? fill(layout.rounds === 1 ? w.summaryOne : w.summary, { n: v.number(layout.teams.length), r: v.number(layout.rounds) });
     const order = layout.ties
         .filter((t) => t.round > 0 || layout.robin.includes(t.index))
         .sort((a, b) => Number(a.third) - Number(b.third) || a.round - b.round || (a.date < b.date ? -1 : a.date > b.date ? 1 : a.index - b.index));
+    const dated = order.some((t) => v.date(t.date) !== null);
     const name = (t, k) => {
         const team = t.sides[k];
-        const text = team ? esc(team.name) : esc(words.tbd);
+        const text = team ? esc(team.name) : esc(w.tbd);
         return t.winner === k ? `<strong>${text}</strong>` : text;
     };
-    const score = (t) => (t.result.score ? `${t.result.score[0]}–${t.result.score[1]}` : "");
+    const score = (t) => (t.result.score ? fill(w.scoreText, { a: v.number(t.result.score[0]), b: v.number(t.result.score[1]) }) : "");
     const rows = order.map((t) => {
-        const roundText = t.third ? words.thirdPlace : t.round === 0 ? "" : roundLabel(layout, t.round, options.roundNames, words);
-        const note = noteParts(t, words).map((part) => (part === words.pens && t.result.pens ? `${words.pens} ${t.result.pens[0]}–${t.result.pens[1]}` : part)).join(", ");
-        return `<tr><th scope="row">${esc(roundText)}</th><td>${name(t, 0)}</td><td>${esc(score(t))}</td><td>${name(t, 1)}</td><td>${esc(note)}</td></tr>`;
+        const roundText = t.third ? w.thirdPlace : 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).join(w.noteJoin))}</td></tr>`;
     });
     return [
-        `<table class="${esc(options.className ?? "tb-table")}">`,
+        `<table class="${esc(options.className ?? "tb-table")}" lang="${esc(v.locale.code)}">`,
         `<caption>${esc(caption)}</caption>`,
-        `<thead><tr><th scope="col">${esc(words.columnRound)}</th><th scope="col" colspan="3">${esc(words.columnTie)}</th><th scope="col">${esc(words.columnNote)}</th></tr></thead>`,
+        `<thead><tr><th scope="col">${esc(w.columnRound)}</th>${dated ? `<th scope="col">${esc(w.columnDate)}</th>` : ""}<th scope="col" colspan="3">${esc(w.columnTie)}</th><th scope="col">${esc(w.columnNote)}</th></tr></thead>`,
         `<tbody>${rows.join("")}</tbody>`,
         "</table>",
     ].join("\n");

package/dist/theme.js

@@ -4,7 +4,7 @@ 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" },
 });
-const FONT = 'system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif';
+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 rules for one palette, each colour read from its custom property with the palette's value as the fallback. */
 function rules(p, poster, withFont) {
     const v = (name) => `var(--tb-${name}, ${p[name]})`;

package/dist/types.d.ts

@@ -21,6 +21,10 @@ export interface Team {
     group?: string;
     /** A colour for the team's initials when it has no mark, any CSS colour. */
     color?: string;
+    /** The name in other languages, by locale code: `{ fr: "Allemagne", ja: "ドイツ" }`. The language of a drawing picks its own, else `name`. */
+    names?: Readonly<Record<string, string>>;
+    /** An ISO 3166 region code (`DE`), for `countryName` and a `teamName` that uses it. */
+    region?: 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 {
@@ -86,6 +90,8 @@ export interface Matchup {
     pens?: readonly [number, number];
     /** The game with no `games` list went to extra time. */
     extraTime?: boolean;
+    /** The tie was settled without a game (a side withdrew): the note says so. */
+    walkover?: boolean;
     /** This is the third-place match: it leads nowhere and is drawn apart. */
     third?: boolean;
     note?: string;
@@ -121,6 +127,7 @@ export interface Tie {
     date: string;
     no: number | null;
     third: boolean;
+    walkover: boolean;
     note: string | null;
 }
 /** Where the layout put a tie. */
@@ -140,6 +147,8 @@ export interface LayoutBox {
     order: readonly [0 | 1, 0 | 1];
     /** The side that had a bye (it came from no tie, though the other did), or `null`. */
     bye: 0 | 1 | null;
+    /** Every side that skipped the earlier rounds: the `bye` side, and both sides of a tie of a later round that no tie feeds (MLS's round one, where seven teams of nine skip the wild card round). */
+    byes: readonly (0 | 1)[];
 }
 export interface LayoutSide {
     /** `l` the left half (the top half on a phone), `r` the right. */
@@ -193,38 +202,73 @@ export interface LayoutOptions {
     /** The order of the halves' groups, first on the left: `["West", "East"]`. Left out, a name with "west" goes left and one with "east" right. */
     groupOrder?: readonly string[];
 }
-/** The words a drawing and a table use. Every one can be replaced (`words`). */
+/** The words a drawing and a table use, in one language. Every one can be replaced (`words`), and a language can be added (`defineLocale`). Phrases take `{name}`-style holes. */
 export interface Words {
+    /** A side not known yet. */
     tbd: string;
+    /** The word beside the score of a side that had a bye. */
     bye: string;
+    /** A tie decided without a game (`Matchup.walkover`). */
+    walkover: string;
+    /** The label under the champion. */
     champion: string;
     thirdPlace: string;
     /** The heading over ties that lead nowhere near the final. */
     other: string;
-    final: string;
+    /** Short notes in a box: after extra time, penalties, aggregate, replay. */
     aet: string;
     pens: string;
     aggregate: string;
     replay: string;
-    /** `{n}` is the number of games: "in 7". */
+    /** The same in a sentence (tooltip, table, description). */
+    aetLong: string;
+    /** `{a}`, `{b}`: the shoot-out's score. */
+    pensScore: string;
+    aggregateLong: string;
+    /** `{n}`: "in 7" (games). */
     inGames: string;
-    /** `{n}`: "Best of 7". */
+    /** `{n}` games, `{w}` wins that settle it: "best of 7". */
     bestOf: string;
-    /** `{n}`: "Round 3" for a round with no name. */
+    /** `{n}`: a round with no name. */
     round: string;
-    winner: string;
-    versus: string;
-    /** The table's column titles. */
-    columnRound: string;
-    columnTie: string;
-    columnResult: string;
-    columnNote: string;
+    /** `{n}`: "Round of 64", for a round the language has no word of its own for. */
+    roundOf: string;
+    /** `{a}`, `{b}`: an undecided tie. */
+    tieVs: string;
+    /** `{a}`, `{b}` the names, `{sa}`, `{sb}` the scores. */
+    tieScore: string;
+    /** `{a}`, `{b}`: a score as written ("3–1"). */
+    scoreText: string;
+    /** `{name}`. */
+    winnerIs: string;
+    championIs: string;
+    /** `{round}`, `{tie}`. */
+    finalLine: string;
     /** `{n}` teams, `{r}` rounds. */
     summary: string;
-    /** The same for a bracket of one round. */
     summaryOne: string;
+    /** Joins the sentences of a description, and ends it. */
+    sep: string;
+    end: string;
+    /** `{notes}`: the notes after a tie in a sentence; and what joins several notes. */
+    note: string;
+    noteJoin: string;
+    columnRound: string;
+    columnTie: string;
+    columnNote: string;
+    columnDate: string;
+    /** The `<title>` of a drawing with no `title` option. */
     title: 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 {
+    /** The code (`fr`) and the tag (`fr-CA`, `ja-JP`) used for numbers, dates and capitals. */
+    code: string;
+    tag: string;
+    words: Words;
+    /** 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 ThemeName = "auto" | "light" | "dark" | "poster" | "none";
 export type SizeName = "wide" | "square" | "phone";
 export interface Size {
@@ -272,8 +316,12 @@ export interface DrawOptions extends LayoutOptions {
     thirdPlace?: "below" | "hide";
     /** Highlight the side that went through. Default true. */
     winnerHighlight?: boolean;
-    /** The words, in another language or your own. */
+    /** The language: `en` (the default), `fr`, `ja`, `es`, `de`, or a `Locale` you made with `defineLocale`. Sets the words, the round names, the number and date formats and the `lang` of the drawing. */
+    locale?: string | Locale;
+    /** Replace any of the language's words. */
     words?: Partial<Words>;
+    /** The name to draw for a team in this language: `undefined` keeps `Team.names[locale]` or `Team.name`. `countryName(team.region, locale)` makes a country's name from Intl, with no list of your own. */
+    teamName?: (team: Team, locale: Locale) => string | undefined;
     /** Prefix for the drawing's ids. Default: a hash of the bracket and the options. */
     id?: string;
     /** Extra class names for the root `<svg>`. */

package/dist/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "0.1.1";
+export declare const VERSION = "0.2.1";

package/dist/version.js

@@ -1 +1 @@
-export const VERSION = "0.1.1";
+export const VERSION = "0.2.1";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@johnmorrisdotca/taisen-brackets",
-  "version": "0.1.1",
-  "description": "Taisen Brackets \u5bfe\u6226, 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 and World Cup formats by era. Zero dependencies.",
+  "version": "0.2.1",
+  "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.",
   "keywords": [
     "bracket",
     "tournament",
@@ -17,8 +17,11 @@
     "mlb",
     "nfl",
     "cfl",
+    "mls",
     "soccer",
     "sports",
+    "multilingual",
+    "i18n",
     "visualization",
     "accessible",
     "dark-mode",
@@ -77,9 +80,10 @@
     "typecheck": "tsc -p tsconfig.check.json",
     "test": "node --test test/*.test.ts",
     "test:package": "pnpm build && node scripts/check-package.mjs",
-    "test:readme": "pnpm build && node scripts/make-formats-doc.mjs --check && node scripts/check-readme-examples.mjs",
+    "test:readme": "pnpm build && node scripts/make-formats-doc.mjs --check && node scripts/make-languages-doc.mjs --check && node scripts/check-readme-examples.mjs",
     "check": "pnpm lint && pnpm typecheck && pnpm test && pnpm build && node scripts/check-package.mjs",
     "prepublishOnly": "pnpm check",
+    "family:readme": "node scripts/family-readme.mjs",
     "dev": "pnpm build && node scripts/dev.mjs",
     "flags": "node scripts/make-flags.mjs",
     "site": "pnpm build && node scripts/site.mjs",

package/dist/words.d.ts

@@ -1,7 +0,0 @@
-import type { Words } from "./types.ts";
-/** The English words of a drawing and a table. Pass `words` to replace any of them. */
-export declare const WORDS: Readonly<Words>;
-/** The words with any replacements applied. */
-export declare function wordsWith(over?: Partial<Words>): Words;
-/** Fills `{n}`-style holes in a phrase. */
-export declare function fill(phrase: string, values: Record<string, string | number>): string;

package/dist/words.js

@@ -1,33 +0,0 @@
-/** The English words of a drawing and a table. Pass `words` to replace any of them. */
-export const WORDS = Object.freeze({
-    tbd: "TBD",
-    bye: "bye",
-    champion: "Champion",
-    thirdPlace: "Third place",
-    other: "Other ties",
-    final: "Final",
-    aet: "a.e.t.",
-    pens: "pens",
-    aggregate: "agg.",
-    replay: "replay",
-    inGames: "in {n}",
-    bestOf: "best of {n}",
-    round: "Round {n}",
-    winner: "Winner",
-    versus: "v",
-    columnRound: "Round",
-    columnTie: "Tie",
-    columnResult: "Result",
-    columnNote: "Note",
-    summary: "{n} teams, {r} rounds",
-    summaryOne: "{n} teams, 1 round",
-    title: "Knockout bracket",
-});
-/** The words with any replacements applied. */
-export function wordsWith(over) {
-    return { ...WORDS, ...over };
-}
-/** Fills `{n}`-style holes in a phrase. */
-export function fill(phrase, values) {
-    return phrase.replace(/\{(\w+)\}/g, (hole, key) => (key in values ? String(values[key]) : hole));
-}