@johnmorrisdotca/uchusen-rockets 0.2.1 → 0.3.0

package/dist/element.js

@@ -2,18 +2,22 @@
 // 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;
@@ -83,7 +87,7 @@ function whyNot(mode) {
     return "";
 }
 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 +110,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 +184,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 +208,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 +252,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 +278,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 +419,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 +472,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 +506,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 +525,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 +539,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 +561,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 +580,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 +599,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 +626,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(() => {
@@ -575,6 +762,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 };

package/dist/embed.d.ts

@@ -0,0 +1,26 @@
+import { type RocketOptions } from "./attrs.ts";
+export declare const EMBED_KINDS: readonly ["element", "iframe", "module", "svg", "data", "link"];
+export type EmbedKind = (typeof EMBED_KINDS)[number];
+export interface EmbedSettings {
+    /** The address of the published demo, where `embed.html` is. */
+    site?: string;
+    /** The CDN or package path the element is loaded from. */
+    cdn?: string;
+}
+export declare const SITE = "https://johnmorrisdotca.github.io/uchusen-rockets/";
+export declare const CDN = "https://cdn.jsdelivr.net/npm/@johnmorrisdotca/uchusen-rockets@0";
+/** The three.js a page with no bundler takes from the CDN: the version this package is built and tested with. */
+export declare const THREE_VERSION = "0.186.1";
+/** What an embed asks of the page around it, in words: a line for the demo to show. */
+export declare function embedNote(kind: EmbedKind, options: RocketOptions): string;
+/**
+ * The CC BY line for a painted rocket, generated from the parts that are showing.
+ * Empty when the look is not painted, or when those parts are this package's own paint.
+ */
+export declare function paintedCredit(options: RocketOptions): string;
+/**
+ * The shipped picture of these options, under the package's `dist/assets/`: `starship-v3.svg`, `falcon-9-block-5-apart.thick.svg`. These are drawn from the default view, with no flames. Null for a custom build, which has no file, or a variant, part or look that does not exist.
+ */
+export declare function assetPathOf(options: RocketOptions): string | null;
+/** The text of one embed. The `module` one imports the package; the `data` one is a `data:image/svg+xml` address for an `<img>`. */
+export declare function embedCode(options: RocketOptions, kind?: EmbedKind, settings?: EmbedSettings): string;

package/dist/embed.js

@@ -0,0 +1,135 @@
+// `embedCode`: the text to put a rocket in a page, in each of the six ways: the custom element from a CDN, an iframe of `embed.html`, a JavaScript module, the SVG itself, a data address, and a link to the shipped picture.
+// A painted rocket's credit is generated from the parts that show, and every painted form carries it.
+import { build } from "./build/index.js";
+import { creditLine } from "./data/credits.js";
+import { check } from "./fit.js";
+import { cleanView } from "./framing.js";
+import { cleanShow, showsOf } from "./layout.js";
+import { cleanLook, DEFAULT_LOOK } from "./looks.js";
+import { attributesFromOptions, rocketToParams } from "./attrs.js";
+export const EMBED_KINDS = ["element", "iframe", "module", "svg", "data", "link"];
+export const SITE = "https://johnmorrisdotca.github.io/uchusen-rockets/";
+export const CDN = "https://cdn.jsdelivr.net/npm/@johnmorrisdotca/uchusen-rockets@0";
+/** The three.js a page with no bundler takes from the CDN: the version this package is built and tested with. */
+export const THREE_VERSION = "0.186.1";
+const THREE_CDN = `https://cdn.jsdelivr.net/npm/three@${THREE_VERSION}`;
+const IMPORT_MAP = `<script type="importmap">\n  { "imports": { "three": "${THREE_CDN}/build/three.module.js", "three/addons/": "${THREE_CDN}/examples/jsm/" } }\n</script>`;
+const esc = (value) => value.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+const EMPTY_SVG = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 640" width="480" height="640" role="img"></svg>`;
+function descriptionOf(options) {
+    if (options.build) {
+        try {
+            const parsed = JSON.parse(options.build);
+            if (parsed && typeof parsed === "object" && typeof parsed.rocket === "string") {
+                return {
+                    rocket: parsed.rocket,
+                    ...(typeof parsed.variant === "string" ? { variant: parsed.variant } : {}),
+                    ...(parsed.parts && typeof parsed.parts === "object" ? { parts: parsed.parts } : {}),
+                };
+            }
+        }
+        catch {
+            // a build that is not JSON falls through to the named rocket
+        }
+    }
+    return { rocket: options.rocket ?? "starship", ...(options.variant ? { variant: options.variant } : {}) };
+}
+/** What an embed asks of the page around it, in words: a line for the demo to show. */
+export function embedNote(kind, options) {
+    const notes = {
+        element: "One script from the CDN and the tag. The import map names three.js, for the 3D view; a page with a bundler needs neither, only the package.",
+        iframe: "No script of your own. It draws the drawing at once, and the 3D view when the browser can. Add flight=1 to the address for the flight's controls.",
+        module: "The drawing from a script of your own, with no three.js.",
+        svg: "The drawing itself: nothing to load. Paste it in a page or save it as a file.",
+        data: "The drawing as an address, for an image tag or a stylesheet.",
+        link: options.view && options.view !== "three-quarter" ? "A link to the file in the package. Those show the three-quarter view, with no flames: use the SVG or data tab for this view." : "A link to the file in the package. Those show the three-quarter view, with no flames.",
+    };
+    return notes[kind];
+}
+/**
+ * The CC BY line for a painted rocket, generated from the parts that are showing.
+ * Empty when the look is not painted, or when those parts are this package's own paint.
+ */
+export function paintedCredit(options) {
+    if (cleanLook(options.look) !== "painted")
+        return "";
+    const report = check(descriptionOf(options));
+    if (!report.ok)
+        return "";
+    const show = options.show;
+    const names = new Set(report.parts.filter(({ slot }) => !show || show === "together" || show === "apart" || show === slot).map(({ part }) => part.name));
+    return report.credits
+        .map((credit) => {
+        const used = credit.usedFor.filter((name) => names.has(name));
+        return used.length === 0 ? "" : `${used.join(", ")}: ${creditLine(credit.id)}`;
+    })
+        .filter((line) => line !== "")
+        .join("\n");
+}
+/**
+ * The shipped picture of these options, under the package's `dist/assets/`: `starship-v3.svg`, `falcon-9-block-5-apart.thick.svg`. These are drawn from the default view, with no flames. Null for a custom build, which has no file, or a variant, part or look that does not exist.
+ */
+export function assetPathOf(options) {
+    if (options.build)
+        return null;
+    const description = descriptionOf(options);
+    const report = check(description);
+    if (!report.ok || !report.variant || report.custom)
+        return null;
+    const slots = report.parts.map(({ slot }) => slot);
+    const shows = showsOf(slots);
+    const show = cleanShow(options.show, slots);
+    if (!shows.includes(show))
+        return null;
+    const look = cleanLook(options.look);
+    return `${report.variant.rocket}-${report.variant.id}${show === shows[0] ? "" : `-${show}`}${look === DEFAULT_LOOK ? "" : `.${look}`}.svg`;
+}
+function svgOptionsOf(options) {
+    return {
+        look: cleanLook(options.look),
+        view: cleanView(options.view),
+        ...(options.show ? { show: options.show } : {}),
+        ...(options.engines === "on" ? { engines: true } : {}),
+    };
+}
+function drawingOf(options) {
+    try {
+        const drawn = build(descriptionOf(options)).svg(svgOptionsOf(options));
+        const credit = paintedCredit(options);
+        return credit === "" ? drawn : drawn.replace("</svg>", `<desc>${esc(credit)}</desc></svg>`);
+    }
+    catch {
+        return EMPTY_SVG;
+    }
+}
+const creditHtml = (credit) => (credit === "" ? "" : `\n<p>${esc(credit).replaceAll("\n", "<br>\n")}</p>`);
+/** The text of one embed. The `module` one imports the package; the `data` one is a `data:image/svg+xml` address for an `<img>`. */
+export function embedCode(options, kind = "element", settings = {}) {
+    const site = settings.site ?? SITE;
+    const cdn = settings.cdn ?? CDN;
+    const credit = paintedCredit(options);
+    if (kind === "svg")
+        return drawingOf(options);
+    if (kind === "data")
+        return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(drawingOf(options))}`;
+    if (kind === "link") {
+        const path = assetPathOf(options);
+        const alt = esc(options.label ?? "Rocket");
+        const src = path === null ? `data:image/svg+xml;charset=utf-8,${encodeURIComponent(drawingOf(options))}` : `${cdn}/dist/assets/${path}`;
+        return `<img src="${esc(src)}" alt="${alt}" width="480" height="640" loading="lazy">${creditHtml(credit)}`;
+    }
+    if (kind === "iframe") {
+        const query = rocketToParams(options).toString();
+        const src = `${site}embed.html${query === "" ? "" : `?${query}`}`;
+        const title = options.label ?? "Rocket";
+        return `<iframe\n  src="${esc(src)}"\n  title="${esc(title)}"\n  loading="lazy"\n  style="width:100%;max-width:480px;aspect-ratio:3 / 4;border:0"\n></iframe>${creditHtml(credit)}`;
+    }
+    if (kind === "module") {
+        const description = descriptionOf(options);
+        const svgOptions = svgOptionsOf(options);
+        const caption = credit === "" ? "" : `\ndocument.querySelector("#credit").textContent = ${JSON.stringify(credit)};`;
+        return `// In a page with <div id="rocket"></div>${credit === "" ? "" : ' and <p id="credit"></p>'}.\nimport { build } from "${cdn}/dist/build/index.js";\n// or, from npm: import { build } from "@johnmorrisdotca/uchusen-rockets/build";\n\nconst rocket = build(${JSON.stringify(description, null, 2)});\ndocument.querySelector("#rocket").innerHTML = rocket.svg(${JSON.stringify(svgOptions)});${caption}`;
+    }
+    const attrs = Object.entries(attributesFromOptions(options)).map(([name, value]) => `${name}="${esc(value)}"`);
+    return `${IMPORT_MAP}\n<script type="module" src="${cdn}/dist/element.js"></script>\n\n<uchusen-rocket${attrs.length === 0 ? "" : `\n  ${attrs.join("\n  ")}`}\n></uchusen-rocket>${creditHtml(credit)}`;
+}

package/dist/engines.d.ts

@@ -0,0 +1,44 @@
+import type { Piece } from "./model/pieces.ts";
+/** How many exit-radii a drawn flame reaches, and the most any reaches in metres. A picture, not a measured length. */
+export declare const PLUME_EXITS = 34;
+export declare const PLUME_MOST_M = 26;
+/** How many shock diamonds a flame shows near the ground. A picture. */
+export declare const PLUME_DIAMONDS = 6;
+/** With no one touching anything, a flame stops moving after this long and nothing draws: a lit rocket at rest costs the same as a dark one. */
+export declare const FLAME_SETTLE_MS = 15000;
+/** A flame that only flickers is drawn at most this often. A turn or a move still draws once a frame. */
+export declare const FLAME_GAP_MS = 33;
+export declare function plumeLength(exit: number): number;
+/** `on` asks for them, and a reader who asked for reduced motion has them off whatever the page says. Anything else, or nothing, is off. */
+export declare function enginesWanted(attribute: string | null, reduced: boolean): boolean;
+export interface Bell {
+    x: number;
+    z: number;
+    /** Height of the mouth, in the part's own metres. */
+    y: number;
+    /** Exit radius, metres. */
+    exit: number;
+}
+/** One bell for every engine the pieces already draw. The mouth is the first point of the bell. */
+export declare function bellsOf(pieces: readonly Piece[]): Bell[];
+export interface LitBell extends Bell {
+    slot: string;
+}
+/**
+ * The engines that are alight at full thrust. Stacked, only the parts on the ground or beside the stack, as an orbiter is: a ship's engines are buried in the booster.
+ * Apart, or one part on its own, every bell that part draws. A part whose engines no source tells of (`dark`, a stage that has landed) draws no flame.
+ */
+export declare function litBells(parts: readonly {
+    slot: string;
+    atY: number;
+    shown: boolean;
+    pieces: readonly Piece[];
+    beside?: boolean;
+    dark?: boolean;
+}[], together: boolean): LitBell[];
+/** The bells grouped by how far they are from the part's axis, innermost ring first, and each ring in order round the axis. */
+export declare function ringsOf(bells: readonly Bell[]): Bell[][];
+/**
+ * Which `count` engines burn: from the middle out, and a ring that is only partly used has them evenly round it, so three of a Falcon 9's nine are the middle one and two opposite. A source says how many; where they stand is this rule.
+ */
+export declare function pickBells(bells: readonly Bell[], count: number): Bell[];

package/dist/engines.js

@@ -0,0 +1,79 @@
+/** How many exit-radii a drawn flame reaches, and the most any reaches in metres. A picture, not a measured length. */
+export const PLUME_EXITS = 34;
+export const PLUME_MOST_M = 26;
+/** How many shock diamonds a flame shows near the ground. A picture. */
+export const PLUME_DIAMONDS = 6;
+/** With no one touching anything, a flame stops moving after this long and nothing draws: a lit rocket at rest costs the same as a dark one. */
+export const FLAME_SETTLE_MS = 15_000;
+/** A flame that only flickers is drawn at most this often. A turn or a move still draws once a frame. */
+export const FLAME_GAP_MS = 33;
+export function plumeLength(exit) {
+    return Math.min(exit * PLUME_EXITS, PLUME_MOST_M);
+}
+/** `on` asks for them, and a reader who asked for reduced motion has them off whatever the page says. Anything else, or nothing, is off. */
+export function enginesWanted(attribute, reduced) {
+    return attribute === "on" && !reduced;
+}
+/** One bell for every engine the pieces already draw. The mouth is the first point of the bell. */
+export function bellsOf(pieces) {
+    const bells = [];
+    for (const piece of pieces) {
+        if (piece.kind !== "lathe" || piece.material !== "bell" || piece.profile.length === 0)
+            continue;
+        const [exit, y] = piece.profile[0];
+        const at = piece.at ?? [0, 0];
+        bells.push({ x: at[0], z: at[1], y, exit });
+    }
+    return bells;
+}
+/**
+ * The engines that are alight at full thrust. Stacked, only the parts on the ground or beside the stack, as an orbiter is: a ship's engines are buried in the booster.
+ * Apart, or one part on its own, every bell that part draws. A part whose engines no source tells of (`dark`, a stage that has landed) draws no flame.
+ */
+export function litBells(parts, together) {
+    const shown = parts.filter((part) => part.shown);
+    if (shown.length === 0)
+        return [];
+    const floor = Math.min(...shown.map((part) => part.atY));
+    const bells = [];
+    for (const part of shown) {
+        if (part.dark || (together && part.atY > floor + 0.5 && !part.beside))
+            continue;
+        for (const bell of bellsOf(part.pieces))
+            bells.push({ ...bell, slot: part.slot });
+    }
+    return bells;
+}
+/** The bells grouped by how far they are from the part's axis, innermost ring first, and each ring in order round the axis. */
+export function ringsOf(bells) {
+    const sorted = [...bells].sort((a, b) => Math.hypot(a.x, a.z) - Math.hypot(b.x, b.z));
+    const rings = [];
+    for (const bell of sorted) {
+        const last = rings[rings.length - 1];
+        if (last && Math.abs(Math.hypot(last[0].x, last[0].z) - Math.hypot(bell.x, bell.z)) < 0.05)
+            last.push(bell);
+        else
+            rings.push([bell]);
+    }
+    for (const ring of rings)
+        ring.sort((a, b) => Math.atan2(a.x, a.z) - Math.atan2(b.x, b.z));
+    return rings;
+}
+/**
+ * Which `count` engines burn: from the middle out, and a ring that is only partly used has them evenly round it, so three of a Falcon 9's nine are the middle one and two opposite. A source says how many; where they stand is this rule.
+ */
+export function pickBells(bells, count) {
+    const wanted = Math.max(0, Math.min(bells.length, Math.floor(count)));
+    const out = [];
+    for (const ring of ringsOf(bells)) {
+        const left = wanted - out.length;
+        if (left <= 0)
+            break;
+        if (ring.length <= left)
+            out.push(...ring);
+        else
+            for (let i = 0; i < left; i++)
+                out.push(ring[Math.floor((i * ring.length) / left)]);
+    }
+    return out;
+}

package/dist/fit.d.ts

@@ -40,4 +40,6 @@ export interface FitReport {
         usedFor: readonly string[];
     })[];
 }
+/** How far apart two joints may be in metres and still meet. */
+export declare const JOINT_TOLERANCE = 0.1;
 export declare function check(description: Description): FitReport;