@johnmorrisdotca/uchusen-rockets 0.2.2 → 0.4.0

package/dist/element.d.ts

@@ -1,10 +1,47 @@
+import { type Flight } from "./flight.ts";
+import { UchusenFlight } from "./flightbar.ts";
 import type { Description, FitReport } from "./fit.ts";
 import { type Angle, type ViewChoice } from "./framing.ts";
 import { ROCKETS } from "./rockets.ts";
+/**
+ * What a `<uchusen-rocket>` is doing, as its `data-state` attribute says: `picture` (the drawing), `loading` (the 3D view is on its way), `3d`, `fallback` (no WebGL, so the drawing stays) or `error`.
+ *
+ * @example
+ * ```ts
+ * import type { RocketState } from "@johnmorrisdotca/uchusen-rockets/element";
+ *
+ * const states: RocketState[] = ["picture", "loading", "3d", "fallback", "error"];
+ * console.log(states.length);
+ * ```
+ */
 export type RocketState = "picture" | "loading" | "3d" | "fallback" | "error";
 declare const HTMLBase: typeof HTMLElement;
-/** Where the licensed models are, for every element with no `assets` attribute of its own. Left unset: beside this module, in ./assets/. */
+/**
+ * Where the licensed models are, for every element with no `assets` attribute of its own. Left unset: beside this module, in ./assets/.
+ *
+ * @param url The folder the licensed models are in. A trailing slash is added if it has none.
+ * @example
+ * ```ts no-run
+ * import { setAssetBase } from "@johnmorrisdotca/uchusen-rockets/element";
+ *
+ * setAssetBase("/static/uchusen-assets/");
+ * ```
+ */
 export declare function setAssetBase(url: string): void;
+/**
+ * The `<uchusen-rocket>` element: a rocket as a drawing that a 3D view takes over from when the browser can draw WebGL. Its attributes are the words of `RocketOptions`. It exposes its state as `data-state` and loads three.js only for a 3D view.
+ *
+ * @example
+ * ```ts no-run
+ * import { UchusenRocket } from "@johnmorrisdotca/uchusen-rockets/element";
+ *
+ * const rocket: UchusenRocket = document.createElement("uchusen-rocket") as UchusenRocket;
+ * rocket.setAttribute("rocket", "starship");
+ * rocket.setAttribute("variant", "v3");
+ * rocket.setAttribute("look", "painted");
+ * document.body.append(rocket);
+ * ```
+ */
 export declare class UchusenRocket extends HTMLBase {
     static readonly observedAttributes: string[];
     private descriptionValue;
@@ -29,6 +66,13 @@ export declare class UchusenRocket extends HTMLBase {
     private onScreen;
     private drawn;
     private tiltCleanups;
+    private clock;
+    private flightFrame;
+    private flightLast;
+    private flightDrawn;
+    private noted;
+    private phaseSeen;
+    private flightSeen;
     /** What is showing now. */
     get state(): RocketState;
     /** What the fit check said about what is showing: its label, parts and credits. */
@@ -43,6 +87,9 @@ export declare class UchusenRocket extends HTMLBase {
     /** The drawing, turned and moved to the chosen view. The 3D view moves itself, so only the drawing needs it, and only until the 3D view shows. It is drawn at most about 20 times a second and never while out of sight: it is made again when it comes back. */
     private place;
     private seen;
+    /** A reader who changes the setting while the page is open is followed at once. */
+    private motionChanged;
+    private motion;
     connectedCallback(): void;
     disconnectedCallback(): void;
     attributeChangedCallback(name: string, before: string | null, after: string | null): void;
@@ -54,7 +101,44 @@ export declare class UchusenRocket extends HTMLBase {
     private emit;
     /** What to draw from the attributes, every value checked. */
     private settings;
+    /** The flight a page gives for what is showing, or null: a custom build never has one. */
+    get flight(): Flight | null;
+    /** Where the timeline is: `active` once it has been started or moved, until `endFlight`. */
+    get flightState(): {
+        active: boolean;
+        playing: boolean;
+        ended: boolean;
+        position: number;
+        phase: string;
+    };
+    /** Plays the flight from where it is. It stands still out of sight, and does not play at all for a reader who asked for reduced motion: `seek` still moves it, by hand. */
+    play(): void;
+    pause(): void;
+    /** Moves the timeline to a place, where 0 is the first phase, 1 the next and so on: `2.5` is half way from the third to the fourth. */
+    seek(position: number): void;
+    /** Leaves the flight: the rocket as it was. */
+    endFlight(): void;
+    /** For each part with engines, which burn: at a named phase, where the timeline is, or else as the attributes have them. */
+    engineCharts(phaseId?: string | null): {
+        slot: string;
+        burning: number;
+        total: number;
+        words: string;
+        svg: string;
+    }[];
+    private flightMoved;
+    /** With no 3D view the drawing follows the timeline, by one frame request at a time, at most 20 drawings a second, never out of sight. */
+    private kickFlight;
+    private flightStep;
+    /** Tells the page where the timeline is: at once for a new phase or a stop, otherwise at most 8 times a second. */
+    private noteFlight;
+    /** Whether the engines are lit: `engines="on"`, and never for a reader who asked for reduced motion. */
+    private engineLights;
+    /** Hands the 3D view what the attributes say about the engines, and its reader's motion setting. */
+    private lightViewer;
     private update;
+    /** After a change: a timeline of another rocket ends, and the `phase` attribute moves it. */
+    private settleFlight;
     private renderShell;
     /** The drawing for what the attributes say now. It is made from code, so it needs no file. A zoom or a move only changes which part of it the box shows (its viewBox), so the drawing is as sharp as the box and never grows past it. */
     private redraw;
@@ -68,16 +152,39 @@ export declare class UchusenRocket extends HTMLBase {
     private start;
     private startTilt;
 }
-/** Rockets side by side on one baseline at one scale: `<uchusen-lineup items="starship:v1,starship:v3,person,building" unit="4" ruler labels>`. */
+/**
+ * Rockets side by side on one baseline at one scale: `<uchusen-lineup items="starship:v1,starship:v3,person,building" unit="4" ruler labels>`.
+ *
+ * @example
+ * ```ts no-run
+ * import { UchusenLineup } from "@johnmorrisdotca/uchusen-rockets/element";
+ *
+ * const lineup: UchusenLineup = document.createElement("uchusen-lineup") as UchusenLineup;
+ * lineup.setAttribute("items", "starship:v2,starship:v3,person");
+ * lineup.setAttribute("unit", "3");
+ * lineup.toggleAttribute("ruler", true);
+ * document.body.append(lineup);
+ * ```
+ */
 export declare class UchusenLineup extends HTMLBase {
     static readonly observedAttributes: string[];
     connectedCallback(): void;
     attributeChangedCallback(name: string, before: string | null, after: string | null): void;
     private render;
 }
-/** Defines both elements, once. Importing this module does it. */
+/**
+ * Defines both elements, once. Importing this module does it.
+ *
+ * @example
+ * ```ts no-run
+ * import { defineUchusenRocket } from "@johnmorrisdotca/uchusen-rockets/element";
+ *
+ * defineUchusenRocket();
+ * console.log(customElements.get("uchusen-rocket") !== undefined);
+ * ```
+ */
 export declare function defineUchusenRocket(): void;
-export { ROCKETS };
+export { ROCKETS, UchusenFlight };
 declare global {
     interface HTMLElementTagNameMap {
         "uchusen-rocket": UchusenRocket;

package/dist/element.js

@@ -2,22 +2,36 @@
 // crossfading in over it; drag to turn, keyboard, tilt on phones, a slow spin, reduced motion; the drawing stays on no WebGL, Save-Data or any failure. Importing this file defines the elements. three.js is
 // loaded only when a 3D view is wanted, and a licensed model only when the painted look asks for one.
 import { build, FitError } from "./build/index.js";
+import { bellsOf, enginesWanted, pickBells } from "./engines.js";
+import { engineChart } from "./draw/plume.js";
+import { burnsOf, FlightClock, flightOf, frameAt, phaseAt, phasePosition } from "./flight.js";
+import { defineUchusenFlight, UchusenFlight } from "./flightbar.js";
 import { lineupSvg } from "./build/lineup.js";
 import { CROSSFADE_MS, REDUCED_FADE_MS, revealDelay } from "./crossfade.js";
 import { cleanView, turnedBy, VIEWS } from "./framing.js";
 import { cleanShow } from "./layout.js";
 import { cleanLook } from "./looks.js";
-import { ROCKETS } from "./rockets.js";
+import { ROCKETS, SLOT_NAMES } from "./rockets.js";
 import { tiltMode, tiltTurn } from "./tilt.js";
+import { spinOf } from "./spin.js";
 const HTMLBase = typeof HTMLElement === "undefined" ? class {
 } : HTMLElement;
 /** A view out of sight keeps its WebGL canvas this long before letting it go (a browser allows only a few at a time). */
 const RELEASE_MS = 30_000;
-const DEFAULT_SPIN = { seconds: 180, way: "cw" };
 /** The drawing, followed along a turn, is made again at most this often. */
 const PLACE_MS = 50;
 let assetBase = null;
-/** Where the licensed models are, for every element with no `assets` attribute of its own. Left unset: beside this module, in ./assets/. */
+/**
+ * Where the licensed models are, for every element with no `assets` attribute of its own. Left unset: beside this module, in ./assets/.
+ *
+ * @param url The folder the licensed models are in. A trailing slash is added if it has none.
+ * @example
+ * ```ts no-run
+ * import { setAssetBase } from "@johnmorrisdotca/uchusen-rockets/element";
+ *
+ * setAssetBase("/static/uchusen-assets/");
+ * ```
+ */
 export function setAssetBase(url) {
     assetBase = url.endsWith("/") ? url : `${url}/`;
 }
@@ -82,8 +96,22 @@ function whyNot(mode) {
         return "no-webgl";
     return "";
 }
+/**
+ * The `<uchusen-rocket>` element: a rocket as a drawing that a 3D view takes over from when the browser can draw WebGL. Its attributes are the words of `RocketOptions`. It exposes its state as `data-state` and loads three.js only for a 3D view.
+ *
+ * @example
+ * ```ts no-run
+ * import { UchusenRocket } from "@johnmorrisdotca/uchusen-rockets/element";
+ *
+ * const rocket: UchusenRocket = document.createElement("uchusen-rocket") as UchusenRocket;
+ * rocket.setAttribute("rocket", "starship");
+ * rocket.setAttribute("variant", "v3");
+ * rocket.setAttribute("look", "painted");
+ * document.body.append(rocket);
+ * ```
+ */
 export class UchusenRocket extends HTMLBase {
-    static observedAttributes = ["rocket", "variant", "show", "look", "view", "build", "mode", "assets", "spin", "way", "label"];
+    static observedAttributes = ["rocket", "variant", "show", "look", "view", "build", "mode", "assets", "spin", "way", "label", "engines", "phase"];
     descriptionValue = null;
     picture = null;
     holder = null;
@@ -106,6 +134,13 @@ export class UchusenRocket extends HTMLBase {
     onScreen = true;
     drawn = { key: "", box: [0, 0, 1, 1] };
     tiltCleanups = [];
+    clock = null;
+    flightFrame = 0;
+    flightLast = 0;
+    flightDrawn = -1;
+    noted = { index: -1, at: 0 };
+    phaseSeen = null;
+    flightSeen = null;
     /** What is showing now. */
     get state() {
         return this.stateNow;
@@ -173,15 +208,22 @@ export class UchusenRocket extends HTMLBase {
     seen = () => {
         if (!document.hidden && this.stale)
             this.place();
+        this.kickFlight();
     };
+    /** A reader who changes the setting while the page is open is followed at once. */
+    motionChanged = () => this.queue();
+    motion = null;
     connectedCallback() {
         if (!this.shadowRoot)
             adopt(this.attachShadow({ mode: "open" }), CSS, rocketSheet);
         document.addEventListener("visibilitychange", this.seen);
+        this.motion = typeof matchMedia === "function" ? matchMedia("(prefers-reduced-motion: reduce)") : null;
+        this.motion?.addEventListener("change", this.motionChanged);
         this.queue();
     }
     disconnectedCallback() {
         document.removeEventListener("visibilitychange", this.seen);
+        this.motion?.removeEventListener("change", this.motionChanged);
         this.teardown();
         this.key = "";
     }
@@ -190,15 +232,16 @@ export class UchusenRocket extends HTMLBase {
             return;
         if (name === "spin" || name === "way")
             this.viewer?.setSpin(this.spin());
-        else
+        else {
+            // choosing what to show leaves the flight
+            if (name === "show")
+                this.endFlight();
             this.queue();
+        }
     }
     // ---------------------------------------------------------------------------------------------------------------------------------
     spin() {
-        const raw = this.getAttribute("spin");
-        const named = { off: 0, slow: 180, medium: 67, fast: 20 };
-        const seconds = raw === null ? DEFAULT_SPIN.seconds : (named[raw] ?? (Number.isFinite(Number(raw)) ? Math.max(0, Number(raw)) : DEFAULT_SPIN.seconds));
-        return { seconds, way: this.getAttribute("way") === "ccw" ? "ccw" : "cw" };
+        return spinOf(this.getAttribute("spin"), this.getAttribute("way"));
     }
     descriptionNow() {
         if (this.descriptionValue)
@@ -233,6 +276,8 @@ export class UchusenRocket extends HTMLBase {
         window.clearTimeout(this.releaseTimer);
         window.clearTimeout(this.revealTimer);
         window.cancelAnimationFrame(this.placeFrame);
+        window.cancelAnimationFrame(this.flightFrame);
+        this.flightFrame = 0;
         this.stopTilt();
         this.viewer?.dispose();
         this.viewer = null;
@@ -257,6 +302,129 @@ export class UchusenRocket extends HTMLBase {
         const viewName = cleanView(this.getAttribute("view"));
         return { look, show, viewName, angle: VIEWS[viewName] };
     }
+    // ---------------------------------------------------------------------------------------------------------------------------------
+    // the flight
+    /** The flight a page gives for what is showing, or null: a custom build never has one. */
+    get flight() {
+        const report = this.builtNow?.report;
+        return report && !report.custom && report.variant ? flightOf(report.variant.rocket, report.variant.id) : null;
+    }
+    /** Where the timeline is: `active` once it has been started or moved, until `endFlight`. */
+    get flightState() {
+        const clock = this.clock;
+        const flight = this.flight;
+        return { active: clock !== null, playing: clock?.playing ?? false, ended: clock?.ended ?? false, position: clock?.position ?? 0, phase: clock ? phaseAt(clock.flight, clock.position).phase.id : (flight?.phases[0].id ?? "") };
+    }
+    /** Plays the flight from where it is. It stands still out of sight, and does not play at all for a reader who asked for reduced motion: `seek` still moves it, by hand. */
+    play() {
+        const flight = this.flight;
+        if (!flight || media("(prefers-reduced-motion: reduce)"))
+            return;
+        this.clock ??= new FlightClock(flight);
+        this.clock.play();
+        this.flightMoved();
+    }
+    pause() {
+        this.clock?.pause();
+        this.flightMoved();
+    }
+    /** Moves the timeline to a place, where 0 is the first phase, 1 the next and so on: `2.5` is half way from the third to the fourth. */
+    seek(position) {
+        const flight = this.flight;
+        if (!flight)
+            return;
+        this.clock ??= new FlightClock(flight);
+        this.clock.seek(position);
+        this.flightMoved();
+    }
+    /** Leaves the flight: the rocket as it was. */
+    endFlight() {
+        if (!this.clock)
+            return;
+        this.clock = null;
+        this.phaseSeen = null;
+        window.cancelAnimationFrame(this.flightFrame);
+        this.flightFrame = 0;
+        this.viewer?.setFlight(null);
+        this.place();
+        this.mark();
+        this.noteFlight(true);
+    }
+    /** For each part with engines, which burn: at a named phase, where the timeline is, or else as the attributes have them. */
+    engineCharts(phaseId = null) {
+        const built = this.builtNow;
+        if (!built)
+            return [];
+        const flight = this.flight;
+        const fromPhase = phaseId && flight ? flight.phases.find((phase) => phase.id === phaseId) : null;
+        const phase = fromPhase ?? (this.clock ? phaseAt(this.clock.flight, this.clock.position).phase : null);
+        const burns = phase ? burnsOf(phase) : null;
+        return built.parts.flatMap((part) => {
+            const bells = bellsOf(part.pieces);
+            if (bells.length === 0)
+                return [];
+            const fired = pickBells(bells, burns ? (burns[part.slot] ?? 0) : this.engineLights() ? bells.length : 0);
+            const name = SLOT_NAMES[part.slot] ?? part.slot;
+            const figure = phase?.burns[part.slot]?.engines;
+            const words = `${name}: ${figure && figure.value === null ? `${fired.length} drawn, no source says how many` : `${fired.length} of ${bells.length}`}`;
+            return [{ slot: part.slot, burning: fired.length, total: bells.length, words, svg: engineChart(bells, fired, words) }];
+        });
+    }
+    flightMoved() {
+        if (this.clock)
+            this.viewer?.setFlight(this.clock);
+        if (this.viewer)
+            this.noteFlight(true);
+        else {
+            this.place();
+            this.noteFlight(true);
+            this.kickFlight();
+        }
+        this.mark();
+    }
+    /** With no 3D view the drawing follows the timeline, by one frame request at a time, at most 20 drawings a second, never out of sight. */
+    kickFlight() {
+        if (this.viewer || this.flightFrame || !this.clock?.playing || !this.onScreen || document.hidden)
+            return;
+        this.flightLast = 0;
+        this.flightFrame = window.requestAnimationFrame(this.flightStep);
+    }
+    flightStep = (time) => {
+        this.flightFrame = 0;
+        const clock = this.clock;
+        if (!clock?.playing || this.viewer || !this.onScreen || document.hidden)
+            return;
+        if (this.flightLast)
+            clock.advance(Math.min(0.1, (time - this.flightLast) / 1000));
+        this.flightLast = time;
+        if (phaseAt(clock.flight, clock.position).index !== this.flightDrawn) {
+            this.flightDrawn = phaseAt(clock.flight, clock.position).index;
+            this.place();
+        }
+        this.noteFlight(!clock.playing);
+        if (clock.playing)
+            this.flightFrame = window.requestAnimationFrame(this.flightStep);
+    };
+    /** Tells the page where the timeline is: at once for a new phase or a stop, otherwise at most 8 times a second. */
+    noteFlight(now = false) {
+        const clock = this.clock;
+        const index = clock ? phaseAt(clock.flight, clock.position).index : -1;
+        const time = performance.now();
+        if (!now && index === this.noted.index && time - this.noted.at < 125)
+            return;
+        this.noted = { index, at: time };
+        this.dataset.phase = this.flightState.active ? this.flightState.phase : "";
+        this.emit("uchusen-flight", this.flightState);
+    }
+    /** Whether the engines are lit: `engines="on"`, and never for a reader who asked for reduced motion. */
+    engineLights() {
+        return enginesWanted(this.getAttribute("engines"), media("(prefers-reduced-motion: reduce)"));
+    }
+    /** Hands the 3D view what the attributes say about the engines, and its reader's motion setting. */
+    lightViewer(viewer) {
+        viewer.setReduced(media("(prefers-reduced-motion: reduce)"));
+        viewer.setEngines(this.engineLights() ? "full" : null);
+    }
     update() {
         const description = this.descriptionNow();
         const key = JSON.stringify(description);
@@ -275,9 +443,31 @@ export class UchusenRocket extends HTMLBase {
             if (!this.picture)
                 this.renderShell();
             void this.applyRocket();
+            this.settleFlight();
             return;
         }
         this.applySettings();
+        this.settleFlight();
+    }
+    /** After a change: a timeline of another rocket ends, and the `phase` attribute moves it. */
+    settleFlight() {
+        const flight = this.flight;
+        if (this.clock && this.clock.flight.id !== flight?.id)
+            this.endFlight();
+        if ((flight?.id ?? null) !== this.flightSeen) {
+            this.flightSeen = flight?.id ?? null;
+            this.phaseSeen = null;
+            this.noteFlight(true);
+        }
+        const asked = this.getAttribute("phase");
+        if (asked !== this.phaseSeen) {
+            this.phaseSeen = asked;
+            const place = flight ? phasePosition(flight, asked) : null;
+            if (place !== null)
+                this.seek(place);
+            else if (asked === null)
+                this.endFlight();
+        }
     }
     renderShell() {
         const root = this.shadowRoot;
@@ -306,15 +496,18 @@ export class UchusenRocket extends HTMLBase {
     redraw() {
         if (!this.builtNow || !this.drawing)
             return;
-        const { look, show, angle } = this.settings(this.builtNow);
+        const { look, show: chosen, angle } = this.settings(this.builtNow);
+        const flying = this.clock ? frameAt(this.clock.flight, this.clock.position, this.builtNow.parts.map((part) => ({ slot: part.slot, baseY: 0 })), 1) : null;
+        const show = flying ? (flying.separated ? "apart" : "together") : chosen;
         // when a 3D view is showing, a drawing of the same angle is ready behind it
         const from = this.driven ? turnedBy(angle, this.driven.yaw, this.driven.tilt) : (this.viewer?.currentAngle() ?? angle);
         const label = this.getAttribute("label") ?? this.builtNow.report.label;
-        const key = `${this.key}|${look}|${show}|${from.az.toFixed(2)}|${from.el.toFixed(2)}|${label}`;
+        const lit = flying ? (media("(prefers-reduced-motion: reduce)") ? false : flying.burns) : this.engineLights();
+        const key = `${this.key}|${look}|${show}|${from.az.toFixed(2)}|${from.el.toFixed(2)}|${label}|${flying ? flying.index : ""}|${JSON.stringify(lit)}`;
         let node = this.drawing.firstElementChild;
         if (key !== this.drawn.key || !node) {
             const template = document.createElement("template");
-            template.innerHTML = this.builtNow.svg({ look, show, view: from });
+            template.innerHTML = this.builtNow.svg({ look, show, view: from, engines: lit });
             node = template.content.firstElementChild;
             if (!node)
                 return;
@@ -337,6 +530,8 @@ export class UchusenRocket extends HTMLBase {
             return;
         const { look, show, viewName } = this.settings(this.builtNow);
         this.dataset.look = look;
+        this.dataset.engines = this.engineLights() ? "on" : "off";
+        this.dataset.flight = this.flight?.id ?? "";
         this.dataset.show = show;
         this.dataset.viewAngle = viewName;
         this.dataset.variant = this.builtNow.report.variant?.id ?? "";
@@ -354,6 +549,8 @@ export class UchusenRocket extends HTMLBase {
             const from = viewName !== this.lastView || this.driven ? angle : this.viewer.currentAngle();
             this.lastView = viewName;
             await this.viewer.load(this.builtNow, show, look, from);
+            if (this.viewer)
+                this.lightViewer(this.viewer);
             this.emit("uchusen-change", { report: this.builtNow.report });
         }
     }
@@ -366,6 +563,7 @@ export class UchusenRocket extends HTMLBase {
         if (this.viewer) {
             this.viewer.setLook(look);
             this.viewer.setShow(show);
+            this.lightViewer(this.viewer);
             if (viewName !== this.lastView)
                 this.viewer.setAngle(angle, true);
             this.viewer.setHome(angle);
@@ -387,6 +585,8 @@ export class UchusenRocket extends HTMLBase {
             this.onScreen = seen.isIntersecting;
             if (seen.isIntersecting && this.stale)
                 this.place();
+            if (seen.isIntersecting)
+                this.kickFlight();
             if (reason)
                 return;
             if (seen.isIntersecting) {
@@ -404,6 +604,7 @@ export class UchusenRocket extends HTMLBase {
                     this.viewer?.dispose();
                     this.viewer = null;
                     this.stopTilt();
+                    this.kickFlight();
                     if (generation === this.generation) {
                         this.setState("picture");
                         if (this.driven)
@@ -422,6 +623,7 @@ export class UchusenRocket extends HTMLBase {
         this.stopTilt();
         this.viewer?.dispose();
         this.viewer = null;
+        this.kickFlight();
         this.setState("fallback", why);
         this.emit("uchusen-fallback", { reason: why });
     }
@@ -448,16 +650,25 @@ export class UchusenRocket extends HTMLBase {
                     this.dataset.painted = state;
                     this.emit("uchusen-painted", { state });
                 },
+                onFlight: () => this.noteFlight(!this.clock?.playing),
             });
             this.viewer = made;
+            window.cancelAnimationFrame(this.flightFrame);
+            this.flightFrame = 0;
+            if (this.clock)
+                made.setFlight(this.clock);
             if (this.driven)
                 made.drive(this.driven);
             made.setVisible(true);
             const { look, show, viewName, angle } = this.settings(this.builtNow ?? built);
             this.lastView = viewName;
             await made.load(this.builtNow ?? built, show, look, angle);
-            if (generation !== this.generation)
+            if (generation !== this.generation || this.viewer !== made)
                 return;
+            const now = this.settings(this.builtNow ?? built);
+            if (now.show !== show)
+                made.setShow(now.show);
+            this.lightViewer(made);
             made.setSpin(this.spin());
             const wait = revealDelay(this.shownAt, performance.now(), reduced);
             this.revealTimer = window.setTimeout(() => {
@@ -528,7 +739,20 @@ const LINEUP_CSS = `
 :host { display: block; overflow-x: auto; color: inherit; }
 svg { display: block; }
 `;
-/** Rockets side by side on one baseline at one scale: `<uchusen-lineup items="starship:v1,starship:v3,person,building" unit="4" ruler labels>`. */
+/**
+ * Rockets side by side on one baseline at one scale: `<uchusen-lineup items="starship:v1,starship:v3,person,building" unit="4" ruler labels>`.
+ *
+ * @example
+ * ```ts no-run
+ * import { UchusenLineup } from "@johnmorrisdotca/uchusen-rockets/element";
+ *
+ * const lineup: UchusenLineup = document.createElement("uchusen-lineup") as UchusenLineup;
+ * lineup.setAttribute("items", "starship:v2,starship:v3,person");
+ * lineup.setAttribute("unit", "3");
+ * lineup.toggleAttribute("ruler", true);
+ * document.body.append(lineup);
+ * ```
+ */
 export class UchusenLineup extends HTMLBase {
     static observedAttributes = ["items", "unit", "look", "view", "show", "ruler", "labels"];
     connectedCallback() {
@@ -567,7 +791,17 @@ export class UchusenLineup extends HTMLBase {
         this.dataset.count = String(shown.length);
     }
 }
-/** Defines both elements, once. Importing this module does it. */
+/**
+ * Defines both elements, once. Importing this module does it.
+ *
+ * @example
+ * ```ts no-run
+ * import { defineUchusenRocket } from "@johnmorrisdotca/uchusen-rockets/element";
+ *
+ * defineUchusenRocket();
+ * console.log(customElements.get("uchusen-rocket") !== undefined);
+ * ```
+ */
 export function defineUchusenRocket() {
     if (typeof customElements === "undefined")
         return;
@@ -575,6 +809,7 @@ export function defineUchusenRocket() {
         customElements.define("uchusen-rocket", UchusenRocket);
     if (!customElements.get("uchusen-lineup"))
         customElements.define("uchusen-lineup", UchusenLineup);
+    defineUchusenFlight();
 }
 defineUchusenRocket();
-export { ROCKETS };
+export { ROCKETS, UchusenFlight };