@johnmorrisdotca/uchusen-rockets 0.4.0 → 0.6.0

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.d.ts

@@ -9,7 +9,7 @@ export interface ViewerOptions {
     onLost: () => void;
     /** Where the licensed models are. */
     assets: string;
-    /** Tells the page which painted parts have come in. */
+    /** Tells the page which painted parts have come in, or "" when the look is not painted. */
     onPainted: (state: string) => void;
     /** Tells the page a timeline moved. */
     onFlight?: () => void;
@@ -62,6 +62,9 @@ export declare class RocketViewer {
     private lastDistance;
     private resize;
     private disposed;
+    private compiling;
+    private compiled;
+    private settled;
     constructor(holder: HTMLElement, options: ViewerOptions);
     private homeAngle;
     setLabel(label: string): void;
@@ -80,6 +83,8 @@ export declare class RocketViewer {
     private repeating;
     /** One of the three looks. The camera does not move. */
     setLook(look: LookName): void;
+    /** Builds the shaders a look needs beside the page's own work, where the browser can build them in parallel (KHR_parallel_shader_compile), and holds the next draw until they are in, so the page keeps answering while a look is first built. The last picture stays up meanwhile. A model that comes in later builds its own. */
+    private prepare;
     /** Which engines burn: at full thrust every one that shows, a count for each part, or none. Nothing is made or freed by this after a part's first flame: only which of its flames are drawn changes. */
     setEngines(lit: {
         readonly [slot: string]: number;

package/dist/element/scene.js

@@ -18,6 +18,8 @@ import { GroundKit } from "./ground.js";
 import { PartPlumes, PlumeKit } from "./plumes.js";
 const IDLE_STOP_MS = 90_000;
 const MOVE_MS = 1400;
+/** Longest a draw waits for shaders to build: a browser that never says they are ready still draws. */
+const COMPILE_MS = 4000;
 const VIEW_MS = 700;
 const autoRotateOf = (spin) => (spin.seconds <= 0 ? 0 : (60 / spin.seconds) * (spin.way === "cw" ? -1 : 1));
 const LINE_VERTEX = /* glsl */ `
@@ -77,8 +79,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 {
@@ -129,6 +129,9 @@ export class RocketViewer {
     lastDistance = 0;
     resize;
     disposed = false;
+    compiling = 0;
+    compiled = new Set();
+    settled = Promise.resolve();
     constructor(holder, options) {
         this.holder = holder;
         this.options = options;
@@ -242,8 +245,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 +267,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 = "";
@@ -263,6 +277,7 @@ export class RocketViewer {
         this.canvas.dataset.parts = this.parts.map((part) => part.slot).join(" ");
         this.drivenDirty = this.driven !== null;
         this.wake();
+        await this.settled;
     }
     /** Moves the parts from the packed nodes into `into`, keeping each mesh's own placement. */
     takeMeshes(source, into, view) {
@@ -415,9 +430,38 @@ export class RocketViewer {
         this.canvas.dataset.look = look;
         this.plumes.setLook(painted);
         this.relight();
-        this.reportPainted();
+        // "painted" is said when its shaders are built, so a reader who waits for it finds the next frame ready to draw
+        if (look === "painted")
+            void this.prepare(false).then(() => this.reportPainted());
+        else {
+            this.reportPainted();
+            void this.prepare(false);
+        }
         this.wake();
     }
+    /** Builds the shaders a look needs beside the page's own work, where the browser can build them in parallel (KHR_parallel_shader_compile), and holds the next draw until they are in, so the page keeps answering while a look is first built. The last picture stays up meanwhile. A model that comes in later builds its own. */
+    prepare(force) {
+        // without the browser's parallel compile (software drawing has none) compileAsync is no different from the first draw's own build, so nothing waits
+        if (this.disposed || !this.renderer.extensions.has("KHR_parallel_shader_compile") || (!force && this.compiled.has(this.look)))
+            return Promise.resolve();
+        this.compiled.add(this.look);
+        this.compiling++;
+        let timer = 0;
+        const late = new Promise((resolve) => {
+            timer = window.setTimeout(resolve, COMPILE_MS);
+        });
+        const built = this.renderer.compileAsync(this.scene, this.camera).then(() => undefined);
+        const wait = Promise.race([built, late])
+            .catch(() => undefined)
+            .finally(() => {
+            window.clearTimeout(timer);
+            this.compiling--;
+            if (!this.disposed)
+                this.wake();
+        });
+        this.settled = Promise.all([this.settled, wait]).then(() => undefined);
+        return wait;
+    }
     /** Which engines burn: at full thrust every one that shows, a count for each part, or none. Nothing is made or freed by this after a part's first flame: only which of its flames are drawn changes. */
     setEngines(lit) {
         // a flight keeps its own, and what was asked for comes back after it
@@ -455,10 +499,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 +552,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 +633,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);
@@ -611,6 +671,7 @@ export class RocketViewer {
     reportPainted() {
         if (this.look !== "painted") {
             this.canvas.dataset.painted = "";
+            this.options.onPainted("");
             return;
         }
         const states = this.parts.map((part) => (part.modelFile ? part.modelState : "code"));
@@ -652,7 +713,7 @@ export class RocketViewer {
             part.holder.add(gltf.scene);
             part.modelState = "ready";
             this.useModel(part, this.look === "painted");
-            this.reportPainted();
+            void this.prepare(true).then(() => this.reportPainted());
             this.wake();
         })
             .catch(() => {
@@ -976,6 +1037,9 @@ export class RocketViewer {
         this.frame = 0;
         if (!this.visible || document.hidden || this.disposed)
             return;
+        // shaders are being built: the next draw waits for them (prepare asks for a frame when they are in)
+        if (this.compiling > 0)
+            return;
         this.inTick = true;
         this.clock.update(now);
         const dt = Math.min(this.clock.getDelta(), 0.1);

package/dist/element.d.ts

@@ -185,6 +185,7 @@ export declare class UchusenLineup extends HTMLBase {
  */
 export declare function defineUchusenRocket(): void;
 export { ROCKETS, UchusenFlight };
+export type { FlightWords } from "./flightbar.ts";
 declare global {
     interface HTMLElementTagNameMap {
         "uchusen-rocket": UchusenRocket;

package/dist/element.js

@@ -503,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;
@@ -548,9 +549,17 @@ export class UchusenRocket extends HTMLBase {
             // a new rocket keeps the angle, unless the same change named another view
             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);
+            const viewer = this.viewer;
+            await viewer.load(this.builtNow, show, look, from);
+            if (this.viewer === viewer && this.builtNow) {
+                // a look or part chosen while the rocket loaded
+                const now = this.settings(this.builtNow);
+                if (now.look !== look)
+                    viewer.setLook(now.look);
+                if (now.show !== show)
+                    viewer.setShow(now.show);
+                this.lightViewer(viewer);
+            }
             this.emit("uchusen-change", { report: this.builtNow.report });
         }
     }
@@ -648,7 +657,8 @@ export class UchusenRocket extends HTMLBase {
                 assets: assets ? `${assets.replace(/\/$/, "")}/` : defaultBase(),
                 onPainted: (state) => {
                     this.dataset.painted = state;
-                    this.emit("uchusen-painted", { state });
+                    if (state)
+                        this.emit("uchusen-painted", { state });
                 },
                 onFlight: () => this.noteFlight(!this.clock?.playing),
             });
@@ -666,6 +676,8 @@ export class UchusenRocket extends HTMLBase {
             if (generation !== this.generation || this.viewer !== made)
                 return;
             const now = this.settings(this.builtNow ?? built);
+            if (now.look !== look)
+                made.setLook(now.look);
             if (now.show !== show)
                 made.setShow(now.show);
             this.lightViewer(made);

package/dist/flight.d.ts

@@ -93,6 +93,8 @@ export interface PoseNow {
     dy: number;
     pitch: number;
     gone: boolean;
+    /** Degrees each moving group is turned, by name. */
+    moves: Readonly<Record<string, number>>;
 }
 /**
  * Everything the picture needs at one place on the timeline: the phase, how each part stands, which engines burn, how far the ground has fallen, and how much smoke stands on the pad.

package/dist/flight.js

@@ -103,7 +103,14 @@ const poseIn = (pose, part, height) => ({
     dy: pose?.rest ? -part.baseY : (pose?.dy ?? 0) * height,
     pitch: pose?.pitch ?? 0,
     gone: pose?.gone ?? false,
+    moves: pose?.moves ?? {},
 });
+const mixMoves = (from, to, t) => {
+    const out = {};
+    for (const name of new Set([...Object.keys(from), ...Object.keys(to)]))
+        out[name] = mix(from[name] ?? 0, to[name] ?? 0, t);
+    return out;
+};
 /**
  * Everything the picture needs at a place on the timeline, for a vehicle `height` metres tall.
  *
@@ -129,7 +136,7 @@ export function frameAt(flight, position, parts, height) {
     for (const part of parts) {
         const from = poseIn(phase.pose[part.slot], part, height);
         const to = poseIn(next.pose[part.slot], part, height);
-        const now = { dx: mix(from.dx, to.dx, t), dy: mix(from.dy, to.dy, t), pitch: mix(from.pitch, to.pitch, t), gone: from.gone };
+        const now = { dx: mix(from.dx, to.dx, t), dy: mix(from.dy, to.dy, t), pitch: mix(from.pitch, to.pitch, t), gone: from.gone, moves: mixMoves(from.moves, to.moves, t) };
         poses[part.slot] = now;
         if (now.dx !== 0 || now.dy !== 0)
             separated = true;

package/dist/flightbar.d.ts

@@ -1,4 +1,28 @@
 declare const HTMLBase: typeof HTMLElement;
+/**
+ * The words the flight bar says itself, each of which a page can replace (for a language) with `flight.words = { play: "…" }`. A phase's name, what happens in it and a flight's note are the data's and stay as they are.
+ *
+ * @example
+ * ```ts
+ * import type { FlightWords } from "@johnmorrisdotca/uchusen-rockets/element";
+ *
+ * const words: Partial<FlightWords> = { play: "Start", pause: "Stop" };
+ * console.log(Object.keys(words));
+ * ```
+ */
+export interface FlightWords {
+    play: string;
+    pause: string;
+    again: string;
+    back: string;
+    next: string;
+    leave: string;
+    range: string;
+    none: string;
+    sourced: string;
+    reduced: string;
+    from: string;
+}
 /**
  * The `<uchusen-flight>` element: a play button, a slider and the phase's name for a rocket's flight. Its `for` attribute is the id of the `<uchusen-rocket>` it drives. A variant with no flight says so.
  *
@@ -16,7 +40,13 @@ export declare class UchusenFlight extends HTMLBase {
     private rocket;
     private drawnFor;
     private chartKey;
+    private said;
     private parts;
+    /** The words this bar says, in the page's language. Anything left out stays English. */
+    get words(): Partial<FlightWords>;
+    set words(words: Partial<FlightWords>);
+    private word;
+    private relabel;
     connectedCallback(): void;
     disconnectedCallback(): void;
     attributeChangedCallback(): void;

package/dist/flightbar.js

@@ -22,6 +22,19 @@ figcaption { font-size: 0.74rem; line-height: 1.25; margin-top: 0.2rem; }
 a { color: inherit; }
 `;
 const sheet = { made: null };
+const WORDS = {
+    play: "Play",
+    pause: "Pause",
+    again: "Play again",
+    back: "Back",
+    next: "Next",
+    leave: "Back to the rocket",
+    range: "Where along the flight",
+    none: "No flight timeline for this version yet: no page read here gives one.",
+    sourced: " The times and engine counts are sourced; how the picture moves between them is illustrative, not to scale. ",
+    reduced: "This device asks for reduced motion, so nothing plays and no flame shows: move the slider or step through, and the charts say which engines burn. ",
+    from: "From ",
+};
 /**
  * The `<uchusen-flight>` element: a play button, a slider and the phase's name for a rocket's flight. Its `for` attribute is the id of the `<uchusen-rocket>` it drives. A variant with no flight says so.
  *
@@ -39,7 +52,31 @@ export class UchusenFlight extends HTMLBase {
     rocket = null;
     drawnFor = "";
     chartKey = "";
+    said = {};
     parts = null;
+    /** The words this bar says, in the page's language. Anything left out stays English. */
+    get words() {
+        return this.said;
+    }
+    set words(words) {
+        this.said = { ...words };
+        this.relabel();
+    }
+    word(key) {
+        return this.said[key] ?? WORDS[key];
+    }
+    relabel() {
+        const parts = this.parts;
+        if (!parts)
+            return;
+        parts.back.textContent = this.word("back");
+        parts.next.textContent = this.word("next");
+        parts.leave.textContent = this.word("leave");
+        parts.range.setAttribute("aria-label", this.word("range"));
+        parts.none.textContent = this.word("none");
+        this.drawnFor = "";
+        this.update();
+    }
     connectedCallback() {
         if (!this.shadowRoot)
             this.build();
@@ -87,22 +124,22 @@ export class UchusenFlight extends HTMLBase {
             node.addEventListener("click", on);
             return node;
         };
-        const play = button("flight-play", "Play", () => {
+        const play = button("flight-play", this.word("play"), () => {
             if (this.rocket?.flightState.playing)
                 this.rocket.pause();
             else
                 this.rocket?.play();
         });
         const position = () => this.rocket?.flightState.position ?? 0;
-        const back = button("flight-back", "Back", () => this.rocket?.seek(Math.ceil(position()) - 1));
-        const next = button("flight-next", "Next", () => this.rocket?.seek(Math.floor(position()) + 1));
-        const leave = button("flight-leave", "Back to the rocket", () => this.rocket?.endFlight());
+        const back = button("flight-back", this.word("back"), () => this.rocket?.seek(Math.ceil(position()) - 1));
+        const next = button("flight-next", this.word("next"), () => this.rocket?.seek(Math.floor(position()) + 1));
+        const leave = button("flight-leave", this.word("leave"), () => this.rocket?.endFlight());
         const range = make("input", "flight-range");
         range.type = "range";
         range.min = "0";
         range.step = "0.01";
         range.value = "0";
-        range.setAttribute("aria-label", "Where along the flight");
+        range.setAttribute("aria-label", this.word("range"));
         range.addEventListener("input", () => this.rocket?.seek(Number(range.value)));
         const row = document.createElement("div");
         row.className = "row";
@@ -120,7 +157,7 @@ export class UchusenFlight extends HTMLBase {
         const body = document.createElement("div");
         body.setAttribute("part", "flight-body");
         body.append(row, now, what, charts, about);
-        const none = make("p", "flight-none", "No flight timeline for this version yet: no page read here gives one.");
+        const none = make("p", "flight-none", this.word("none"));
         none.className = "fine";
         root.append(body, none);
         this.parts = { play, back, next, leave, range, now, what, charts, about, none, body };
@@ -133,7 +170,7 @@ export class UchusenFlight extends HTMLBase {
         link.href = source.url;
         link.rel = "noopener";
         link.textContent = `${source.publisher}: ${source.title}`;
-        this.parts.about.replaceChildren(`${flight.basis} The times and engine counts are sourced; how the picture moves between them is illustrative, not to scale. ${flight.note ?? ""} ${reduced ? "This device asks for reduced motion, so nothing plays and no flame shows: move the slider or step through, and the charts say which engines burn. " : ""}From `, link, ".");
+        this.parts.about.replaceChildren(`${flight.basis}${this.word("sourced")}${flight.note ?? ""} ${reduced ? this.word("reduced") : ""}${this.word("from")}`, link, ".");
     }
     update = () => {
         const parts = this.parts;
@@ -160,14 +197,14 @@ export class UchusenFlight extends HTMLBase {
         this.dataset.flight = flight.id;
         this.dataset.phase = state.active ? phase.id : "";
         this.dataset.playing = String(state.playing);
-        parts.play.textContent = state.playing ? "Pause" : state.ended ? "Play again" : "Play";
+        parts.play.textContent = this.word(state.playing ? "pause" : state.ended ? "again" : "play");
         parts.play.setAttribute("aria-pressed", String(state.playing));
         parts.back.disabled = state.position <= 0;
         parts.next.disabled = state.position >= lastPosition(flight);
         parts.leave.disabled = !state.active;
         parts.range.value = String(state.position);
         parts.range.setAttribute("aria-valuetext", `${clockWords(phase.at)}, ${phase.name}`);
-        parts.now.textContent = `${clockWords(phase.at)}, ${phase.name}${phase.altitude?.value ? `, ${phase.altitude.value}` : ""}`;
+        parts.now.textContent = `${clockWords(phase.at)}, ${phase.name}${phase.altitude?.value ? `, ${phase.altitude.value}` : ""}${phase.speed?.value ? `, ${phase.speed.value}` : ""}`;
         parts.what.textContent = phase.what;
         const chartKey = `${flight.id}/${index}/${state.active}`;
         if (chartKey !== this.chartKey) {

package/dist/index.d.ts

@@ -6,6 +6,9 @@ export { MAKERS } from "./data/makers.ts";
 export type { MakerId } from "./data/makers.ts";
 export { FLIGHT_LOG, flightLogOf } from "./data/flight-log.ts";
 export type { LoggedFlight } from "./data/flight-log.ts";
+export { moved, movingGroupsOf } from "./model/moves.ts";
+export { PROPELLANTS, propellantOf } from "./data/propellants.ts";
+export type { EnginePropellant, FlameKind } from "./data/propellants.ts";
 export { SOURCES } from "./data/sources.ts";
 export type { Source, SourceId } from "./data/sources.ts";
 export { creditLine, MODEL_CREDITS } from "./data/credits.ts";

package/dist/index.js

@@ -3,6 +3,8 @@ export { PLANNED_ROCKETS, ROCKETS, partIdOf, SLOT_NAMES, variantOf } from "./roc
 export { blank, figureWords } from "./data/types.js";
 export { MAKERS } from "./data/makers.js";
 export { FLIGHT_LOG, flightLogOf } from "./data/flight-log.js";
+export { moved, movingGroupsOf } from "./model/moves.js";
+export { PROPELLANTS, propellantOf } from "./data/propellants.js";
 export { SOURCES } from "./data/sources.js";
 export { creditLine, MODEL_CREDITS } from "./data/credits.js";
 export { PART_ENTRIES, partEntry } from "./model/registry.js";

package/dist/model/falcon.js

@@ -56,11 +56,11 @@ function firstStage(d, withTop) {
     if (d.legs)
         for (const az of [45, 135, 225, 315]) {
             const frame = radial(deg(az));
-            pieces.push({ kind: "plate", material: "black", frame, outline: [[r - 0.05, 0.8], [r + 0.5, 0.8], [r + 0.55, 3], [r + 0.15, 10.5], [r - 0.05, 11]], thickness: 1.2 });
+            pieces.push({ kind: "plate", material: "black", frame, outline: [[r - 0.05, 0.8], [r + 0.5, 0.8], [r + 0.55, 3], [r + 0.15, 10.5], [r - 0.05, 11]], thickness: 1.2, move: { name: "legs", pivot: pointOf(frame, r + 0.2, 0.8), axis: frame.w } });
         }
     if (d.fins)
         for (const az of [45, 135, 225, 315])
-            pieces.push(...gridFin(az, tank + 0.1, r, r + 1.4, 1.5, 0.3, false));
+            pieces.push(...gridFin(az, tank + 0.1, r, r + 1.4, 1.5, 0.3, false, { name: "grid-fins", about: "tangent" }));
     return pieces;
 }
 function secondStage(d) {