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

BoardOptionstype

What every board takes.

Import it

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

Definition

interface BoardOptions {
    size?: BoardSizeName | {
        width: number;
        height: number;
    };
    theme?: "auto" | "light" | "dark";
    flags?: DrawOptions["flags"];
    flagHref?: DrawOptions["flagHref"];
    flagShape?: "round" | "square";
    locale?: string | Locale;
    words?: Partial<Words>;
    title?: string;
    id?: string;
    className?: string;
}

Members

NameTypeDescription
size (optional)BoardSizeName | { width: number; height: number; } | undefined

One of BOARD_SIZES (tv by default), or a size of your own, { width, height }, at least 200 each way.

theme (optional)"auto" | "light" | "dark" | undefined

auto (the default) follows the page's light or dark, light and dark fix it.

flags (optional)FlagRenderer | undefined

Draws a flag from its code, as for drawBracket: a synchronous function from a code (CA-BC, JP) and { shape, size, theme } to an SVG string, such as one made from @johnmorrisdotca/hata.

flagHref (optional)((code: string) => string | null | undefined) | undefined

The address of a flag as a picture to load, tried where flags gives none.

flagShape (optional)"round" | "square" | undefined

round (the default) or square: the shape a flag is asked for and drawn in.

locale (optional)string | Locale | undefined

The language: en, fr, ja, es, de or a Locale.

words (optional)Partial<Words> | undefined
title (optional)string | undefined

The <title> of the drawing. Default: the board's own heading.

id (optional)string | undefined

Prefix for the drawing's ids. Default: a hash of the state and the options.

className (optional)string | undefined

Examples

import { rankingList, type BoardOptions } from "@johnmorrisdotca/taisen-brackets";

const board: BoardOptions = { size: "tablet", theme: "dark", flagShape: "square", locale: "fr" };
console.log(rankingList({ entries: [{ name: "A", points: 1 }] }, board).startsWith("<svg"));
true

What it prints (run when this page was built)

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