`RoadOptions`type

What roadToFinal takes besides the finalists or the tournament.

Import it

import type { RoadOptions } from "@johnmorrisdotca/taisen-brackets/road";

Also exported from: @johnmorrisdotca/taisen-brackets

Definition

interface RoadOptions extends Pick<DrawOptions, "locale" | "words" | "teamName" | "roundNames" | "markShape" | "flags" | "flagHref" | "theme" | "background" | "id" | "className"> {
    team?: SideId;
    title?: string;
    subtitle?: string;
    final?: RoadFinal;
    labels?: Readonly<Record<string, string>>;
    groupLabel?: string;
    size?: RoadSize;
    winner?: "auto" | "none";
    codes?: boolean;
    endnote?: string;
}

Members

Name	Type	Description
`team` (optional)	`SideId \| undefined`	With a tournament: the finalist whose road is on the left (by team id); the other finalist is its opponent in the final. Left out, the first side of the final.
`title` (optional)	`string \| undefined`	The tournament, set large at the top. The language's "Road to the final" when missing.
`subtitle` (optional)	`string \| undefined`	The line under it. "Road to the final" when a `title` is given.
`final` (optional)	`RoadFinal \| undefined`	The final, if it has been played: its score is written between the two big marks, the winner is brighter, and the table has a row for it. A tournament's own final is used when this is left out.
`labels` (optional)	`Readonly<Record<string, string>> \| undefined`	The names of the rounds, by key, over the language's own words: `{ "first-round": "First round" }`.
`groupLabel` (optional)	`string \| undefined`	The group stage's name, over the language's own.
`size` (optional)	`SizeName \| undefined`	`card` (the default), `square`, `wide` or `phone`.
`winner` (optional)	`"auto" \| "none" \| undefined`	Who is brighter: `auto` (the default) the side that won each match, `none` nobody.
`codes` (optional)	`boolean \| undefined`	Write the opponent's three-letter code under its mark. On by default.
`endnote` (optional)	`string \| undefined`	A line at the foot: a source, a credit, "Made-up results".
`roundNames` (optional)	`readonly string[] \| { rounds: readonly { name: string; }[]; } \| undefined`	Names of the rounds, first round first (or just the last ones). Default: Final, Semi-finals, Quarter-finals, Round of 16…
`locale` (optional)	`string \| Locale \| undefined`	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.
`words` (optional)	`Partial<Words> \| undefined`	Replace any of the language's words.
`teamName` (optional)	`((team: Team, locale: Locale) => string \| undefined) \| undefined`	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.
`markShape` (optional)	`"round" \| "none" \| "square" \| undefined`	`round` (the default), `square`, or `none` (names only).
`flags` (optional)	`FlagRenderer \| undefined`	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.
`flagHref` (optional)	`((code: string) => string \| null \| undefined) \| undefined`	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.
`theme` (optional)	`ThemeName \| undefined`	`auto` follows the page's light or dark; `poster` is dark with gold lines; `none` writes no style, for your own CSS. Default `auto`.
`background` (optional)	`boolean \| "midnight" \| "crimson" \| "royal" \| "emerald" \| "pitch" \| "ice" \| "hardwood" \| "infield" \| "turf" \| "ball-panels" \| "swirl" \| "waves" \| "glow" \| "floodlights" \| "confetti" \| "carbon" \| "aurora" \| "sunburst" \| "chevrons" \| "halftone" \| "argyle" \| "contour" \| "stardust" \| "mesh" \| "spotlight" \| BackgroundOptions \| BackgroundImageOptions \| undefined`	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 }`).
`id` (optional)	`string \| undefined`	Prefix for the drawing's ids. Default: a hash of the bracket and the options. Only letters, digits, `_` and `-` are kept (any other character becomes `-`), and an id that does not start with a letter gets the drawing's own prefix in front.
`className` (optional)	`string \| undefined`	Extra class names for the root `<svg>`.

Examples

import { roadToFinal, type RoadOptions } from "@johnmorrisdotca/taisen-brackets";

const options: RoadOptions = { title: "Northern Cup 2030", size: "square", codes: true };
console.log(roadToFinal([{ name: "Owls", abbr: "NOW", path: [] }, { name: "Gulls", abbr: "HCG", path: [] }], options).title);

Owls and Gulls: Northern Cup 2030, Road to the final

What it prints (run when this page was built)

View source Edit on GitHubMade from the source of @johnmorrisdotca/taisen-brackets 0.20.0.

RoadOptionstype

Definition

Members

Examples

`RoadOptions`type