Kyogijo Stadiums競技場

Guides, the reference, a gallery of every picture it can draw, and how it compares: the pages are made from the package's own files when the site is built.

About the name

The pages are in English; this contents, the search and the buttons are in Japanese.

Gallery: boards over a surface

A results board, a bout presentation and a medal table, drawn by Taisen Brackets from invented athletes and results, laid over a pool, a mat and an oval. The surface takes each as a string with its size and writes it as an image. Every picture is drawn by the build from the code under it.

16 pictures, each drawn by the build from the code under it, which the Copy button copies. They are drawn as they come near the screen. Open in a page loads the published package from jsDelivr, which serves only released versions.

A board over each surface#

The position is a name; the width is what the room off the middle of the surface allows, up to half of it at the top.

A swimming final over the pool

A results board with a record badge, centred at the top edge.

tsDownload SVGOpen in a page
import { drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";
import { resultsBoard, resultsBoardSize } from "@johnmorrisdotca/taisen-brackets";

const source = {
  title: "Men's 100m freestyle",
  phase: "Final",
  columns: [{ precision: 2 }],
  rows: [
    { code: "AUS", flag: "AU", name: "Callum Reyes", values: [46.91], record: "OR" },
    { code: "USA", flag: "US", name: "Dominic Ward", values: [47.2] },
    { code: "JPN", flag: "JP", name: "Haruki Tanabe", values: [47.38], record: "NR" },
    { code: "FRA", flag: "FR", name: "Mathis Delorme", values: [47.55] },
    { code: "GBR", flag: "GB", name: "Owen Gallagher", values: [47.61] },
    { code: "BRA", flag: "BR", name: "Tiago Menezes", values: [47.89] },
    { code: "HUN", flag: "HU", name: "Balint Szabo", values: [48.02] },
    { code: "CAN", flag: "CA", name: "Liam Fontaine", values: [48.17] },
  ],
};
const svg = drawKyogijo({
  sport: "swimming",
  board: { svg: resultsBoard(source, { width: 960, look: "blue", icon: "medal" }), ...resultsBoardSize(source.rows.length, { width: 960 }), position: "top" },
});

A bout presentation over the mat

The two athletes, the referee and the judges, at the top of the mat's surround.

tsDownload SVGOpen in a page
import { drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";
import { boutBoard, boutBoardSize } from "@johnmorrisdotca/taisen-brackets";

const source = {
  title: "Men's -73 kg",
  phase: "Semi-final",
  bout: 23,
  red: { code: "JPN", flag: "JP", name: "TANABE H." },
  blue: { code: "GEO", flag: "GE", name: "GELASHVILI L." },
  officials: [
    { role: "referee", code: "KAZ", flag: "KZ", name: "OMAROV Daniyar" },
    { code: "MGL", flag: "MN", name: "BATTULGA Enkh" },
    { code: "POL", flag: "PL", name: "WOJCIK Marek" },
  ],
};
const svg = drawKyogijo({
  sport: "judo",
  board: { svg: boutBoard(source, { width: 960, look: "blue" }), ...boutBoardSize(source.officials.length, { width: 960 }), position: "top" },
});

A 100 m final over the oval

Two columns, a reaction time and a time, medal boxes for the first three and a disqualification.

tsDownload SVGOpen in a page
import { drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";
import { resultsBoard, resultsBoardSize } from "@johnmorrisdotca/taisen-brackets";

const source = {
  title: "Men's 100m",
  phase: "Final · Wind +0.3",
  columns: [{ label: "React", precision: 3 }, { label: "Time", precision: 2 }],
  rows: [
    { code: "JAM", flag: "JM", name: "Andre Campbell", values: [0.141, 9.81], record: "NR" },
    { code: "USA", flag: "US", name: "Marcus Hollis", values: [0.152, 9.84] },
    { code: "RSA", flag: "ZA", name: "Thabo Nkosi", values: [0.139, 9.89] },
    { code: "GBR", flag: "GB", name: "Jonas Whitlock", values: [0.147, 9.93] },
    { code: "CAN", flag: "CA", name: "Ethan Duval", values: [0.158, 9.97] },
    { code: "JPN", flag: "JP", name: "Ren Kamiya", values: [0.144, 10.04] },
    { code: "KEN", flag: "KE", name: "Peter Mwangi", values: [0.15, 10.09] },
    { code: "NZL", flag: "NZ", name: "Cody Ashton", values: [null, null], note: "DQ" },
  ],
};
const svg = drawKyogijo({
  sport: "athletics",
  board: { svg: resultsBoard(source, { width: 960, look: "night", icon: "stopwatch", rankStyle: "medal" }), ...resultsBoardSize(source.rows.length, { width: 960 }), position: "top" },
});

Speed skating over the oval

`position: "side"`: at the right edge, centred up and down, with the times as text as a clock gives them.

tsDownload SVGOpen in a page
import { drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";
import { resultsBoard, resultsBoardSize } from "@johnmorrisdotca/taisen-brackets";

const source = {
  title: "Women's 1000m",
  phase: "Result",
  columns: [{ label: "Time" }],
  rows: [
    { code: "NED", flag: "NL", name: "Femke de Haan", values: ["1:12.04"], record: "OR" },
    { code: "JPN", flag: "JP", name: "Mio Sakurai", values: ["1:12.31"] },
    { code: "CAN", flag: "CA", name: "Claire Boucher", values: ["1:12.58"] },
    { code: "NOR", flag: "NO", name: "Ida Solberg", values: ["1:12.90"] },
    { code: "USA", flag: "US", name: "Hannah Brooks", values: ["1:13.02"] },
    { code: "GER", flag: "DE", name: "Lea Hartmann", values: ["1:13.27"] },
    { code: "KOR", flag: "KR", name: "Seo-yeon Han", values: ["1:13.44"] },
    { code: "ITA", flag: "IT", name: "Giulia Ferri", values: ["1:13.61"] },
  ],
};
const svg = drawKyogijo({
  sport: "skating", league: "isu-long-track",
  board: { svg: resultsBoard(source, { width: 960, look: "paper", icon: "stopwatch" }), ...resultsBoardSize(source.rows.length, { width: 960 }), position: "side" },
});

A medal table in a corner

`position: "corner"` is the top right corner; a medal table is narrow enough to leave the middle alone.

tsDownload SVGOpen in a page
import { drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";
import { broadcastMedalTable, broadcastMedalSize } from "@johnmorrisdotca/taisen-brackets";

const source = {
  title: "Medal table",
  subtitle: "Day 12",
  date: "Games",
  rows: [
    { name: "Japan", code: "JPN", flag: "JP", gold: 14, silver: 6, bronze: 9 },
    { name: "Australia", code: "AUS", flag: "AU", gold: 11, silver: 8, bronze: 7 },
    { name: "United States", code: "USA", flag: "US", gold: 10, silver: 12, bronze: 8 },
    { name: "France", code: "FRA", flag: "FR", gold: 8, silver: 7, bronze: 11 },
    { name: "Great Britain", code: "GBR", flag: "GB", gold: 7, silver: 9, bronze: 6 },
    { name: "China", code: "CHN", flag: "CN", gold: 7, silver: 6, bronze: 5 },
    { name: "Netherlands", code: "NED", flag: "NL", gold: 5, silver: 4, bronze: 7 },
    { name: "Brazil", code: "BRA", flag: "BR", gold: 3, silver: 5, bronze: 6 },
  ],
};
const svg = drawKyogijo({
  sport: "athletics",
  board: { svg: broadcastMedalTable(source, { width: 720, look: "night" }), ...broadcastMedalSize(source.rows.length, { width: 720 }), position: "corner" },
});

Where it goes#

Nine names: top, bottom, side (right), left, corner (top right), top-left, top-right, bottom-left and bottom-right. Each keeps one margin from the edge it is at.

Bottom

Centred at the bottom edge.

tsDownload SVGOpen in a page
import { drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";
import { broadcastMedalTable, broadcastMedalSize } from "@johnmorrisdotca/taisen-brackets";

const source = {
  title: "Medal table",
  subtitle: "Day 12",
  date: "Games",
  rows: [
    { name: "Japan", code: "JPN", flag: "JP", gold: 14, silver: 6, bronze: 9 },
    { name: "Australia", code: "AUS", flag: "AU", gold: 11, silver: 8, bronze: 7 },
    { name: "United States", code: "USA", flag: "US", gold: 10, silver: 12, bronze: 8 },
    { name: "France", code: "FRA", flag: "FR", gold: 8, silver: 7, bronze: 11 },
    { name: "Great Britain", code: "GBR", flag: "GB", gold: 7, silver: 9, bronze: 6 },
    { name: "China", code: "CHN", flag: "CN", gold: 7, silver: 6, bronze: 5 },
    { name: "Netherlands", code: "NED", flag: "NL", gold: 5, silver: 4, bronze: 7 },
    { name: "Brazil", code: "BRA", flag: "BR", gold: 3, silver: 5, bronze: 6 },
  ],
};
const svg = drawKyogijo({
  sport: "swimming",
  board: { svg: broadcastMedalTable(source, { width: 720, look: "night" }), ...broadcastMedalSize(source.rows.length, { width: 720 }), position: "bottom" },
});

Left

At the left edge, centred up and down.

tsDownload SVGOpen in a page
import { drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";
import { broadcastMedalTable, broadcastMedalSize } from "@johnmorrisdotca/taisen-brackets";

const source = {
  title: "Medal table",
  subtitle: "Day 12",
  date: "Games",
  rows: [
    { name: "Japan", code: "JPN", flag: "JP", gold: 14, silver: 6, bronze: 9 },
    { name: "Australia", code: "AUS", flag: "AU", gold: 11, silver: 8, bronze: 7 },
    { name: "United States", code: "USA", flag: "US", gold: 10, silver: 12, bronze: 8 },
    { name: "France", code: "FRA", flag: "FR", gold: 8, silver: 7, bronze: 11 },
    { name: "Great Britain", code: "GBR", flag: "GB", gold: 7, silver: 9, bronze: 6 },
    { name: "China", code: "CHN", flag: "CN", gold: 7, silver: 6, bronze: 5 },
    { name: "Netherlands", code: "NED", flag: "NL", gold: 5, silver: 4, bronze: 7 },
    { name: "Brazil", code: "BRA", flag: "BR", gold: 3, silver: 5, bronze: 6 },
  ],
};
const svg = drawKyogijo({
  sport: "swimming",
  board: { svg: broadcastMedalTable(source, { width: 720, look: "night" }), ...broadcastMedalSize(source.rows.length, { width: 720 }), position: "left" },
});

Top left

tsDownload SVGOpen in a page
import { drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";
import { broadcastMedalTable, broadcastMedalSize } from "@johnmorrisdotca/taisen-brackets";

const source = {
  title: "Medal table",
  subtitle: "Day 12",
  date: "Games",
  rows: [
    { name: "Japan", code: "JPN", flag: "JP", gold: 14, silver: 6, bronze: 9 },
    { name: "Australia", code: "AUS", flag: "AU", gold: 11, silver: 8, bronze: 7 },
    { name: "United States", code: "USA", flag: "US", gold: 10, silver: 12, bronze: 8 },
    { name: "France", code: "FRA", flag: "FR", gold: 8, silver: 7, bronze: 11 },
    { name: "Great Britain", code: "GBR", flag: "GB", gold: 7, silver: 9, bronze: 6 },
    { name: "China", code: "CHN", flag: "CN", gold: 7, silver: 6, bronze: 5 },
    { name: "Netherlands", code: "NED", flag: "NL", gold: 5, silver: 4, bronze: 7 },
    { name: "Brazil", code: "BRA", flag: "BR", gold: 3, silver: 5, bronze: 6 },
  ],
};
const svg = drawKyogijo({
  sport: "swimming",
  board: { svg: broadcastMedalTable(source, { width: 720, look: "night" }), ...broadcastMedalSize(source.rows.length, { width: 720 }), position: "top-left" },
});

Bottom right

tsDownload SVGOpen in a page
import { drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";
import { broadcastMedalTable, broadcastMedalSize } from "@johnmorrisdotca/taisen-brackets";

const source = {
  title: "Medal table",
  subtitle: "Day 12",
  date: "Games",
  rows: [
    { name: "Japan", code: "JPN", flag: "JP", gold: 14, silver: 6, bronze: 9 },
    { name: "Australia", code: "AUS", flag: "AU", gold: 11, silver: 8, bronze: 7 },
    { name: "United States", code: "USA", flag: "US", gold: 10, silver: 12, bronze: 8 },
    { name: "France", code: "FRA", flag: "FR", gold: 8, silver: 7, bronze: 11 },
    { name: "Great Britain", code: "GBR", flag: "GB", gold: 7, silver: 9, bronze: 6 },
    { name: "China", code: "CHN", flag: "CN", gold: 7, silver: 6, bronze: 5 },
    { name: "Netherlands", code: "NED", flag: "NL", gold: 5, silver: 4, bronze: 7 },
    { name: "Brazil", code: "BRA", flag: "BR", gold: 3, silver: 5, bronze: 6 },
  ],
};
const svg = drawKyogijo({
  sport: "swimming",
  board: { svg: broadcastMedalTable(source, { width: 720, look: "night" }), ...broadcastMedalSize(source.rows.length, { width: 720 }), position: "bottom-right" },
});

How large it may be#

A named position takes the share asked for (a share of the drawing's width), unless that would reach into the middle: then the board is made smaller, never moved. The board keeps its own shape, so no letter is stretched.

A fifth of the width

`share: 0.2`.

tsDownload SVGOpen in a page
import { drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";
import { resultsBoard, resultsBoardSize } from "@johnmorrisdotca/taisen-brackets";

const source = {
  title: "Men's 100m freestyle",
  phase: "Final",
  columns: [{ precision: 2 }],
  rows: [
    { code: "AUS", flag: "AU", name: "Callum Reyes", values: [46.91], record: "OR" },
    { code: "USA", flag: "US", name: "Dominic Ward", values: [47.2] },
    { code: "JPN", flag: "JP", name: "Haruki Tanabe", values: [47.38], record: "NR" },
    { code: "FRA", flag: "FR", name: "Mathis Delorme", values: [47.55] },
    { code: "GBR", flag: "GB", name: "Owen Gallagher", values: [47.61] },
    { code: "BRA", flag: "BR", name: "Tiago Menezes", values: [47.89] },
    { code: "HUN", flag: "HU", name: "Balint Szabo", values: [48.02] },
    { code: "CAN", flag: "CA", name: "Liam Fontaine", values: [48.17] },
  ],
};
const svg = drawKyogijo({
  sport: "swimming",
  board: { svg: resultsBoard(source, { width: 960, look: "blue", icon: "medal" }), ...resultsBoardSize(source.rows.length, { width: 960 }), position: "top", share: 0.2 },
});

As much as the room gives

`share: 1` asks for the whole width; the board stops where the middle of the surface begins.

tsDownload SVGOpen in a page
import { drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";
import { resultsBoard, resultsBoardSize } from "@johnmorrisdotca/taisen-brackets";

const source = {
  title: "Men's 100m freestyle",
  phase: "Final",
  columns: [{ precision: 2 }],
  rows: [
    { code: "AUS", flag: "AU", name: "Callum Reyes", values: [46.91], record: "OR" },
    { code: "USA", flag: "US", name: "Dominic Ward", values: [47.2] },
    { code: "JPN", flag: "JP", name: "Haruki Tanabe", values: [47.38], record: "NR" },
    { code: "FRA", flag: "FR", name: "Mathis Delorme", values: [47.55] },
    { code: "GBR", flag: "GB", name: "Owen Gallagher", values: [47.61] },
    { code: "BRA", flag: "BR", name: "Tiago Menezes", values: [47.89] },
    { code: "HUN", flag: "HU", name: "Balint Szabo", values: [48.02] },
    { code: "CAN", flag: "CA", name: "Liam Fontaine", values: [48.17] },
  ],
};
const svg = drawKyogijo({
  sport: "swimming",
  board: { svg: resultsBoard(source, { width: 960, look: "blue", icon: "medal" }), ...resultsBoardSize(source.rows.length, { width: 960 }), position: "top", share: 1 },
});

Tall, for a phone

The same board over a rink that lies tall: the room above the middle is what holds it.

tsDownload SVGOpen in a page
import { drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";
import { resultsBoard, resultsBoardSize } from "@johnmorrisdotca/taisen-brackets";

const source = {
  title: "Men's 100m freestyle",
  phase: "Final",
  columns: [{ precision: 2 }],
  rows: [
    { code: "AUS", flag: "AU", name: "Callum Reyes", values: [46.91], record: "OR" },
    { code: "USA", flag: "US", name: "Dominic Ward", values: [47.2] },
    { code: "JPN", flag: "JP", name: "Haruki Tanabe", values: [47.38], record: "NR" },
    { code: "FRA", flag: "FR", name: "Mathis Delorme", values: [47.55] },
    { code: "GBR", flag: "GB", name: "Owen Gallagher", values: [47.61] },
    { code: "BRA", flag: "BR", name: "Tiago Menezes", values: [47.89] },
    { code: "HUN", flag: "HU", name: "Balint Szabo", values: [48.02] },
    { code: "CAN", flag: "CA", name: "Liam Fontaine", values: [48.17] },
  ],
};
const svg = drawKyogijo({
  sport: "nhl", orientation: "portrait",
  board: { svg: resultsBoard(source, { width: 960, look: "blue", icon: "medal" }), ...resultsBoardSize(source.rows.length, { width: 960 }), position: "top" },
});

When it may cover the middle#

cover: true lifts the limit for a named position, and a point of your own is never held to it. The board stays inside the drawing either way.

`cover: true`

A large board at the bottom, a little transparent so that the lanes show through.

tsDownload SVGOpen in a page
import { drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";
import { resultsBoard, resultsBoardSize } from "@johnmorrisdotca/taisen-brackets";

const source = {
  title: "Men's 100m freestyle",
  phase: "Final",
  columns: [{ precision: 2 }],
  rows: [
    { code: "AUS", flag: "AU", name: "Callum Reyes", values: [46.91], record: "OR" },
    { code: "USA", flag: "US", name: "Dominic Ward", values: [47.2] },
    { code: "JPN", flag: "JP", name: "Haruki Tanabe", values: [47.38], record: "NR" },
    { code: "FRA", flag: "FR", name: "Mathis Delorme", values: [47.55] },
    { code: "GBR", flag: "GB", name: "Owen Gallagher", values: [47.61] },
    { code: "BRA", flag: "BR", name: "Tiago Menezes", values: [47.89] },
    { code: "HUN", flag: "HU", name: "Balint Szabo", values: [48.02] },
    { code: "CAN", flag: "CA", name: "Liam Fontaine", values: [48.17] },
  ],
};
const svg = drawKyogijo({
  sport: "swimming",
  board: { svg: resultsBoard(source, { width: 960, look: "blue", icon: "medal" }), ...resultsBoardSize(source.rows.length, { width: 960 }), position: "bottom", share: 0.9, cover: true, opacity: 0.85 },
});

A point of your own

`position: { x: 0.5, y: 0.5, anchor: "center" }`: the middle of the drawing, as asked.

tsDownload SVGOpen in a page
import { drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";
import { broadcastMedalTable, broadcastMedalSize } from "@johnmorrisdotca/taisen-brackets";

const source = {
  title: "Medal table",
  subtitle: "Day 12",
  date: "Games",
  rows: [
    { name: "Japan", code: "JPN", flag: "JP", gold: 14, silver: 6, bronze: 9 },
    { name: "Australia", code: "AUS", flag: "AU", gold: 11, silver: 8, bronze: 7 },
    { name: "United States", code: "USA", flag: "US", gold: 10, silver: 12, bronze: 8 },
    { name: "France", code: "FRA", flag: "FR", gold: 8, silver: 7, bronze: 11 },
    { name: "Great Britain", code: "GBR", flag: "GB", gold: 7, silver: 9, bronze: 6 },
    { name: "China", code: "CHN", flag: "CN", gold: 7, silver: 6, bronze: 5 },
    { name: "Netherlands", code: "NED", flag: "NL", gold: 5, silver: 4, bronze: 7 },
    { name: "Brazil", code: "BRA", flag: "BR", gold: 3, silver: 5, bronze: 6 },
  ],
};
const svg = drawKyogijo({
  sport: "athletics",
  board: { svg: broadcastMedalTable(source, { width: 720, look: "night" }), ...broadcastMedalSize(source.rows.length, { width: 720 }), position: { x: 0.5, y: 0.5, anchor: "center" }, share: 0.45, opacity: 0.9 },
});

Dark and Japanese#

The surface follows the theme and the language; the board is a graphic in the look it was drawn in.

Dark

`theme: "dark"` on the surface; the board keeps its own look.

tsDownload SVGOpen in a page
import { drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";
import { resultsBoard, resultsBoardSize } from "@johnmorrisdotca/taisen-brackets";

const source = {
  title: "Men's 100m freestyle",
  phase: "Final",
  columns: [{ precision: 2 }],
  rows: [
    { code: "AUS", flag: "AU", name: "Callum Reyes", values: [46.91], record: "OR" },
    { code: "USA", flag: "US", name: "Dominic Ward", values: [47.2] },
    { code: "JPN", flag: "JP", name: "Haruki Tanabe", values: [47.38], record: "NR" },
    { code: "FRA", flag: "FR", name: "Mathis Delorme", values: [47.55] },
    { code: "GBR", flag: "GB", name: "Owen Gallagher", values: [47.61] },
    { code: "BRA", flag: "BR", name: "Tiago Menezes", values: [47.89] },
    { code: "HUN", flag: "HU", name: "Balint Szabo", values: [48.02] },
    { code: "CAN", flag: "CA", name: "Liam Fontaine", values: [48.17] },
  ],
};
const svg = drawKyogijo({
  sport: "swimming", theme: "dark",
  board: { svg: resultsBoard(source, { width: 960, look: "blue", icon: "medal" }), ...resultsBoardSize(source.rows.length, { width: 960 }), position: "top" },
});

In Japanese

`language: "ja"` on the surface: its title and description are in Japanese.

tsDownload SVGOpen in a page
import { drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";
import { boutBoard, boutBoardSize } from "@johnmorrisdotca/taisen-brackets";

const source = {
  title: "Men's -73 kg",
  phase: "Semi-final",
  bout: 23,
  red: { code: "JPN", flag: "JP", name: "TANABE H." },
  blue: { code: "GEO", flag: "GE", name: "GELASHVILI L." },
  officials: [
    { role: "referee", code: "KAZ", flag: "KZ", name: "OMAROV Daniyar" },
    { code: "MGL", flag: "MN", name: "BATTULGA Enkh" },
    { code: "POL", flag: "PL", name: "WOJCIK Marek" },
  ],
};
const svg = drawKyogijo({
  sport: "judo", language: "ja",
  board: { svg: boutBoard(source, { width: 960, look: "blue" }), ...boutBoardSize(source.officials.length, { width: 960 }), position: "top" },
});