@johnmorrisdotca/kyogijo-stadiums 0.24.0 → 0.27.0

package/dist/district.turn.d.ts

@@ -0,0 +1,27 @@
+import { type DistrictOptions, type DistrictPlan } from "./district.ts";
+import { type PresetTable } from "./turn.camera.ts";
+import { type KyogijoTurn } from "./turn.dom.ts";
+import { type TurnModel, type TurnSettings } from "./turn.model.ts";
+/** What can be asked of a district's 3D view beyond a surface's: `roof` and `roofOpen` for every venue that has one (as `venue: { roof, roofOpen }` of a single venue's view). */
+export type DistrictTurnSettings = TurnSettings;
+/** The four viewpoints of a district, turned with the map: the main camera looks from the south over the district (north at the top of the page), the end-on view from the west and the low corner from the south-west. */
+export declare function districtPresets(plan: Pick<DistrictPlan, "turn">): PresetTable;
+/**
+ * A district as a 3D model: the floor is the district's flat plan with each venue's building only, and on it stands each venue as it stands on its own (turned about the middle of its surface and moved to its place in the
+ * district), with a name over each where the district has labels. A `TurnModel` like any other: `turnMarkupOf` and `mountDistrictTurn` make a view of it.
+ */
+export declare function buildDistrictTurn(options: DistrictOptions, settings?: DistrictTurnSettings): TurnModel;
+/**
+ * Mount a district as a 3D view in a container: the same view as `mountKyogijoTurn`'s, with the controls, the pointer, the keys and the auto-turn of every 3D view, over the district's plan with each venue standing on it.
+ * @example
+ * ```ts no-run
+ * import { mountDistrictTurn } from "@johnmorrisdotca/kyogijo-stadiums/district";
+ * const view = mountDistrictTurn(document.querySelector("#city")!, { venues: ["bc-place", "rogers-arena"] }, { preset: "broadcast" });
+ * view.set({ yaw: 40 });
+ * ```
+ */
+export declare function mountDistrictTurn(host: HTMLElement, options: DistrictOptions, settings?: DistrictTurnSettings): KyogijoTurn<DistrictOptions>;
+/** A district as the markup of a 3D view, still until a page's script makes it turn: pure, so a server can make it. */
+export declare function districtTurnMarkup(options: DistrictOptions, settings?: DistrictTurnSettings): string;
+/** The distance in feet that a number of metres is: what a test or a caller needs to compare the plan with the ground. */
+export declare const feetOf: (metres: number) => number;

package/dist/district.turn.js

@@ -0,0 +1,157 @@
+// A district in 3D: the 3D view of `turn.ts` with several real venues standing on one ground at their real relative positions and orientations. Nothing here is drawn a second way. Each venue is built as it is on its own
+// (`buildTurn`: the stands, the walls and the roof, the goals and posts of its field), its planes are turned about the middle of its surface and moved to where the plan puts it, and the floor is the district's flat
+// plan drawn with each venue's building only. The model it makes is a `TurnModel`, so the camera, the controls, the pointer, the auto-turn and the steady fit of every other 3D view are this one's; its
+// buildings are stacked building by building (`Plane.group`), the far one first, so that a roof never shows through a nearer building.
+import { describeDistrict, districtId, drawDistrict, drawMember, planDistrict, surfaceCentre } from "./district.js";
+import { n, plane } from "./turn.kit.js";
+import { TURN_PRESETS, wrap } from "./turn.camera.js";
+import { mountTurn } from "./turn.dom.js";
+import { turnMarkupOf } from "./turn.markup.js";
+import { buildTurn, openingView, sceneBox, WORLD_PX } from "./turn.model.js";
+import { planesOf } from "./uprights.js";
+import { FEET_PER_METRE } from "./geometry.js";
+import { hullOf } from "./venues.geo.js";
+/** The four viewpoints of a district, turned with the map: the main camera looks from the south over the district (north at the top of the page), the end-on view from the west and the low corner from the south-west. */
+export function districtPresets(plan) {
+    const turn = plan.turn;
+    return {
+        overhead: { ...TURN_PRESETS.overhead, yaw: wrap(turn) },
+        broadcast: { yaw: wrap(turn - 20), pitch: 58, zoom: 1 },
+        end: { yaw: wrap(turn - 90), pitch: 64, zoom: 1 },
+        corner: { yaw: wrap(turn - 38), pitch: 66, zoom: 1 },
+    };
+}
+/** Turn a point about the origin by `degrees` clockwise on the page. */
+const rot = ([x, y], degrees) => {
+    const a = (degrees * Math.PI) / 180;
+    return [x * Math.cos(a) - y * Math.sin(a), x * Math.sin(a) + y * Math.cos(a)];
+};
+/** A plane of a venue's own frame (its surface's middle at `centre`) put in the district's: turned by the venue's angle about that middle and moved to where the plan puts it. */
+function placeInDistrict(p, placed, centre, prefix, group) {
+    const at = (x, y) => {
+        const [rx, ry] = rot([x - centre[0], y - centre[1]], placed.angle);
+        return [rx + placed.at[0], ry + placed.at[1]];
+    };
+    const dir = (x, y) => rot([x, y], placed.angle);
+    const [ox, oy] = at(p.o[0], p.o[1]);
+    const [ux, uy] = dir(p.u[0], p.u[1]);
+    const [vx, vy] = dir(p.v[0], p.v[1]);
+    const moved = { ...p, id: `${prefix}${p.id}`, o: [ox, oy, p.o[2]], u: [ux, uy, p.u[2]], v: [vx, vy, p.v[2]], group };
+    if (p.shy !== undefined)
+        moved.shy = dir(p.shy[0], p.shy[1]);
+    if (p.crop === true) {
+        // A picture of the floor over a rectangle keeps its sides along x and y.
+        const corners = [at(p.o[0], p.o[1]), at(p.o[0] + p.u[0], p.o[1] + p.u[1]), at(p.o[0] + p.v[0], p.o[1] + p.v[1]), at(p.o[0] + p.u[0] + p.v[0], p.o[1] + p.u[1] + p.v[1])];
+        const [x0, x1] = [Math.min(...corners.map((c) => c[0])), Math.max(...corners.map((c) => c[0]))];
+        const [y0, y1] = [Math.min(...corners.map((c) => c[1])), Math.max(...corners.map((c) => c[1]))];
+        moved.o = [x0, y0, p.o[2]];
+        moved.u = [x1 - x0, 0, 0];
+        moved.v = [0, y1 - y0, 0];
+    }
+    return moved;
+}
+/** A name that faces the eye, standing over a building: its text on a plate. */
+function sign(id, text, at, bottom, size, group) {
+    const wide = Math.max(size * 2.2, size * 0.62 * text.length + size * 1.2);
+    const tall = size * 1.7;
+    const svg = `<rect width="${n(wide)}" height="${n(tall)}" rx="${n(size * 0.3)}" class="u-signplate"/><text class="u-sign" x="${n(wide / 2)}" y="${n(tall * 0.68)}" text-anchor="middle" font-size="${n(size)}">${text.replace(/&/g, "&amp;").replace(/</g, "&lt;")}</text>`;
+    return { ...plane(id, "sign", [at[0] - wide / 2, at[1], bottom + tall], [wide, 0, 0], [0, 0, -tall], svg), billboard: true, lean: true, group };
+}
+/**
+ * A district as a 3D model: the floor is the district's flat plan with each venue's building only, and on it stands each venue as it stands on its own (turned about the middle of its surface and moved to its place in the
+ * district), with a name over each where the district has labels. A `TurnModel` like any other: `turnMarkupOf` and `mountDistrictTurn` make a view of it.
+ */
+export function buildDistrictTurn(options, settings = {}) {
+    const language = options.language === "ja" ? "ja" : "en";
+    const plan = planDistrict(options);
+    const base = districtId(options);
+    const id = settings.id ?? `${base}-turn`;
+    const labels = options.labels ?? plan.mode === "city";
+    const items = [];
+    const defs = [];
+    let crowdStyle = "";
+    plan.members.forEach((placed, i) => {
+        const member = placed.member;
+        const memberId = `${id}-m${i}`;
+        // Each venue is built as its own 3D view is, with the crowd drawn without its seats on its floor and the stands raised.
+        const model = buildTurn({ ...member.options, language, ...(options.theme === undefined ? {} : { theme: options.theme }), id: `${base}-m${i}` }, { ...settings, id: memberId, venue: { roof: true, ...(typeof settings.venue === "object" ? settings.venue : {}) }, preset: undefined, view: undefined });
+        const centre = surfaceCentre(member.options);
+        const prefix = `m${i}-`;
+        for (const item of model.uprights.items) {
+            const planes = item.planes.filter((p) => p.kind !== "ground").map((p) => placeInDistrict(p, placed, centre, prefix, i));
+            if (planes.length > 0) {
+                const [ax, ay] = item.at;
+                const [rx, ry] = rot([ax - centre[0], ay - centre[1]], placed.angle);
+                items.push({ ...item, id: `${prefix}${item.id}`, at: [rx + placed.at[0], ry + placed.at[1]], planes });
+            }
+        }
+        if (model.defs !== "")
+            defs.push(model.defs);
+        if (crowdStyle === "" && model.crowdStyle !== "")
+            crowdStyle = model.crowdStyle;
+    });
+    if (labels) {
+        const size = Math.max(plan.view.w, plan.view.h) * (plan.mode === "city" ? 0.016 : 0.022);
+        plan.members.forEach((placed, i) => {
+            const top = Math.max(...items.filter((it) => it.id.startsWith(`m${i}-`)).map((it) => it.height), 60);
+            const middle = [placed.footprint.reduce((s, p) => s + p[0], 0) / placed.footprint.length, placed.footprint.reduce((s, p) => s + p[1], 0) / placed.footprint.length];
+            items.push({ id: `m${i}-name`, kind: "scoreboard", at: middle, height: top + size * 1.7, planes: [sign(`m${i}-name`, placed.member.name[language], middle, top + size * 0.6, size, i)] });
+        });
+    }
+    const view = plan.view;
+    const scale = WORLD_PX / Math.max(view.w, view.h);
+    const centre = [view.x + view.w / 2, view.y + view.h / 2];
+    const area = { x0: view.x, y0: view.y, x1: view.x + view.w, y1: view.y + view.h };
+    const uprights = { items, lift: 0, thin: Math.hypot(view.w, view.h) * 0.0012, area, whole: true, ...(defs.length === 0 ? {} : { defs: defs.join("") }) };
+    const planes = planesOf(uprights);
+    const box = sceneBox(planes, area, 0, centre, scale);
+    // (The floor has no names: the 3D view's own signs, which face the eye, carry them.)
+    const floor = drawDistrict({ ...options, id: base, labels: false }, plan, (member, i) => drawMember(member, { ...options, id: base }, i, base, { floor: true }));
+    const { title, description } = describeDistrict(options, plan);
+    const presets = districtPresets(plan);
+    const surfaceLike = { sport: "soccer", language, ...(options.theme === undefined ? {} : { theme: options.theme }), ...(options.style === undefined ? {} : { style: options.style }) };
+    return {
+        id,
+        language,
+        options: surfaceLike,
+        title,
+        description,
+        standing: "",
+        floor,
+        viewBox: { x: view.x, y: view.y, w: view.w, h: view.h },
+        scale,
+        uprights,
+        defs: defs.join(""),
+        crowdStyle,
+        venue: true,
+        look: undefined,
+        planes,
+        box,
+        centre,
+        view: openingView(settings, presets),
+        turnable: true,
+        presets,
+        // A scene that turns about its middle with buildings far from it wants a longer lens, so that what swings toward the eye does not swell.
+        lens: 12,
+        flat: drawDistrict(options, plan),
+        groups: plan.members.map((p) => ({ hull: hullOf(p.footprint) })),
+    };
+}
+/**
+ * Mount a district as a 3D view in a container: the same view as `mountKyogijoTurn`'s, with the controls, the pointer, the keys and the auto-turn of every 3D view, over the district's plan with each venue standing on it.
+ * @example
+ * ```ts no-run
+ * import { mountDistrictTurn } from "@johnmorrisdotca/kyogijo-stadiums/district";
+ * const view = mountDistrictTurn(document.querySelector("#city")!, { venues: ["bc-place", "rogers-arena"] }, { preset: "broadcast" });
+ * view.set({ yaw: 40 });
+ * ```
+ */
+export function mountDistrictTurn(host, options, settings = {}) {
+    return mountTurn(host, options, settings, buildDistrictTurn);
+}
+/** A district as the markup of a 3D view, still until a page's script makes it turn: pure, so a server can make it. */
+export function districtTurnMarkup(options, settings = {}) {
+    return turnMarkupOf(buildDistrictTurn(options, settings), settings);
+}
+/** The distance in feet that a number of metres is: what a test or a caller needs to compare the plan with the ground. */
+export const feetOf = (metres) => metres * FEET_PER_METRE;

package/dist/draw.js

@@ -10,6 +10,8 @@ import { ERA_SPORTS, footballIn, rulesFor, seasonLabel } from "./eras.js";
 import { FOOTBALL } from "./geometry.js";
 import { renderLayers } from "./layers.js";
 import { arenaById, arenaCourtIn, arenaNameIn, arenaOfficialName, arenaRinkIn } from "./arenas.js";
+import { venueById, venueBowl } from "./venues.js";
+import { groundOfStadium, stadiumBowl, stadiumById, stadiumConfigOf, stadiumSeats } from "./stadiums.js";
 import { groundById, groundNameIn, groundOfficialName } from "./grounds.js";
 import { BOARD, courtFor, hasSetsBoard, isNetLeague, isNetSport } from "./court.js";
 import { cricketBoardMarkup } from "./cricket.board.js";
@@ -428,10 +430,21 @@ function standsFor(o, surface, crowd) {
         const walls = park === undefined || crowd.wallSeats === false ? [] : parkWallsIn(park, o.year).filter((w) => (crowd.wallSeats === true ? w.height_ft >= 25 : w.label !== undefined && WALL_SEATS[park.id] === w.label));
         return parkLayout({ fence: fenceOutline(points), backstop, crowd, seatsOnWalls: walls.map((w) => ({ from: w.from, to: w.to, height: w.height_ft })) });
     }
+    // An arena's real venue: the building it stands in and a bowl fitted to it, where the package has one for the arena and no league of the caller's own sets the surface.
+    const box = surface.whole ?? surface.box ?? { x: 0, y: 0, w: 100, h: 100 };
+    const venue = crowd.real && sport === "nhl" && chooseLeague(o).league === undefined ? venueById(o.arena) : undefined;
+    // (No visitors' block: no source says where a real arena puts them.)
+    if (venue !== undefined)
+        return crowdLayout({ sport, box, crowd: crowd.awayEnd === "auto" ? { ...crowd, awayEnd: "none" } : crowd, awaySide, real: venueBowl(venue, box) });
+    // A football field or a soccer pitch in a real stadium: its building and a bowl of the configuration's seats.
+    const config = crowd.real ? stadiumConfigOf(sport) : undefined;
+    const stadium = config !== undefined && chooseLeague(o).league === undefined ? stadiumById(o.stadium ?? o.ground) : undefined;
+    if (stadium !== undefined && config !== undefined)
+        return crowdLayout({ sport, box, crowd: crowd.awayEnd === "auto" ? { ...crowd, awayEnd: "none" } : crowd, awaySide, real: stadiumBowl(stadium, config, box) });
     // A dojo's crowd sits in its gallery, from the room's balcony data (in feet here); the arenas (the Budokan, the Kokugikan) keep their bowls.
     const hall = sport === "dojo" ? dojoGallery(o) : undefined;
     const gallery = hall === undefined ? undefined : { offset: hall.offset / 0.3048, depth: hall.depth / 0.3048, height: [hall.height[0] / 0.3048, hall.height[1] / 0.3048], rows: hall.rows, aisles: hall.aisles };
-    return crowdLayout({ sport, box: surface.whole ?? surface.box ?? { x: 0, y: 0, w: 100, h: 100 }, crowd, awaySide, ground: o.ground, arena: o.budo?.hall === "budokan", ...(gallery === undefined ? {} : { gallery }) });
+    return crowdLayout({ sport, box, crowd, awaySide, ground: o.ground, arena: o.budo?.hall === "budokan", ...(gallery === undefined ? {} : { gallery }) });
 }
 /** True when the drawing is asked to be small: `detail: "simple"` or a `width` under 480 pixels. */
 const smallDrawing = (o) => {
@@ -716,7 +729,14 @@ export function describe(o) {
     const special = specialText(o, language, surfaceName);
     // What the arena says about the size: that it is the one its sources publish, or that its rink is said to have been shorter and no size is given.
     const arenaLine = arenaName === undefined ? "" : `${arenaSize !== undefined ? `${gap}${fill(words.said.arenaSize, { arena: arenaName })}` : sport === "nhl" && arena?.rinkUnknown === true ? `${gap}${fill(words.said.arenaUnknown, { arena: arenaName })}` : ""}${officially(arena === undefined ? undefined : arenaOfficialName(arena, language, year))}`;
-    const parkLine = (parkName === undefined ? `${groundLine}${halfLine}${arenaLine}` : `${gap}${fill(words.said.park, { park: parkName })}${officially(parkOfficial)}${ballpark === undefined ? "" : ballparkSentences(ballpark).map((line) => `${gap}${line}`).join("")}`) + (special === undefined ? "" : `${gap}${special.text}`);
+    // The stands of a real venue say what they are: a plausible bowl, and how the rink lies in the building.
+    const realCrowd = o.crowd === undefined || o.crowd === false ? undefined : resolveCrowd(o.crowd);
+    const venue = sport === "nhl" && league === undefined && realCrowd?.real === true ? venueById(o.arena) : undefined;
+    const realLine = venue === undefined || arenaName === undefined ? "" : `${gap}${fill(words.said.real, { arena: arenaName, seats: String(venue.seats.hockey), tiers: String(venue.tiers.count) })}${gap}${words.said[venue.osm.axis.basis === "mapped" ? "realMapped" : venue.osm.axis.basis === "building" ? "realBuilding" : "realNone"]}`;
+    const config = realCrowd?.real === true ? stadiumConfigOf(sport) : undefined;
+    const realStadium = config !== undefined && league === undefined ? stadiumById(o.stadium ?? o.ground) : undefined;
+    const stadiumLine = realStadium === undefined || config === undefined ? "" : `${gap}${fill(words.said.stadium, { stadium: groundNameIn(groundOfStadium(realStadium), o.year, language), seats: String(stadiumSeats(realStadium, config)), tiers: String(realStadium.tiers.count) })}${gap}${words.said[realStadium.osm.axis.basis === "opening" ? "stadiumOpening" : realStadium.osm.axis.basis === "building" ? "stadiumBuilding" : "stadiumNone"]}`;
+    const parkLine = (parkName === undefined ? `${groundLine}${halfLine}${arenaLine}${realLine}${stadiumLine}` : `${gap}${fill(words.said.park, { park: parkName })}${officially(parkOfficial)}${ballpark === undefined ? "" : ballparkSentences(ballpark).map((line) => `${gap}${line}`).join("")}`) + (special === undefined ? "" : `${gap}${special.text}`);
     // A drawing of a past season says which: the markings are those of that season.
     const dated = typeof o.year === "number" && Number.isFinite(o.year);
     const eraLine = dated && league !== undefined

package/dist/flythrough-entry.d.ts

@@ -0,0 +1,8 @@
+export { mountFlythrough } from "./flythrough.dom.ts";
+export type { Flythrough, FlythroughOptions, FlythroughSettings, FlythroughStart } from "./flythrough.dom.ts";
+export { CHANNELS, PACE, RAMP, STAGE_IDS, cameraAt, flightPlan, foldTime, glide, glideSeconds, mainView, mapBox, mapFrame, monotoneSlopes, nextRate, stageAt, startOf, stagesOf } from "./flythrough.path.ts";
+export type { Camera, Channel, Flight, FlightInput, Keyframe, MapFrame, StageId } from "./flythrough.path.ts";
+export { flythroughMarkup, graticuleMarkup, mapMarkup } from "./flythrough.markup.ts";
+export { FLYTHROUGH_STYLE } from "./flythrough.style.ts";
+export { FLYTHROUGH_WORDS } from "./flythrough.words.ts";
+export type { FlythroughWords } from "./flythrough.words.ts";

package/dist/flythrough-entry.js

@@ -0,0 +1,6 @@
+// The fly-through: one smooth camera from a map to the real arena, over the map (chizu's, handed over), the building's site plan and the 3D arena.
+export { mountFlythrough } from "./flythrough.dom.js";
+export { CHANNELS, PACE, RAMP, STAGE_IDS, cameraAt, flightPlan, foldTime, glide, glideSeconds, mainView, mapBox, mapFrame, monotoneSlopes, nextRate, stageAt, startOf, stagesOf } from "./flythrough.path.js";
+export { flythroughMarkup, graticuleMarkup, mapMarkup } from "./flythrough.markup.js";
+export { FLYTHROUGH_STYLE } from "./flythrough.style.js";
+export { FLYTHROUGH_WORDS } from "./flythrough.words.js";

package/dist/flythrough.dom.d.ts

@@ -0,0 +1,103 @@
+import { type Camera, type StageId } from "./flythrough.path.ts";
+import type { Language } from "./types.ts";
+/** A map to start on: chizu's world (or any map of the same shape) with chizu's `drawChizu` and `projectPoint`, which are handed over, not imported, so that the package has no dependency. */
+export interface FlythroughStart<M extends {
+    width: number;
+    height: number;
+} = {
+    width: number;
+    height: number;
+}> {
+    /** The map: chizu's `WORLD`, for instance. */
+    map?: M;
+    /** Draws the map as an SVG string: chizu's `drawChizu`. It is called with `{ style: true, language }`. */
+    draw?: (map: M, options: {
+        style: boolean;
+        language: Language;
+    }) => string;
+    /** Puts a longitude and latitude on the map's canvas: chizu's `projectPoint`; `null` where the map has no place for it. */
+    project?: (map: M, lon: number, lat: number) => readonly [number, number] | null;
+    /** The metres the container's width shows at the start. 9,000 km by default. */
+    span?: number;
+    /** Where the camera starts looking, `[longitude, latitude]`: the arena stands off the middle of the screen and comes to the middle as the camera falls. The arena itself by default. */
+    centre?: readonly [number, number];
+}
+/** What a fly-through is of. */
+export interface FlythroughOptions<M extends {
+    width: number;
+    height: number;
+} = {
+    width: number;
+    height: number;
+}> {
+    /** The arena's key in `ARENAS`: an arena that has a real venue (`VENUE_IDS`). */
+    arena: string;
+    start?: FlythroughStart<M>;
+    /** The stages to fly, in the order of the path; all of them by default. */
+    stages?: readonly StageId[];
+    language?: Language;
+    /** `light` or `dark`; the device's setting decides when it is left out. */
+    theme?: "light" | "dark";
+}
+/** How it behaves. */
+export interface FlythroughSettings {
+    /** `auto` (the default) flies unless the reader prefers reduced motion, and then shows each stage as a still; `smooth` flies anyway and `none` shows stills. */
+    motion?: "auto" | "smooth" | "none";
+    /** Whether it starts flying when it is mounted (it does by default, unless the reader prefers reduced motion). */
+    autoPlay?: boolean;
+    /** How many times faster than the path's own pace the clock runs. 1 by default. */
+    speed?: number;
+    /** Whether the buttons under the stage are drawn. True when left out; the keys work either way. */
+    controls?: boolean;
+    /** The prefix of the ids in the page, for a page with more than one. */
+    id?: string;
+    /** Called with the stage when the camera enters one. */
+    onStage?: (stage: StageId) => void;
+    /** Called with `true` when it starts flying and `false` when it stops. */
+    onPlayChange?: (playing: boolean) => void;
+}
+/** What `mountFlythrough` gives back. */
+export interface Flythrough {
+    /** `motion` flies; `stages` shows each stage as a still. */
+    readonly mode: "motion" | "stages";
+    readonly playing: boolean;
+    /** The stage the camera is in. */
+    readonly stage: StageId;
+    /** The stages flown, in order. */
+    readonly stages: readonly StageId[];
+    /** Seconds along the path now. */
+    readonly time: number;
+    /** The seconds the path takes from the first stage to the last one's start (and then the arena turns for ever). */
+    readonly duration: number;
+    /** The camera now. */
+    camera(): Camera;
+    play(): void;
+    pause(): void;
+    /** Play when paused, pause when playing; gives whether it plays now. */
+    toggle(): boolean;
+    /** Go to the stage after this one (the last one stays), and to the one before (the first starts again). */
+    next(): void;
+    back(): void;
+    /** Go to a stage (its name or its place in `stages`): the camera glides there along the path, or shows its still. */
+    goTo(stage: StageId | number): void;
+    /** Put the camera at a moment of the path at once, whatever the mode (a scrubber, a test). */
+    seek(seconds: number): void;
+    destroy(): void;
+}
+/**
+ * Mount a fly-through of an arena in a container: a map that falls to the city and the building, which rises into the arena in 3D, turning.
+ * @example
+ * ```ts no-run
+ * import { mountFlythrough } from "@johnmorrisdotca/kyogijo-stadiums/flythrough";
+ * import WORLD from "@johnmorrisdotca/chizu/world";
+ * import { drawChizu } from "@johnmorrisdotca/chizu/draw";
+ * import { projectPoint } from "@johnmorrisdotca/chizu";
+ *
+ * const trip = mountFlythrough(document.querySelector("#trip")!, { arena: "honda-center", start: { map: WORLD, draw: drawChizu, project: projectPoint } });
+ * trip.goTo("city");
+ * ```
+ */
+export declare function mountFlythrough<M extends {
+    width: number;
+    height: number;
+}>(host: HTMLElement, options: FlythroughOptions<M>, settings?: FlythroughSettings): Flythrough;