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

BroadcastMedalOptionstype

What a broadcast medal table can be told: labels (the codes or the names), ranks, the sort and the rows, and the options of every broadcast board.

Import it

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

Definition

interface BroadcastMedalOptions extends BroadcastOptions, Pick<MedalTableOptions, "sort" | "ties" | "top" | "skipEmpty"> {
    labels?: "code" | "name";
    ranks?: boolean;
}

Members

NameTypeDescription
labels (optional)"name" | "code" | undefined

Write each row's code (the default where every row has one) or its name.

ranks (optional)boolean | undefined

Write the rank before each row. Default true.

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
ties (optional)boolean | undefined

Equal rows share a rank (1, 2, 2, 4). Default true; false numbers every row.

sort (optional)"given" | "gold" | "total" | undefined

gold (the default): by gold, then silver, then bronze, as the Olympic Games rank. total: by the total of medals, then gold, then silver. given: the order given, ranked by the same rule as gold.

top (optional)number | undefined

Only the first N rows, after sorting.

skipEmpty (optional)boolean | undefined

Hide the rows with no medal at all. Default false.

Examples

import { broadcastMedalTable, type BroadcastMedalOptions } from "@johnmorrisdotca/taisen-brackets";

const options: BroadcastMedalOptions = { width: 960, labels: "name", ranks: true };
console.log(broadcastMedalTable({ subtitle: "Day 16", rows: [
  { name: "United States", code: "USA", flag: "US", gold: 46, silver: 29, bronze: 29 },
  { name: "China", code: "CHN", flag: "CN", gold: 38, silver: 27, bronze: 22 },
] }, 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.