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

Score and layout

A game on a surface: each team's name and logo on its side, the score in the middle, the state of the game, and the surface wide or tall, or as a strip for a list.

Score mode#

Pass home and away. Each team has a name, an optional abbr, score, penalties (a soccer shoot-out), ends and hammer (curling: the score of each end, and the last stone), sets, tiebreaks, points and serving (tennis, volleyball, badminton, pickleball, table tennis, padel, squash, racquetball, sepak takraw, teqball and roundnet: the score in each set or game, a tie-break's points, the game in progress and the server, Net sports), goals, behinds and points (Australian football's goals and behinds, written 10.12 (72); Gaelic games' goals and points, 2-14 (20)), wickets, overs and innings (cricket: runs for wickets, the overs faced and each innings, Field sports), logo, mark and markFit (round marks), color and textColor.

A flag or a crest can also be laid large over each half of the surface, with an emblem in the centre: the pageant.

A team's logo is an https: or relative address, an image data: address, the text of an SVG, or, once Dougu Sports is plugged in with useEmblems, the id of one of its emblems: logo: "crest:shield" is a shield in the team's color with its letters, "sport:nhl" the icon of a sport and "trophy:cup" a cup. It is drawn as an image, so it cannot run a script, and an address of any other kind is ignored. A team without a logo is its name alone.

Which side the home team is on#

A score is drawn the way the sport lists it. Soccer and most of the world's other codes write the home team first, so it is on the left; the North American leagues write the visitor first ("away at home"), so the home team is on the right. homeSide overrides either; homeSideFor(sport, league?) returns the default ("left" or "right"), and HOME_FIRST (and HOME_FIRST_LEAGUES for the leagues that differ from their sport) is the table behind it.

The side decides everything that follows the drawing: the banners and the plate, the badge and the strip of a compact card, the order of the teams in the title and the description ("Calvara 1, Aurelia 2", or in Japanese "Calvara 1、Aurelia 2"), the order of a shoot-out in the status (Final · 2-4 pens, the home team's first when it is on the left), the rows of a curling, net-sport or cricket board, and the way update pulses a changed score.

The default is by sport and by league only where a league's own convention differs from its sport's (today the lacrosse leagues above); the hockey and basketball leagues of other federations (iihf, fiba) keep their sport's default. A league that is a sport of its own (league: "cfl" on an nfl) takes that sport's.

Round marks#

A flag or a crest can be drawn round, as a broadcast graphic draws a country against a country: mark: "round" on a team, or markShape: "round" on the score for both (a team's own mark, round or plain, wins). The logo is clipped to a circle and ringed, on each side of the surface in the full drawing, in the badge and in the strip of a compact card. It is sized by the place the surface gives the team: the end zone of a pitch, the half of a court. Where the words are turned (along the ends of a wide pitch, and in a tall drawing) the mark is turned back and stays upright.

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

const flag = (colours: string[]): string => `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20">${colours.map((c, i) => `<rect x="${i * 10}" width="10" height="20" fill="${c}"/>`).join("")}</svg>`;
const svg = drawKyogijo({
  sport: "soccer",
  markShape: "round",
  away: { name: "Aurelia", abbr: "AUR", score: 2, color: "#0f7a7a", logo: flag(["#0f7a7a", "#f4f0e4", "#e07a1f"]) },
  home: { name: "Calvara", abbr: "CAL", score: 1, color: "#6b2d5c" },
});
console.log(svg.split('class="ky-mark"').length - 1, svg.includes("<clipPath"), svg.includes("ky-mark-i"));
// 2 true true

A round mark with no logo (Calvara above) is the team's initials on its colour; in the badge, which already writes the three letters, a team with no logo has no mark. markFit: "contain" shows a crest whole on a plain disc where cover (the default) fills the circle and cuts the edges of a flag. Curling, the net sports and cricket put the teams on the board, not on the surface, so they have no mark. The mark's ring and hairline are --ky-mark-ring and --ky-mark-edge.

Without the panel#

plate: false draws a score with the teams' names and the rest of the surface and no score panel (or board, for curling, cricket and the net sports). It is what the 3D view does when it hangs the score up as a scoreboard; the drawing without it is the same text as before.

score: "centre" | "strip" | "auto" says where the score goes. centre is the panel on the middle of the surface, strip the compact strip under the drawing (a pageant's pageant.score says it for a pageant). auto, the default, is the centre, except that a drawing with a lineup layer takes the strip, so that the panel hides none of the players; the strip then also carries a situation's pill, scorebug or tag, which the surface leaves off. score: "centre" puts the panel back over the lineup.

Layout#

orientation is landscape (the default), portrait or auto. Portrait turns the surface a quarter clockwise, so the away team is at the top and the home team at the bottom; every name, number and score is turned back so that it reads upright. auto follows aspect, the container's width over its height: in a string it is landscape unless aspect is given, and the browser helpers measure the container, draw again when its shape changes, and treat a container that is as tall as its content and under 560 pixels wide as tall.

A baseball field is already upright, so in portrait it stays as it is and the teams go in strips above and below it.

A badge and a compact card#

size: "badge" is the strip alone, for a list of games; size: "compact" is the surface with that strip under it. drawBadge draws the strip directly.

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

const badge = drawBadge({
  sport: "nba",
  away: { name: "Summit Peaks", abbr: "SMT", score: 98, color: "#14233f" },
  home: { name: "Metro Bolts", abbr: "MTB", score: 104, color: "#c2410c" },
  status: "Q4 2:31",
});
console.log(/viewBox="0 0 440 64"/.test(badge));
// true

Wide and tall#

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

const game = { away: { name: "Harbour City Gulls", score: 27 }, home: { name: "Prairie Ridge Bison", score: 24 }, status: "final" };
const wide = drawKyogijo({ sport: "nfl", ...game, orientation: "landscape" });
const tall = drawKyogijo({ sport: "nfl", ...game, orientation: "portrait" });
const box = (svg: string) => /viewBox="[^ ]+ [^ ]+ ([^ ]+) ([^ "]+)"/.exec(svg)!.slice(1).map(Number);
console.log(box(wide), box(tall));
// [ 384, 184 ] [ 184, 384 ]

See the gallery for each surface wide and tall, and for the badges and the compact cards.

Edit this page on GitHub