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

Boards over a surface

A results board, a bout presentation or a medal table, drawn by anything else, laid over a surface: the final of a swimming race over the pool, a judo bout over the mat, the 100 m over the athletics oval, a medal table in a corner. The board option takes the board as an SVG string with its size, in a drawing and in the 3D view, and places it: at the top, a side or a corner, kept off the middle of the surface, in its own shape.

Kyogijo draws no board of its own. The pictures here are Taisen Brackets' (resultsBoard, boutBoard, broadcastMedalTable, each with a ...Size function that gives the size before it is drawn), a development dependency of this repository for the demo and these pages and never of the package: a board is any string of SVG.

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", name: "Callum Reyes", values: [46.91], record: "OR" },
    { code: "USA", name: "Dominic Ward", values: [47.2] },
    { code: "JPN", name: "Haruki Tanabe", values: [47.38] },
  ],
};
const size = resultsBoardSize(source.rows.length, { width: 960 });
const svg = drawKyogijo({
  sport: "swimming",
  board: { svg: resultsBoard(source, { width: 960 }), width: size.width, height: size.height, position: "top" },
});
console.log(svg.includes('data-board="top"'), svg.includes('class="ky-board-img"'), svg.includes("<script"));
// true true false

The demo's boards page lays five boards over a pool, a mat and two ovals, in 2D and in 3D, and keeps the placement in its address. The gallery shows every position and the limits below. The athletes and results in the pictures are invented.

The option#

board is { svg, width?, height?, position?, share?, margin?, opacity?, cover?, label? }.

BOARD_POSITIONS lists the names, and placeBoard(board, box) is the place a board takes in a box, for a page that wants to know before it draws.

Off the middle#

A named position keeps to its edge and takes the share asked for, unless that would reach into the middle of the surface, where the score's panel stands: the middle is BOARD_CLEAR (a third, 0.34) of the drawing's width and height, centred. Then the board is made smaller, never moved. A board is never larger than its edge leaves room for, so a tall list at the top of a short drawing is small, and a medal table in a corner is as large as its share. cover: true lifts the limit for a named position. A point of your own, { x: 0.5, y: 0.5, anchor: "center" }, is the share of the width and of the height of its top left corner (or of its middle), and is never held to it: you asked. A board stays inside the drawing whatever is asked.

A board is laid over the surface and not over a compact card's strip, so the strip's score stays clear. A badge, which is a strip alone, takes no board. A drawing with no board, or with one that is not a board, is the same text it always was.

Never stretched#

The picture is written as one <image> of the board's own shape, with preserveAspectRatio="xMidYMid meet", so that a letter is never stretched: the width is a share of the drawing and the height follows. The SVG is given to the browser as an image (a data: address), so nothing in it can run, its styles stay in it and its ids cannot meet the drawing's. A board may be up to 200,000 characters; one that is longer is ignored.

In 3D#

In the 3D view a board is a layer over the view, not a plane of the scene: it does not turn, tip or zoom with the surface, and it never takes the pointer, so a drag on it turns the view. It is laid out by CSS as a share of the view's width, in the board's own shape, and its height is held to what keeps the middle of the view clear in a view of 16 by 10 and any other shape.

import { mountKyogijoTurn } from "@johnmorrisdotca/kyogijo-stadiums/turn";

declare const boutSvg: string; // what boutBoard(...) gave
declare const nextBoutSvg: string;

const view = mountKyogijoTurn(document.querySelector("#mat")!, { sport: "judo", board: { svg: boutSvg, width: 960, height: 269, position: "top" } });
view.preset("corner"); // the board stays where it is
view.update({ sport: "judo", board: { svg: nextBoutSvg, width: 960, height: 269, position: "top" } }); // a new board, the view keeps its turn

turnMarkup writes the layer into the markup it makes, after the scene, and the stylesheet (KYOGIJO_TURN_STYLE) has its rules; where the browser cannot draw in 3D, the flat drawing is shown with the board on it.

A medal table in a corner#

A board is any SVG: make it with your own code, or with Taisen Brackets' three. They carry no mark of any games, federation or broadcaster, and neither does Kyogijo; a mark of yours is yours to have the right to.

Edit this page on GitHub