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 · Where every tie sits

BracketLayouttype

The shape of a bracket worked out from its ties: the ties, the halves, the rounds, the rows and the champion.

Import it

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

Also exported from: @johnmorrisdotca/taisen-brackets

Definition

interface BracketLayout {
    ties: Tie[];
    shape: "halves" | "ltr" | "forest";
    sides: LayoutSide[];
    final: {
        i: number;
        y: number;
        order: readonly [
            0 | 1,
            0 | 1
        ];
    } | null;
    finalIndex: number | null;
    columns: number[];
    rounds: number;
    rows: number;
    other: number[];
    robin: number[];
    playIn: number[];
    third: number | null;
    place: Place[];
    parent: number[];
    champion: Team | null;
    teams: Team[];
}

Members

NameTypeDescription
tiesTie[]

Every tie, in the order given.

shape"halves" | "ltr" | "forest"

How the tree is drawn: two halves that meet at the final, one tree left to right, or several (no single final).

sidesLayoutSide[]
final{ i: number; y: number; order: readonly [0 | 1, 0 | 1]; } | null

The final, when the halves meet at it: its row and the order of its sides (the first is the left half's).

finalIndexnumber | null

The tie that is the final, when the last round holds one, in any shape.

columnsnumber[]

The rounds drawn on the sides, in order (the final's own round is left out when the halves meet at it).

roundsnumber

The number of rounds of the tree, the final's included.

rowsnumber
othernumber[]

Ties that lead nowhere near the final, and round-robin games.

robinnumber[]
playInnumber[]

The play-in games (Matchup.stage), kept out of the tree.

thirdnumber | null

The third-place match, when there is one.

placePlace[]

Where each tie is: a half, the final, or elsewhere; by tie index.

parentnumber[]

The tie each tie feeds, by index; -1 for none.

championTeam | null

The team that won the final, when it has been played.

teamsTeam[]

Every team that appears, by id.

Examples

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

const layout: BracketLayout = layoutBracket([{ sides: ["Aurora", "Harbour"], score: [2, 1] }, { sides: ["Cascade", "Delta"], score: [0, 1] }, { sides: ["Aurora", "Delta"], score: [3, 1] }]);
console.log(layout.shape, layout.rounds, drawBracket(layout).startsWith("<svg"));
halves 2 true

What it prints (run when this page was built)

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