本文へ移動

Taisen Brackets対戦

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

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

目次

リファレンス · 各対戦の位置を計算

DrawOptions型

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

Everything a drawing can be told: the layout, look, size, theme, background, language, marks, flags, trophy, links and titles.

インポート

import type { DrawOptions } from "@johnmorrisdotca/taisen-brackets/layout";

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

定義

interface DrawOptions extends LayoutOptions {
    layout?: LayoutName;
    headers?: boolean;
    at?: boolean;
    standings?: "points" | "record";
    qualify?: number;
    judo?: boolean;
    style?: boolean;
    styleScope?: string;
    size?: SizeName | {
        width: number;
        height?: number | null;
    };
    orientation?: "auto" | "horizontal" | "vertical";
    detail?: Detail;
    theme?: ThemeName;
    background?: boolean | BackgroundPresetName | BackgroundOptions | BackgroundImageOptions;
    vs?: boolean;
    codes?: boolean;
    title?: string;
    subtitle?: string;
    roundNames?: readonly string[] | {
        rounds: readonly {
            name: string;
        }[];
    };
    roundLabels?: boolean;
    scores?: boolean;
    seeds?: boolean;
    markShape?: "round" | "square" | "none";
    champion?: boolean;
    trophy?: string;
    emblems?: EmblemRenderer;
    emblemStyle?: EmblemStyle;
    emblemTint?: string;
    flags?: FlagRenderer;
    flagHref?: (code: string) => string | null | undefined;
    tieClass?: (tie: Tie) => string | null | undefined;
    look?: Look;
    href?: (tie: Tie, side?: 0 | 1) => string | null | undefined;
    highlightPath?: SideId;
    thirdPlace?: "below" | "hide";
    winnerHighlight?: boolean;
    locale?: string | Locale;
    words?: Partial<Words>;
    teamName?: (team: Team, locale: Locale) => string | undefined;
    id?: string;
    className?: string;
}

メンバー

名前型説明
layout (省略可)LayoutName | undefined

tree (the default): the halves meeting at the final. rows: each team a row, its name on the left and its mark on the right, a slot for the result toward the centre. shields: marks in shields with "vs", the matchups on both sides of the trophy. update: a compact score-update card. columns: tall slots that grow toward the centre, the conferences in two colours, "VS" (or "AT") on a tag, big seed numbers. playin: the play-in games with their winners and losers going on. series: a tall card, one line a series ("BOS 4-0 MIA"), the first half above and the second below. groups: the group-stage tables. picture: the postseason picture: the two halves mirrored toward the final, each club a logo tile with its seed, each series' result beside its pair ("CLE wins 3-2"), the round's name and its length ("Best of 5") under its column, the champion big in the middle.

headers (省略可)boolean | undefined

Big title tiles (the halves' groups: West and East, AFC and NFC) over each half, in any layout: each half's group name in the colour of that half. Default false.

at (省略可)boolean | undefined

In the columns layout, write "AT" (the word at of the language) in place of "VS" between the two sides of a tie: the first side is the visitor and the second the home side (Matchup.home says otherwise). Default false.

standings (省略可)"points" | "record" | undefined

In the groups layout, the columns of a group's table: points (played, won, drawn, lost, goal difference, points) or record (won and lost, softball's). Default points.

qualify (省略可)number | undefined

In the groups layout, how many teams of each group go through: their rows are marked. Default 0, none.

judo (省略可)boolean | undefined

For bracketStyle: include the judo rules (the white and blue side bars, the shido cards). drawBracket adds them by itself when a tie has judo scores.

style (省略可)boolean | undefined

Write the <style> into the drawing. Default true; false leaves it out, for a second drawing of a page that shares the first's (styleScope, bracketStyle).

styleScope (省略可)string | undefined

A class that carries this drawing's rules in place of its own: two drawings with the same styleScope take their colours from one <style>, and the second can leave it out (style: false). A word of letters, digits, - and _.

size (省略可)SizeName | { width: number; height?: number | null; } | undefined

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.

orientation (省略可)"auto" | "horizontal" | "vertical" | undefined

horizontal: the rounds are columns. vertical: the rounds are rows, for a tall page. Default horizontal; the phone's is vertical.

detail (省略可)Detail | undefined
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 }).

vs (省略可)boolean | undefined

In the road look, write a small vs between the two marks of a box of marks alone. Default false.

codes (省略可)boolean | undefined

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).

title (省略可)string | undefined
subtitle (省略可)string | undefined
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…

roundLabels (省略可)boolean | undefined

Show the round names over the columns. Default true; false in the flag-only look.

scores (省略可)boolean | undefined

Show the scores. Default true.

seeds (省略可)boolean | undefined

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.

markShape (省略可)"round" | "none" | "square" | undefined

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

champion (省略可)boolean | undefined

Show the champion in the centre once the final is played. Default true.

trophy (省略可)string | undefined

A trophy for the centre, drawn above the champion: inline SVG, an image address, or (with emblems) an emblem id such as "trophy:hockey-cup". An emblem id with no emblems renderer draws nothing and takes no room.

emblems (省略可)EmblemRenderer | undefined

Draws the emblem a trophy id names: any function from an id and a request to an SVG string, such as renderEmblem from @johnmorrisdotca/dougu-sports/emblems. Called once per champion, with the size the trophy has in the drawing. Its SVG is cleaned like any inline SVG; a renderer that throws, or returns something that is not an <svg>, draws no trophy.

emblemStyle (省略可)EmblemStyle | undefined

The style an emblem is drawn in: metal (the default), line or color.

emblemTint (省略可)string | undefined

A colour for the emblem's main part (a hex colour or rgb()), passed to the renderer as tint.

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.

tieClass (省略可)((tie: Tie) => string | null | undefined) | 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.

look (省略可)Look | 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.

href (省略可)((tie: Tie, side?: 0 | 1) => string | null | undefined) | undefined

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.

highlightPath (省略可)SideId | 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.

thirdPlace (省略可)"below" | "hide" | undefined

Where the third-place match goes: below the final (the default) or hide.

winnerHighlight (省略可)boolean | undefined

Highlight the side that went through. Default true.

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.

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>.

shape (省略可)"halves" | "ltr" | "auto" | undefined

halves (the default when two ties feed the final) draws two halves meeting at the final; ltr one tree left to right.

groupOrder (省略可)readonly string[] | undefined

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.

例

import { drawBracket, type DrawOptions } from "@johnmorrisdotca/taisen-brackets";

const options: DrawOptions = { look: "road", theme: "dark", size: "card", title: "Aurora Cup", locale: "ja" };
console.log(drawBracket([{ sides: ["Aurora", "Harbour"], score: [2, 1] }, { sides: ["Cascade", "Delta"], score: [0, 1] }, { sides: ["Aurora", "Delta"], score: [3, 1] }], options).startsWith("<svg"));
true

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

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

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