@johnmorrisdotca/uchusen-rockets 0.2.1 → 0.3.0

package/dist/element/scene.js

@@ -7,11 +7,15 @@ import { LineMaterial } from "three/addons/lines/LineMaterial.js";
 import { LineSegments2 } from "three/addons/lines/LineSegments2.js";
 import { LineSegmentsGeometry } from "three/addons/lines/LineSegmentsGeometry.js";
 import { GLTFLoader } from "three/addons/loaders/GLTFLoader.js";
+import { bellsOf, FLAME_GAP_MS, FLAME_SETTLE_MS, pickBells } from "../engines.js";
 import { directionOf, FOV_DEG, frameFor, PICTURE_H, turnedBy } from "../framing.js";
 import { LOOKS } from "../looks.js";
 import { pixelRatioFor } from "../pixels.js";
 import { MATERIALS } from "../model/materials.js";
 import { paintGlow, paintSky, paintSteel, paintTiles } from "./paint.js";
+import { flightBounds, frameAt } from "../flight.js";
+import { GroundKit } from "./ground.js";
+import { PartPlumes, PlumeKit } from "./plumes.js";
 const IDLE_STOP_MS = 90_000;
 const MOVE_MS = 1400;
 const VIEW_MS = 700;
@@ -73,6 +77,8 @@ 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 {
@@ -89,6 +95,20 @@ export class RocketViewer {
     built = null;
     look = "line";
     show = "together";
+    plumes;
+    lit = null;
+    /** What was lit before a flight took over the engines. */
+    litOutside = null;
+    burningNow = 0;
+    /** A flame moves until then. */
+    flameUntil = 0;
+    flameDrawn = 0;
+    inTick = false;
+    clockNow = null;
+    flightOn = false;
+    ground = null;
+    flightKey = "";
+    burnSlots = null;
     generation = 0;
     materialCache = new Map();
     outlineMaterial;
@@ -148,7 +168,8 @@ export class RocketViewer {
         rim.position.set(-4, 1, -5);
         const low = new DirectionalLight("#ffffff", 0.35);
         low.position.set(1, -4, 2);
-        this.scene.add(key, rim, low, new HemisphereLight("#d7e6ff", "#22252b", 0.35), this.root);
+        this.plumes = new PlumeKit();
+        this.scene.add(key, rim, low, new HemisphereLight("#d7e6ff", "#22252b", 0.35), this.plumes.light, this.root);
         this.outlineMaterial = new ShaderMaterial({
             vertexShader: OUTLINE_VERTEX,
             fragmentShader: OUTLINE_FRAGMENT,
@@ -220,6 +241,7 @@ export class RocketViewer {
                 from: [0, 0, 0],
                 to: [0, 0, 0],
                 hideAtEnd: false,
+                plumes: null,
             };
             this.takeMeshes(source, code, view);
             const place = places.find((p) => p.slot === part.slot);
@@ -230,7 +252,13 @@ export class RocketViewer {
         }
         this.addGlow();
         this.setLook(look);
+        this.plumes.setFuel(fuelOf(built));
         this.frameTo(angle ?? this.currentAngle(), false);
+        if (this.clockNow) {
+            this.flightKey = "";
+            this.flightOn = false;
+            this.setFlight(this.clockNow);
+        }
         this.canvas.dataset.ready = "true";
         this.canvas.dataset.parts = this.parts.map((part) => part.slot).join(" ");
         this.drivenDirty = this.driven !== null;
@@ -385,9 +413,200 @@ export class RocketViewer {
         if (this.glow)
             this.glow.visible = !painted;
         this.canvas.dataset.look = look;
+        this.plumes.setLook(painted);
+        this.relight();
         this.reportPainted();
         this.wake();
     }
+    /** 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
+        if (this.clockNow) {
+            this.litOutside = lit;
+            this.flightKey = "";
+            this.applyFlight();
+            this.wake();
+            return;
+        }
+        const framed = this.lit === "full";
+        this.lit = lit;
+        this.relight();
+        if (framed !== (lit === "full") && this.built && !this.pose)
+            this.reframe();
+        this.wake();
+    }
+    /** The page reads reduced motion again at each change, so a view opened earlier follows the reader now. */
+    setReduced(reduced) {
+        this.options.reducedMotion = reduced;
+    }
+    relight() {
+        if (!this.built)
+            return;
+        const counts = new Map();
+        if (this.lit === "full") {
+            for (const bell of this.built.flamesOf(this.show))
+                counts.set(bell.slot, (counts.get(bell.slot) ?? 0) + 1);
+        }
+        else if (this.lit)
+            for (const [slot, count] of Object.entries(this.lit))
+                counts.set(slot, count);
+        let burning = 0;
+        let lowest = null;
+        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 ?? []);
+                if (bells.length === 0)
+                    continue;
+                view.plumes = new PartPlumes(this.plumes, bells);
+                view.holder.add(view.plumes.group);
+            }
+            if (!view.plumes)
+                continue;
+            const fired = pickBells(view.plumes.bells, count);
+            view.plumes.light(fired);
+            burning += fired.length;
+            if (fired.length > 0 && !lowest)
+                lowest = { view, y: fired[0].y - 1 };
+        }
+        this.burningNow = burning;
+        this.burnSlots = lowest;
+        this.plumes.setBurning(burning);
+        this.plumes.light.intensity = burning === 0 || this.look !== "painted" ? 0 : Math.min(900, 120 + burning * 40);
+        this.placeGlow();
+        this.canvas.dataset.engines = burning > 0 ? "on" : "off";
+        this.canvas.dataset.plumes = String(burning);
+    }
+    /** The hull's glow stands under the lowest part that burns, wherever that part has got to. */
+    placeGlow() {
+        const lowest = this.burnSlots;
+        if (!lowest)
+            return;
+        lowest.view.holder.updateMatrix();
+        this.plumes.light.position.set(0, lowest.y, 0).applyMatrix4(lowest.view.holder.matrix);
+    }
+    /** Starts, moves or ends a flight. While one is on, the parts stand where its timeline says, the engines are its own and the camera holds all of it. Under reduced motion it is the same, with no flames. */
+    setFlight(clock) {
+        this.clockNow = clock;
+        if (!this.built)
+            return;
+        const before = this.flightOn;
+        this.flightOn = clock !== null;
+        if (!clock) {
+            if (!before)
+                return;
+            this.flightKey = "";
+            if (this.ground)
+                this.ground.group.visible = false;
+            for (const part of this.parts)
+                if (part.model)
+                    this.showCode(part, this.look === "painted");
+            const places = this.built.placesOf(this.show);
+            for (const part of this.parts) {
+                const place = places.find((one) => one.slot === part.slot);
+                part.holder.position.set(...(place?.at ?? [0, 0, 0]));
+                part.holder.rotation.set(0, 0, 0);
+                part.holder.visible = place?.shown ?? false;
+            }
+            this.plumes.setAir(0);
+            this.plumes.setFloor(-1e6);
+            this.reframe();
+            this.lit = this.litOutside;
+            this.relight();
+            this.wake();
+            return;
+        }
+        if (!before) {
+            this.litOutside = this.lit;
+            this.pose = null;
+            if (!this.ground) {
+                this.ground = new GroundKit();
+                this.scene.add(this.ground.group);
+            }
+            const { min, max } = this.boundsNow();
+            this.ground.fit(this.built.boundsOf("together").max[0] * 2.4 + 4, Math.max(Math.abs(min[0]), Math.abs(max[0])));
+            this.ground.group.visible = true;
+            for (const part of this.parts)
+                if (part.model)
+                    this.showCode(part, this.look === "painted");
+            this.reframe();
+        }
+        this.applyFlight();
+        this.wake();
+    }
+    /** After a flight starts or ends the camera holds the new bounds, keeping its angle. */
+    reframe() {
+        if (this.driven)
+            this.applyDriven();
+        else
+            this.applyFraming(this.framingFor(this.currentAngle()));
+    }
+    /** What is showing, with the flames when they are lit, so a flame is never cut off at the foot of the picture. */
+    litBounds() {
+        const built = this.built;
+        return this.lit === "full" ? built.boundsOf(this.show, true) : built.boundsOf(this.show);
+    }
+    /** What the picture must hold: all of a flight while one is on. */
+    boundsNow() {
+        if (!this.built)
+            throw new Error("nothing is loaded");
+        if (!this.clockNow)
+            return this.litBounds();
+        const { height, parts } = this.flightParts();
+        const { min, max } = flightBounds(this.clockNow.flight, parts, height);
+        return { min, max };
+    }
+    flightParts() {
+        const built = this.built;
+        const places = built.placesOf("together");
+        const height = built.boundsOf("together").max[1];
+        return {
+            height,
+            parts: built.parts.map((part) => {
+                const at = places.find((place) => place.slot === part.slot)?.at ?? [0, 0, 0];
+                return { slot: part.slot, baseY: at[1], height: part.record.height, radius: Math.max(part.record.diameter / 2, Math.abs(at[0]) + part.record.diameter / 2) };
+            }),
+        };
+    }
+    /** Puts everything where the timeline says now. */
+    applyFlight() {
+        const clock = this.clockNow;
+        if (!clock || !this.built)
+            return;
+        const { height, parts } = this.flightParts();
+        const frame = frameAt(clock.flight, clock.position, parts, height);
+        const places = this.built.placesOf("together");
+        for (const part of this.parts) {
+            const pose = frame.poses[part.slot];
+            const place = places.find((one) => one.slot === part.slot);
+            if (!pose || !place)
+                continue;
+            const turn = MathUtils.degToRad(pose.pitch);
+            const middle = (parts.find((one) => one.slot === part.slot)?.height ?? 0) / 2;
+            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]);
+        }
+        this.plumes.setAir(frame.air);
+        this.plumes.setFloor(frame.groundY);
+        this.ground?.set(frame.groundY, this.options.reducedMotion ? 0 : frame.smoke, performance.now() / 1000);
+        const key = `${clock.flight.id}/${frame.index}/${this.options.reducedMotion}`;
+        if (key !== this.flightKey) {
+            this.flightKey = key;
+            this.lit = this.options.reducedMotion ? null : frame.burns;
+            this.relight();
+            this.canvas.dataset.phase = frame.phase.id;
+        }
+        else
+            this.placeGlow();
+        this.needsDraw = true;
+    }
+    freePlumes() {
+        for (const view of this.parts) {
+            view.plumes?.dispose();
+            view.plumes = null;
+        }
+    }
     /** Which painted parts are in: "model" when all come from a licensed model, "code" when this package's own paint, "loading" while one is on its way. */
     reportPainted() {
         if (this.look !== "painted") {
@@ -445,7 +664,8 @@ export class RocketViewer {
     showCode(part, painted) {
         const nozzleOnly = painted && part.ownNozzle;
         part.code.visible = !painted || nozzleOnly;
-        const nozzle = nozzleOnly && this.show !== "together";
+        // in a flight a stage leaves the one below, so its nozzle shows then too
+        const nozzle = nozzleOnly && (this.show !== "together" || this.flightOn);
         for (const { mesh, name } of part.faces)
             mesh.visible = !nozzleOnly || (nozzle && NOZZLE_MATERIALS.has(name));
         for (const lines of [...part.feature, ...part.weld])
@@ -455,7 +675,7 @@ export class RocketViewer {
     }
     /** Together, apart, or one part alone: an animated move, or a cut under reduced motion. */
     setShow(show) {
-        if (!this.built || show === this.show)
+        if (!this.built || show === this.show || this.clockNow)
             return;
         this.show = show;
         for (const part of this.parts)
@@ -474,6 +694,7 @@ export class RocketViewer {
             }
             this.pose = null;
             this.applyFraming(framing);
+            this.relight();
             this.wake();
             return;
         }
@@ -500,11 +721,12 @@ export class RocketViewer {
             }
         }
         this.startPose(framing, MOVE_MS, true);
+        this.relight();
     }
     framingFor(angle) {
         if (!this.built)
             throw new Error("nothing is loaded");
-        const { min, max } = this.built.boundsOf(this.show);
+        const { min, max } = this.boundsNow();
         return frameFor(min, max, angle, this.camera.aspect);
     }
     applyFraming(framing) {
@@ -674,6 +896,8 @@ export class RocketViewer {
         this.resize.disconnect();
         this.controls.dispose();
         this.disposeParts();
+        this.plumes.dispose();
+        this.ground?.dispose();
         this.glow?.geometry.dispose();
         this.glow?.material?.dispose();
         for (const material of this.materialCache.values())
@@ -688,6 +912,7 @@ export class RocketViewer {
     }
     /** Lets the graphics card have back what the parts took: geometries, the thick lines' materials and a licensed model's own materials and pictures. */
     disposeParts() {
+        this.freePlumes();
         for (const part of this.parts) {
             part.holder.traverse((node) => {
                 node.geometry?.dispose();
@@ -738,7 +963,11 @@ export class RocketViewer {
         this.wake();
     }
     wake() {
-        this.lastActive = performance.now();
+        // the view's own spin is not someone touching it: without this a spin would never settle
+        if (!this.inTick) {
+            this.lastActive = performance.now();
+            this.flameUntil = this.lastActive + FLAME_SETTLE_MS;
+        }
         this.needsDraw = true;
         if (!this.frame && this.visible && !document.hidden && !this.disposed)
             this.frame = requestAnimationFrame(this.tick);
@@ -747,6 +976,7 @@ export class RocketViewer {
         this.frame = 0;
         if (!this.visible || document.hidden || this.disposed)
             return;
+        this.inTick = true;
         this.clock.update(now);
         const dt = Math.min(this.clock.getDelta(), 0.1);
         const ambient = !this.options.reducedMotion && now - this.lastActive < IDLE_STOP_MS;
@@ -804,6 +1034,18 @@ export class RocketViewer {
         }
         if (!ambient)
             this.controls.autoRotate = false;
+        const flying = this.clockNow?.playing ?? false;
+        if (flying && this.clockNow) {
+            this.clockNow.advance(dt);
+            this.applyFlight();
+            this.options.onFlight?.();
+        }
+        const flaming = this.burningNow > 0 && !this.options.reducedMotion && (flying || performance.now() < this.flameUntil);
+        if (flaming && now - this.flameDrawn >= FLAME_GAP_MS) {
+            this.flameDrawn = now;
+            this.plumes.setTime(now / 1000);
+            this.needsDraw = true;
+        }
         const changed = this.controls.update(dt);
         if (this.needsDraw || changed || this.pose) {
             this.syncSizes();
@@ -820,11 +1062,12 @@ export class RocketViewer {
                 this.canvas.dataset.pan = `${Math.round(this.driven.panX)},${Math.round(this.driven.panY)}`;
             }
             if (this.glow)
-                this.glow.visible = this.look !== "painted" && this.camera.position.y > 0;
+                this.glow.visible = this.look !== "painted" && this.camera.position.y > 0 && !this.clockNow;
         }
         // the controls' own change event may already have asked for the next frame (wake): one frame is asked for, never two, or each frame would double the next
-        if (!this.frame && ((ambient && this.controls.autoRotate) || changed || this.pose || this.needsDraw || Math.abs(dA) > 1e-5))
+        if (!this.frame && ((ambient && this.controls.autoRotate) || changed || this.pose || this.needsDraw || Math.abs(dA) > 1e-5 || flaming || flying))
             this.frame = requestAnimationFrame(this.tick);
+        this.inTick = false;
     };
     syncSizes() {
         const size = this.renderer.getDrawingBufferSize(new Vector2());

package/dist/element.d.ts

@@ -1,3 +1,5 @@
+import { type Flight } from "./flight.ts";
+import { UchusenFlight } from "./flightbar.ts";
 import type { Description, FitReport } from "./fit.ts";
 import { type Angle, type ViewChoice } from "./framing.ts";
 import { ROCKETS } from "./rockets.ts";
@@ -29,6 +31,13 @@ export declare class UchusenRocket extends HTMLBase {
     private onScreen;
     private drawn;
     private tiltCleanups;
+    private clock;
+    private flightFrame;
+    private flightLast;
+    private flightDrawn;
+    private noted;
+    private phaseSeen;
+    private flightSeen;
     /** What is showing now. */
     get state(): RocketState;
     /** What the fit check said about what is showing: its label, parts and credits. */
@@ -43,6 +52,9 @@ export declare class UchusenRocket extends HTMLBase {
     /** The drawing, turned and moved to the chosen view. The 3D view moves itself, so only the drawing needs it, and only until the 3D view shows. It is drawn at most about 20 times a second and never while out of sight: it is made again when it comes back. */
     private place;
     private seen;
+    /** A reader who changes the setting while the page is open is followed at once. */
+    private motionChanged;
+    private motion;
     connectedCallback(): void;
     disconnectedCallback(): void;
     attributeChangedCallback(name: string, before: string | null, after: string | null): void;
@@ -54,7 +66,44 @@ export declare class UchusenRocket extends HTMLBase {
     private emit;
     /** What to draw from the attributes, every value checked. */
     private settings;
+    /** The flight a page gives for what is showing, or null: a custom build never has one. */
+    get flight(): Flight | null;
+    /** Where the timeline is: `active` once it has been started or moved, until `endFlight`. */
+    get flightState(): {
+        active: boolean;
+        playing: boolean;
+        ended: boolean;
+        position: number;
+        phase: string;
+    };
+    /** Plays the flight from where it is. It stands still out of sight, and does not play at all for a reader who asked for reduced motion: `seek` still moves it, by hand. */
+    play(): void;
+    pause(): void;
+    /** Moves the timeline to a place, where 0 is the first phase, 1 the next and so on: `2.5` is half way from the third to the fourth. */
+    seek(position: number): void;
+    /** Leaves the flight: the rocket as it was. */
+    endFlight(): void;
+    /** For each part with engines, which burn: at a named phase, where the timeline is, or else as the attributes have them. */
+    engineCharts(phaseId?: string | null): {
+        slot: string;
+        burning: number;
+        total: number;
+        words: string;
+        svg: string;
+    }[];
+    private flightMoved;
+    /** With no 3D view the drawing follows the timeline, by one frame request at a time, at most 20 drawings a second, never out of sight. */
+    private kickFlight;
+    private flightStep;
+    /** Tells the page where the timeline is: at once for a new phase or a stop, otherwise at most 8 times a second. */
+    private noteFlight;
+    /** Whether the engines are lit: `engines="on"`, and never for a reader who asked for reduced motion. */
+    private engineLights;
+    /** Hands the 3D view what the attributes say about the engines, and its reader's motion setting. */
+    private lightViewer;
     private update;
+    /** After a change: a timeline of another rocket ends, and the `phase` attribute moves it. */
+    private settleFlight;
     private renderShell;
     /** The drawing for what the attributes say now. It is made from code, so it needs no file. A zoom or a move only changes which part of it the box shows (its viewBox), so the drawing is as sharp as the box and never grows past it. */
     private redraw;
@@ -77,7 +126,7 @@ export declare class UchusenLineup extends HTMLBase {
 }
 /** Defines both elements, once. Importing this module does it. */
 export declare function defineUchusenRocket(): void;
-export { ROCKETS };
+export { ROCKETS, UchusenFlight };
 declare global {
     interface HTMLElementTagNameMap {
         "uchusen-rocket": UchusenRocket;