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

LayoutBoxtype

A tie's place in the tree.

Import it

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

Also exported from: @johnmorrisdotca/taisen-brackets

Definition

interface LayoutBox {
    i: number;
    round: number;
    y: number;
    to: number | null;
    fed: boolean;
    order: readonly [
        0 | 1,
        0 | 1
    ];
    bye: 0 | 1 | null;
    byes: readonly (0 | 1)[];
}

Members

NameTypeDescription
inumber

The tie's index.

roundnumber
ynumber

The row, 0 at the top; fractional where a tie sits between two.

tonumber | null

The row of the tie this one feeds, or null.

fedboolean

Whether a tie feeds this one.

orderreadonly [0 | 1, 0 | 1]

Which side is drawn on top, then which below: [0, 1], or [1, 0] when the top feeder's team is the second side.

bye0 | 1 | null

The side that had a bye (it came from no tie, though the other did), or null.

byesreadonly (0 | 1)[]

Every side that skipped the earlier rounds: the bye side, and both sides of a tie of a later round that no tie feeds (MLS's round one, where seven teams of nine skip the wild card round).

Examples

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

const layout = layoutBracket([{ sides: ["Aurora", "Harbour"], score: [2, 1] }, { sides: ["Cascade", "Delta"], score: [0, 1] }, { sides: ["Aurora", "Delta"], score: [3, 1] }]);
const box: LayoutBox = layout.sides[0].boxes[0];
console.log(box.round, box.y, box.to);
1 0 0

What it prints (run when this page was built)

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