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

layoutBracketfunction

The shape of a knockout, worked out from its ties: which tie feeds which (a winner goes on to the next tie its team plays, or the tie that feeds names), the rounds, which half each tie sits in, and which side has a bye. A tie is a game, a series, two legs or a replayed game, so one layout draws a hockey playoff and a World Cup. Pure and sport-agnostic: no DOM, no drawing.

Import it

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

Also exported from: @johnmorrisdotca/taisen-brackets

Definition

function layoutBracket(input: readonly Matchup[] | BracketInput, options?: LayoutOptions): BracketLayout

Parameters

NameTypeDescription
inputreadonly Matchup[] | BracketInput

The ties: a list of matchups, or { matchups, teams } with the teams listed once.

options (optional)LayoutOptions

shape (auto, halves or ltr) and groupOrder.

Returns

BracketLayout

The layout: the ties, their rounds, the halves, the rows, the bye of each tie and the champion once the final is played.

Examples

import { layoutBracket } 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] }]);
console.log(layout.rounds, layout.champion?.name, layout.shape);
2 Aurora halves

What it prints (run when this page was built)

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