本文へ移動

Taisen Brackets対戦

対戦の一覧から、トーナメント表をSVGで描きます。

対戦（たいせん）は、二者が向かい合って勝負することです。 名前について（英語）

目次

リファレンス · トーナメント表・表・決勝までの道を描く

THEMES定数

リファレンスの説明と例は英語です。見出しと目次は日本語です。

The looks. Every colour is the fallback for a custom property, so a page can restyle a drawing with --tb-ink: … and nothing else.

インポート

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

定義

const THEMES: Readonly<Record<"light" | "dark" | "poster", Palette>> = Object.freeze({
    light: { bg: "#f4efe4", ink: "#1f2320", muted: "#62665f", line: "#8d9087", box: "#fbf8f1", edge: "#cfc7b3", win: "#b5452c", gold: "#845f06", plain: "#d9d3c2" },
    dark: { bg: "#141614", ink: "#ece8dc", muted: "#9aa095", line: "#6c7168", box: "#1e211d", edge: "#3b403a", win: "#e0705a", gold: "#e0b43b", plain: "#3b403a" },
    poster: { bg: "#0a1130", ink: "#f6f1e3", muted: "#a9b2d3", line: "#d9b24c", box: "#111b47", edge: "#8e7632", win: "#f0c64a", gold: "#f0c64a", plain: "#26336b" },
})

例

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

console.log(Object.keys(THEMES), THEMES.poster.gold);
[ 'light', 'dark', 'poster' ] #f0c64a

出力（このページを作ったときに実行した結果）

ソースを見るGitHub で編集@johnmorrisdotca/taisen-brackets 0.20.0 のソースから作成しました。

この日本語は、まだ日本語を母語とする方の確認を受けていません。訂正を歓迎します。