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

JudoBoardOptionstype

What a judo board can be told: the size, the theme, the style (board or flip cards), which side is on the left, the coaches, the flags and the language.

Import it

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

Definition

interface JudoBoardOptions {
    size?: JudoBoardSizeName | {
        width: number;
        height: number;
    };
    theme?: Exclude<ThemeName, "poster" | "none">;
    style?: "board" | "flip";
    swap?: boolean;
    coaches?: boolean;
    flags?: DrawOptions["flags"];
    flagHref?: DrawOptions["flagHref"];
    locale?: string | Locale;
    words?: Partial<Words>;
    title?: string;
    id?: string;
    className?: string;
}

Members

NameTypeDescription
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.

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.

style (optional)"board" | "flip" | undefined

board (the default): two panels with the counters as tiles, like a screen scoreboard. flip: a row of ring-bound flip cards on a stand for each side, one card to a counter (ippon, waza-ari, yuko, shido, hansoku-make) with its label printed on it, like a table-top scoreboard.

swap (optional)boolean | undefined

Draw blue first (on the left, or at the top) in place of white. Default false.

coaches (optional)boolean | undefined

Write each athlete's coach under the code. Default true.

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.

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 language's "Judo contest scoreboard".

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 { judoScoreboard, type JudoBoardOptions } from "@johnmorrisdotca/taisen-brackets";

const options: JudoBoardOptions = { size: "tablet", theme: "dark", style: "flip" };
console.log(judoScoreboard({
  white: { name: "Daiki Hoshino", code: "JPN" },
  blue: { name: "Mathis Roussel", code: "FRA" },
  sides: [{ wazaAri: 1, shido: 1 }, { yuko: 2, shido: 2 }],
  clock: "2:14",
  weight: "Men -66 kg",
  round: "Final",
}, 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.