本文へ移動

Taisen Brackets対戦

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

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

目次

リファレンス · 各対戦の位置を計算

BackgroundImageOptions型

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

Your own picture as the background: an image address (http(s), relative or data:image/…; anything else is refused), laid under a veil so the text reads.

インポート

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

ほかのエクスポート元: @johnmorrisdotca/taisen-brackets

定義

interface BackgroundImageOptions {
    image: string;
    fit?: "cover" | "contain";
    dim?: number;
    theme?: "light" | "dark";
}

メンバー

名前型説明
imagestring
fit (省略可)"cover" | "contain" | undefined

cover (the default) fills the drawing; contain shows all of the picture.

dim (省略可)number | undefined

How dark (or, in a light look, how pale) the veil is, 0 to 1. Default 0.5.

theme (省略可)"light" | "dark" | undefined

例

import { drawBracket, type BackgroundImageOptions } from "@johnmorrisdotca/taisen-brackets";

const background: BackgroundImageOptions = { image: "./stadium.webp", fit: "cover", dim: 0.4 };
console.log(drawBracket([{ sides: ["Aurora", "Harbour"], score: [2, 1] }, { sides: ["Cascade", "Delta"], score: [0, 1] }, { sides: ["Aurora", "Delta"], score: [3, 1] }], { background }).startsWith("<svg"));
true

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

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

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