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

JudoRoadOptionstype

What a road panel can be told: the weight class, the side's colour, the order of the wins, how many rows, the size, the theme and the language.

Import it

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

Definition

interface JudoRoadOptions extends Omit<JudoBoardOptions, "style" | "swap" | "coaches"> {
    weight?: string;
    side?: "white" | "blue";
    order?: "latest" | "first";
    rows?: number;
    coach?: boolean;
}

Members

NameTypeDescription
weight (optional)string | undefined

The weight class as a heading (judoCategoryLabel), written at the right of the header.

side (optional)"white" | "blue" | undefined

The colour of the athlete's block: the white judogi's or the blue's. Default blue.

order (optional)"latest" | "first" | undefined

latest (the default) puts the most recent win first, as a broadcast does; first the oldest.

rows (optional)number | undefined

The most wins drawn. Default: as many as fit at a readable size, up to 8.

coach (optional)boolean | undefined

Write the coach under the code. Default true.

title (optional)string | undefined

The <title> of the drawing. Default the language's "Judo contest scoreboard".

locale (optional)string | Locale | undefined

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

words (optional)Partial<Words> | undefined
flags (optional)FlagRenderer | undefined

Draws a country's flag from its code, as for drawBracket: a synchronous function from a code 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.

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

auto follows the page's light or dark; the athletes' panels are the colours of the judogi either way. Default auto.

id (optional)string | undefined

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

className (optional)string | undefined
size (optional)JudoBoardSizeName | { width: number; height: number; } | undefined

tv (the default), tablet, tablet-tall, or a size of your own: a wider-than-tall one lays the sides out left and right, a taller one top and bottom.

Examples

import { judoRoadPanel, type JudoRoadOptions } from "@johnmorrisdotca/taisen-brackets";

const options: JudoRoadOptions = { weight: "Men -66 kg", side: "blue", order: "first", rows: 4 };
console.log(judoRoadPanel({ athlete: { name: "Haru" }, wins: [] }, options).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.