@johnmorrisdotca/kyogijo-stadiums 0.48.0 → 0.48.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +23 -0
- package/README.md +112 -474
- package/dist/version.d.ts +1 -1
- package/dist/version.js +1 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -7,6 +7,29 @@ All notable changes to this project are written here. The format follows
|
|
|
7
7
|
|
|
8
8
|
## [Unreleased]
|
|
9
9
|
|
|
10
|
+
## [0.48.1] - 2026-10-30
|
|
11
|
+
|
|
12
|
+
### Changed
|
|
13
|
+
|
|
14
|
+
- **The docs site is regrouped by task and by sport (SPX-297).** The contents has two views, *By task* (start, sports, venues and 3D, data on a surface, gallery, reference) and *By sport* (a guide and the pictures of each of thirteen sports, and the places), its groups open and shut, one page template with a short header, a 48 px search, contents and Copy buttons, in light and dark, phone first. The home page leads with a live picture for each sport and a still for each place (New York, Montreal, the Saddledome, the roof switch, the quality levels, Vancouver, Seattle, Tokyo and the Kodokan, tournament halls, judging) with the page of the demo that shows it, and the six tasks. The gallery's index has a group of live tiles for each sport and for the real venues (each with a Copy button for its code), a filter by name and a button for each group.
|
|
15
|
+
- **The gallery's pages are light.** A picture is drawn from its own file when it comes within a screen or two of the reader, a few at a time, in the page's own stylesheet (so it follows light and dark with the device); the drawings' stylesheet is one cached file, `docs/drawings.css`, and not 197 KB in every page. The pages fall from 0.4 to 1.2 MB to 0.1 to 0.3 MB, and the code is beside each picture, not behind a button. Without script a picture is the image of its file.
|
|
16
|
+
- **The README is a front door** (38 KB, from 64 KB): the hero, a showcase in rows (the picture in the middle of each of the first three turns, slowly; the others stand still), the first examples, and links. The rest of its examples are the new page `docs/examples.md` ("Recipes"), run by `pnpm test:readme` like the rest. The README's moving pictures show each frame twice as long (200 ms; the fly-through 520 ms), by changing only the frames' durations (`retimed` in `scripts/webp-animated.mjs`), so the files keep their size.
|
|
17
|
+
- Twelve pictures that only the docs use moved from `docs/images` (the README's) to `docs/pictures`.
|
|
18
|
+
|
|
19
|
+
### Fixed
|
|
20
|
+
|
|
21
|
+
- **The pictures in the docs pages were not pictures on the site.** A page's image pointed at its file's page on GitHub, not at the file, so the docs site showed none of the screenshots of the 3D views. They are served from the site now, with a dark twin for the dark theme and their size in the tag, so a page does not move as they load.
|
|
22
|
+
|
|
23
|
+
### Added
|
|
24
|
+
|
|
25
|
+
- `docs/pictures/quality-{high,medium,low}-3d-desk-{light,dark}.webp`: Seattle's three venues held at each quality tier.
|
|
26
|
+
- Tests: every address of the docs site before the regrouping is still a page; the home page and the gallery's index name only pages, headings and pictures that exist, draw their tiles when they come near, and filter; every control of the docs is 48 px; a picture of a page loads, light and dark; the contents' two views.
|
|
27
|
+
|
|
28
|
+
### Cost
|
|
29
|
+
|
|
30
|
+
- The package is unchanged (no change to `src/` but its version): `dist/` and the bundle and device budgets are as in 0.48.0. The docs site is bigger by its stills (8 MB of pictures served beside the pages, loaded when near) and smaller in its pages.
|
|
31
|
+
- Japanese: the contents, the search and the buttons of the docs site have new words, checked by a reviewer; the pages' own words stay in English.
|
|
32
|
+
|
|
10
33
|
## [0.48.0] - 2026-10-30
|
|
11
34
|
|
|
12
35
|
### Added
|
package/README.md
CHANGED
|
@@ -34,43 +34,124 @@ The surfaces of forty-three sports, from football and curling to the budō and t
|
|
|
34
34
|
|
|
35
35
|
Kyogijo Stadiums draws the places a game is played on, with the score of the game on them: the teams at their ends, the score in the middle, a label for what it was. The surfaces are drawn to scale from the rulebooks: a football field has its hash marks where the rules put them, a ballpark its fence where its published distances put it.
|
|
36
36
|
|
|
37
|
-
##
|
|
37
|
+
## The showcase
|
|
38
|
+
|
|
39
|
+
Real buildings drawn in the outline OpenStreetMap maps for them, each with a plausible bowl of the seats, tiers and roof its sources give. In the first three rows the picture in the middle turns, slowly, and the others stand still; the last row is still.
|
|
40
|
+
|
|
41
|
+
**Arenas and stadiums** ([real arenas](./docs/venues.md), [real stadiums](./docs/stadiums.md))
|
|
38
42
|
|
|
39
43
|
<table align="center">
|
|
40
44
|
<tr>
|
|
41
45
|
<td align="center" valign="top">
|
|
42
46
|
<picture>
|
|
43
47
|
<source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/johnmorrisdotca/kyogijo-stadiums/main/docs/images/venues-saddledome-3d-desk-dark.webp">
|
|
44
|
-
<img src="https://raw.githubusercontent.com/johnmorrisdotca/kyogijo-stadiums/main/docs/images/venues-saddledome-3d-desk-light.webp" alt="The Scotiabank Saddledome in 3D: two tiers of seats under its saddle roof." width="
|
|
48
|
+
<img src="https://raw.githubusercontent.com/johnmorrisdotca/kyogijo-stadiums/main/docs/images/venues-saddledome-3d-desk-light.webp" alt="The Scotiabank Saddledome in 3D: two tiers of seats under its saddle roof." width="250">
|
|
45
49
|
</picture>
|
|
46
|
-
<br><
|
|
50
|
+
<br><em>The Saddledome under its saddle roof</em>
|
|
47
51
|
</td>
|
|
48
52
|
<td align="center" valign="top">
|
|
49
53
|
<picture>
|
|
50
|
-
<source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/johnmorrisdotca/kyogijo-stadiums/main/docs/images/
|
|
51
|
-
<img src="https://raw.githubusercontent.com/johnmorrisdotca/kyogijo-stadiums/main/docs/images/
|
|
54
|
+
<source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/johnmorrisdotca/kyogijo-stadiums/main/docs/images/turning-venue-desk-dark.webp">
|
|
55
|
+
<img src="https://raw.githubusercontent.com/johnmorrisdotca/kyogijo-stadiums/main/docs/images/turning-venue-desk-light.webp" alt="A real arena turning once round in 3D, slowly: Climate Pledge Arena in the outline of its building, two tiers of seats with a suite level of windows between them, and a darker concourse floor round the bowl." width="250">
|
|
56
|
+
</picture>
|
|
57
|
+
<br><em>Climate Pledge Arena, turning slowly</em>
|
|
58
|
+
</td>
|
|
59
|
+
<td align="center" valign="top">
|
|
60
|
+
<picture>
|
|
61
|
+
<source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/johnmorrisdotca/kyogijo-stadiums/main/docs/images/stadiums-bc-place-3d-desk-dark.webp">
|
|
62
|
+
<img src="https://raw.githubusercontent.com/johnmorrisdotca/kyogijo-stadiums/main/docs/images/stadiums-bc-place-3d-desk-light.webp" alt="BC Place's soccer pitch in 3D: two bowls of seats under a cable-supported roof with an opening." width="250">
|
|
52
63
|
</picture>
|
|
53
|
-
<br><
|
|
64
|
+
<br><em>BC Place under its cable-supported roof</em>
|
|
54
65
|
</td>
|
|
55
66
|
</tr>
|
|
67
|
+
</table>
|
|
68
|
+
|
|
69
|
+
**Tournament halls and judging** ([tournament layouts](./docs/multi.md), [who judges where](./docs/judging.md))
|
|
70
|
+
|
|
71
|
+
<table align="center">
|
|
56
72
|
<tr>
|
|
57
73
|
<td align="center" valign="top">
|
|
58
74
|
<picture>
|
|
75
|
+
<source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/johnmorrisdotca/kyogijo-stadiums/main/docs/images/multi-tabletennis-3d-desk-dark.webp">
|
|
76
|
+
<img src="https://raw.githubusercontent.com/johnmorrisdotca/kyogijo-stadiums/main/docs/images/multi-tabletennis-3d-desk-light.webp" alt="Four table tennis areas on one floor in 3D, with a hung scoreboard." width="250">
|
|
77
|
+
</picture>
|
|
78
|
+
<br><em>Four table tennis areas under one scoreboard</em>
|
|
79
|
+
</td>
|
|
80
|
+
<td align="center" valign="top">
|
|
81
|
+
<picture>
|
|
82
|
+
<source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/johnmorrisdotca/kyogijo-stadiums/main/docs/images/turning-hall-desk-dark.webp">
|
|
83
|
+
<img src="https://raw.githubusercontent.com/johnmorrisdotca/kyogijo-stadiums/main/docs/images/turning-hall-desk-light.webp" alt="A tournament layout turning once round in 3D, slowly: four table tennis areas on one floor, a surround round each and a scoreboard hung over them." width="250">
|
|
84
|
+
</picture>
|
|
85
|
+
<br><em>The same hall, turning slowly</em>
|
|
86
|
+
</td>
|
|
87
|
+
<td align="center" valign="top">
|
|
88
|
+
<picture>
|
|
59
89
|
<source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/johnmorrisdotca/kyogijo-stadiums/main/docs/images/judging-broadcast-3d-desk-dark.webp">
|
|
60
|
-
<img src="https://raw.githubusercontent.com/johnmorrisdotca/kyogijo-stadiums/main/docs/images/judging-broadcast-3d-desk-light.webp" alt="A kata mat in 3D from the broadcast camera, with a board at its side listing each judge." width="
|
|
90
|
+
<img src="https://raw.githubusercontent.com/johnmorrisdotca/kyogijo-stadiums/main/docs/images/judging-broadcast-3d-desk-light.webp" alt="A kata mat in 3D from the broadcast camera, with a board at its side listing each judge." width="250">
|
|
91
|
+
</picture>
|
|
92
|
+
<br><em>A kata mat and its judges, from the broadcast camera</em>
|
|
93
|
+
</td>
|
|
94
|
+
</tr>
|
|
95
|
+
</table>
|
|
96
|
+
|
|
97
|
+
**Districts and the fly-through** ([districts](./docs/district.md), [the fly-through](./docs/flythrough.md))
|
|
98
|
+
|
|
99
|
+
<table align="center">
|
|
100
|
+
<tr>
|
|
101
|
+
<td align="center" valign="top">
|
|
102
|
+
<picture>
|
|
103
|
+
<source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/johnmorrisdotca/kyogijo-stadiums/main/docs/images/district-bc-rogers-3d-desk-dark.webp">
|
|
104
|
+
<img src="https://raw.githubusercontent.com/johnmorrisdotca/kyogijo-stadiums/main/docs/images/district-bc-rogers-3d-desk-light.webp" alt="BC Place and Rogers Arena in 3D on one ground with a grid, a scale and a north arrow." width="250">
|
|
61
105
|
</picture>
|
|
62
|
-
<br><
|
|
106
|
+
<br><em>BC Place and Rogers Arena on one ground</em>
|
|
63
107
|
</td>
|
|
64
108
|
<td align="center" valign="top">
|
|
65
109
|
<picture>
|
|
66
|
-
<source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/johnmorrisdotca/kyogijo-stadiums/main/docs/images/
|
|
67
|
-
<img src="https://raw.githubusercontent.com/johnmorrisdotca/kyogijo-stadiums/main/docs/images/
|
|
110
|
+
<source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/johnmorrisdotca/kyogijo-stadiums/main/docs/images/turning-flythrough-desk-dark.webp">
|
|
111
|
+
<img src="https://raw.githubusercontent.com/johnmorrisdotca/kyogijo-stadiums/main/docs/images/turning-flythrough-desk-light.webp" alt="The fly-through, slowly: a map of North America with a pin on Seattle, the building's outline in the city, Climate Pledge Arena rising into 3D and turning, the roof lifting away, a seat's view across the rink and a play on the ice." width="250">
|
|
68
112
|
</picture>
|
|
69
|
-
<br><
|
|
113
|
+
<br><em>From a map down into the arena, slowly</em>
|
|
114
|
+
</td>
|
|
115
|
+
<td align="center" valign="top">
|
|
116
|
+
<picture>
|
|
117
|
+
<source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/johnmorrisdotca/kyogijo-stadiums/main/docs/images/district-seattle-3d-desk-dark.webp">
|
|
118
|
+
<img src="https://raw.githubusercontent.com/johnmorrisdotca/kyogijo-stadiums/main/docs/images/district-seattle-3d-desk-light.webp" alt="Lumen Field and T-Mobile Park in 3D on one ground: a football stadium under canopies and a ballpark under its roof." width="250">
|
|
119
|
+
</picture>
|
|
120
|
+
<br><em>Lumen Field and T-Mobile Park</em>
|
|
121
|
+
</td>
|
|
122
|
+
</tr>
|
|
123
|
+
</table>
|
|
124
|
+
|
|
125
|
+
**Surfaces** ([the surfaces](./docs/surfaces.md), [score and layout](./docs/score.md))
|
|
126
|
+
|
|
127
|
+
<table align="center">
|
|
128
|
+
<tr>
|
|
129
|
+
<td align="center" valign="top">
|
|
130
|
+
<picture>
|
|
131
|
+
<source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/johnmorrisdotca/kyogijo-stadiums/main/docs/images/football-desk-dark.webp">
|
|
132
|
+
<img src="https://raw.githubusercontent.com/johnmorrisdotca/kyogijo-stadiums/main/docs/images/football-desk-light.webp" alt="A football field drawn wide under floodlight beams: Mexico's green end zone on the left with its flag and name, the USA's navy one on the right, the yard lines and numbers between, and the score panel at midfield reading 27 to 24." width="250">
|
|
133
|
+
</picture>
|
|
134
|
+
<br><em>A football field with the score at midfield</em>
|
|
135
|
+
</td>
|
|
136
|
+
<td align="center" valign="top">
|
|
137
|
+
<picture>
|
|
138
|
+
<source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/johnmorrisdotca/kyogijo-stadiums/main/docs/images/court-desk-dark.webp">
|
|
139
|
+
<img src="https://raw.githubusercontent.com/johnmorrisdotca/kyogijo-stadiums/main/docs/images/court-desk-light.webp" alt="A basketball court in the two-tone look, in a warm glow: a pale floor with a deep blue key, centre circle and border, AUSTRALIA and JAPAN along the baselines, each flag and name on its half, and the score panel at centre court reading 108 to 112." width="250">
|
|
140
|
+
</picture>
|
|
141
|
+
<br><em>A basketball court in the two-tone look</em>
|
|
142
|
+
</td>
|
|
143
|
+
<td align="center" valign="top">
|
|
144
|
+
<picture>
|
|
145
|
+
<source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/johnmorrisdotca/kyogijo-stadiums/main/docs/images/ballpark-desk-dark.webp">
|
|
146
|
+
<img src="https://raw.githubusercontent.com/johnmorrisdotca/kyogijo-stadiums/main/docs/images/ballpark-desk-light.webp" alt="The baseball field of Hanshin Koshien Stadium on royal purple: the outfield fence at its published distances, 95 metres at the lines and 118 in the alleys, the infield dirt, and a red and a navy dugout panel with Japan's and the USA's flags." width="250">
|
|
147
|
+
</picture>
|
|
148
|
+
<br><em>Hanshin Koshien Stadium, with its fence as published</em>
|
|
70
149
|
</td>
|
|
71
150
|
</tr>
|
|
72
151
|
</table>
|
|
73
152
|
|
|
153
|
+
The documentation has [a gallery](https://johnmorrisdotca.github.io/kyogijo-stadiums/docs/gallery.html) of more than a thousand pictures, each drawn from the code beside it, with search, and the [demo](https://johnmorrisdotca.github.io/kyogijo-stadiums/) shows every one live.
|
|
154
|
+
|
|
74
155
|
## In 30 seconds
|
|
75
156
|
|
|
76
157
|
```sh
|
|
@@ -107,64 +188,29 @@ console.log(svg.startsWith("<svg"), svg.includes("USA 3, Canada 2"));
|
|
|
107
188
|
|
|
108
189
|
## Features
|
|
109
190
|
|
|
110
|
-
- **Forty-three surfaces, to scale
|
|
111
|
-
- **
|
|
112
|
-
- **
|
|
113
|
-
- **
|
|
114
|
-
- **
|
|
115
|
-
- **
|
|
116
|
-
- **
|
|
117
|
-
- **
|
|
118
|
-
- **
|
|
119
|
-
- **
|
|
120
|
-
- **
|
|
121
|
-
- **Soccer, to the Laws.** A pitch from Law 1 of the IFAB Laws of the Game of any size, with presets from international to 5-a-side, half pitches, five mowing patterns and four goal styles. [Soccer](./docs/soccer.md).
|
|
122
|
-
- **Every ballpark.** The 30 current MLB parks and 44 that MLB clubs have left, and the 12 home parks of Nippon Professional Baseball with eight other NPB grounds, each with its fence drawn from the distances published for it, as it stood in a season, with its walls and quirks (`walls`, `quirks`), none guessed. [Ballparks](./docs/ballparks.md).
|
|
123
|
-
- **Soccer grounds, arenas and an atlas.** 64 soccer grounds at their published sizes, 167 NHL, NBA, WNBA and PWHL arenas (`drawKyogijo({ sport: "nhl", arena: "boston-garden" })`), and 330 places on a map, found by any of their names. [Grounds](./docs/grounds.md), [arenas](./docs/arenas.md), [atlas](./docs/atlas.md), [names](./docs/ballparks.md#names).
|
|
124
|
-
- **Special games.** A surface set inside another, to scale: an NHL rink on a ballpark's infield, a baseball field over a London stadium's pitch. 18 games, each cited. [Special games](./docs/special-games.md).
|
|
125
|
-
- **Surfaces through the years.** `year: 1975` draws a surface as its league's rules marked it that season, each change cited. [Surfaces through the years](./docs/eras.md).
|
|
126
|
-
- **Score mode.** Each team's name and logo on its side (end zones, ends of the ice, halves of the court, dugouts) and the score large in the middle, with the competition, status and date, and the winner emphasised. [Score and layout](./docs/score.md#round-marks).
|
|
127
|
-
- **The situation of a game.** `situation` draws what is happening: hockey's power play and shootout, baseball's runners and count, football's line of scrimmage, first-down line, red zone and down and distance, with a drive chart. [The situation](./docs/situation.md).
|
|
128
|
-
- **Lineups.** A `lineup` layer places a team's players by position code (`GK`, `CB`, `HK`, `C`) with no coordinates, from a formation (36, in 13 sports), as a disc or a jersey with the number, the name, a captain's C and a flag. [Lineups](./docs/team-shape.md#lineups).
|
|
129
|
-
- **A pageant.** Each team's flag or crest laid large over its half of the surface: `pageant: "carpet"` (a flag at its own ratio) or `"stage"` (a crest on a round disc), an emblem or a trophy in the centre circle, the score in the middle or in the strip. [The pageant](./docs/pageant.md).
|
|
130
|
-
- **Trophies, medals, balls and crests, by id.** `useEmblems(renderEmblem)` plugs in the sister package [Dougu Sports](https://johnmorrisdotca.github.io/dougu-sports/), and an id goes wherever a logo, a flag or a mark is taken: `logo: "crest:shield"`, `"ball:puck"`. [Emblems](./docs/emblems.md).
|
|
131
|
-
- **Country flags, by code.** `useFlags(render)` plugs in the sister package [Hata](https://github.com/johnmorrisdotca/hata) through a small adapter, and a team's `flag: "CA"` is its flag: round in a round mark, at its own proportions on a banner, a badge or a carpet. [Flags](./docs/flags.md).
|
|
132
|
-
- **Zoom to a part of a surface.** `range: "offensive-zone"` crops a drawing to a rink's zone, a half court, the paint, the red zone, a penalty area, the infield, a house, or a box of your own. [Display ranges](./docs/ranges.md).
|
|
133
|
-
- **Wide, tall or fit the box.** Every surface lies wide or tall: tall turns it a quarter, keeps every word upright and puts the teams top and bottom; `orientation: "auto"` follows the box.
|
|
134
|
-
- **Where a point lies, by the rules, and a click as a place.** `zoneAt("nhl", [69, 22], { frame: "nhl-api" })` names the zone from the surface's own figures; `clientPointToField` is a pointer's place in any frame. [Zones](./docs/zones.md), [pointing](./docs/pointer.md).
|
|
135
|
-
- **Goals, the strike zone and the stumps, end-on.** A goal mouth for six sports with the shots laid on it, the catcher's view of the strike zone with its pitches numbered, and the wicket from the bowler's end with its zones. [Targets](./docs/targets.md).
|
|
136
|
-
- **Data on the surface.** Points, lines, arrows, text, heat maps, hexagons and density contours over any surface, in its own feet or a provider's frame; ready-made shot and pass charts. [Data layers](./docs/layers.md), [charts](./docs/charts.md).
|
|
137
|
-
- **Small multiples and backgrounds.** `drawGrid` puts many drawings in one SVG with a title, a shared key and a credit line, for a card or a phone; `background` lays a pattern or a photograph behind them. [Layouts and backgrounds](./docs/layouts.md).
|
|
138
|
-
- **Tournament layouts.** Several surfaces laid out for one event, to scale, as one SVG: thirteen presets, each with its rule and sources, and a stadium round it. [Tournament layouts](./docs/multi.md).
|
|
139
|
-
- **Judging assignments.** Who judges where. [Judging](./docs/judging.md). **Boards over a surface.** [Boards](./docs/boards.md).
|
|
140
|
-
- **Replay.** Tracking data played on any surface: the players, the ball and its trail, and the passes, shots and goals as they happen, with controls and the keyboard. [Replay](./docs/replay.md).
|
|
141
|
-
- **A 3D view.** Any surface as a floor that turns by mouse, touch, wheel or keys, with four viewpoints (overhead, broadcast, end-on, low corner), and what stands on it at its height (nets, baskets, goals, a cage's mesh) and the venue round it (raked stands, roofs, walls). [The 3D view](./docs/turn.md).
|
|
142
|
-
- **Renderers.** The same drawing as plain data (a scene), on a canvas, in a d3 selection, as an Observable Plot mark, as GeoJSON and as a PNG in Node, each an entry of its own. [Renderers](./docs/renderers.md).
|
|
143
|
-
- **Units and frames.** Each surface in its rulebook's unit and any other, and 48 coordinate frames (ten soccer providers, the NHL API, NBA stats, NFL tracking, MLBAM and more) for a provider's points. [Units](./docs/units.md), [coordinate frames](./docs/frames.md).
|
|
144
|
-
- **A compact badge and a compact card.** One strip for a list, or the surface with that strip under it.
|
|
145
|
-
- **Light and dark**, by the device or the page; every colour a custom property; eight named looks, colours by feature, line widths and dashes, arrows, axes and labels. [Theming](./docs/theming.md), [annotations](./docs/annotations.md).
|
|
146
|
-
- **Accessible.** Each drawing is an `img` with a title and a description of the surface and the result, in English or Japanese. [Accessibility](./docs/accessibility.md).
|
|
147
|
-
- **Four ways in.** A function that returns SVG text; a helper that draws into a container; a custom element; a frame for pages with no script; a React helper that imports no React.
|
|
148
|
-
- **No dependencies**, no network requests, nothing stored. Text, colours and logo addresses from outside are made safe.
|
|
149
|
-
- **A docs site.** Guides, a search, a gallery that draws every picture from the code beside it, and [how it compares](./docs/compare.md): [the documentation](./docs/README.md).
|
|
191
|
+
- **Forty-three surfaces, to scale**, each from its rulebook or its published distances, and each league's variants (48 of them): football fields, the NHL rink, the NBA court, soccer, baseball, curling, twelve net and racket sports, pools, athletics, skating, field sports, the budō, the MMA cage, rings and mats. [The surfaces](./docs/surfaces.md), [sources](./docs/sources.md).
|
|
192
|
+
- **The score on the surface**: each team's name and logo on its side, the score in the middle, wide or tall, a compact badge for a list, the situation of a game. [Score and layout](./docs/score.md), [the situation](./docs/situation.md).
|
|
193
|
+
- **Every ballpark and ground**: The 30 current MLB parks and 44 that MLB clubs have left, and the 12 home parks of Nippon Professional Baseball with eight other NPB grounds, each with its fence drawn from the distances published for it; 64 soccer grounds at their published sizes; 167 arenas. [Ballparks](./docs/ballparks.md), [grounds](./docs/grounds.md), [arenas](./docs/arenas.md).
|
|
194
|
+
- **Real venues**: arenas and stadiums in the outline of their buildings, districts of several venues on one plan, the crowd in the stands and outside. [Ballparks](./docs/ballparks.md), [venues](./docs/venues.md), [districts](./docs/district.md).
|
|
195
|
+
- **A 3D view** of any surface or venue that turns by mouse, touch or keys, with the roof and the walls to switch and a quality level for every device. [The 3D view](./docs/turn.md), [quality](./docs/quality.md).
|
|
196
|
+
- **Tournaments**: several surfaces on one floor, who judges where, boards laid over a surface. [Layouts](./docs/multi.md), [judging](./docs/judging.md), [boards](./docs/boards.md).
|
|
197
|
+
- **Data on a surface**: points, heat maps, shot and pass charts, team shapes and a replay, in 48 providers' coordinate frames. [Layers](./docs/layers.md), [frames](./docs/frames.md), [replay](./docs/replay.md).
|
|
198
|
+
- **Looks and flags**: eight named looks, a flag or crest on each half, trophies and crests from Dougu Sports, flags from Hata, light and dark. [Theming](./docs/theming.md), [the pageant](./docs/pageant.md).
|
|
199
|
+
- **Four ways in**: a function that returns SVG text, a helper that draws into a container, a custom element, a frame for pages with no script; renderers for a canvas, d3, Observable Plot, GeoJSON and PNG. [Entry points](./docs/entry-points.md), [renderers](./docs/renderers.md).
|
|
200
|
+
- **Accessible and small**: each drawing is an `img` with a title and a description, in English or Japanese; no dependencies, no network requests, nothing stored.
|
|
201
|
+
- **A docs site** with a gallery of every picture drawn from the code beside it, a search, and [how it compares](./docs/compare.md): [the documentation](./docs/README.md).
|
|
150
202
|
|
|
151
203
|
### What's in it
|
|
152
204
|
|
|
153
205
|
| Part | What it is |
|
|
154
206
|
| --- | --- |
|
|
155
207
|
| `drawKyogijo`, `drawSurface`, `drawScore`, `drawBadge` | The drawing, as a string of SVG. |
|
|
156
|
-
| `SPORTS`, `PARKS`, `
|
|
157
|
-
|
|
|
158
|
-
|
|
|
159
|
-
|
|
|
160
|
-
| `./
|
|
161
|
-
| `./
|
|
162
|
-
| `./athletics`, `./budo`, `./skating` | The athletics stadium, the budō (areas, dohyō, kyūdōjō, the dojo builder `drawDojo`, the 82 kimarite) and the skating rinks: plans, races and charts. |
|
|
163
|
-
| `./parks`, `./grounds`, `./arenas`, `./atlas`, `./eras`, `./leagues`, `./events` | The ballparks, grounds, arenas, every place, a season's markings, each league's rulebook, the special games. |
|
|
164
|
-
| `./venues`, `./stadiums`, `./district`, `./plateau`, `./osm`, `./cityctx` | Real arenas and stadiums in their buildings' outlines; districts on one plan, among PLATEAU's buildings or the streets of Vancouver and Seattle. |
|
|
165
|
-
| `./turn` | A surface as a 3D view that turns, with the net, basket, goal or posts standing on it. |
|
|
166
|
-
| `./scene`, `./canvas`, `./d3`, `./plot`, `./geojson`, `./png` | The drawing as data, on a canvas, in d3, as an Observable Plot mark, as GeoJSON, as a PNG (the optional peer `@resvg/resvg-js`). |
|
|
167
|
-
| `./multi`, `./judging`, `./layouts` | `drawMulti` (several surfaces for one event, [docs](./docs/multi.md), [demo](https://johnmorrisdotca.github.io/kyogijo-stadiums/halls.html)); `drawJudging` (who judges where, [docs](./docs/judging.md)); `drawGrid` (small multiples, backgrounds). |
|
|
208
|
+
| `SPORTS`, `PARKS`, `COURT_THEMES`, `SOCCER_PITCHES`, `GROUNDS`, `EVENTS` | The forty-three sports, the 94 ballparks, the court looks, the pitches, the 64 grounds, the 18 special games. |
|
|
209
|
+
| `./venues`, `./stadiums`, `./district`, `./turn` | Real arenas and stadiums in their buildings' outlines; districts on one plan; a surface as a 3D view that turns. |
|
|
210
|
+
| `./multi`, `./judging`, `./layouts` | Several surfaces for one event ([demo](https://johnmorrisdotca.github.io/kyogijo-stadiums/halls.html)); who judges where; small multiples and backgrounds. |
|
|
211
|
+
| `./layers`, `./charts`, `./frames`, `./zones`, `./pointer`, `./replay` | Data layers, charts, the providers' frames, zones by the rules, a click as a place, tracking data played on a surface. |
|
|
212
|
+
| `./athletics`, `./budo`, `./skating` | The athletics stadium, the budō (areas, dohyō, the dojo builder) and the skating rinks. |
|
|
213
|
+
| `./scene`, `./canvas`, `./d3`, `./plot`, `./geojson`, `./png` | The drawing as data, on a canvas, in d3, as an Observable Plot mark, as GeoJSON, as a PNG. |
|
|
168
214
|
| `./mount`, `./react`, `./element`, `./element/define` | Draw into a container; React props; the `<kyogijo-field>` element and its registration. |
|
|
169
215
|
|
|
170
216
|
The full list of entry points is in [entry points](./docs/entry-points.md); every export is in the [API reference](https://johnmorrisdotca.github.io/kyogijo-stadiums/api.html).
|
|
@@ -192,7 +238,7 @@ Each is shown with its code in [getting started](./docs/getting-started.md); Rea
|
|
|
192
238
|
|
|
193
239
|
## Examples
|
|
194
240
|
|
|
195
|
-
Each example is run against the built package by `pnpm test:readme
|
|
241
|
+
The most used few; [the recipes](./docs/examples.md) have the rest. Each example is run against the built package by `pnpm test:readme`.
|
|
196
242
|
|
|
197
243
|
### A score on the rink
|
|
198
244
|
|
|
@@ -211,35 +257,6 @@ console.log(svg.includes("Cup Final, Game 7"), svg.includes("Final/OT"));
|
|
|
211
257
|
// true true
|
|
212
258
|
```
|
|
213
259
|
|
|
214
|
-
<p align="center">
|
|
215
|
-
<picture>
|
|
216
|
-
<source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/johnmorrisdotca/kyogijo-stadiums/main/docs/images/football-desk-dark.webp">
|
|
217
|
-
<img src="https://raw.githubusercontent.com/johnmorrisdotca/kyogijo-stadiums/main/docs/images/football-desk-light.webp" alt="A football field drawn wide under floodlight beams: Mexico's green end zone on the left with its flag and name, the USA's navy one on the right, the yard lines and numbers between, and the score panel at midfield reading 27 to 24." width="720">
|
|
218
|
-
</picture>
|
|
219
|
-
<br><em>A football field: the end zones in the teams' colours, the score at midfield.</em>
|
|
220
|
-
</p>
|
|
221
|
-
|
|
222
|
-
### Trophies, medals, balls and crests
|
|
223
|
-
|
|
224
|
-
Kyogijo draws none of its own. Plug in [Dougu Sports](https://johnmorrisdotca.github.io/dougu-sports/) (`npm install @johnmorrisdotca/dougu-sports`) once, and its 167 emblems are ids: [Emblems](./docs/emblems.md).
|
|
225
|
-
|
|
226
|
-
```ts
|
|
227
|
-
import { drawKyogijo, useEmblems } from "@johnmorrisdotca/kyogijo-stadiums";
|
|
228
|
-
import { renderEmblem } from "@johnmorrisdotca/dougu-sports/emblems";
|
|
229
|
-
|
|
230
|
-
useEmblems(renderEmblem);
|
|
231
|
-
|
|
232
|
-
const svg = drawKyogijo({
|
|
233
|
-
sport: "soccer",
|
|
234
|
-
away: { name: "Brazil", abbr: "BRA", score: 2, color: "#009739", logo: "crest:shield" },
|
|
235
|
-
home: { name: "England", abbr: "ENG", score: 1, color: "#c8102e", logo: "crest:roundel" },
|
|
236
|
-
status: "final",
|
|
237
|
-
pageant: { style: "stage", emblem: "trophy:soccer-globe", emblemName: "Northern Cup" },
|
|
238
|
-
});
|
|
239
|
-
console.log(svg.includes(encodeURIComponent(">BRA<")), svg.includes("Northern Cup"));
|
|
240
|
-
// true true
|
|
241
|
-
```
|
|
242
|
-
|
|
243
260
|
### A bare surface, and tall for a phone
|
|
244
261
|
|
|
245
262
|
```ts
|
|
@@ -256,28 +273,8 @@ console.log(box(wide), box(tall));
|
|
|
256
273
|
// [ 384, 184 ] [ 184, 384 ]
|
|
257
274
|
```
|
|
258
275
|
|
|
259
|
-
<p align="center">
|
|
260
|
-
<picture>
|
|
261
|
-
<source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/johnmorrisdotca/kyogijo-stadiums/main/docs/images/tall-phone-dark.webp">
|
|
262
|
-
<img src="https://raw.githubusercontent.com/johnmorrisdotca/kyogijo-stadiums/main/docs/images/tall-phone-light.webp" alt="A hockey rink standing tall on a phone, on ice blue: the USA's flag and name in the upper zone, Canada's in the lower, each upright, the score panel between them." width="240">
|
|
263
|
-
</picture>
|
|
264
|
-
<br><em>The same game tall: the teams top and bottom, every word upright.</em>
|
|
265
|
-
</p>
|
|
266
|
-
|
|
267
276
|
[The surfaces](./docs/surfaces.md) lists the forty-three, with their sizes and what is drawn; [score and layout](./docs/score.md) has the options of a score, a strip and a compact card.
|
|
268
277
|
|
|
269
|
-
### A league's rulebook
|
|
270
|
-
|
|
271
|
-
```ts
|
|
272
|
-
import { drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";
|
|
273
|
-
|
|
274
|
-
// A court as FIBA marks it is not the NBA's.
|
|
275
|
-
console.log(drawKyogijo({ sport: "nba", league: "fiba" }) === drawKyogijo({ sport: "nba" }));
|
|
276
|
-
// false
|
|
277
|
-
```
|
|
278
|
-
|
|
279
|
-
Thirty-five leagues, each with its figures and its sources, are in [league variants](./docs/variants.md).
|
|
280
|
-
|
|
281
278
|
### A ballpark, by name
|
|
282
279
|
|
|
283
280
|
```ts
|
|
@@ -291,73 +288,6 @@ console.log(svg.includes("甲子園球場のグラウンド"), svg.includes("阪
|
|
|
291
288
|
// true false true
|
|
292
289
|
```
|
|
293
290
|
|
|
294
|
-
<p align="center">
|
|
295
|
-
<picture>
|
|
296
|
-
<source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/johnmorrisdotca/kyogijo-stadiums/main/docs/images/ballpark-desk-dark.webp">
|
|
297
|
-
<img src="https://raw.githubusercontent.com/johnmorrisdotca/kyogijo-stadiums/main/docs/images/ballpark-desk-light.webp" alt="The baseball field of Hanshin Koshien Stadium on royal purple: the outfield fence at its published distances, 95 metres at the lines and 118 in the alleys, the infield dirt, and a red and a navy dugout panel with Japan's and the USA's flags." width="640">
|
|
298
|
-
</picture>
|
|
299
|
-
<br><em>A ballpark's fence, drawn through the distances its article publishes.</em>
|
|
300
|
-
</p>
|
|
301
|
-
|
|
302
|
-
### A ballpark of the past, in a season
|
|
303
|
-
|
|
304
|
-
```ts
|
|
305
|
-
import { PARKS, parkPointsIn, drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";
|
|
306
|
-
|
|
307
|
-
const polo = PARKS["polo-grounds"];
|
|
308
|
-
console.log(polo.name, polo.from, polo.to, parkPointsIn(polo, 1915).map(([, feet]) => feet));
|
|
309
|
-
// Polo Grounds 1891 1963 [ 277, 433, 258 ]
|
|
310
|
-
console.log(drawKyogijo({ sport: "mlb", park: "polo-grounds", year: 1915 }) === drawKyogijo({ sport: "mlb", park: "polo-grounds", year: 1930 }));
|
|
311
|
-
// false
|
|
312
|
-
```
|
|
313
|
-
|
|
314
|
-
Your own fence (`fence: { left: 310, center: 420 }`) and every park's key are in [ballparks](./docs/ballparks.md) and [parks](./docs/parks.md).
|
|
315
|
-
|
|
316
|
-
### A rink in a ballpark
|
|
317
|
-
|
|
318
|
-
```ts
|
|
319
|
-
import { drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";
|
|
320
|
-
import { EVENTS, eventOptions } from "@johnmorrisdotca/kyogijo-stadiums/events";
|
|
321
|
-
|
|
322
|
-
// The 2009 Winter Classic: the NHL's rink, 200 by 85 feet, on the infield of Wrigley Field.
|
|
323
|
-
const game = EVENTS["winter-classic-2009"];
|
|
324
|
-
console.log(game.name.en, game.dates[0], game.venue.en);
|
|
325
|
-
// 2009 NHL Winter Classic 2009-01-01 Wrigley Field
|
|
326
|
-
const svg = drawKyogijo({
|
|
327
|
-
...eventOptions("winter-classic-2009"),
|
|
328
|
-
away: { name: "Detroit Red Wings", abbr: "DET", score: 6, color: "#ce1126" },
|
|
329
|
-
home: { name: "Chicago Blackhawks", abbr: "CHI", score: 4, color: "#111111" },
|
|
330
|
-
status: "final",
|
|
331
|
-
});
|
|
332
|
-
console.log(svg.includes("Detroit Red Wings 6, Chicago Blackhawks 4"), svg.includes("lies outside the outline"));
|
|
333
|
-
// true true
|
|
334
|
-
```
|
|
335
|
-
|
|
336
|
-
The host, the rink and where it stood are each cited, and each game says whether its place is a source's or a convention: [special games](./docs/special-games.md).
|
|
337
|
-
|
|
338
|
-
### A badge for a list
|
|
339
|
-
|
|
340
|
-
```ts
|
|
341
|
-
import { drawBadge } from "@johnmorrisdotca/kyogijo-stadiums";
|
|
342
|
-
|
|
343
|
-
const badge = drawBadge({
|
|
344
|
-
sport: "nba",
|
|
345
|
-
away: { name: "Australia", abbr: "AUS", score: 98, color: "#00843d" },
|
|
346
|
-
home: { name: "Japan", abbr: "JPN", score: 104, color: "#bc002d" },
|
|
347
|
-
status: "Q4 2:31",
|
|
348
|
-
});
|
|
349
|
-
console.log(/viewBox="0 0 440 64"/.test(badge));
|
|
350
|
-
// true
|
|
351
|
-
```
|
|
352
|
-
|
|
353
|
-
<p align="center">
|
|
354
|
-
<picture>
|
|
355
|
-
<source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/johnmorrisdotca/kyogijo-stadiums/main/docs/images/badges-desk-dark.webp">
|
|
356
|
-
<img src="https://raw.githubusercontent.com/johnmorrisdotca/kyogijo-stadiums/main/docs/images/badges-desk-light.webp" alt="Eight score strips in the demo on a midnight-blue background, each with a team block, flag, short name and score at each end, and in the middle a small picture of the sport and the state of the game, such as Final or 2nd period." width="640">
|
|
357
|
-
</picture>
|
|
358
|
-
<br><em>Badges for a list of games.</em>
|
|
359
|
-
</p>
|
|
360
|
-
|
|
361
291
|
### A court of your own look
|
|
362
292
|
|
|
363
293
|
```ts
|
|
@@ -371,14 +301,6 @@ console.log(svg.includes("--ky-key:#1e4f8f"), svg.includes("METRO BOLTS"));
|
|
|
371
301
|
// true true
|
|
372
302
|
```
|
|
373
303
|
|
|
374
|
-
<p align="center">
|
|
375
|
-
<picture>
|
|
376
|
-
<source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/johnmorrisdotca/kyogijo-stadiums/main/docs/images/court-desk-dark.webp">
|
|
377
|
-
<img src="https://raw.githubusercontent.com/johnmorrisdotca/kyogijo-stadiums/main/docs/images/court-desk-light.webp" alt="A basketball court in the two-tone look, in a warm glow: a pale floor with a deep blue key, centre circle and border, AUSTRALIA and JAPAN along the baselines, each flag and name on its half, and the score panel at centre court reading 108 to 112." width="640">
|
|
378
|
-
</picture>
|
|
379
|
-
<br><em>A court in a look of its own: the paint, the border and the words on the baselines are options.</em>
|
|
380
|
-
</p>
|
|
381
|
-
|
|
382
304
|
The five court looks, the eight looks of every sport and every colour property are in [theming](./docs/theming.md).
|
|
383
305
|
|
|
384
306
|
### Turn it, and see the net
|
|
@@ -402,292 +324,6 @@ console.log(items.map((item) => item.kind).join(), html.includes("preserve-3d"))
|
|
|
402
324
|
|
|
403
325
|
The flat drawing is the floor, turned by a drag, a swipe, the keys or four viewpoints, with what the rulebook stands on it at its height; each part is one `matrix3d`. The auto-turn waits for Play, and turns either way: `counterclockwise` (the near side swinging to the viewer's right) by default, `clockwise` on the Reverse button. In the element: `<kyogijo-field sport="nhl" turn turn-view="broadcast">`. [The 3D view](./docs/turn.md).
|
|
404
326
|
|
|
405
|
-
<p align="center">
|
|
406
|
-
<picture>
|
|
407
|
-
<source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/johnmorrisdotca/kyogijo-stadiums/main/docs/images/turn-volleyball-desk-dark.webp">
|
|
408
|
-
<img src="https://raw.githubusercontent.com/johnmorrisdotca/kyogijo-stadiums/main/docs/images/turn-volleyball-desk-light.webp" alt="A volleyball court from behind an end line, turned in the demo: the net at 2.43 metres on its posts with the antennae, and the viewpoint buttons under it." width="640">
|
|
409
|
-
</picture>
|
|
410
|
-
<br><em>A volleyball net at its rulebook height, with its posts and antennae.</em>
|
|
411
|
-
</p>
|
|
412
|
-
|
|
413
|
-
<p align="center">
|
|
414
|
-
<picture>
|
|
415
|
-
<source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/johnmorrisdotca/kyogijo-stadiums/main/docs/images/turn-rink-desk-dark.webp">
|
|
416
|
-
<img src="https://raw.githubusercontent.com/johnmorrisdotca/kyogijo-stadiums/main/docs/images/turn-rink-desk-light.webp" alt="An ice rink from a low corner: the boards and glass round the ice, a goal at each end, and the score on the ice." width="640">
|
|
417
|
-
</picture>
|
|
418
|
-
<br><em>A rink with its boards, glass and goals.</em>
|
|
419
|
-
</p>
|
|
420
|
-
|
|
421
|
-
<p align="center">
|
|
422
|
-
<picture>
|
|
423
|
-
<source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/johnmorrisdotca/kyogijo-stadiums/main/docs/images/turn-court-desk-dark.webp">
|
|
424
|
-
<img src="https://raw.githubusercontent.com/johnmorrisdotca/kyogijo-stadiums/main/docs/images/turn-court-desk-light.webp" alt="A basketball court from the main camera: a basket on its backboard and padded stanchion at each end." width="640">
|
|
425
|
-
</picture>
|
|
426
|
-
<br><em>A court with a basket at each end, the rim at 10 feet.</em>
|
|
427
|
-
</p>
|
|
428
|
-
|
|
429
|
-
### A shoot-out, and a famous ground
|
|
430
|
-
|
|
431
|
-
```ts
|
|
432
|
-
import { drawKyogijo, soccerSpec } from "@johnmorrisdotca/kyogijo-stadiums";
|
|
433
|
-
|
|
434
|
-
const svg = drawKyogijo({
|
|
435
|
-
sport: "soccer",
|
|
436
|
-
away: { name: "USA", abbr: "USA", score: 2, penalties: 4, color: "#1c3f7a" },
|
|
437
|
-
home: { name: "Canada", abbr: "CAN", score: 2, penalties: 2, color: "#d52b1e" },
|
|
438
|
-
status: "final-pens",
|
|
439
|
-
ground: "metlife-stadium",
|
|
440
|
-
});
|
|
441
|
-
console.log(svg.includes("Final · 2-4 pens"), soccerSpec({ length: 110, width: 70, unit: "yd" }).length.toFixed(2));
|
|
442
|
-
// true 100.58
|
|
443
|
-
```
|
|
444
|
-
|
|
445
|
-
Pitch sizes, mowing patterns, goals and providers are in [soccer](./docs/soccer.md); the 64 grounds are in [the grounds](./docs/grounds.md).
|
|
446
|
-
|
|
447
|
-
### A surface in a season
|
|
448
|
-
|
|
449
|
-
```ts
|
|
450
|
-
import { drawKyogijo, rulesFor } from "@johnmorrisdotca/kyogijo-stadiums";
|
|
451
|
-
|
|
452
|
-
const rink = rulesFor("nhl", 1960);
|
|
453
|
-
console.log(rink.season, rink.rules.centreLine, rink.rules.trapezoid);
|
|
454
|
-
// 1960–61 true null
|
|
455
|
-
console.log(drawKyogijo({ sport: "nba", year: 1978 }) === drawKyogijo({ sport: "nba", year: 1979 }));
|
|
456
|
-
// false
|
|
457
|
-
```
|
|
458
|
-
|
|
459
|
-
Every change and its source is in [surfaces through the years](./docs/eras.md).
|
|
460
|
-
|
|
461
|
-
### Units and a provider's frame
|
|
462
|
-
|
|
463
|
-
```ts
|
|
464
|
-
import { convertLength, surfaceSize } from "@johnmorrisdotca/kyogijo-stadiums/geometry";
|
|
465
|
-
import { convert, toSurface } from "@johnmorrisdotca/kyogijo-stadiums/frames";
|
|
466
|
-
|
|
467
|
-
console.log(surfaceSize("nfl").unit, convertLength(100, "yd", "ft"));
|
|
468
|
-
// yd 300
|
|
469
|
-
// The right end-zone face-off dot, in the NHL API's feet and in HockeyTech's canvas, is one place.
|
|
470
|
-
console.log(toSurface([[69, 22]], { from: "nhl-api" }), convert("hockeytech", "nhl-api")([[600, 0]]));
|
|
471
|
-
// [ [ 169, 20.5 ] ] [ [ 100, 42.5 ] ]
|
|
472
|
-
```
|
|
473
|
-
|
|
474
|
-
[Units](./docs/units.md) and [coordinate frames](./docs/frames.md) have the tables of every surface's unit and every frame's range, origin and source.
|
|
475
|
-
|
|
476
|
-
### Data on a surface
|
|
477
|
-
|
|
478
|
-
```ts
|
|
479
|
-
import { drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";
|
|
480
|
-
|
|
481
|
-
// The NHL API's coordinates are feet from centre ice: `from` puts them on the rink.
|
|
482
|
-
const svg = drawKyogijo({
|
|
483
|
-
sport: "nhl",
|
|
484
|
-
layers: [
|
|
485
|
-
{
|
|
486
|
-
kind: "points",
|
|
487
|
-
name: "shots",
|
|
488
|
-
from: "nhl-api",
|
|
489
|
-
data: [
|
|
490
|
-
{ x: 69, y: 22, team: "home", outcome: "goal", value: 0.31 },
|
|
491
|
-
{ x: 54, y: -8, team: "home", outcome: "shot", value: 0.07 },
|
|
492
|
-
{ x: -61, y: 12, team: "away", outcome: "blocked", value: 0.04 },
|
|
493
|
-
],
|
|
494
|
-
style: { size: { range: [2, 5] }, outcomes: { blocked: { hollow: true, shape: "x" } } },
|
|
495
|
-
},
|
|
496
|
-
],
|
|
497
|
-
});
|
|
498
|
-
console.log(svg.includes("3 shots"), svg.includes("By outcome: goal 1, shot 1, blocked 1."));
|
|
499
|
-
// true true
|
|
500
|
-
```
|
|
501
|
-
|
|
502
|
-
Zoom to a part with `range`: the data follows the crop ([display ranges](./docs/ranges.md)).
|
|
503
|
-
|
|
504
|
-
```ts
|
|
505
|
-
import { drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";
|
|
506
|
-
|
|
507
|
-
const zone = drawKyogijo({ sport: "nhl", range: "offensive-zone", layers: [{ kind: "points", name: "shots", data: [{ x: 169, y: 20.5 }, { x: 150, y: 40 }] }] });
|
|
508
|
-
console.log(zone.includes('data-range="offensive-zone"'), zone.includes("Shows only the offensive zone at the right end."));
|
|
509
|
-
// true true
|
|
510
|
-
```
|
|
511
|
-
|
|
512
|
-
Lines, arrows, text, heat maps, hexagons, zones and contours are in [data layers](./docs/layers.md); shot, spray and pass charts in [charts](./docs/charts.md); pass networks, formations, lineups, Voronoi cells and flow fields are layers too ([team shape](./docs/team-shape.md)).
|
|
513
|
-
|
|
514
|
-
### Small multiples on a card
|
|
515
|
-
|
|
516
|
-
Many drawings in one SVG, with a title, a credit line and a ground behind them ([layouts and backgrounds](./docs/layouts.md)).
|
|
517
|
-
|
|
518
|
-
```ts
|
|
519
|
-
import { drawGrid } from "@johnmorrisdotca/kyogijo-stadiums/layouts";
|
|
520
|
-
|
|
521
|
-
const svg = drawGrid(
|
|
522
|
-
["fenway-park", "wrigley-field", "oracle-park"].map((park) => ({ drawing: { sport: "mlb", park }, label: park })),
|
|
523
|
-
{ preset: "card", title: "Three ballparks", endnote: "Drawn with Kyogijo", background: "grass" },
|
|
524
|
-
);
|
|
525
|
-
console.log(svg.includes('viewBox="0 0 1200 675"'), svg.includes("Three ballparks"));
|
|
526
|
-
// true true
|
|
527
|
-
```
|
|
528
|
-
|
|
529
|
-
### Several surfaces on one floor
|
|
530
|
-
|
|
531
|
-
`drawMulti` lays the package's own surfaces out for one large event, to scale, on one floor, with the officials' chairs and boards and places for the event's words (`sample: true` fills them with an invented event; [tournament layouts](./docs/multi.md)). `multiFit` says whether it fits a hall, `stadium: true` sets it inside stands, `mountMultiTurn` turns it in 3D.
|
|
532
|
-
|
|
533
|
-
```ts
|
|
534
|
-
import { drawMulti, multiLayout } from "@johnmorrisdotca/kyogijo-stadiums/multi";
|
|
535
|
-
|
|
536
|
-
const svg = drawMulti({ preset: "judo-1x3", sample: true });
|
|
537
|
-
const layout = multiLayout({ preset: "judo-1x3" });
|
|
538
|
-
console.log(svg.startsWith("<svg"), layout.cells.length);
|
|
539
|
-
// true 3
|
|
540
|
-
console.log(layout.needs.length, layout.needs.width);
|
|
541
|
-
// 47 19
|
|
542
|
-
```
|
|
543
|
-
|
|
544
|
-
<p align="center">
|
|
545
|
-
<picture>
|
|
546
|
-
<source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/johnmorrisdotca/kyogijo-stadiums/main/docs/images/turning-hall-desk-dark.webp">
|
|
547
|
-
<img src="https://raw.githubusercontent.com/johnmorrisdotca/kyogijo-stadiums/main/docs/images/turning-hall-desk-light.webp" alt="A tournament layout turning once round in 3D, slowly: four table tennis areas on one floor, a surround round each and a scoreboard hung over them." width="640">
|
|
548
|
-
</picture>
|
|
549
|
-
<br><em>A tournament layout, turning: four table tennis areas under one scoreboard.</em>
|
|
550
|
-
</p>
|
|
551
|
-
|
|
552
|
-
### Boards over a surface
|
|
553
|
-
|
|
554
|
-
`board` lays a results board, a bout presentation or a medal table, any SVG, over a surface in 2D and 3D, off its middle and never stretched ([boards](./docs/boards.md)).
|
|
555
|
-
|
|
556
|
-
<p align="center">
|
|
557
|
-
<picture>
|
|
558
|
-
<source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/johnmorrisdotca/kyogijo-stadiums/main/docs/images/boards-swimming-desk-dark.webp">
|
|
559
|
-
<img src="https://raw.githubusercontent.com/johnmorrisdotca/kyogijo-stadiums/main/docs/images/boards-swimming-desk-light.webp" alt="A results board over the top of a swimming pool: eight swimmers, their times and a record badge." width="640">
|
|
560
|
-
</picture>
|
|
561
|
-
<br><em>A final over the pool.</em>
|
|
562
|
-
</p>
|
|
563
|
-
|
|
564
|
-
<p align="center">
|
|
565
|
-
<picture>
|
|
566
|
-
<source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/johnmorrisdotca/kyogijo-stadiums/main/docs/images/boards-judo-3d-desk-dark.webp">
|
|
567
|
-
<img src="https://raw.githubusercontent.com/johnmorrisdotca/kyogijo-stadiums/main/docs/images/boards-judo-3d-desk-light.webp" alt="A bout presentation board over a judo mat seen in 3D, steady while the mat turns." width="640">
|
|
568
|
-
</picture>
|
|
569
|
-
<br><em>A bout over the mat, in 3D.</em>
|
|
570
|
-
</p>
|
|
571
|
-
|
|
572
|
-
<p align="center">
|
|
573
|
-
<picture>
|
|
574
|
-
<source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/johnmorrisdotca/kyogijo-stadiums/main/docs/images/boards-medals-desk-dark.webp">
|
|
575
|
-
<img src="https://raw.githubusercontent.com/johnmorrisdotca/kyogijo-stadiums/main/docs/images/boards-medals-desk-light.webp" alt="A medal table in the top right corner of an athletics stadium, off the middle of the field." width="640">
|
|
576
|
-
</picture>
|
|
577
|
-
<br><em>A medal table in a corner.</em>
|
|
578
|
-
</p>
|
|
579
|
-
|
|
580
|
-
### The real venues
|
|
581
|
-
|
|
582
|
-
`crowd: { real: true }` draws an NHL arena in its building: the outline from OpenStreetMap, the rink lying along the building where it says so, and a plausible bowl of the seats, tiers and roof the sources give. All thirty-two arenas of the league, division by division ([the real venues](./docs/venues.md)). `boards: true` adds LED ribbon boards and a hung scoreboard, generic content ([LED boards](./docs/venues.md#led-boards)). In 3D the demo's [venues page](https://johnmorrisdotca.github.io/kyogijo-stadiums/venues.html) turns while the pointer is over it, with the stands, walls, roof, LED boards, lighting, building, markings and labels switched on the view while it turns.
|
|
583
|
-
|
|
584
|
-
```ts
|
|
585
|
-
import { drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";
|
|
586
|
-
import { planVenue, venueById } from "@johnmorrisdotca/kyogijo-stadiums/venues";
|
|
587
|
-
|
|
588
|
-
const svg = drawKyogijo({ sport: "nhl", arena: "climate-pledge-arena", crowd: { real: true } });
|
|
589
|
-
console.log(svg.includes("ky-cr-shell"), planVenue(venueById("climate-pledge-arena")!).total);
|
|
590
|
-
// true 17151
|
|
591
|
-
```
|
|
592
|
-
|
|
593
|
-
<p align="center">
|
|
594
|
-
<picture>
|
|
595
|
-
<source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/johnmorrisdotca/kyogijo-stadiums/main/docs/images/turning-venue-desk-dark.webp">
|
|
596
|
-
<img src="https://raw.githubusercontent.com/johnmorrisdotca/kyogijo-stadiums/main/docs/images/turning-venue-desk-light.webp" alt="A real arena turning once round in 3D, slowly: Climate Pledge Arena in the outline of its building, two tiers of seats with a suite level of windows between them, and a darker concourse floor round the bowl." width="640">
|
|
597
|
-
</picture>
|
|
598
|
-
<br><em>A real arena, turning: Climate Pledge Arena in the outline of its building (OpenStreetMap).</em>
|
|
599
|
-
</p>
|
|
600
|
-
|
|
601
|
-
### A real stadium, and a district
|
|
602
|
-
|
|
603
|
-
`stadium: "bc-place"` draws BC Place for football or soccer under its cable roof, and Lumen Field, T-Mobile Park, Tokyo Dome, Koshien Stadium (`park`) and Korakuen Hall (`sport: "boxing"`) likewise ([stadiums](./docs/stadiums.md)); `drawDistrict({ venues: ["bc-place", "rogers-arena"] })` puts venues at their real positions, tight as neighbours or spread as a city, to turn together in 3D ([districts](./docs/district.md)).
|
|
604
|
-
|
|
605
|
-
<p align="center">
|
|
606
|
-
<picture>
|
|
607
|
-
<source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/johnmorrisdotca/kyogijo-stadiums/main/docs/images/stadiums-bc-place-3d-desk-dark.webp">
|
|
608
|
-
<img src="https://raw.githubusercontent.com/johnmorrisdotca/kyogijo-stadiums/main/docs/images/stadiums-bc-place-3d-desk-light.webp" alt="BC Place's soccer pitch in 3D: two bowls of seats under a cable-supported roof with an opening." width="640">
|
|
609
|
-
</picture>
|
|
610
|
-
<br><em>BC Place, in 3D.</em>
|
|
611
|
-
</p>
|
|
612
|
-
|
|
613
|
-
<p align="center">
|
|
614
|
-
<picture>
|
|
615
|
-
<source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/johnmorrisdotca/kyogijo-stadiums/main/docs/images/district-bc-rogers-3d-desk-dark.webp">
|
|
616
|
-
<img src="https://raw.githubusercontent.com/johnmorrisdotca/kyogijo-stadiums/main/docs/images/district-bc-rogers-3d-desk-light.webp" alt="BC Place and Rogers Arena in 3D on one ground with a grid, a scale and a north arrow." width="640">
|
|
617
|
-
</picture>
|
|
618
|
-
<br><em>BC Place and Rogers Arena.</em>
|
|
619
|
-
</p>
|
|
620
|
-
|
|
621
|
-
<p align="center">
|
|
622
|
-
<picture>
|
|
623
|
-
<source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/johnmorrisdotca/kyogijo-stadiums/main/docs/images/district-seattle-3d-desk-dark.webp">
|
|
624
|
-
<img src="https://raw.githubusercontent.com/johnmorrisdotca/kyogijo-stadiums/main/docs/images/district-seattle-3d-desk-light.webp" alt="Lumen Field and T-Mobile Park in 3D on one ground: a football stadium under canopies and a ballpark under its roof." width="640">
|
|
625
|
-
</picture>
|
|
626
|
-
<br><em>Seattle's SoDo.</em>
|
|
627
|
-
</p>
|
|
628
|
-
|
|
629
|
-
### A fly-through
|
|
630
|
-
|
|
631
|
-
`mountFlythrough` flies one camera from a map to a real arena: the map falls to the city and the building, which rises into 3D, the roof lifts away, and the camera comes in to a seat, where a made-up play runs on the ice ([the fly-through](./docs/flythrough.md)).
|
|
632
|
-
|
|
633
|
-
<p align="center">
|
|
634
|
-
<picture>
|
|
635
|
-
<source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/johnmorrisdotca/kyogijo-stadiums/main/docs/images/turning-flythrough-desk-dark.webp">
|
|
636
|
-
<img src="https://raw.githubusercontent.com/johnmorrisdotca/kyogijo-stadiums/main/docs/images/turning-flythrough-desk-light.webp" alt="The fly-through, sped up: a map of North America with a pin on Seattle, the building's outline in the city, Climate Pledge Arena rising into 3D and turning, the roof lifting away, a seat's view across the rink and a play on the ice." width="640">
|
|
637
|
-
</picture>
|
|
638
|
-
<br><em>The fly-through to Climate Pledge Arena, sped up.</em>
|
|
639
|
-
</p>
|
|
640
|
-
|
|
641
|
-
### Who judges where
|
|
642
|
-
|
|
643
|
-
`drawJudging` puts each judo mat's officials by seat in the picture and in a chart ([judging](./docs/judging.md)).
|
|
644
|
-
|
|
645
|
-
The broadcast view puts the mat large, with the officials on a board at its side; `judgingPrint` prints one mat to an A4 or US letter page.
|
|
646
|
-
|
|
647
|
-
### A table tennis area
|
|
648
|
-
|
|
649
|
-
A table in the ITTF's playing area, 14 m by 7 m, with surrounds and chairs ([courts](./docs/courts.md#the-table-tennis-playing-area)).
|
|
650
|
-
|
|
651
|
-
<p align="center">
|
|
652
|
-
<picture>
|
|
653
|
-
<source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/johnmorrisdotca/kyogijo-stadiums/main/docs/images/tabletennis-area-desk-dark.webp">
|
|
654
|
-
<img src="https://raw.githubusercontent.com/johnmorrisdotca/kyogijo-stadiums/main/docs/images/tabletennis-area-desk-light.webp" alt="A table tennis table in its playing area, with surrounds and the umpires' chairs" width="660">
|
|
655
|
-
</picture>
|
|
656
|
-
<br><em>The table in its playing area.</em>
|
|
657
|
-
</p>
|
|
658
|
-
|
|
659
|
-
<p align="center">
|
|
660
|
-
<picture>
|
|
661
|
-
<source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/johnmorrisdotca/kyogijo-stadiums/main/docs/images/tabletennis-area-3d-desk-dark.webp">
|
|
662
|
-
<img src="https://raw.githubusercontent.com/johnmorrisdotca/kyogijo-stadiums/main/docs/images/tabletennis-area-3d-desk-light.webp" alt="The same table area in 3D, from a low corner" width="660">
|
|
663
|
-
</picture>
|
|
664
|
-
<br><em>The same area in 3D.</em>
|
|
665
|
-
</p>
|
|
666
|
-
|
|
667
|
-
### A judo kata area
|
|
668
|
-
|
|
669
|
-
`budo: { style: "kata" }` is the IJF's kata area: a tape at the centre and one 3 m either side, and with `officials` the five judges and the coach's chair ([the budō page](./docs/budo.md#the-kata-area)).
|
|
670
|
-
|
|
671
|
-
<p align="center">
|
|
672
|
-
<picture>
|
|
673
|
-
<source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/johnmorrisdotca/kyogijo-stadiums/main/docs/images/judo-kata-desk-dark.webp">
|
|
674
|
-
<img src="https://raw.githubusercontent.com/johnmorrisdotca/kyogijo-stadiums/main/docs/images/judo-kata-desk-light.webp" alt="The IJF's kata area with the judges' seats above and the coach's chair below" width="660">
|
|
675
|
-
</picture>
|
|
676
|
-
<br><em>The kata area, its judges and the coach's chair.</em>
|
|
677
|
-
</p>
|
|
678
|
-
|
|
679
|
-
<p align="center">
|
|
680
|
-
<picture>
|
|
681
|
-
<source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/johnmorrisdotca/kyogijo-stadiums/main/docs/images/judo-kata-tapes-desk-dark.webp">
|
|
682
|
-
<img src="https://raw.githubusercontent.com/johnmorrisdotca/kyogijo-stadiums/main/docs/images/judo-kata-tapes-desk-light.webp" alt="Three short white tapes across the middle of a kata area" width="660">
|
|
683
|
-
</picture>
|
|
684
|
-
<br><em>Close up: the centre tape and the two starting tapes.</em>
|
|
685
|
-
</p>
|
|
686
|
-
|
|
687
|
-
### The combat sports
|
|
688
|
-
|
|
689
|
-
An MMA cage, rings and wrestling mats ([the combat sports page](./docs/combat.md)).
|
|
690
|
-
|
|
691
327
|
### The element in a page
|
|
692
328
|
|
|
693
329
|
```html
|
|
@@ -749,6 +385,8 @@ Tell Vue the tag is a custom element with `compilerOptions.isCustomElement: (tag
|
|
|
749
385
|
|
|
750
386
|
A page that moves (`mountKyogijo`), a file written on a server and a frame for a page with no script are in [getting started](./docs/getting-started.md).
|
|
751
387
|
|
|
388
|
+
A page that moves (`mountKyogijo`), a file written on a server and a frame for a page with no script are in [getting started](./docs/getting-started.md).
|
|
389
|
+
|
|
752
390
|
## API
|
|
753
391
|
|
|
754
392
|
The [API reference](https://johnmorrisdotca.github.io/kyogijo-stadiums/api.html) lists every export of every entry point with its signature and doc comment, made from the source by `pnpm site`. [Entry points](./docs/entry-points.md) says what each holds: the main one draws, the data and geometry ones stand apart, and `/mount`, `/turn`, `/react`, `/element` and `/element/define` put a drawing in a page.
|
package/dist/version.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
/** The package's version: the same as package.json's, and a test holds them to each other. */
|
|
2
|
-
export declare const VERSION = "0.48.
|
|
2
|
+
export declare const VERSION = "0.48.1";
|
package/dist/version.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
/** The package's version: the same as package.json's, and a test holds them to each other. */
|
|
2
|
-
export const VERSION = "0.48.
|
|
2
|
+
export const VERSION = "0.48.1";
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@johnmorrisdotca/kyogijo-stadiums",
|
|
3
|
-
"version": "0.48.
|
|
3
|
+
"version": "0.48.1",
|
|
4
4
|
"description": "Kyogijo Stadiums 競技場, 40 sports' surfaces as SVG, drawn to scale from the rulebooks: NFL, CFL and IFAF football fields, an NHL rink, an NBA court, MLB ballparks, soccer pitches, curling sheets, athletics stadiums, speed skating, short track and figure skating rinks, swimming pools, water polo fields, diving wells, artistic swimming areas, and the courts and fields of tennis, volleyball (indoor, beach and sitting), badminton, pickleball, table tennis, padel, squash, racquetball, sepak takraw, teqball, roundnet, netball, lacrosse, rugby, Australian football, Gaelic games, cricket, field hockey and handball, and the budo of judo, karate, kendo, sumo and kyudo with a dojo of tatami laid as real units, the MMA cage, with each team's name and logo on its side and the score in the middle, stands and a crowd, a pageant of flags, and a 3D view. Light and dark, accessible, a compact badge for lists, a helper for React and a custom element. Zero dependencies.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"sports",
|