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

BoutBoardOptionstype

What a bout board can be told: the name style and case, and the options of every broadcast board.

Import it

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

Definition

interface BoutBoardOptions extends BroadcastOptions, Pick<RankingOptions, "nameStyle"> {
    nameCase?: "as-is" | "upper";
}

Members

NameTypeDescription
nameCase (optional)"as-is" | "upper" | undefined

upper writes the names in capitals; as-is (the default) leaves them as given.

width (optional)number | undefined

The width of the board; the height follows from the rows. Default 1280, from 320 to 4000.

look (optional)BroadcastLook | undefined

blue (the default), night or paper.

icon (optional)BroadcastIcon | undefined

The icon in the square at the left of the title: medal (the default), stopwatch, none, or an iconMark of your own.

iconMark (optional)string | undefined

A mark of your own for that square (inline SVG or an image address), in place of icon.

flags (optional)FlagRenderer | undefined

Draws a flag from its code, as for drawBracket; it is asked for the shape rect (Hata's "4:3").

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
words (optional)Partial<Words> | undefined
title (optional)string | undefined

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

id (optional)string | undefined
className (optional)string | undefined
nameStyle (optional)"surname-first" | "given-first" | "as-is" | undefined

surname-first (the default: SURNAME Given), given-first (Given SURNAME) or as-is, for a name given in two parts.

Examples

import { boutBoard, type BoutBoardOptions } from "@johnmorrisdotca/taisen-brackets";

const options: BoutBoardOptions = { width: 960, look: "night", nameCase: "upper" };
console.log(boutBoard({
  title: "Women's 57-60 kg",
  phase: "Preliminaries",
  bout: 142,
  red: { code: "BRA", flag: "BR", name: "TAVARES M." },
  blue: { code: "USA", flag: "US", name: "MAYER M." },
  officials: [{ role: "referee", code: "MGL", flag: "MN", name: "KHISHIGEE Khas-Erdene" }, { code: "POL", flag: "PL", name: "GORNY Mariusz" }],
}, 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.