@johnmorrisdotca/kyogijo-stadiums 0.25.0 → 0.27.0
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 +27 -0
- package/NOTICE.md +10 -0
- package/README.md +50 -32
- package/dist/crowd.d.ts +7 -2
- package/dist/crowd.js +1 -1
- package/dist/district-entry.d.ts +5 -0
- package/dist/district-entry.js +4 -0
- package/dist/district.d.ts +167 -0
- package/dist/district.js +291 -0
- package/dist/district.turn.d.ts +27 -0
- package/dist/district.turn.js +157 -0
- package/dist/draw.js +10 -1
- package/dist/flythrough-entry.d.ts +8 -0
- package/dist/flythrough-entry.js +6 -0
- package/dist/flythrough.dom.d.ts +103 -0
- package/dist/flythrough.dom.js +517 -0
- package/dist/flythrough.markup.d.ts +48 -0
- package/dist/flythrough.markup.js +86 -0
- package/dist/flythrough.path.d.ts +145 -0
- package/dist/flythrough.path.js +253 -0
- package/dist/flythrough.style.d.ts +2 -0
- package/dist/flythrough.style.js +40 -0
- package/dist/flythrough.words.d.ts +33 -0
- package/dist/flythrough.words.js +44 -0
- package/dist/stadiums-entry.d.ts +2 -0
- package/dist/stadiums-entry.js +2 -0
- package/dist/stadiums.d.ts +158 -0
- package/dist/stadiums.data.d.ts +2 -0
- package/dist/stadiums.data.js +11 -0
- package/dist/stadiums.js +210 -0
- package/dist/stadiums.osm.data.d.ts +2 -0
- package/dist/stadiums.osm.data.js +58 -0
- package/dist/strings.d.ts +11 -0
- package/dist/strings.js +2 -2
- package/dist/turn.kit.d.ts +5 -0
- package/dist/turn.markup.d.ts +7 -0
- package/dist/turn.markup.js +38 -2
- package/dist/turn.model.d.ts +4 -0
- package/dist/turn.style.js +5 -0
- package/dist/types.d.ts +4 -1
- package/dist/venue.d.ts +2 -0
- package/dist/venue.js +1 -1
- package/dist/venue.real.d.ts +6 -1
- package/dist/venue.real.js +56 -9
- package/dist/version.d.ts +1 -1
- package/dist/version.js +1 -1
- package/package.json +18 -1
package/CHANGELOG.md
CHANGED
|
@@ -7,6 +7,33 @@ All notable changes to this project are written here. The format follows
|
|
|
7
7
|
|
|
8
8
|
## [Unreleased]
|
|
9
9
|
|
|
10
|
+
## [0.27.0] - 2026-10-20
|
|
11
|
+
|
|
12
|
+
### Added
|
|
13
|
+
|
|
14
|
+
- **BC Place, a real stadium** (`stadium: "bc-place"` with `crowd: { real: true }`, [the real stadiums](./docs/stadiums.md), entry `@johnmorrisdotca/kyogijo-stadiums/stadiums`): the stadium of Vancouver drawn in the outline of its building, as OpenStreetMap maps it, for **football** (`sport: "cfl"`, the 150 by 65 yard field with its 20-yard end zones, 54,500 seats) and for **soccer** (`sport: "soccer"`, the international 105 by 68 metres, 52,497 seats), the same building and bowl for both. A soccer drawing whose `ground` is `bc-place` needs no `stadium`. Any other sport, a `league` of your own and `crowd: { real: false }` are drawn as before.
|
|
15
|
+
- **Level one, the building and the field.** The outline is the closed way OpenStreetMap tags with the stadium's Wikidata item (read on 2026-10-20, simplified to a metre). OpenStreetMap also maps the roof as a band with an opening in it, which the article says is the field's size (100 by 85 metres; mapped 101.8 by 85.3): the field lies along that opening, 52.8 degrees from north, which the building's own main hall agrees with to a few degrees, and a small arrow says where north is.
|
|
16
|
+
- **Level two, the bowl.** The configuration's seats in two bowls between the first row (the package's gridiron distances from the field) and the building's wall, the lower bowl holding the infobox's 27,695 seats in both configurations and the upper bowl the rest; a bowl that fits holds exactly the configuration's seats (football's 54,500 need 3.4 square feet of floor a seat, soccer's 52,497 need 3.8). Never a seat map; no mark of a club, a league or a tournament.
|
|
17
|
+
- **The cable roof, in 3D** (`venue: { roof: true }`): the roof the article describes, retractable and supported by cables. Its rim stands where OpenStreetMap maps it (48 metres), the roof rises 13 metres to the opening, each piece carries a cable, and over the opening lies the fabric (thin, so the seats show through) with the pod in the middle; `venue: { roof: true, roofOpen: true }` gathers the fabric into the pod. `RealShell.roof` has a third kind, `cable`, with a `crown`.
|
|
18
|
+
- **A district** (`drawDistrict`, `buildDistrictTurn`, `mountDistrictTurn`, [a district of venues](./docs/district.md), entry `@johnmorrisdotca/kyogijo-stadiums/district`): several real venues of one city on one plan at their real relative positions and orientations, read from the same OpenStreetMap outlines, rotatable together in 3D with the steady camera and drawn in 2D too. It is generic: `venues` is any list of keys (`rogers-arena`, `bc-place`, `bc-place:soccer`), the plan fits itself to them, and `mode` says how: `neighbours` (the default) tight round buildings a few hundred metres apart, with a grid of 100 metres, or `city` at the real distances, with a grid of kilometres and a name beside each venue. `turn` turns the map (`"auto"` lays its long way across the page), `labels` writes the names, and the distance between each pair of middles is in `plan.between`.
|
|
19
|
+
- **Buildings stacked building by building.** The 3D view stacks planes by the depth of their middles, which put the roof of a far building over the wall of a near one. A model may now name its buildings (`TurnModel.groups`, `Plane.group`): one building is in front of another when a line can be put between them and the eye is on its side of it (`groupRanks`), the far one drawn first; a model that names none is stacked as before. For BC Place and Rogers Arena depth alone got 56 of 168 views wrong; grouped, none.
|
|
20
|
+
- **The demo's pages**: `stadiums.html` (both configurations in 2D and 3D, the roof closed or open, the facts listed) and `district.html?venues=bc-place,rogers-arena` (venues to choose, neighbours or a city, turned or north up, names, 2D or 3D), English and Japanese, light and dark; the venues page links to both. **The docs** have [a page](./docs/stadiums.md) for the stadium, [a page](./docs/district.md) for the district and [a gallery](https://johnmorrisdotca.github.io/kyogijo-stadiums/docs/gallery-stadiums.html) of both.
|
|
21
|
+
- **ODbL data kept apart**, as for the venues: what OpenStreetMap gave (outline, roof heights, opening, axis) is only in `src/stadiums.osm.data.ts` and `data-sources/stadiums/`; the facts (seats of each configuration, bowls, roof kind and opening size, each with its article and revision) are in `src/stadiums.data.ts`. `pnpm stadiums:fetch` fetches politely, one request at a time; `pnpm stadiums` makes the data files and the docs' table and refuses a figure the sources do not give. The credit `VENUE_ATTRIBUTION` is in every description.
|
|
22
|
+
|
|
23
|
+
## [0.26.0] - 2026-10-20
|
|
24
|
+
|
|
25
|
+
### Added
|
|
26
|
+
|
|
27
|
+
- **The fly-through** (`mountFlythrough`, [the fly-through](./docs/flythrough.md), entry `@johnmorrisdotca/kyogijo-stadiums/flythrough`): one smooth camera from a map to a real arena. It starts on a map drawn with chizu (handed over as `start: { map, draw, project }`, so the package keeps no dependency; a plain graticule without one), falls to the city and to the building of the arena as OpenStreetMap maps it, and the building rises into the 3D arena, which tips to the sport's main camera and turns. `mountFlythrough(host, { arena, start?, stages?, language?, theme? }, settings?)` gives back `play`, `pause`, `toggle`, `next`, `back`, `goTo(stage)`, `seek(seconds)`, `camera()` and `destroy`. This first release ends on the turning arena; into the bowl, down to the rink and a game on it are the next ones.
|
|
28
|
+
- **One path, no jumps.** The camera is ten numbers (how far in, where the arena stands on the screen, how far the map is turned, how much of the map, the plan and the arena shows, the 3D view's turn, tip and zoom), each running through the path's keyframes as a monotone cubic: smooth at every keyframe, still at the start, never overshooting a layer's share. The map's viewBox is true to the ground round the arena and turned to the venue's own orientation as it comes in; the plan hands over to the 3D arena at the same size and place, measured in the stage as it is. `flightPlan`, `cameraAt` and `stageAt` are the path as plain numbers, pure and testable in Node.
|
|
29
|
+
- **Controls and reduced motion.** Back, Play or Pause (the clock eases to a stop), Next and a button for each stage; Space, the arrows, the number keys and Home; a skip glides along the path and does not cut. A reader who prefers reduced motion gets each stage as a still (the map, the plan, the arena at the main camera), Next, Back and the stage buttons show the next still at once, and Play steps through them every five seconds.
|
|
30
|
+
- **The demo's fly-through page** (`flythrough.html?arena=honda-center`): each of the eight venues, English and Japanese, light and dark, desk and phone, with the OpenStreetMap credit under the stage. No word is stretched (the words are HTML over the layers) and no team's or league's mark is drawn.
|
|
31
|
+
- Tests that walk the path at 60 frames a second for every list of stages (no step, no jump of speed), check that every stage is reachable, that the stills show one layer whole, and, in a real browser, that the pin, the plan and the 3D floor never jump on the screen at 30 frames a second and are the same size where they hand over.
|
|
32
|
+
|
|
33
|
+
### Fixed
|
|
34
|
+
|
|
35
|
+
- The shared background module in `scripts/` (tooling for the demo and the README pictures; the package ships none of it) is now the family's version 1.0.1: the `id` it is given is made safe (letters, digits, `_` and `-`; `bg-` in front of one that does not start with a letter) before it is written into element ids and `url(#...)`. `test/family-backgrounds.test.ts` draws every preset with hostile ids.
|
|
36
|
+
|
|
10
37
|
## [0.25.0] - 2026-10-20
|
|
11
38
|
|
|
12
39
|
### Added
|
package/NOTICE.md
CHANGED
|
@@ -45,6 +45,8 @@ picture or code of the sources is copied; each source is named here so that the
|
|
|
45
45
|
| `arenas`: each arena's names, years, city, seats, rink sizes, Wikidata item and coordinates | The infobox and the text of the English Wikipedia article of each arena, at the revision cited below (the names with the years the article dates them, the year it opened, closed and was pulled down, the seats for ice hockey and for basketball, a rink's length and width where the article gives them in a sentence of its own); the name in Japanese from the title of its Japanese article or written for the package; the Wikidata item (CC0) that each article is linked to and its coordinates (P625) | Facts. The articles are CC BY-SA 4.0 (https://creativecommons.org/licenses/by-sa/4.0/); none of their text, tables or images is used |
|
|
46
46
|
| `venues`: the outline of each NHL arena's building, how its rink lies in it and the building's height (`VENUE_OSM`, `src/venues.osm.data.ts`) | OpenStreetMap, through the Overpass API: the closed way tagged with the venue's Wikidata item (and the ice, where it is mapped), read on 2026-10-20, with the raw answers kept in `data-sources/venues/2026-10-20/`; the outline is simplified to a metre, and the way the rink lies is worked out from it (`coreOf`, `src/venues.geo.ts`) | ODbL 1.0, (c) OpenStreetMap contributors (https://www.openstreetmap.org/copyright): a derived database, kept in its own file and offered under the ODbL; a drawing made from it is a produced work and carries the credit (`VENUE_ATTRIBUTION`) |
|
|
47
47
|
| `venues`: each venue's seats for ice hockey, number of seating tiers and kind of roof (`VENUE_DATA`, `src/venues.data.ts`) | The item of Wikidata (the capacity P1083 and the sport it applies to P641) and the English Wikipedia article of each arena, at the revision cited below, in `data-sources/venues/2026-10-20/` as read; the facts are numbers and words of our own, with what was read in a few words | Wikidata's data is CC0; the facts read from the articles are facts, with the articles credited here (CC BY-SA 4.0) |
|
|
48
|
+
| `stadiums`: the outline of each stadium's building, the roof OpenStreetMap maps over it (its heights and the opening in it) and how the field lies, worked out from the opening (`STADIUM_OSM`, `src/stadiums.osm.data.ts`) | OpenStreetMap, through the Overpass API: the closed way tagged with the stadium's Wikidata item and the multipolygon of its roof, read on 2026-10-20, with the raw answers kept in `data-sources/stadiums/2026-10-20/`; the outline is simplified to a metre, and the way the field lies is worked out from the opening (`smallestBox`, `src/venues.geo.ts`) | ODbL 1.0, (c) OpenStreetMap contributors (https://www.openstreetmap.org/copyright): a derived database, kept in its own file and offered under the ODbL; a drawing made from it is a produced work and carries the credit (`VENUE_ATTRIBUTION`) |
|
|
49
|
+
| `stadiums`: each stadium's seats for each configuration, number of seating bowls, kind of roof and the size of its opening (`STADIUM_DATA`, `src/stadiums.data.ts`) | The item of Wikidata (the capacity P1083) and the English Wikipedia article of each stadium, at the revision cited below, in `data-sources/stadiums/2026-10-20/` as read; the facts are numbers and words of our own, with what was read in a few words | Wikidata's data is CC0; the facts read from the article are facts, with the article credited here (CC BY-SA 4.0) |
|
|
48
50
|
| `atlas`: the clubs that played in each park, ground and arena (`tenants`: the club, its Wikidata item, its league, the years) | The occupants (P466) and home venues (P115) Wikidata lists for each place, with the start (P580) and end (P582) times of each statement, and the clubs' labels in English and Japanese, sports (P641) and leagues (P118), read with the Wikidata API and query service by `scripts/fetch-tenants.mjs` into `scripts/tenants.wikidata.json`; and the `tenants` line of the infobox of each place's English Wikipedia article, at the revision that `source.wikipedia` names for each club (155 articles, read on 2026-10-13) | Facts. Wikidata's data is CC0 (https://creativecommons.org/publicdomain/zero/1.0/), and the articles are CC BY-SA 4.0 as above; the names of clubs and the years are facts, no text, table or image of an article is used. Which clubs are tenants, and the league each is filed under, are our reading, in docs/atlas.md ("Tenants") |
|
|
49
51
|
| `parks`: the walls, quirks, backstop, warning track, dugouts and extra points of a ballpark (`walls`, `quirks`, `backstop_ft`, `track_ft`, `dugouts`, `labels`) | The infobox and the text of the same English article of each park, at the same revision as its fence (the Japanese article for the heights of the walls of the parks of Japan): the height of the wall along a stretch of the fence and the seasons it stood, the hill, overhang, poles, bullpens, ivy and basket the text describes with figures, the infobox's backstop distance, the warning track's width, the sides of the dugouts, and the further distances the text gives (Wrigley Field's wells, Sportsman's Park's and Milwaukee County Stadium's markers). The stretch each figure covers and the angle of each extra point are our reading of the article's words | Facts. The articles are CC BY-SA 4.0 (https://creativecommons.org/licenses/by-sa/4.0/); none of their text, tables or images is used |
|
|
50
52
|
| `parks`: the coordinates of each ballpark (`lat`, `lon`) and the years it opened and closed (`opened`, `closed`) | The item's coordinate location (P625), its date of official opening or inception (P1619, P571) and of official closure or dissolution (P3999, P576), read with the Wikidata API by `scripts/fetch-park-coordinates.mjs` and checked by `scripts/check-parks.mjs` (ES CON Field's opening, 2023, is read from its article) | Wikidata's data is CC0 (https://creativecommons.org/publicdomain/zero/1.0/) |
|
|
@@ -422,6 +424,14 @@ The eight arenas of the NHL's Pacific Division, read on 2026-10-20 (`pnpm venues
|
|
|
422
424
|
| Rogers Arena | Q517318 | way/24705911 | Rogers Arena, 1379918849 |
|
|
423
425
|
| T-Mobile Arena | Q3338973 | way/364489406 | T-Mobile Arena, 1379155307 |
|
|
424
426
|
|
|
427
|
+
## The stadiums' sources
|
|
428
|
+
|
|
429
|
+
BC Place, read on 2026-10-20 (`pnpm stadiums:fetch`; the files are in `data-sources/stadiums/2026-10-20/`: `osm-<stadium>.json` as Overpass returned it, `wikidata.json` and `wikipedia.json`). The outline of the building, its roof and the opening in it are OpenStreetMap's, ODbL 1.0, (c) OpenStreetMap contributors, and live in `src/stadiums.osm.data.ts` alone. The seats of each configuration, the bowls, the roof's kind and the size of its opening are in `src/stadiums.data.ts`, with what each cites. No seat map of a club, a ticket seller or a federation is read or copied, and no mark of a club, a league or a tournament is drawn.
|
|
430
|
+
|
|
431
|
+
| Stadium | Wikidata item | OpenStreetMap way | English article and revision |
|
|
432
|
+
| --- | --- | --- | --- |
|
|
433
|
+
| BC Place | Q612227 | way/24705904 | BC Place, 1372065649 |
|
|
434
|
+
|
|
425
435
|
## The World Cups' articles
|
|
426
436
|
|
|
427
437
|
The grounds each World Cup used, and where its final was played, were read from the venue section of the tournament's English Wikipedia article at the revision named (32 tournaments), by the same address. FIFA's own pages are not used.
|
package/README.md
CHANGED
|
@@ -75,17 +75,17 @@ console.log(svg.startsWith("<svg"), svg.includes("USA 3, Canada 2"));
|
|
|
75
75
|
- **Forty-three surfaces, to scale.** The NFL, CFL and IFAF fields, the NHL rink, the NBA court, soccer, baseball, curling, twelve net and racket sports, the pools, athletics, skating, seven field sports, the budō, the MMA cage, the rings and the mats. Every figure is cited in [sources](./docs/sources.md). [The surfaces](./docs/surfaces.md).
|
|
76
76
|
- **Each league's rulebook.** `league: "fiba"` draws a court as FIBA marks it: 48 variants, from the WNBA and the IIHF to Little League, softball, rugby league and box lacrosse, each cited. [League variants](./docs/variants.md).
|
|
77
77
|
- **A realistic basketball floor.** `court: { hardwood: true }` draws maple boards that run the length of the court with staggered ends, grain and stained keys, the baskets with soft shadows, and benches. The clean floor stays the default. [Hardwood](./docs/hardwood.md).
|
|
78
|
-
- **The stands and the crowd.** `crowd: true` draws the seating round any surface that has spectators: a bowl, two sides, a horseshoe, courtside rows or a ballpark's grandstands, with the people as seeded heads in the home colours and the empty seats showing. `crowd: { real: true }` puts an NHL arena in its building's outline (OpenStreetMap) with a plausible bowl
|
|
78
|
+
- **The stands and the crowd.** `crowd: true` draws the seating round any surface that has spectators: a bowl, two sides, a horseshoe, courtside rows or a ballpark's grandstands, with the people as seeded heads in the home colours and the empty seats showing. `crowd: { real: true }` puts an NHL arena, or BC Place, in its building's outline (OpenStreetMap) with a plausible bowl, never a seat map. [The crowd](./docs/crowd.md), [venues](./docs/venues.md), [stadiums](./docs/stadiums.md).
|
|
79
79
|
- **Curling, from the rule books.** A sheet from World Curling's and Curling Canada's rules, tall by default, with the board and the hammer in a score, `curlingStones` for an end's stones, `show: "folded"` for both houses enlarged. [Curling](./docs/curling.md).
|
|
80
80
|
- **Net, racket and court sports, from their rulebooks.** The ITF's, FIVB's, BWF's, USA Pickleball's and ITTF's courts and table, and padel, squash, racquetball, sepak takraw, teqball, roundnet and netball, each in its look, with a board of sets and games. [Net, racket and court sports](./docs/courts.md).
|
|
81
81
|
- **Swimming, water polo, diving and artistic swimming, from World Aquatics' regulations.** The 50 or 25 m pool with its lanes, ropes, blocks and touch panels; the water polo field; the diving well; the artistic swimming area. [Pools](./docs/pools.md).
|
|
82
82
|
- **Lacrosse, rugby, Australian football, Gaelic games, cricket, field hockey and handball, from their rulebooks.** The fields and floors of World Lacrosse, World Rugby, the NRL, the AFL, the GAA, the FIH and the IHF, and a cricket ground. [Field sports](./docs/field-sports.md).
|
|
83
83
|
- **The athletics stadium, from World Athletics' rules.** The 400 m track with its lanes and staggers worked out from the running lines, every race start, hurdles, the steeplechase and the field events, with lane draws, results and a race replay. [The athletics stadium](./docs/athletics.md).
|
|
84
84
|
- **The skating rinks, from the ISU's rules.** The 400 m speed skating track with each race's lines worked out lane by lane; the short track's oval; the figure skating rink; and results, a race replay and a programme's elements. [The skating rinks](./docs/skating.md).
|
|
85
|
-
- **The budō, from the federations' rules.** The IJF's and the All Japan Judo Federation's judo areas, the WKF's karate areas, the kendo shiai-jo, the sumo dohyō, the kyūdōjō, and **a dojo builder**: tatami laid as real units, with its walls, doors, windows and shrine.
|
|
85
|
+
- **The budō, from the federations' rules.** The IJF's and the All Japan Judo Federation's judo areas, the WKF's karate areas, the kendo shiai-jo, the sumo dohyō, the kyūdōjō, and **a dojo builder**: tatami laid as real units, with its walls, doors, windows and shrine. [The budō](./docs/budo.md).
|
|
86
86
|
- **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).
|
|
87
|
-
- **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
|
|
88
|
-
- **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. [
|
|
87
|
+
- **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).
|
|
88
|
+
- **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).
|
|
89
89
|
- **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).
|
|
90
90
|
- **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).
|
|
91
91
|
- **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).
|
|
@@ -124,15 +124,12 @@ console.log(svg.startsWith("<svg"), svg.includes("USA 3, Canada 2"));
|
|
|
124
124
|
| `EVENTS`, `eventOptions` | The 18 special games: a rink in a ballpark, a court on a carrier's deck. |
|
|
125
125
|
| `./zones`, `./pointer`, `./target` | Where a point lies by a sport's own rules; a click as a place in a provider's numbers; a goal, the strike zone or the stumps end-on. |
|
|
126
126
|
| `./geometry`, `./frames`, `./layers`, `./charts`, `./replay` | The dimensions in any unit; the providers' frames; data layers; charts; tracking data played on a surface. |
|
|
127
|
-
| `./athletics` | The athletics stadium
|
|
128
|
-
| `./
|
|
129
|
-
| `./
|
|
130
|
-
| `./parks`, `./grounds`, `./arenas`, `./venues`, `./atlas`, `./eras`, `./leagues`, `./events` | The ballparks, grounds, arenas and real venues, every place, a season's markings, each league's rulebook, the special games. |
|
|
127
|
+
| `./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. |
|
|
128
|
+
| `./parks`, `./grounds`, `./arenas`, `./atlas`, `./eras`, `./leagues`, `./events` | The ballparks, grounds, arenas, every place, a season's markings, each league's rulebook, the special games. |
|
|
129
|
+
| `./venues`, `./stadiums`, `./district` | Real arenas and stadiums in their buildings' outlines; districts of venues on one plan. |
|
|
131
130
|
| `./turn` | A surface as a 3D view that turns, with the net, basket, goal or posts standing on it. |
|
|
132
131
|
| `./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`). |
|
|
133
|
-
| `./multi` | `drawMulti
|
|
134
|
-
| `./judging` | `drawJudging`, `judgingBoard`, `mountJudgingBroadcast`, `judgingPrint`: who judges where, on a plan, a board or paper ([docs](./docs/judging.md)). |
|
|
135
|
-
| `./layouts` | `drawGrid` and `GRID_PRESETS`: small multiples with a title, a key and a credit line; backgrounds. |
|
|
132
|
+
| `./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). |
|
|
136
133
|
| `./mount`, `./react`, `./element`, `./element/define` | Draw into a container; React props; the `<kyogijo-field>` element and its registration. |
|
|
137
134
|
|
|
138
135
|
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).
|
|
@@ -147,7 +144,7 @@ npm install @johnmorrisdotca/kyogijo-stadiums
|
|
|
147
144
|
# or: yarn add @johnmorrisdotca/kyogijo-stadiums
|
|
148
145
|
```
|
|
149
146
|
|
|
150
|
-
It needs Node 22 or later on a server, and any current browser. It is plain ES modules, with types
|
|
147
|
+
It needs Node 22 or later on a server, and any current browser. It is plain ES modules, with types, and on the CDNs once on npm: `https://cdn.jsdelivr.net/npm/@johnmorrisdotca/kyogijo-stadiums@0/+esm` is the package as one module for the browser.
|
|
151
148
|
|
|
152
149
|
### Four ways in
|
|
153
150
|
|
|
@@ -182,7 +179,7 @@ console.log(svg.includes("Cup Final, Game 7"), svg.includes("Final/OT"));
|
|
|
182
179
|
<p align="center">
|
|
183
180
|
<picture>
|
|
184
181
|
<source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/johnmorrisdotca/kyogijo-stadiums/main/docs/images/football-desk-dark.webp">
|
|
185
|
-
<img src="https://raw.githubusercontent.com/johnmorrisdotca/kyogijo-stadiums/main/docs/images/football-desk-light.webp" alt="A football field drawn wide
|
|
182
|
+
<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">
|
|
186
183
|
</picture>
|
|
187
184
|
<br><em>A football field: the end zones in the teams' colours, the score at midfield.</em>
|
|
188
185
|
</p>
|
|
@@ -262,7 +259,7 @@ console.log(svg.includes("甲子園球場のグラウンド"), svg.includes("阪
|
|
|
262
259
|
<p align="center">
|
|
263
260
|
<picture>
|
|
264
261
|
<source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/johnmorrisdotca/kyogijo-stadiums/main/docs/images/ballpark-desk-dark.webp">
|
|
265
|
-
<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
|
|
262
|
+
<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">
|
|
266
263
|
</picture>
|
|
267
264
|
<br><em>A ballpark's fence, drawn through the distances its article publishes.</em>
|
|
268
265
|
</p>
|
|
@@ -321,7 +318,7 @@ console.log(/viewBox="0 0 440 64"/.test(badge));
|
|
|
321
318
|
<p align="center">
|
|
322
319
|
<picture>
|
|
323
320
|
<source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/johnmorrisdotca/kyogijo-stadiums/main/docs/images/badges-desk-dark.webp">
|
|
324
|
-
<img src="https://raw.githubusercontent.com/johnmorrisdotca/kyogijo-stadiums/main/docs/images/badges-desk-light.webp" alt="
|
|
321
|
+
<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">
|
|
325
322
|
</picture>
|
|
326
323
|
<br><em>Badges for a list of games.</em>
|
|
327
324
|
</p>
|
|
@@ -342,7 +339,7 @@ console.log(svg.includes("--ky-key:#1e4f8f"), svg.includes("METRO BOLTS"));
|
|
|
342
339
|
<p align="center">
|
|
343
340
|
<picture>
|
|
344
341
|
<source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/johnmorrisdotca/kyogijo-stadiums/main/docs/images/court-desk-dark.webp">
|
|
345
|
-
<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,
|
|
342
|
+
<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">
|
|
346
343
|
</picture>
|
|
347
344
|
<br><em>A court in a look of its own: the paint, the border and the words on the baselines are options.</em>
|
|
348
345
|
</p>
|
|
@@ -367,7 +364,7 @@ console.log(items.map((item) => item.kind).join(), html.includes("preserve-3d"))
|
|
|
367
364
|
// net,netposts,antennae false
|
|
368
365
|
```
|
|
369
366
|
|
|
370
|
-
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
|
|
367
|
+
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`. In the element: `<kyogijo-field sport="nhl" turn turn-view="broadcast">`. [The 3D view](./docs/turn.md).
|
|
371
368
|
|
|
372
369
|
<p align="center">
|
|
373
370
|
<picture>
|
|
@@ -476,7 +473,7 @@ console.log(zone.includes('data-range="offensive-zone"'), zone.includes("Shows o
|
|
|
476
473
|
// true true
|
|
477
474
|
```
|
|
478
475
|
|
|
479
|
-
Lines, arrows, text, heat maps, hexagons, zones and contours are in [data layers](./docs/layers.md); shot, spray and pass charts
|
|
476
|
+
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)).
|
|
480
477
|
|
|
481
478
|
### Small multiples on a card
|
|
482
479
|
|
|
@@ -495,7 +492,7 @@ console.log(svg.includes('viewBox="0 0 1200 675"'), svg.includes("Three ballpark
|
|
|
495
492
|
|
|
496
493
|
### Several surfaces on one floor
|
|
497
494
|
|
|
498
|
-
`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
|
|
495
|
+
`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.
|
|
499
496
|
|
|
500
497
|
```ts
|
|
501
498
|
import { drawMulti, multiLayout } from "@johnmorrisdotca/kyogijo-stadiums/multi";
|
|
@@ -588,6 +585,26 @@ console.log(layout.needs.length, layout.needs.width);
|
|
|
588
585
|
<br><em>The Saddledome, in 3D.</em>
|
|
589
586
|
</p>
|
|
590
587
|
|
|
588
|
+
### A real stadium, and a district
|
|
589
|
+
|
|
590
|
+
`stadium: "bc-place"` draws BC Place for football or soccer under its cable roof; `drawDistrict({ venues: ["bc-place", "rogers-arena"] })` puts venues at their real positions, to turn together in 3D ([districts](./docs/district.md)).
|
|
591
|
+
|
|
592
|
+
<p align="center">
|
|
593
|
+
<picture>
|
|
594
|
+
<source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/johnmorrisdotca/kyogijo-stadiums/main/docs/images/stadiums-bc-place-3d-desk-dark.webp">
|
|
595
|
+
<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">
|
|
596
|
+
</picture>
|
|
597
|
+
<br><em>BC Place, in 3D.</em>
|
|
598
|
+
</p>
|
|
599
|
+
|
|
600
|
+
<p align="center">
|
|
601
|
+
<picture>
|
|
602
|
+
<source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/johnmorrisdotca/kyogijo-stadiums/main/docs/images/district-bc-rogers-3d-desk-dark.webp">
|
|
603
|
+
<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">
|
|
604
|
+
</picture>
|
|
605
|
+
<br><em>BC Place and Rogers Arena.</em>
|
|
606
|
+
</p>
|
|
607
|
+
|
|
591
608
|
### Who judges where
|
|
592
609
|
|
|
593
610
|
`drawJudging` puts each judo mat's officials by seat in the picture and in a chart ([judging](./docs/judging.md)).
|
|
@@ -765,13 +782,13 @@ A page that moves (`mountKyogijo`), a file written on a server and a frame for a
|
|
|
765
782
|
|
|
766
783
|
## API
|
|
767
784
|
|
|
768
|
-
The [API reference](https://johnmorrisdotca.github.io/kyogijo-stadiums/api.html) lists every export of every entry point with its signature and
|
|
785
|
+
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.
|
|
769
786
|
|
|
770
787
|
Every function is pure: it returns new values and never changes what it was given.
|
|
771
788
|
|
|
772
789
|
## Theming
|
|
773
790
|
|
|
774
|
-
Nothing is branded. The drawing is coloured by custom properties on its `svg`, with a light set and a dark set that follow the device (or `data-theme
|
|
791
|
+
Nothing is branded. The drawing is coloured by custom properties on its `svg`, with a light set and a dark set that follow the device (or `data-theme`, or `theme` in the options); a page's own rule always wins. Each property is listed in [theming](./docs/theming.md).
|
|
775
792
|
|
|
776
793
|
## Limits
|
|
777
794
|
|
|
@@ -781,41 +798,41 @@ Each is held by a test: forty-three sports, ten soccer pitches and ten providers
|
|
|
781
798
|
|
|
782
799
|
- Each drawing is an `img` with a `<title>` and a `<desc>` that say the teams, the score, the surface and the result, in English or Japanese.
|
|
783
800
|
- A score is also text, words stay upright when the surface lies tall, colour is never the only sign, and each data layer has a table for a screen reader.
|
|
784
|
-
- Nothing moves by itself: a replay plays when asked, steps for a reader who prefers reduced motion, and pauses when the page is hidden
|
|
801
|
+
- Nothing moves by itself: a replay plays when asked, steps for a reader who prefers reduced motion, and pauses when the page is hidden.
|
|
785
802
|
|
|
786
|
-
The rest
|
|
803
|
+
The rest is in [accessibility](./docs/accessibility.md).
|
|
787
804
|
|
|
788
805
|
## Browser and runtime support
|
|
789
806
|
|
|
790
|
-
Any browser with ES modules, `:where()` and SVG 2's `href` on images: Chrome and Edge 88, Safari 14, Firefox 78, all from 2021 on. The custom element needs shadow DOM and `part`. The drawing function runs on Node 22 or later and in any
|
|
807
|
+
Any browser with ES modules, `:where()` and SVG 2's `href` on images: Chrome and Edge 88, Safari 14, Firefox 78, all from 2021 on. The custom element needs shadow DOM and `part`. The drawing function runs on Node 22 or later and in any runtime: it touches no DOM. The demo is played in Chromium and WebKit, at a phone's width and a desk's, before every release.
|
|
791
808
|
|
|
792
809
|
## Languages
|
|
793
810
|
|
|
794
|
-
English and Japanese: the title, the description and the
|
|
811
|
+
English and Japanese: the title, the description and the statuses of a drawing, the sentence of each change in `eraChanges`, and the demo. The words are listed beside their English in [the Japanese of Kyogijo](./docs/strings-ja.md). Team names, competitions and dates are written as you give them, in any language. Not yet: the Japanese read by a native reader (the demo says so when it is shown).
|
|
795
812
|
|
|
796
813
|
## Roadmap
|
|
797
814
|
|
|
798
815
|
Not here yet, each welcome as an [issue](https://github.com/johnmorrisdotca/kyogijo-stadiums/issues):
|
|
799
816
|
|
|
800
817
|
- **More surfaces**: the FIBA and college courts, the international rink, rugby pitches, soccer's beach and street formats.
|
|
801
|
-
- **More real venues**: the other divisions' arenas, then the NBA's, NFL's and MLB's,
|
|
802
|
-
- **More parks of the past**: the 19th-century grounds, and the parks whose articles give no distances yet
|
|
818
|
+
- **More real venues**: the other divisions' arenas, then the NBA's, NFL's and MLB's, and more districts.
|
|
819
|
+
- **More parks of the past**: the 19th-century grounds, and the parks whose articles give no distances yet.
|
|
803
820
|
- **More charts on data layers**: a formation chart, a pass sonar chart and a Voronoi chart of their own (the layers exist; see [team shape](./docs/team-shape.md)).
|
|
804
821
|
- **Football in a different standard**: the college and high-school hash marks.
|
|
805
822
|
|
|
806
|
-
Left out on purpose: statistics, rosters and schedules.
|
|
823
|
+
Left out on purpose: statistics, rosters and schedules.
|
|
807
824
|
|
|
808
825
|
## Architecture
|
|
809
826
|
|
|
810
|
-
The drawing is plain functions over plain data with no DOM and no dependency. The dimensions are in one file, the ballparks are generated from a reviewed list, and each surface is a function that returns its markup and the places the teams and the score go. Every entry point stands apart
|
|
827
|
+
The drawing is plain functions over plain data with no DOM and no dependency. The dimensions are in one file, the ballparks are generated from a reviewed list, and each surface is a function that returns its markup and the places the teams and the score go. Every entry point stands apart. The files are in [architecture](./docs/architecture.md).
|
|
811
828
|
|
|
812
829
|
## The name
|
|
813
830
|
|
|
814
|
-
*Kyogijo* (競技場, kyōgijō, きょうぎじょう) is Japanese for a sports ground, the place a contest is held, written with 競技, "contest", and 場, "place"
|
|
831
|
+
*Kyogijo* (競技場, kyōgijō, きょうぎじょう) is Japanese for a sports ground, the place a contest is held, written with 競技, "contest", and 場, "place". "Stadiums" is added in English so that the name says what it draws. The long vowels are written without a macron, as in the other packages of the family.
|
|
815
832
|
|
|
816
833
|
## Where it comes from, and where it is used
|
|
817
834
|
|
|
818
|
-
Kyogijo Stadiums was made for [SPX Stats](https://spxn.com), the historical record of the NHL, NBA, MLB, NFL and CFL, to show the score of a game or a championship on the surface it was played on, with each team's name and logo at its side. Its Japanese names and
|
|
835
|
+
Kyogijo Stadiums was made for [SPX Stats](https://spxn.com), the historical record of the NHL, NBA, MLB, NFL and CFL, to show the score of a game or a championship on the surface it was played on, with each team's name and logo at its side. Its Japanese names and parks are there because the same author makes a Japanese study app and a site for Japanese board games.
|
|
819
836
|
|
|
820
837
|
### Used by
|
|
821
838
|
|
|
@@ -914,7 +931,7 @@ See [CHANGELOG.md](./CHANGELOG.md). The first release, 0.1.0, draws the twenty s
|
|
|
914
931
|
|
|
915
932
|
## Licence
|
|
916
933
|
|
|
917
|
-
The code is [MIT](./LICENSE) © John Morris. The ballparks' fence distances are facts published in Wikipedia's articles, re-expressed
|
|
934
|
+
The code is [MIT](./LICENSE) © John Morris. The ballparks' fence distances are facts published in Wikipedia's articles, re-expressed as numbers, with each article and revision cited in [NOTICE.md](./NOTICE.md) (shipped in the package) and [docs/references.md](./docs/references.md). The surfaces' dimensions are facts from the rulebooks and diagrams, cited in [docs/sources.md](./docs/sources.md).
|
|
918
935
|
|
|
919
936
|
| Data | Made from | Terms |
|
|
920
937
|
| --- | --- | --- |
|
|
@@ -922,6 +939,7 @@ The code is [MIT](./LICENSE) © John Morris. The ballparks' fence distances are
|
|
|
922
939
|
| The soccer pitch's dimensions and the providers' coordinates | The IFAB and FIFA Futsal Laws of the Game, UEFA, MLS, NCAA and FA documents, and each provider's own pages (docs/sources.md) | Facts; no text or drawing copied |
|
|
923
940
|
| The fence distances of 94 ballparks | The English and Japanese Wikipedia articles of each, at the revision cited | Facts; the articles are CC BY-SA 4.0 and none of their text is used |
|
|
924
941
|
| The Wikidata item of each ballpark | Wikidata, as linked from the cited article | CC0 |
|
|
942
|
+
| The outlines of the real venues and stadiums | OpenStreetMap, read 2026-10-20, kept as returned | ODbL 1.0, (c) OpenStreetMap contributors, in files of their own; a drawing carries the credit |
|
|
925
943
|
| 64 soccer grounds | English Wikipedia articles at the revision cited; Wikidata | Facts; CC BY-SA 4.0 articles, no text used; CC0 |
|
|
926
944
|
| The demo's countries and their logos | The names and codes of real countries; the maple leaf, the sun disc and the roundels are drawn for this package | MIT |
|
|
927
945
|
| The demo's country flags | [Hata](https://github.com/johnmorrisdotca/hata), a development dependency whose flags are loaded into the demo site with its licence and notice; the package itself draws none | MIT, and its flags' own licences in its NOTICE.md |
|
package/dist/crowd.d.ts
CHANGED
|
@@ -110,8 +110,13 @@ export interface RealShell {
|
|
|
110
110
|
}>;
|
|
111
111
|
/** The way north points on the page, in degrees clockwise from the top; absent where the rink's real orientation is not known. */
|
|
112
112
|
north?: number;
|
|
113
|
-
/** `fixed` is a lid; `saddle` a roof that rises at the two ends and falls at the two sides. */
|
|
114
|
-
roof: "fixed" | "saddle";
|
|
113
|
+
/** `fixed` is a lid; `saddle` a roof that rises at the two ends and falls at the two sides; `cable` a cable-supported roof with an opening over the surface, which a retractable fabric closes (BC Place's). */
|
|
114
|
+
roof: "fixed" | "saddle" | "cable";
|
|
115
|
+
/** A `cable` roof: how far its crown (the edge of the opening) stands over its rim, in feet, and the opening, a polygon in the drawing's frame over the surface. */
|
|
116
|
+
crown?: {
|
|
117
|
+
rise: number;
|
|
118
|
+
opening: Pt[];
|
|
119
|
+
};
|
|
115
120
|
/** The height of the roof's lowest edge above the surface, in feet. */
|
|
116
121
|
edge: number;
|
|
117
122
|
}
|
package/dist/crowd.js
CHANGED
|
@@ -331,7 +331,7 @@ export function layoutOf(input) {
|
|
|
331
331
|
const base0 = gal === undefined ? PROFILES[sport] : { shape: "bowl", side: gal.offset, end: gal.offset, bench: 0, corner: 0, tiers: [{ id: "gallery", from: 0, to: gal.depth, height: gal.height, fill: 1 }], away: "corner" };
|
|
332
332
|
const base = input.arena === true && base0.arena !== undefined ? { ...base0, ...base0.arena, tiers: base0.arena.tiers ?? base0.tiers } : base0;
|
|
333
333
|
const host = sport === "soccer" ? (crowd.stadium === "nfl" || crowd.stadium === "cfl" ? crowd.stadium : crowd.stadium === "auto" && input.ground !== undefined ? GRIDIRON_GROUNDS[input.ground] : undefined) : undefined;
|
|
334
|
-
const stadium = sport === "soccer" ? host ?? "purpose" : undefined;
|
|
334
|
+
const stadium = sport === "soccer" && input.real === undefined ? host ?? "purpose" : undefined;
|
|
335
335
|
const p = stadium === "nfl" || stadium === "cfl" ? { ...PROFILES[stadium], shape: base.shape, away: base.away } : base;
|
|
336
336
|
const shape = input.real !== undefined ? "bowl" : crowd.shape ?? p.shape;
|
|
337
337
|
const off = input.real?.off ?? offsets(base, box, stadium ?? "purpose");
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
export { DISTRICT_IDS, DISTRICT_MARGIN, DISTRICT_MODES, KYOGIJO_DISTRICT_STYLE, describeDistrict, districtId, districtMember, drawDistrict, isDistrictId, metresText, planDistrict, scaleOf, unknownVenues } from "./district.ts";
|
|
2
|
+
export type { DistrictMember, DistrictMode, DistrictOptions, DistrictPlaced, DistrictPlan, DistrictVenueInput } from "./district.ts";
|
|
3
|
+
export { buildDistrictTurn, districtPresets, districtTurnMarkup, mountDistrictTurn } from "./district.turn.ts";
|
|
4
|
+
export type { DistrictTurnSettings } from "./district.turn.ts";
|
|
5
|
+
export { VENUE_ATTRIBUTION } from "./venues.ts";
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
// A district: several real venues of one city on one plan at their real relative positions and orientations (OpenStreetMap, ODbL 1.0), in 2D and in 3D, tight round neighbours or at the real distances of a city.
|
|
2
|
+
export { DISTRICT_IDS, DISTRICT_MARGIN, DISTRICT_MODES, KYOGIJO_DISTRICT_STYLE, describeDistrict, districtId, districtMember, drawDistrict, isDistrictId, metresText, planDistrict, scaleOf, unknownVenues } from "./district.js";
|
|
3
|
+
export { buildDistrictTurn, districtPresets, districtTurnMarkup, mountDistrictTurn } from "./district.turn.js";
|
|
4
|
+
export { VENUE_ATTRIBUTION } from "./venues.js";
|
|
@@ -0,0 +1,167 @@
|
|
|
1
|
+
import { type StadiumConfigId } from "./stadiums.ts";
|
|
2
|
+
import type { Pt } from "./crowd.ts";
|
|
3
|
+
import type { Language, SurfaceOptions } from "./types.ts";
|
|
4
|
+
/** How a district is fitted: `neighbours` tight round venues that stand close together, `city` at the real distances between venues that are kilometres apart. */
|
|
5
|
+
export type DistrictMode = "neighbours" | "city";
|
|
6
|
+
export declare const DISTRICT_MODES: readonly DistrictMode[];
|
|
7
|
+
/** A venue of a district: its key, and for a stadium the configuration it is drawn in (`cfl` or `soccer`; the first it has where none is given). `"bc-place:soccer"` is the same as `{ id: "bc-place", config: "soccer" }`. */
|
|
8
|
+
export type DistrictVenueInput = string | {
|
|
9
|
+
id: string;
|
|
10
|
+
config?: StadiumConfigId;
|
|
11
|
+
};
|
|
12
|
+
/** What can be asked of a district. */
|
|
13
|
+
export interface DistrictOptions {
|
|
14
|
+
/** The venues, by key: any key of `VENUES` (the arenas) and `STADIUMS` (the stadiums); at least one. */
|
|
15
|
+
venues: readonly DistrictVenueInput[];
|
|
16
|
+
/** `neighbours` (the default) or `city`. */
|
|
17
|
+
mode?: DistrictMode;
|
|
18
|
+
/** How far the plan is turned, in degrees clockwise: 0 (the default) has north at the top; `"auto"` turns it so that the district's long way lies across the page. */
|
|
19
|
+
turn?: number | "auto";
|
|
20
|
+
/** Write each venue's name beside it. On for `city`, off for `neighbours`. */
|
|
21
|
+
labels?: boolean;
|
|
22
|
+
language?: Language;
|
|
23
|
+
theme?: "light" | "dark";
|
|
24
|
+
/** The prefix of the ids in the drawing, for a page with more than one. A hash of the options when missing. */
|
|
25
|
+
id?: string;
|
|
26
|
+
/** `"none"` leaves the stylesheet out, as for every drawing. */
|
|
27
|
+
style?: "none";
|
|
28
|
+
/** Draw every venue's stands in 2D (true, the default) or its building only. */
|
|
29
|
+
stands?: boolean;
|
|
30
|
+
}
|
|
31
|
+
/** A venue of a district as the district needs it: what it is called, where it stands, how it lies, and how it is drawn. */
|
|
32
|
+
export interface DistrictMember {
|
|
33
|
+
/** The key of the venue and the configuration, unique in a district: `rogers-arena`, `bc-place:soccer`. */
|
|
34
|
+
key: string;
|
|
35
|
+
id: string;
|
|
36
|
+
kind: "arena" | "stadium";
|
|
37
|
+
config?: StadiumConfigId;
|
|
38
|
+
/** The name in both languages. */
|
|
39
|
+
name: {
|
|
40
|
+
en: string;
|
|
41
|
+
ja: string;
|
|
42
|
+
};
|
|
43
|
+
/** The building's outline, `[longitude, latitude]`. */
|
|
44
|
+
ring: readonly (readonly [number, number])[];
|
|
45
|
+
/** The middle of the surface (the rink, the field): the point the venue's drawing is turned about. */
|
|
46
|
+
centre: readonly [number, number];
|
|
47
|
+
/** The heading of the surface's long side, degrees clockwise from north, 0 to under 180, and how it is known (`none` stands in 90). */
|
|
48
|
+
heading: number;
|
|
49
|
+
basis: string;
|
|
50
|
+
/** The seats of the drawing. */
|
|
51
|
+
seats: number;
|
|
52
|
+
/** The options the venue is drawn from. */
|
|
53
|
+
options: SurfaceOptions;
|
|
54
|
+
}
|
|
55
|
+
/** Every key a district can be asked for: the arenas of `VENUES` and the stadiums of `STADIUMS`. */
|
|
56
|
+
export declare const DISTRICT_IDS: readonly string[];
|
|
57
|
+
/** Whether a key is a venue a district can place. */
|
|
58
|
+
export declare const isDistrictId: (id: string) => boolean;
|
|
59
|
+
/**
|
|
60
|
+
* A venue of a district, from its key: `rogers-arena` (an arena), `bc-place` or `bc-place:soccer` (a stadium in its first configuration or the one named). Throws for a key no venue has, and says which keys there are.
|
|
61
|
+
* @example
|
|
62
|
+
* ```ts
|
|
63
|
+
* import { districtMember } from "@johnmorrisdotca/kyogijo-stadiums/district";
|
|
64
|
+
* const member = districtMember("bc-place:soccer");
|
|
65
|
+
* console.log(member.key, member.kind, member.seats);
|
|
66
|
+
* // bc-place:soccer stadium 52497
|
|
67
|
+
* ```
|
|
68
|
+
*/
|
|
69
|
+
export declare function districtMember(input: DistrictVenueInput, language?: Language): DistrictMember;
|
|
70
|
+
/** A venue placed in the district: where its surface's middle is, how far its drawing is turned, and where its building stands, all in feet in the district's frame (x to the right, y down the page). */
|
|
71
|
+
export interface DistrictPlaced {
|
|
72
|
+
member: DistrictMember;
|
|
73
|
+
/** The middle of the surface. */
|
|
74
|
+
at: Pt;
|
|
75
|
+
/** The degrees the venue's own drawing (its field along x) is turned clockwise to lie as it does in the world. */
|
|
76
|
+
angle: number;
|
|
77
|
+
/** The building's outline. */
|
|
78
|
+
footprint: Pt[];
|
|
79
|
+
/** Its convex hull, which the depth order of the 3D view separates buildings by. */
|
|
80
|
+
hull: Pt[];
|
|
81
|
+
}
|
|
82
|
+
/** What a district is: its venues placed, the box that fits them, and how the map lies. */
|
|
83
|
+
export interface DistrictPlan {
|
|
84
|
+
options: DistrictOptions;
|
|
85
|
+
mode: DistrictMode;
|
|
86
|
+
/** The degrees the map is turned clockwise (0 has north at the top). */
|
|
87
|
+
turn: number;
|
|
88
|
+
/** The way north points on the page, degrees clockwise from the top. */
|
|
89
|
+
north: number;
|
|
90
|
+
members: DistrictPlaced[];
|
|
91
|
+
/** The frame the plan is drawn in, in feet: the venues' buildings with the margin the mode gives them. */
|
|
92
|
+
view: {
|
|
93
|
+
x: number;
|
|
94
|
+
y: number;
|
|
95
|
+
w: number;
|
|
96
|
+
h: number;
|
|
97
|
+
};
|
|
98
|
+
/** The distance between each pair of surfaces' middles, in metres, as the ground gives it. */
|
|
99
|
+
between: {
|
|
100
|
+
a: string;
|
|
101
|
+
b: string;
|
|
102
|
+
metres: number;
|
|
103
|
+
}[];
|
|
104
|
+
}
|
|
105
|
+
/** The margin round the buildings, as a share of the longer side of the district: tight for neighbours, wide for a city's grid and names. */
|
|
106
|
+
export declare const DISTRICT_MARGIN: Readonly<Record<DistrictMode, number>>;
|
|
107
|
+
/**
|
|
108
|
+
* The plan of a district: each venue's surface placed where it is on the ground (the distance and the direction between middles come from the coordinates of OpenStreetMap's outlines, to a metre or so) and turned so
|
|
109
|
+
* that its long side points where it does in the world, and the frame that fits them. A venue whose orientation is not known (an arena the building gives no axis for) is placed with its rink east-west, as it is drawn alone.
|
|
110
|
+
* @example
|
|
111
|
+
* ```ts
|
|
112
|
+
* import { planDistrict } from "@johnmorrisdotca/kyogijo-stadiums/district";
|
|
113
|
+
* const plan = planDistrict({ venues: ["bc-place", "rogers-arena"] });
|
|
114
|
+
* console.log(plan.mode, plan.members.length, Math.round(plan.between[0].metres));
|
|
115
|
+
* // neighbours 2 264
|
|
116
|
+
* ```
|
|
117
|
+
*/
|
|
118
|
+
export declare function planDistrict(options: DistrictOptions): DistrictPlan;
|
|
119
|
+
/** The colours and the type of a district's drawing, light and dark. Defaults sit in `:where()`, so a page's own rule wins. */
|
|
120
|
+
export declare const KYOGIJO_DISTRICT_STYLE = "\n:where(.ky-district){--ky-dist-ground:#e1e4da;--ky-dist-grid:rgba(40,46,42,.16);--ky-dist-ink:#1f2320;--ky-dist-halo:rgba(255,255,255,.9)}\n@media (prefers-color-scheme:dark){:where(html:not([data-theme=light]) .ky-district:not([data-theme=light])){--ky-dist-ground:#1b2025;--ky-dist-grid:rgba(220,226,220,.16);--ky-dist-ink:#e8ece8;--ky-dist-halo:rgba(14,18,16,.85)}}\n:where(html[data-theme=dark] .ky-district,.ky-district[data-theme=dark]){--ky-dist-ground:#1b2025;--ky-dist-grid:rgba(220,226,220,.16);--ky-dist-ink:#e8ece8;--ky-dist-halo:rgba(14,18,16,.85)}\n.ky-district .ky-dist-ground{fill:var(--ky-dist-ground)}\n.ky-district .ky-dist-grid{fill:none;stroke:var(--ky-dist-grid);stroke-width:1}\n.ky-district .ky-dist-ink{fill:none;stroke:var(--ky-dist-ink);stroke-linecap:round;stroke-linejoin:round}\n.ky-district .ky-dist-text{fill:var(--ky-dist-ink);font-family:var(--ky-font,system-ui,-apple-system,\"Segoe UI\",\"Hiragino Sans\",\"Noto Sans JP\",sans-serif);font-weight:600;paint-order:stroke;stroke:var(--ky-dist-halo);stroke-linejoin:round}";
|
|
121
|
+
/**
|
|
122
|
+
* A venue's drawing as a part of the district's: its root made a nested `svg` that keeps the class, the sport and the colours the drawing's stylesheet reads, its box laid in its own frame (so that the group's turn
|
|
123
|
+
* and shift put it in place), and its title, description, apron, arrow and stylesheet taken out (the stylesheet is given back in `styles`).
|
|
124
|
+
*/
|
|
125
|
+
export declare function nestedDrawing(svg: string): {
|
|
126
|
+
markup: string;
|
|
127
|
+
box: {
|
|
128
|
+
x: number;
|
|
129
|
+
y: number;
|
|
130
|
+
w: number;
|
|
131
|
+
h: number;
|
|
132
|
+
};
|
|
133
|
+
styles: string[];
|
|
134
|
+
};
|
|
135
|
+
/** The middle of a venue's surface in its own drawing's frame (the box the stands are laid round), which its drawing is turned about. */
|
|
136
|
+
export declare function surfaceCentre(options: SurfaceOptions): Pt;
|
|
137
|
+
/** A length in metres worth drawing as a scale: the largest of 50, 100, 200, 500, 1000, 2000, 5000 that is not more than a fifth of the plan's width. */
|
|
138
|
+
export declare function scaleOf(view: {
|
|
139
|
+
w: number;
|
|
140
|
+
}): number;
|
|
141
|
+
/** The distance a scale says, as it is read: metres under a kilometre, else kilometres. */
|
|
142
|
+
export declare const metresText: (metres: number) => string;
|
|
143
|
+
/** The id of a district's drawing: the option's, or a hash of the options. */
|
|
144
|
+
export declare const districtId: (options: DistrictOptions) => string;
|
|
145
|
+
/** The title and the description of a district, in its language: what is drawn, where each venue stands from the first, how far apart they are, and the credit. */
|
|
146
|
+
export declare function describeDistrict(options: DistrictOptions, plan?: DistrictPlan): {
|
|
147
|
+
title: string;
|
|
148
|
+
description: string;
|
|
149
|
+
};
|
|
150
|
+
/** How a venue is drawn for a district: its own options with the district's language, theme and ids, in 2D with its stands or as the floor of the 3D view (its building only). */
|
|
151
|
+
export declare function drawMember(member: DistrictMember, options: DistrictOptions, index: number, id: string, how?: {
|
|
152
|
+
floor?: boolean;
|
|
153
|
+
}): string;
|
|
154
|
+
/**
|
|
155
|
+
* The plan of a district as one SVG: the ground, a grid and a scale, a north arrow, and each venue's own drawing (its stands, or its building only for `stands: false`) put where it stands and turned as it lies, with a name beside each
|
|
156
|
+
* where `labels` says. `drawing` is how each venue is drawn; the 3D view gives it the building-only floor.
|
|
157
|
+
* @example
|
|
158
|
+
* ```ts
|
|
159
|
+
* import { drawDistrict } from "@johnmorrisdotca/kyogijo-stadiums/district";
|
|
160
|
+
* const svg = drawDistrict({ venues: ["bc-place", "rogers-arena"] });
|
|
161
|
+
* console.log(svg.includes("ky-district"), svg.includes("ky-cr-shell"));
|
|
162
|
+
* // true true
|
|
163
|
+
* ```
|
|
164
|
+
*/
|
|
165
|
+
export declare function drawDistrict(options: DistrictOptions, plan?: DistrictPlan, drawing?: (member: DistrictMember, index: number) => string): string;
|
|
166
|
+
/** The venues a district was asked for that the package has no key for: none when it can be drawn. */
|
|
167
|
+
export declare const unknownVenues: (venues: readonly DistrictVenueInput[]) => string[];
|