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 · Draw a bracket, a table or a road to the final

ResolvedBackgroundtype

A background ready to put in a drawing: its definitions, its body and the ink that reads over it.

Import it

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

Definition

interface ResolvedBackground {
    defs: string;
    body: string;
    inks: BackgroundInks;
    auto: boolean;
}

Members

NameTypeDescription
defsstring

For the drawing's <defs>.

bodystring

Drawn over the plain .tb-bg rectangle, under everything else.

inksBackgroundInks

The colours to draw over it: one for a look that is light or dark, both for auto.

autoboolean

Both pictures are in the drawing and the stylesheet shows the one that fits.

Examples

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

const picture = resolveBackground("midnight", "dark", 1200, 675, "tb");
console.log(picture?.auto, picture?.body.length);
false 308

What it prints (run when this page was built)

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