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

LayoutOptionstype

What layoutBracket can be told: the shape (halves or left to right) and the order of the groups.

Import it

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

Also exported from: @johnmorrisdotca/taisen-brackets

Definition

interface LayoutOptions {
    shape?: "auto" | "halves" | "ltr";
    groupOrder?: readonly string[];
}

Members

NameTypeDescription
shape (optional)"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 (optional)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.

Examples

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

const options: LayoutOptions = { shape: "ltr" };
console.log(layoutBracket([{ sides: ["Aurora", "Harbour"], score: [2, 1] }, { sides: ["Cascade", "Delta"], score: [0, 1] }, { sides: ["Aurora", "Delta"], score: [3, 1] }], options).shape);
ltr

What it prints (run when this page was built)

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