@johnmorrisdotca/uchusen-rockets 0.3.0 → 0.5.0

package/dist/data/types.d.ts

@@ -1,9 +1,31 @@
 import type { SourceId } from "./sources.ts";
+/**
+ * Another value a source gave for a figure, with the source and the reason it was not the one chosen.
+ *
+ * @example
+ * ```ts
+ * import { variantOf, type Disagreement } from "@johnmorrisdotca/uchusen-rockets";
+ *
+ * const others: readonly Disagreement<number>[] = variantOf("starship", "v3")?.facts.parts.booster?.others ?? [];
+ * console.log(others.map((other) => other.value));
+ * ```
+ */
 export interface Disagreement<T> {
     value: T;
     source: SourceId;
     note: string;
 }
+/**
+ * A number or a text with where it came from. A figure with no source is blank (`value` is null) and is never estimated. Where sources disagree, the figure keeps the one chosen and `others` holds the rest.
+ *
+ * @example
+ * ```ts
+ * import { variantOf, type Figure } from "@johnmorrisdotca/uchusen-rockets";
+ *
+ * const height: Figure | undefined = variantOf("starship", "v3")?.facts.height;
+ * console.log(height?.value, height?.source);
+ * ```
+ */
 export interface Figure<T = number> {
     value: T | null;
     source: SourceId | null;
@@ -14,10 +36,57 @@ export interface Figure<T = number> {
     brief?: string;
     others?: readonly Disagreement<T>[];
 }
+/**
+ * A figure with no value: the shape of "no source gives this".
+ *
+ * @param note Why there is no value. Optional.
+ * @param brief What to say in place of a value wherever it is shown. Optional.
+ * @returns A figure whose value and source are null.
+ * @example
+ * ```ts
+ * import { blank } from "@johnmorrisdotca/uchusen-rockets";
+ *
+ * console.log(blank("No source read gives it.", "not given"));
+ * ```
+ */
 export declare const blank: <T = number>(note?: string, brief?: string) => Figure<T>;
-/** A figure as words for a table: its value and whatever must stay beside it; a blank says why, or that no source gives it. */
+/**
+ * A figure as words for a table: its value and whatever must stay beside it; a blank says why, or that no source gives it.
+ *
+ * @param figure A figure, or undefined.
+ * @param unit Text to put after a number, such as " m". Optional.
+ * @returns The figure as words for a table. A blank gives its `brief`, or "No source" when it has none.
+ * @example
+ * ```ts
+ * import { figureWords, variantOf } from "@johnmorrisdotca/uchusen-rockets";
+ *
+ * console.log(figureWords(variantOf("starship", "v3")?.facts.height, " m"));
+ * ```
+ */
 export declare function figureWords(figure: Figure<number | string> | undefined, unit?: string): string;
+/**
+ * What kind of thing a variant is: flown, announced (not built), an artist's model, a test vehicle or a support item.
+ *
+ * @example
+ * ```ts
+ * import { variantOf, type VariantStatus } from "@johnmorrisdotca/uchusen-rockets";
+ *
+ * const status: VariantStatus | undefined = variantOf("starship", "v4")?.status;
+ * console.log(status);
+ * ```
+ */
 export type VariantStatus = "flown" | "announced" | "artist-model" | "test-vehicle" | "support";
+/**
+ * The sourced numbers of a variant: its height and diameter, each part's height by slot, its engines, other facts and any sizes that are not a height or a width.
+ *
+ * @example
+ * ```ts
+ * import { variantOf, type VariantFacts } from "@johnmorrisdotca/uchusen-rockets";
+ *
+ * const facts: VariantFacts | undefined = variantOf("falcon-9", "block-5")?.facts;
+ * console.log(facts?.height.value, Object.keys(facts?.parts ?? {}));
+ * ```
+ */
 export interface VariantFacts {
     /** Overall height with every part in place, metres. */
     height: Figure;
@@ -31,6 +100,17 @@ export interface VariantFacts {
     /** Sizes that are not a height or a width, shown as they are named here: "Deck length". */
     sizes?: Readonly<Record<string, Figure>>;
 }
+/**
+ * One version of a rocket as data: its id, name, status, first flight, its parts from the bottom up, and the sourced facts about it.
+ *
+ * @example
+ * ```ts
+ * import { variantOf, type Variant } from "@johnmorrisdotca/uchusen-rockets";
+ *
+ * const variant: Variant | undefined = variantOf("starship", "v3");
+ * console.log(variant?.name, variant?.slots);
+ * ```
+ */
 export interface Variant {
     /** "v1", "v2" and so on; a label for what is not a numbered version. */
     id: string;

package/dist/data/types.js

@@ -1,5 +1,30 @@
+/**
+ * A figure with no value: the shape of "no source gives this".
+ *
+ * @param note Why there is no value. Optional.
+ * @param brief What to say in place of a value wherever it is shown. Optional.
+ * @returns A figure whose value and source are null.
+ * @example
+ * ```ts
+ * import { blank } from "@johnmorrisdotca/uchusen-rockets";
+ *
+ * console.log(blank("No source read gives it.", "not given"));
+ * ```
+ */
 export const blank = (note, brief) => ({ value: null, source: null, ...(note ? { note } : {}), ...(brief ? { brief } : {}) });
-/** A figure as words for a table: its value and whatever must stay beside it; a blank says why, or that no source gives it. */
+/**
+ * A figure as words for a table: its value and whatever must stay beside it; a blank says why, or that no source gives it.
+ *
+ * @param figure A figure, or undefined.
+ * @param unit Text to put after a number, such as " m". Optional.
+ * @returns The figure as words for a table. A blank gives its `brief`, or "No source" when it has none.
+ * @example
+ * ```ts
+ * import { figureWords, variantOf } from "@johnmorrisdotca/uchusen-rockets";
+ *
+ * console.log(figureWords(variantOf("starship", "v3")?.facts.height, " m"));
+ * ```
+ */
 export function figureWords(figure, unit = "") {
     if (!figure || figure.value === null)
         return figure?.brief ?? "No source";

package/dist/draw/plume.d.ts

@@ -2,7 +2,16 @@ import type { Camera } from "./svg.ts";
 import type { Vec3 } from "../framing.ts";
 import { type Bell } from "../engines.ts";
 import type { LookName } from "../looks.ts";
+import type { FlameKind } from "../data/propellants.ts";
+/** A flame's colours in a picture, by the kind its engine's propellant gives: the hot core, the middle and the cool edge, and the line looks' stroke. A picture, not a measurement of a flame. */
+export declare const FLAME_COLOURS: Readonly<Record<FlameKind, {
+    core: string;
+    mid: string;
+    edge: string;
+    line: string;
+    inner: string;
+}>>;
 /** The flames for these bells, in picture coordinates. Empty when there are none. */
-export declare function plumeMarkup(bells: readonly Bell[], at: Vec3, cam: Camera, look: LookName, prefix: string): string;
+export declare function plumeMarkup(bells: readonly Bell[], at: Vec3, cam: Camera, look: LookName, prefix: string, kind?: FlameKind): string;
 /** The engines of a part seen from below, each in its own place, the burning ones filled: `engine by engine`. Its words are for a screen reader. */
 export declare function engineChart(bells: readonly Bell[], burning: readonly Bell[], label: string): string;

package/dist/draw/plume.js

@@ -1,4 +1,13 @@
 import { PLUME_DIAMONDS, plumeLength } from "../engines.js";
+/** A flame's colours in a picture, by the kind its engine's propellant gives: the hot core, the middle and the cool edge, and the line looks' stroke. A picture, not a measurement of a flame. */
+export const FLAME_COLOURS = {
+    kerosene: { core: "#fff4d2", mid: "#ff9a3a", edge: "#ff4a12", line: "#e7a24a", inner: "#ffd7a1" },
+    methane: { core: "#fff1e6", mid: "#9aa5ff", edge: "#5d6dff", line: "#8f9bf0", inner: "#d9ddff" },
+    hydrogen: { core: "#ffffff", mid: "#b8dcff", edge: "#6fa8ff", line: "#9cc7f5", inner: "#e4f1ff" },
+    solid: { core: "#fff1c4", mid: "#ffb02e", edge: "#ff3d0a", line: "#f0a030", inner: "#ffe0a0" },
+    hypergolic: { core: "#ffffff", mid: "#e6ecff", edge: "#b8c4ee", line: "#c3cbe3", inner: "#f2f5ff" },
+    neutral: { core: "#ffffff", mid: "#d5dae3", edge: "#9aa3b2", line: "#b4bcc9", inner: "#e6e9ef" },
+};
 const n = (v) => (Math.round(v * 100) / 100).toString();
 function hull(points) {
     const p = [...points].sort((a, b) => a[0] - b[0] || a[1] - b[1]);
@@ -19,9 +28,10 @@ function hull(points) {
 }
 const pathOf = (pts) => `M${pts.map(([x, y]) => `${n(x)} ${n(y)}`).join("L")}Z`;
 /** The flames for these bells, in picture coordinates. Empty when there are none. */
-export function plumeMarkup(bells, at, cam, look, prefix) {
+export function plumeMarkup(bells, at, cam, look, prefix, kind = "neutral") {
     if (bells.length === 0)
         return "";
+    const colour = FLAME_COLOURS[kind];
     const painted = look === "painted";
     const stroke = look === "thick" ? 2.4 : 1.2;
     const parts = [];
@@ -45,17 +55,17 @@ export function plumeMarkup(bells, at, cam, look, prefix) {
         const rx = Math.max(1.2, (Math.max(...xs) - Math.min(...xs)) / 2);
         const ry = Math.max(1.2, (Math.max(...ys) - Math.min(...ys)) / 2);
         const defs = painted
-            ? `<defs><linearGradient id="${id}" gradientUnits="userSpaceOnUse" x1="${n(mouthPoint[0])}" y1="${n(mouthPoint[1])}" x2="${n(tipPoint[0])}" y2="${n(tipPoint[1])}"><stop offset="0" stop-color="#fff4d2"/><stop offset="0.45" stop-color="#ff9a3a"/><stop offset="1" stop-color="#ff4a12" stop-opacity="0"/></linearGradient><radialGradient id="${glow}" gradientUnits="userSpaceOnUse" cx="${n(cx)}" cy="${n(cy)}" r="${n(Math.max(rx, ry))}"><stop offset="0" stop-color="#fff1c4"/><stop offset="1" stop-color="#ff7a1a" stop-opacity="0"/></radialGradient></defs>`
+            ? `<defs><linearGradient id="${id}" gradientUnits="userSpaceOnUse" x1="${n(mouthPoint[0])}" y1="${n(mouthPoint[1])}" x2="${n(tipPoint[0])}" y2="${n(tipPoint[1])}"><stop offset="0" stop-color="${colour.core}"/><stop offset="0.45" stop-color="${colour.mid}"/><stop offset="1" stop-color="${colour.edge}" stop-opacity="0"/></linearGradient><radialGradient id="${glow}" gradientUnits="userSpaceOnUse" cx="${n(cx)}" cy="${n(cy)}" r="${n(Math.max(rx, ry))}"><stop offset="0" stop-color="${colour.core}"/><stop offset="1" stop-color="${colour.mid}" stop-opacity="0"/></radialGradient></defs>`
             : "";
-        const flame = shape.length >= 3 ? (painted ? `<path data-plume="1" d="${pathOf(shape)}" fill="url(#${id})" stroke="none"/>` : `<path data-plume="1" d="${pathOf(shape)}" fill="none" stroke="#e7a24a" stroke-width="${stroke}"/><path d="M${n(mouthPoint[0])} ${n(mouthPoint[1])}L${n(tipPoint[0])} ${n(tipPoint[1])}" fill="none" stroke="#ffd7a1" stroke-width="${stroke * 0.6}"/>`) : "";
-        const ring = painted ? `<ellipse data-glow="1" cx="${n(cx)}" cy="${n(cy)}" rx="${n(rx * 1.35)}" ry="${n(ry * 1.35)}" fill="url(#${glow})"/>` : `<ellipse data-glow="1" cx="${n(cx)}" cy="${n(cy)}" rx="${n(rx * 1.2)}" ry="${n(ry * 1.2)}" fill="none" stroke="#e7a24a" stroke-width="${stroke}"/>`;
+        const flame = shape.length >= 3 ? (painted ? `<path data-plume="1" d="${pathOf(shape)}" fill="url(#${id})" stroke="none"/>` : `<path data-plume="1" d="${pathOf(shape)}" fill="none" stroke="${colour.line}" stroke-width="${stroke}"/><path d="M${n(mouthPoint[0])} ${n(mouthPoint[1])}L${n(tipPoint[0])} ${n(tipPoint[1])}" fill="none" stroke="${colour.inner}" stroke-width="${stroke * 0.6}"/>`) : "";
+        const ring = painted ? `<ellipse data-glow="1" cx="${n(cx)}" cy="${n(cy)}" rx="${n(rx * 1.35)}" ry="${n(ry * 1.35)}" fill="url(#${glow})"/>` : `<ellipse data-glow="1" cx="${n(cx)}" cy="${n(cy)}" rx="${n(rx * 1.2)}" ry="${n(ry * 1.2)}" fill="none" stroke="${colour.line}" stroke-width="${stroke}"/>`;
         // the first few shock diamonds, as small rings down the flame: a picture
         let diamonds = "";
         for (let k = 1; k <= 3; k++) {
             const along = k / PLUME_DIAMONDS;
             const [dx, dy] = cam.project([mouth[0], mouth[1] - plumeLength(bell.exit) * along, mouth[2]]);
             const size = n(Math.max(0.9, rx * 0.5 * (1 - along)));
-            diamonds += painted ? `<ellipse data-diamond="1" cx="${n(dx)}" cy="${n(dy)}" rx="${size}" ry="${size}" fill="#fff4d2" fill-opacity="0.7"/>` : `<ellipse data-diamond="1" cx="${n(dx)}" cy="${n(dy)}" rx="${size}" ry="${size}" fill="none" stroke="#e7a24a" stroke-width="${stroke * 0.6}"/>`;
+            diamonds += painted ? `<ellipse data-diamond="1" cx="${n(dx)}" cy="${n(dy)}" rx="${size}" ry="${size}" fill="${colour.core}" fill-opacity="0.7"/>` : `<ellipse data-diamond="1" cx="${n(dx)}" cy="${n(dy)}" rx="${size}" ry="${size}" fill="none" stroke="${colour.line}" stroke-width="${stroke * 0.6}"/>`;
         }
         if (flame !== "")
             parts.push(`<g>${defs}${ring}${flame}${diamonds}</g>`);

package/dist/element/plumes.d.ts

@@ -1,7 +1,6 @@
+import type { FlameKind } from "../data/propellants.ts";
 import { BufferGeometry, Group, PointLight, ShaderMaterial } from "three";
 import { type Bell } from "../engines.ts";
-/** What burns in each engine's flame, as a picture: a fuel's flame is drawn in its own colours. */
-export type Fuel = "methane" | "kerosene";
 /** One part's flames: at most as many as it has bells. Its buffers are made once and written when the engines that burn change. */
 export declare class PartPlumes {
     readonly group: Group<import("three").Object3DEventMap>;
@@ -9,23 +8,23 @@ export declare class PartPlumes {
     private flames;
     private glows;
     private key;
-    constructor(kit: PlumeKit, bells: readonly Bell[]);
+    constructor(kit: PlumeKit, bells: readonly Bell[], kind: FlameKind);
     /** The bells that burn now. Nothing is written when they are the ones that burned last. */
     light(burning: readonly Bell[]): void;
     dispose(): void;
 }
-/** One set of everything a flame needs, for one viewer. */
+/** One set of everything a flame needs, for one viewer. The materials of each kind of flame share one program and one set of clocks; only the two colours differ. */
 export declare class PlumeKit {
     readonly shape: BufferGeometry<import("three").NormalBufferAttributes, import("three").BufferGeometryEventMap>;
     readonly quad: BufferGeometry<import("three").NormalBufferAttributes, import("three").BufferGeometryEventMap>;
-    readonly flame: ShaderMaterial;
-    readonly glow: ShaderMaterial;
     /** The hull's own glow in the painted look. Always in the scene, at no strength when no engine burns, so lighting engines never makes the materials build again. */
     readonly light: PointLight;
     private uniforms;
-    constructor();
+    private kinds;
+    private kind;
+    flameFor(kind: FlameKind): ShaderMaterial;
+    glowFor(kind: FlameKind): ShaderMaterial;
     setLook(painted: boolean): void;
-    setFuel(fuel: Fuel): void;
     /** 0 near the ground, 1 high up where a flame fans out. */
     setAir(air: number): void;
     /** Where the ground stands, for a flame to stop at. */

package/dist/element/plumes.js

@@ -1,4 +1,3 @@
-// Flames for the 3D view, made here and loaded only with it. One shape, one material and one instanced draw for every engine of a part, however many burn, so lighting and dousing engines changes numbers, never what the graphics card holds. The look of a flame (its shock diamonds, its length, its glow) is a picture, not a measurement.
 import { AdditiveBlending, BufferGeometry, Color, DoubleSide, DynamicDrawUsage, Float32BufferAttribute, Group, InstancedMesh, Matrix4, PointLight, Quaternion, ShaderMaterial, Vector3 } from "three";
 import { PLUME_DIAMONDS, plumeLength } from "../engines.js";
 const STEPS = 28;
@@ -100,9 +99,14 @@ function glowShape() {
     geometry.setIndex([0, 1, 2, 0, 2, 3]);
     return geometry;
 }
-const FUEL_COLOURS = {
-    methane: { hot: "#fff1e6", cool: "#6f7dff" },
+/** What a flame is drawn in: the kind of flame its engine's propellant gives (`src/data/propellants.ts`), and a neutral grey-white where no page read says. A picture, not a measurement. */
+const FLAME_TONES = {
     kerosene: { hot: "#fff4d2", cool: "#ff7a1a" },
+    methane: { hot: "#fff1e6", cool: "#6f7dff" },
+    hydrogen: { hot: "#ffffff", cool: "#6fa8ff" },
+    solid: { hot: "#fff1c4", cool: "#ff4a12" },
+    hypergolic: { hot: "#ffffff", cool: "#b8c4ee" },
+    neutral: { hot: "#ffffff", cool: "#9aa3b2" },
 };
 const place = new Matrix4();
 const still = new Quaternion();
@@ -115,11 +119,11 @@ export class PartPlumes {
     flames;
     glows;
     key = "";
-    constructor(kit, bells) {
+    constructor(kit, bells, kind) {
         this.bells = bells;
         this.group.name = "plumes";
-        this.flames = new InstancedMesh(kit.shape, kit.flame, bells.length);
-        this.glows = new InstancedMesh(kit.quad, kit.glow, bells.length);
+        this.flames = new InstancedMesh(kit.shape, kit.flameFor(kind), bells.length);
+        this.glows = new InstancedMesh(kit.quad, kit.glowFor(kind), bells.length);
         for (const mesh of [this.flames, this.glows]) {
             mesh.instanceMatrix.setUsage(DynamicDrawUsage);
             mesh.frustumCulled = false;
@@ -149,12 +153,10 @@ export class PartPlumes {
         this.glows.dispose();
     }
 }
-/** One set of everything a flame needs, for one viewer. */
+/** One set of everything a flame needs, for one viewer. The materials of each kind of flame share one program and one set of clocks; only the two colours differ. */
 export class PlumeKit {
     shape = flameShape();
     quad = glowShape();
-    flame;
-    glow;
     /** The hull's own glow in the painted look. Always in the scene, at no strength when no engine burns, so lighting engines never makes the materials build again. */
     light = new PointLight("#ffb56b", 0, 0, 1.6);
     uniforms = {
@@ -164,21 +166,31 @@ export class PlumeKit {
         uLine: { value: 1 },
         uFloor: { value: -1e6 },
         uGlow: { value: 0.75 },
-        uHot: { value: new Color(FUEL_COLOURS.kerosene.hot) },
-        uCool: { value: new Color(FUEL_COLOURS.kerosene.cool) },
     };
-    constructor() {
-        const common = { transparent: true, depthWrite: false, blending: AdditiveBlending, toneMapped: false };
-        this.flame = new ShaderMaterial({ ...common, vertexShader: FLAME_VERTEX, fragmentShader: FLAME_FRAGMENT, uniforms: this.uniforms, side: DoubleSide });
-        this.glow = new ShaderMaterial({ ...common, vertexShader: GLOW_VERTEX, fragmentShader: GLOW_FRAGMENT, uniforms: this.uniforms });
+    kinds = new Map();
+    kind(kind) {
+        const known = this.kinds.get(kind);
+        if (known)
+            return known;
+        const tone = FLAME_TONES[kind];
+        const uniforms = { ...this.uniforms, uHot: { value: new Color(tone.hot) }, uCool: { value: new Color(tone.cool) } };
+        const common = { transparent: true, depthWrite: false, blending: AdditiveBlending, toneMapped: false, uniforms };
+        const made = {
+            flame: new ShaderMaterial({ ...common, vertexShader: FLAME_VERTEX, fragmentShader: FLAME_FRAGMENT, side: DoubleSide }),
+            glow: new ShaderMaterial({ ...common, vertexShader: GLOW_VERTEX, fragmentShader: GLOW_FRAGMENT }),
+        };
+        this.kinds.set(kind, made);
+        return made;
+    }
+    flameFor(kind) {
+        return this.kind(kind).flame;
+    }
+    glowFor(kind) {
+        return this.kind(kind).glow;
     }
     setLook(painted) {
         this.uniforms.uLine.value = painted ? 0 : 1;
     }
-    setFuel(fuel) {
-        this.uniforms.uHot.value.set(FUEL_COLOURS[fuel].hot);
-        this.uniforms.uCool.value.set(FUEL_COLOURS[fuel].cool);
-    }
     /** 0 near the ground, 1 high up where a flame fans out. */
     setAir(air) {
         this.uniforms.uAir.value = air;
@@ -200,8 +212,11 @@ export class PlumeKit {
     dispose() {
         this.shape.dispose();
         this.quad.dispose();
-        this.flame.dispose();
-        this.glow.dispose();
+        for (const { flame, glow } of this.kinds.values()) {
+            flame.dispose();
+            glow.dispose();
+        }
+        this.kinds.clear();
         this.light.dispose();
         this.light.removeFromParent();
     }

package/dist/element/scene.js

@@ -77,8 +77,6 @@ void main() {
 /** The materials of an engine's bell, in this package's own meshes. */
 const NOZZLE_MATERIALS = new Set(["bell", "bell-inside", "engine-metal"]);
 const asVec = (v) => [v.x, v.y, v.z];
-/** A flame's colours, a picture: Raptor burns methane, Merlin kerosene. */
-const fuelOf = (built) => (built.report.parts.some(({ part }) => part.rocket === "starship") ? "methane" : "kerosene");
 /** The pictures a licensed model's material may hold (the shared sky it reflects is not one of them). */
 const MODEL_PICTURES = ["map", "normalMap", "roughnessMap", "metalnessMap", "aoMap", "emissiveMap"];
 export class RocketViewer {
@@ -242,8 +240,20 @@ export class RocketViewer {
                 to: [0, 0, 0],
                 hideAtEnd: false,
                 plumes: null,
+                moves: [],
             };
             this.takeMeshes(source, code, view);
+            for (const node of source.children.slice(1)) {
+                const axis = node.userData.axis;
+                if (!axis)
+                    continue;
+                const group = new Group();
+                group.name = node.name;
+                group.position.copy(node.position);
+                code.add(group);
+                this.takeMeshes(node, group, view);
+                view.moves.push({ name: String(node.userData.group), group, axis: new Vector3(axis[0], axis[1], axis[2]).normalize(), angle: 0 });
+            }
             const place = places.find((p) => p.slot === part.slot);
             holder.position.set(...(place?.at ?? [0, 0, 0]));
             holder.visible = place?.shown ?? false;
@@ -252,7 +262,6 @@ export class RocketViewer {
         }
         this.addGlow();
         this.setLook(look);
-        this.plumes.setFuel(fuelOf(built));
         this.frameTo(angle ?? this.currentAngle(), false);
         if (this.clockNow) {
             this.flightKey = "";
@@ -455,10 +464,11 @@ export class RocketViewer {
         for (const view of this.parts) {
             const count = counts.get(view.slot) ?? 0;
             if (count > 0 && !view.plumes) {
-                const bells = bellsOf(this.built.parts.find((part) => part.slot === view.slot)?.pieces ?? []);
+                const built = this.built.parts.find((part) => part.slot === view.slot);
+                const bells = bellsOf(built?.pieces ?? []);
                 if (bells.length === 0)
                     continue;
-                view.plumes = new PartPlumes(this.plumes, bells);
+                view.plumes = new PartPlumes(this.plumes, bells, built?.flame ?? "neutral");
                 view.holder.add(view.plumes.group);
             }
             if (!view.plumes)
@@ -507,7 +517,12 @@ export class RocketViewer {
                 part.holder.position.set(...(place?.at ?? [0, 0, 0]));
                 part.holder.rotation.set(0, 0, 0);
                 part.holder.visible = place?.shown ?? false;
+                for (const move of part.moves) {
+                    move.angle = 0;
+                    move.group.quaternion.identity();
+                }
             }
+            this.canvas.dataset.turned = "";
             this.plumes.setAir(0);
             this.plumes.setFloor(-1e6);
             this.reframe();
@@ -583,10 +598,20 @@ export class RocketViewer {
                 continue;
             const turn = MathUtils.degToRad(pose.pitch);
             const middle = (parts.find((one) => one.slot === part.slot)?.height ?? 0) / 2;
+            for (const move of part.moves) {
+                const angle = pose.moves[move.name] ?? 0;
+                if (angle === move.angle)
+                    continue;
+                move.angle = angle;
+                move.group.quaternion.setFromAxisAngle(move.axis, MathUtils.degToRad(angle));
+            }
             part.holder.visible = !pose.gone;
             part.holder.rotation.set(0, 0, turn);
             part.holder.position.set(place.at[0] + pose.dx + Math.sin(turn) * middle, place.at[1] + pose.dy + middle - Math.cos(turn) * middle, place.at[2]);
         }
+        const turned = this.parts.flatMap((part) => part.moves.filter((move) => move.angle !== 0).map((move) => `${part.slot}:${move.group.name.split("~").slice(1).join("~")}=${Math.round(move.angle)}`)).join(" ");
+        if (turned !== this.canvas.dataset.turned)
+            this.canvas.dataset.turned = turned;
         this.plumes.setAir(frame.air);
         this.plumes.setFloor(frame.groundY);
         this.ground?.set(frame.groundY, this.options.reducedMotion ? 0 : frame.smoke, performance.now() / 1000);

package/dist/element.d.ts

@@ -3,10 +3,45 @@ 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;
@@ -117,14 +152,37 @@ 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, UchusenFlight };
 declare global {

package/dist/element.js

@@ -21,7 +21,17 @@ const RELEASE_MS = 30_000;
 /** 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}/`;
 }
@@ -86,6 +96,20 @@ 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", "engines", "phase"];
     descriptionValue = null;
@@ -479,11 +503,12 @@ export class UchusenRocket extends HTMLBase {
         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 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)}`;
+        const moves = flying ? Object.fromEntries(Object.entries(flying.phase.pose).flatMap(([slot, pose]) => (pose.moves ? [[slot, pose.moves]] : []))) : undefined;
+        const key = `${this.key}|${look}|${show}|${from.az.toFixed(2)}|${from.el.toFixed(2)}|${label}|${flying ? flying.index : ""}|${JSON.stringify(lit)}|${JSON.stringify(moves ?? {})}`;
         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, engines: lit });
+            template.innerHTML = this.builtNow.svg({ look, show, view: from, engines: lit, ...(moves ? { moves } : {}) });
             node = template.content.firstElementChild;
             if (!node)
                 return;
@@ -715,7 +740,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() {
@@ -754,7 +792,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;