Skip to the content

Taisen Brackets対戦

Knockout brackets as SVG, from a list of ties.

Taisen (対戦, たいせん) is Japanese for a matchup: two sides facing each other. About the name

Contents

Reference · The road to the final

RoadCharttype

What roadToFinal gives back.

Import it

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

Also exported from: @johnmorrisdotca/taisen-brackets

Definition

interface RoadChart {
    options: RoadOptions;
    title: string;
    summary: string;
    totals: RoadTotals;
    draw(extra?: Partial<RoadOptions>): string;
    table(options?: {
        className?: string;
        locale?: RoadOptions["locale"];
    }): string;
}

Members

NameTypeDescription
optionsRoadOptions

The options the chart was made with: pass changes to draw.

titlestring

The chart's accessible name, in the chart's language.

summarystring

What the chart shows, in a sentence or two, for a caption.

totalsRoadTotals

The numbers behind it.

draw(extra?: Partial<RoadOptions>): string

The drawing as an SVG string. extra is laid over the options (size, theme, locale, labels, final…).

table(options?: { className?: string; locale?: RoadOptions["locale"]; }): string

One HTML table with a row for every match: the table that stands for the drawing for a screen reader.

Examples

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

const chart: RoadChart = roadToFinal([{ sides: ["Aurora", "Harbour"], score: [2, 1] }, { sides: ["Cascade", "Delta"], score: [0, 1] }, { sides: ["Aurora", "Delta"], score: [3, 1] }]);
console.log(chart.title, chart.draw().startsWith("<svg"), chart.table().startsWith("<table"));
Aurora and Delta: Road to the final true true

What it prints (run when this page was built)

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