本文へ移動

Taisen Brackets対戦

対戦の一覧から、トーナメント表をSVGで描きます。

対戦(たいせん)は、二者が向かい合って勝負することです。 名前について(英語)

目次

リファレンス · 決勝までの道

RoadOptions型

リファレンスの説明と例は英語です。見出しと目次は日本語です。

What roadToFinal takes besides the finalists or the tournament.

インポート

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

ほかのエクスポート元: @johnmorrisdotca/taisen-brackets

定義

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;
}

メンバー

名前型説明
team (省略可)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 (省略可)string | undefined

The tournament, set large at the top. The language's "Road to the final" when missing.

subtitle (省略可)string | undefined

The line under it. "Road to the final" when a title is given.

final (省略可)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 (省略可)Readonly<Record<string, string>> | undefined

The names of the rounds, by key, over the language's own words: { "first-round": "First round" }.

groupLabel (省略可)string | undefined

The group stage's name, over the language's own.

size (省略可)SizeName | undefined

card (the default), square, wide or phone.

winner (省略可)"auto" | "none" | undefined

Who is brighter: auto (the default) the side that won each match, none nobody.

codes (省略可)boolean | undefined

Write the opponent's three-letter code under its mark. On by default.

endnote (省略可)string | undefined

A line at the foot: a source, a credit, "Made-up results".

roundNames (省略可)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 (省略可)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 (省略可)Partial<Words> | undefined

Replace any of the language's words.

teamName (省略可)((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 (省略可)"round" | "none" | "square" | undefined

round (the default), square, or none (names only).

flags (省略可)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 (省略可)((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 (省略可)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 (省略可)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 (省略可)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 (省略可)string | undefined

Extra class names for the root <svg>.

例

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

出力(このページを作ったときに実行した結果)

ソースを見るGitHub で編集@johnmorrisdotca/taisen-brackets 0.20.0 のソースから作成しました。

この日本語は、まだ日本語を母語とする方の確認を受けていません。訂正を歓迎します。