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

Teamtype

A side of a tie: a team, with the marks and labels a drawing needs. Only id and name are required.

Import it

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

Also exported from: @johnmorrisdotca/taisen-brackets

Definition

interface Team {
    id: SideId;
    name: string;
    abbr?: string;
    seed?: number;
    tag?: string;
    mark?: string;
    group?: string;
    color?: string;
    names?: Readonly<Record<string, string>>;
    region?: string;
    flag?: string;
    code?: string;
}

Members

NameTypeDescription
idSideId
namestring
abbr (optional)string | undefined

A short name for a small box (three letters is usual). Left out, one is made from the name.

seed (optional)number | undefined

The seed, shown beside the name when seeds is on.

tag (optional)string | undefined

A tag for the road look's seed tags (C1, WC2, M3): written small beside the mark when seeds is on, in place of the number. A tie's seeds win over it.

mark (optional)string | undefined

The team's mark: a logo or a flag. Either the address of an image (https://, data:image/…, or a relative path) or inline SVG markup (<svg …>; a round flag from @johnmorrisdotca/hata goes here as it is).

group (optional)string | undefined

The half this team belongs to when the halves are named: a conference, a region, a group.

color (optional)string | undefined

A colour for the team's initials when it has no mark, any CSS colour.

names (optional)Readonly<Record<string, string>> | undefined

The name in other languages, by locale code: { fr: "Allemagne", ja: "ドイツ" }. The language of a drawing picks its own, else name.

region (optional)string | undefined

An ISO 3166 region code (DE), for countryName and a teamName that uses it.

flag (optional)string | undefined

A country code (ca, GB-ENG) for a round flag drawn by the flags option's renderer (@johnmorrisdotca/hata has one). With no renderer, or one that has no flag for the code, the team's mark is drawn, or its initials: it never throws.

code (optional)string | undefined

The three letters of the team's country (JPN), which the judo screens write beside the name (judoWins, judoRoadPanel).

Examples

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

const argentina: Team = { id: "ARG", name: "Argentina", abbr: "ARG", flag: "AR" };
const svg = drawBracket({ teams: [argentina], matchups: [{ sides: ["ARG", "FRA"], score: [3, 3], pens: [4, 2] }] });
console.log(svg.includes("Argentina"));
true

What it prints (run when this page was built)

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