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

MedalTableOptionstype

What a medal table can be told: the sort (gold, total or given), ties, how many rows, columns, highlighting, and the options of every board.

Import it

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

Definition

interface MedalTableOptions extends BoardOptions {
    sort?: "gold" | "total" | "given";
    ties?: boolean;
    rankStyle?: "plain" | "hash";
    top?: number;
    rows?: number;
    page?: number;
    columns?: 1 | 2;
    highlight?: boolean;
    skipEmpty?: boolean;
}

Members

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

ties (optional)boolean | undefined

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

rankStyle (optional)"plain" | "hash" | undefined

plain (10, the default) or hash (#10).

top (optional)number | undefined

Only the first N rows, after sorting.

rows (optional)number | undefined

The most rows drawn, from the first of the page, and which page (0 is the first). Default: as many as fit at a readable size.

page (optional)number | undefined
columns (optional)2 | 1 | undefined

One column or two (the first column runs down before the second starts). Default 1, and 2 on a wide board with more than 10 rows.

highlight (optional)boolean | undefined

Mark the first three ranks with a bar in gold, silver and bronze. Default true.

skipEmpty (optional)boolean | undefined

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

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

const options: MedalTableOptions = { sort: "total", top: 10, columns: 2 };
console.log(medalTable({ rows: [
  { name: "France", flag: "FR", gold: 6, silver: 1, bronze: 3 },
  { name: "Japan", flag: "JP", gold: 5, silver: 3, bronze: 2 },
] }, 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.