本文へ移動

Taisen Brackets対戦

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

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

目次

リファレンス · 決勝までの道

roadToFinal関数

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

The road to the final: the two finalists as large round marks with their names at the top, each one's matches on its side (the round mark of both teams with the score between them, and FT, AET or the shoot-out under it), the round names down the middle, and the group stage as a compact row of small marks, codes and scores. input is a tournament, the same one drawBracket draws (a list of matchups, { matchups, teams } or a layout): the two sides of its final are the finalists, each one's played ties (round-robin games, round: 0, as the group stage) are its road, and team puts one finalist on the left. Or it is the two finalists, each a team (name, abbr, mark or logo for the flag or crest, flag for a country code drawn by flags, color) with its path, the matches before the final, the earliest first, and optionally its group; a match is { round, opponent, score: [for, against], decidedBy, pens }, a round a key (quarter-final) with words in every language, or any key you name in labels, so a series (First round, 4-2) draws as well as a knockout. A team with no mark is its initials on its colour. The side that won each match is brighter; the sizes are card (1080 by 1350, the default), square, wide (1200 by 675) and phone (390 wide). table() lists every match as text.

インポート

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

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

定義

function roadToFinal(input: RoadInput, options?: RoadOptions): RoadChart

引数

名前型説明
inputRoadInput

A tournament (matchups, { matchups, teams } or a layout), or the two finalists with their paths.

options (省略可)RoadOptions

The title, the size, the finalist to put on the left, the theme, the language and the marks.

戻り値

RoadChart

The chart: draw() for the SVG, table() for the text, and its title, summary and totals.

例

import { roadToFinal, type RoadFinalist } from "@johnmorrisdotca/taisen-brackets";
const owls: RoadFinalist = { name: "Northern Owls", abbr: "NOW", color: "#3a2d6b", path: [
  { round: "quarter-final", opponent: { name: "Coastal Pines", abbr: "CPN" }, score: [2, 0] },
  { round: "semi-final", opponent: { name: "Valley Stars", abbr: "VAL" }, score: [1, 1], decidedBy: "pens", pens: [4, 3] },
] };
const gulls: RoadFinalist = { name: "Harbour City Gulls", abbr: "HCG", color: "#1d4f91", path: [
  { round: "quarter-final", opponent: { name: "Summit Peaks", abbr: "SMT" }, score: [3, 1] },
  { round: "semi-final", opponent: { name: "Metro Bolts", abbr: "MTB" }, score: [2, 1], decidedBy: "aet" },
] };
const chart = roadToFinal([owls, gulls], { title: "Northern Cup 2030", size: "square" });
console.log(chart.totals.rounds.join(" "), chart.draw().startsWith("<svg"), chart.table().includes("Semi-final"));
// quarter-final semi-final true true
quarter-final semi-final true true

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

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

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