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.

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

Gallery: judging assignments

The officials of each judo mat by seat, with a name and an ID: in the seat where they fit, and in a chart whose rows grow until nothing is cut. The names are invented. Every picture is drawn by the build from the code under it.

One mat5
A contest4
The broadcast view6
Several mats2
A tablet, both ways up2
Dark and Japanese2

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

One mat#

A kata area's five judges. A name that does not fit its seat is in the chart, and a seat with nobody in it says so.

A mat with the chart beside it

The seats are numbers, large and round, and the chart is the key: each name wrapped whole, its ID under it.

tsDownload SVG Open in a page

import { drawJudging } from "@johnmorrisdotca/kyogijo-stadiums/judging";

const svg = drawJudging({
  style: "kata",
  mats: [
    {
      label: "Mat 1",
      officials: [
        { seat: 1, name: "Aiko Mori", id: "J-1042" },
        { seat: 2, name: "Daniel Okafor", id: "J-0377" },
        { seat: 3, name: "Sofia Lindqvist-Hernandez", id: "J-2210" },
        { seat: 4, name: "Kenji Watanabe", id: "J-0918" },
        { seat: 5, name: "Marta Kowalczyk", id: "J-1555" },
      ],
    },
  ],
});

Names on the seats

`seatNames: true`: the name in the chart's own face, scaled evenly; Judge 3's name is too long for its seat at a readable size, so that seat shows its number.

tsDownload SVG Open in a page

import { drawJudging } from "@johnmorrisdotca/kyogijo-stadiums/judging";

const svg = drawJudging({
  style: "kata",
  mats: [
    {
      label: "Mat 1",
      officials: [
        { seat: 1, name: "Aiko Mori", id: "J-1042" },
        { seat: 2, name: "Daniel Okafor", id: "J-0377" },
        { seat: 3, name: "Sofia Lindqvist-Hernandez", id: "J-2210" },
        { seat: 4, name: "Kenji Watanabe", id: "J-0918" },
        { seat: 5, name: "Marta Kowalczyk", id: "J-1555" },
      ],
    },
  ],
  seatNames: true,
  focus: "bench",
});

The judges' bench close up, names on the seats

With `seatNames: true` and short names every name is on its seat, and the chart is not drawn.

tsDownload SVG Open in a page

import { drawJudging } from "@johnmorrisdotca/kyogijo-stadiums/judging";

const svg = drawJudging({
  style: "kata",
  mats: [
    {
      label: "Mat 1",
      officials: [
        { seat: 1, name: "Aiko Mori", id: "J-1042" },
        { seat: 2, name: "Dan Okafor", id: "J-0377" },
        { seat: 3, name: "Sofia Berg", id: "J-2210" },
        { seat: 4, name: "Ken Sato", id: "J-0918" },
        { seat: 5, name: "Marta Nowak", id: "J-1555" },
      ],
    },
  ],
  focus: "bench",
  seatNames: true,
});

The bench close up, with the chart

Four names fit their cards; the fifth is a number, and its name is in the chart.

tsDownload SVG Open in a page

import { drawJudging } from "@johnmorrisdotca/kyogijo-stadiums/judging";

const svg = drawJudging({
  style: "kata",
  mats: [
    {
      label: "Mat 1",
      officials: [
        { seat: 1, name: "Aiko Mori", id: "J-1042" },
        { seat: 2, name: "Daniel Okafor", id: "J-0377" },
        { seat: 3, name: "Sofia Lindqvist-Hernandez", id: "J-2210" },
        { seat: 4, name: "Kenji Watanabe", id: "J-0918" },
        { seat: 5, name: "Marta Kowalczyk", id: "J-1555" },
      ],
    },
  ],
  focus: "bench",
  seatNames: true,
});

The chart alone

For a page that puts the chart beside the 3D view.

tsDownload SVG Open in a page

import { judgingChart } from "@johnmorrisdotca/kyogijo-stadiums/judging";

const svg = judgingChart({
  style: "kata",
  mats: [
    {
      label: "Mat 1",
      officials: [
        { seat: 1, name: "Aiko Mori", id: "J-1042" },
        { seat: 2, name: "Daniel Okafor", id: "J-0377" },
        { seat: 3, name: "Sofia Lindqvist-Hernandez", id: "J-2210" },
        { seat: 4, name: "Kenji Watanabe", id: "J-0918" },
        { seat: 5, name: "Marta Kowalczyk", id: "J-1555" },
      ],
    },
  ],
});

A contest#

A referee on the mat, the timekeeper, the scorekeeper and the referee supervisor at the technical table, and the side judges of an event with no CARE system.

A contest area

The referee's seat is on the mat, 2 m back from the line the athletes start on; the side judge's, at a corner of the contest area (the place is ours).

tsDownload SVG Open in a page

import { drawJudging } from "@johnmorrisdotca/kyogijo-stadiums/judging";

const svg = drawJudging({
  style: "shiai",
  mats: [
    {
      label: "Mat 1",
      officials: [
        { seat: "referee", name: "Hana Ito", id: "R-204" },
        { seat: "timekeeper", name: "Sam Cole", id: "T-011" },
        { seat: "scorekeeper", name: "Ana Ruiz", id: "T-012" },
        { seat: "supervisor", name: "Peter Lindqvist-Haraldsson", id: "S-003" },
        { seat: "side-judge-1", name: "Kim Park", id: "J-707" },
      ],
    },
  ],
});

Names in the seats

`seatNames: true`: every name fits its seat, so no chart is needed.

tsDownload SVG Open in a page

import { drawJudging } from "@johnmorrisdotca/kyogijo-stadiums/judging";

const svg = drawJudging({
  style: "shiai",
  mats: [
    {
      label: "Mat 1",
      officials: [
        { seat: "referee", name: "Hana Ito", id: "R-204" },
        { seat: "timekeeper", name: "Sam Cole", id: "T-011" },
        { seat: "scorekeeper", name: "Ana Ruiz", id: "T-012" },
        { seat: "supervisor", name: "Eva Roth", id: "S-003" },
      ],
    },
  ],
  chart: "never",
  seatNames: true,
});

The technical table close up

The referee and the side judges are on the mat and its corners: only the table's seats are in the picture of the bench.

tsDownload SVG Open in a page

import { drawJudging } from "@johnmorrisdotca/kyogijo-stadiums/judging";

const svg = drawJudging({
  style: "shiai",
  mats: [
    {
      label: "Mat 1",
      officials: [
        { seat: "timekeeper", name: "Sam Cole", id: "T-011" },
        { seat: "scorekeeper", name: "Ana Ruiz", id: "T-012" },
        { seat: "supervisor", name: "Eva Roth", id: "S-003" },
      ],
    },
  ],
  focus: "bench",
  seatNames: true,
});

With both side judges

tsDownload SVG Open in a page

import { drawJudging } from "@johnmorrisdotca/kyogijo-stadiums/judging";

const svg = drawJudging({
  style: "shiai",
  mats: [
    {
      label: "Mat 1",
      officials: [
        { seat: "referee", name: "Hana Ito", id: "R-204" },
        { seat: "timekeeper", name: "Sam Cole", id: "T-011" },
        { seat: "scorekeeper", name: "Ana Ruiz", id: "T-012" },
        { seat: "supervisor", name: "Peter Lindqvist-Haraldsson", id: "S-003" },
        { seat: "side-judge-1", name: "Kim Park", id: "J-707" },
      ],
    },
  ],
  sideJudges: true,
});

The broadcast view#

The mat large, 16:9, with the officials on a board at its side like a television graphic: the score panel's look, a number badge, a name chip and an ID for each seat. The board never lies over the contest area; the seats keep their badges.

A kata area

`view: "broadcast"`: the board stands beside the mat, and the line `Round 2` comes before the style at its foot.

tsDownload SVG Open in a page

import { drawJudging } from "@johnmorrisdotca/kyogijo-stadiums/judging";

const svg = drawJudging({
  style: "kata",
  view: "broadcast",
  mats: [
    {
      label: "Mat 1",
      officials: [
        { seat: 1, name: "Aiko Mori", id: "J-1042" },
        { seat: 2, name: "Daniel Okafor", id: "J-0377" },
        { seat: 3, name: "Sofia Lindqvist-Hernandez", id: "J-2210" },
        { seat: 4, name: "Kenji Watanabe", id: "J-0918" },
        { seat: 5, name: "Marta Kowalczyk", id: "J-1555" },
      ],
      line: "Round 2",
    },
  ],
});

A contest area

The referee on the mat, the technical table's three at the top, a side judge at a corner and the other seat with nobody in it (a hollow badge and a dashed chip).

tsDownload SVG Open in a page

import { drawJudging } from "@johnmorrisdotca/kyogijo-stadiums/judging";

const svg = drawJudging({
  style: "shiai",
  view: "broadcast",
  sideJudges: true,
  mats: [
    {
      label: "Mat 1",
      line: "Final block",
      officials: [
        { seat: "referee", name: "Hana Ito", id: "R-204" },
        { seat: "timekeeper", name: "Sam Cole", id: "T-011" },
        { seat: "scorekeeper", name: "Ana Ruiz", id: "T-012" },
        { seat: "supervisor", name: "Peter Lindqvist-Haraldsson", id: "S-003" },
        { seat: "side-judge-1", name: "Kim Park", id: "J-707" },
      ],
    },
  ],
});

Dark

tsDownload SVG Open in a page

import { drawJudging } from "@johnmorrisdotca/kyogijo-stadiums/judging";

const svg = drawJudging({
  style: "kata",
  view: "broadcast",
  theme: "dark",
  mats: [
    {
      label: "Mat 1",
      officials: [
        { seat: 1, name: "Aiko Mori", id: "J-1042" },
        { seat: 2, name: "Daniel Okafor", id: "J-0377" },
        { seat: 3, name: "Sofia Lindqvist-Hernandez", id: "J-2210" },
        { seat: 4, name: "Kenji Watanabe", id: "J-0918" },
        { seat: 5, name: "Marta Kowalczyk", id: "J-1555" },
      ],
      line: "Round 2",
    },
  ],
});

In Japanese

tsDownload SVG Open in a page

import { drawJudging } from "@johnmorrisdotca/kyogijo-stadiums/judging";

const svg = drawJudging({
  style: "kata",
  view: "broadcast",
  language: "ja",
  mats: [
    {
      officials: [
        { seat: 1, name: "森 愛子", id: "J-1042" },
        { seat: 2, name: "山田 花子", id: "J-0377" },
        { seat: 3, name: "ダニエル・オカフォー", id: "J-2210" },
      ],
    },
  ],
});

The bench close up

`focus: "bench"` with `seatNames: true`: the names on the seats as well as on the board.

tsDownload SVG Open in a page

import { drawJudging } from "@johnmorrisdotca/kyogijo-stadiums/judging";

const svg = drawJudging({
  style: "kata",
  view: "broadcast",
  focus: "bench",
  seatNames: true,
  mats: [
    {
      label: "Mat 1",
      officials: [
        { seat: 1, name: "Aiko Mori", id: "J-1042" },
        { seat: 2, name: "Dan Okafor", id: "J-0377" },
        { seat: 3, name: "Sofia Berg", id: "J-2210" },
        { seat: 4, name: "Ken Sato", id: "J-0918" },
        { seat: 5, name: "Marta Nowak", id: "J-1555" },
      ],
    },
  ],
});

The board alone

`judgingBoard`: for a page of your own to lay over a picture of the mat, as `mountJudgingBroadcast` does over the 3D view.

tsDownload SVG Open in a page

import { judgingBoard } from "@johnmorrisdotca/kyogijo-stadiums/judging";

const svg = judgingBoard({
  style: "kata",
  mats: [
    {
      label: "Mat 1",
      officials: [
        { seat: 1, name: "Aiko Mori", id: "J-1042" },
        { seat: 2, name: "Daniel Okafor", id: "J-0377" },
        { seat: 3, name: "Sofia Lindqvist-Hernandez", id: "J-2210" },
        { seat: 4, name: "Kenji Watanabe", id: "J-0918" },
        { seat: 5, name: "Marta Kowalczyk", id: "J-1555" },
      ],
      line: "Round 2",
    },
  ],
});

Several mats#

One panel for each mat, one under another; a page with a tab for each mat draws one with mat.

Two mats

tsDownload SVG Open in a page

import { drawJudging } from "@johnmorrisdotca/kyogijo-stadiums/judging";

const svg = drawJudging({
  style: "kata",
  mats: [
    {
      label: "Mat 1",
      officials: [
        { seat: 1, name: "Aiko Mori", id: "J-1042" },
        { seat: 2, name: "Daniel Okafor", id: "J-0377" },
        { seat: 3, name: "Sofia Lindqvist-Hernandez", id: "J-2210" },
        { seat: 4, name: "Kenji Watanabe", id: "J-0918" },
        { seat: 5, name: "Marta Kowalczyk", id: "J-1555" },
      ],
    },
    {
      label: "Mat 2",
      officials: [
        { seat: 1, name: "Li Wei", id: "J-3001" },
        { seat: 3, name: "Priya Raman", id: "J-0042" },
        { seat: 5, name: "Tomás Ferreira", id: "J-2764" },
      ],
    },
  ],
});

The second mat alone

`mat: 2`: one tab of the page.

tsDownload SVG Open in a page

import { drawJudging } from "@johnmorrisdotca/kyogijo-stadiums/judging";

const svg = drawJudging({
  style: "kata",
  mats: [
    {
      label: "Mat 1",
      officials: [
        { seat: 1, name: "Aiko Mori", id: "J-1042" },
        { seat: 2, name: "Daniel Okafor", id: "J-0377" },
        { seat: 3, name: "Sofia Lindqvist-Hernandez", id: "J-2210" },
        { seat: 4, name: "Kenji Watanabe", id: "J-0918" },
        { seat: 5, name: "Marta Kowalczyk", id: "J-1555" },
      ],
    },
    {
      label: "Mat 2",
      officials: [
        { seat: 1, name: "Li Wei", id: "J-3001" },
        { seat: 3, name: "Priya Raman", id: "J-0042" },
        { seat: 5, name: "Tomás Ferreira", id: "J-2764" },
      ],
    },
  ],
  mat: 2,
});

A tablet, both ways up#

Landscape puts the chart beside the plan; portrait puts it under, full width.

Portrait

tsDownload SVG Open in a page

import { drawJudging } from "@johnmorrisdotca/kyogijo-stadiums/judging";

const svg = drawJudging({
  style: "kata",
  mats: [
    {
      label: "Mat 1",
      officials: [
        { seat: 1, name: "Aiko Mori", id: "J-1042" },
        { seat: 2, name: "Daniel Okafor", id: "J-0377" },
        { seat: 3, name: "Sofia Lindqvist-Hernandez", id: "J-2210" },
        { seat: 4, name: "Kenji Watanabe", id: "J-0918" },
        { seat: 5, name: "Marta Kowalczyk", id: "J-1555" },
      ],
    },
  ],
  orientation: "portrait",
  width: 768,
});

The longest name and ID

A name of ninety characters and an ID of sixty are whole: the row grows.

tsDownload SVG Open in a page

import { drawJudging } from "@johnmorrisdotca/kyogijo-stadiums/judging";

const svg = drawJudging({
  style: "kata",
  mats: [
    {
      label: "A mat with a long name of its own",
      officials: [
        {
          seat: 1,
          name: "Maximilian Alexander Friedrich von Hohenlohe-Schillingsfürst und Waldenburg zu Bartenstein",
          id: "0123456789-0123456789-0123456789-0123456789-0123456789-abcd",
        },
        { seat: 2, name: "Li", id: "J-1" },
      ],
    },
  ],
});

Dark and Japanese#

Every colour is a custom property with a value for dark; the words come in English and Japanese, and the names are as they were given.

Dark

tsDownload SVG Open in a page

import { drawJudging } from "@johnmorrisdotca/kyogijo-stadiums/judging";

const svg = drawJudging({
  style: "kata",
  mats: [
    {
      label: "Mat 1",
      officials: [
        { seat: 1, name: "Aiko Mori", id: "J-1042" },
        { seat: 2, name: "Daniel Okafor", id: "J-0377" },
        { seat: 3, name: "Sofia Lindqvist-Hernandez", id: "J-2210" },
        { seat: 4, name: "Kenji Watanabe", id: "J-0918" },
        { seat: 5, name: "Marta Kowalczyk", id: "J-1555" },
      ],
    },
  ],
  theme: "dark",
});

In Japanese

tsDownload SVG Open in a page

import { drawJudging } from "@johnmorrisdotca/kyogijo-stadiums/judging";

const svg = drawJudging({
  style: "kata",
  language: "ja",
  mats: [
    {
      officials: [
        { seat: 1, name: "森 愛子", id: "J-1042" },
        { seat: 2, name: "山田 花子", id: "J-0377" },
        { seat: 3, name: "ダニエル・オカフォー", id: "J-2210" },
      ],
    },
  ],
});