本文へ移動

Taisen Brackets対戦

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

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

目次

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

RoadChart型

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

What roadToFinal gives back.

インポート

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

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

定義

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

メンバー

名前型説明
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.

例

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

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

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

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