@johnmorrisdotca/uchusen-rockets 0.0.0-stage → 0.1.0

package/dist/element.d.ts

@@ -0,0 +1,74 @@
+import type { Description, FitReport } from "./fit.ts";
+import { type Angle } from "./framing.ts";
+import { ROCKETS } from "./rockets.ts";
+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/. */
+export declare function setAssetBase(url: string): void;
+export declare class UchusenRocket extends HTMLBase {
+    static readonly observedAttributes: string[];
+    private descriptionValue;
+    private picture;
+    private holder;
+    private drawing;
+    private viewer;
+    private watch;
+    private cleanups;
+    private releaseTimer;
+    private revealTimer;
+    private generation;
+    private builtNow;
+    private queued;
+    private stateNow;
+    private shownAt;
+    private starting;
+    private key;
+    /** What is showing now. */
+    get state(): RocketState;
+    /** What the fit check said about what is showing: its label, parts and credits. */
+    get report(): FitReport | null;
+    /** A rocket from parts, as a property: the same as the `build` attribute's JSON. */
+    get description(): Description | null;
+    set description(value: Description | null);
+    /** Where the camera is looking from, while there is a 3D view. */
+    get angle(): Angle | null;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, before: string | null, after: string | null): void;
+    private spin;
+    private descriptionNow;
+    private queue;
+    private teardown;
+    private setState;
+    private emit;
+    /** What to draw from the attributes, every value checked. */
+    private settings;
+    private update;
+    private renderShell;
+    /** The drawing for what the attributes say now. It is made from code, so it needs no file. */
+    private redraw;
+    private mark;
+    private applyRocket;
+    private lastView;
+    private applySettings;
+    private startWatching;
+    private fallBack;
+    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>`. */
+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. */
+export declare function defineUchusenRocket(): void;
+export { ROCKETS };
+declare global {
+    interface HTMLElementTagNameMap {
+        "uchusen-rocket": UchusenRocket;
+        "uchusen-lineup": UchusenLineup;
+    }
+}

package/dist/element.js

@@ -0,0 +1,488 @@
+// The viewer: `<uchusen-rocket rocket="starship" variant="v3" show="together" look="line">` in any page. The drawing first, then, when it comes on screen and the browser can draw WebGL, the 3D view
+// 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 { lineupSvg } from "./build/lineup.js";
+import { CROSSFADE_MS, REDUCED_FADE_MS, revealDelay } from "./crossfade.js";
+import { cleanView, VIEWS } from "./framing.js";
+import { cleanShow } from "./layout.js";
+import { cleanLook } from "./looks.js";
+import { ROCKETS } from "./rockets.js";
+import { tiltMode, tiltTurn } from "./tilt.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" };
+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/. */
+export function setAssetBase(url) {
+    assetBase = url.endsWith("/") ? url : `${url}/`;
+}
+const defaultBase = () => assetBase ?? new URL("./assets/", import.meta.url).href;
+const CSS = `
+:host { display: block; position: relative; color: inherit; }
+:host([hidden]) { display: none; }
+.picture { position: relative; width: 100%; aspect-ratio: var(--uchusen-aspect, 3 / 4); margin: 0; border-radius: inherit; }
+.drawing, .drawing svg { display: block; width: 100%; height: 100%; }
+.drawing, .canvas { transition: opacity var(--uchusen-fade, 1500ms) ease-in-out, filter var(--uchusen-fade, 1500ms) ease-in-out; }
+.stage { position: absolute; inset: 0; }
+.canvas { display: block; width: 100%; height: 100%; opacity: 0; filter: blur(3px); cursor: grab; border-radius: inherit; }
+.canvas:active { cursor: grabbing; }
+.canvas:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; }
+.picture[data-state="3d"] .drawing { opacity: 0; filter: blur(2px); }
+.picture[data-state="3d"] .canvas { opacity: 1; filter: none; }
+.tilt { position: absolute; right: 0.5rem; bottom: 0.5rem; min-height: 2rem; padding: 0.25rem 0.75rem; border: 1px solid currentColor; border-radius: 1rem; background: transparent; color: inherit; font: inherit; font-size: 0.8rem; cursor: pointer; }
+@media (prefers-reduced-motion: reduce) {
+  .drawing, .canvas { filter: none !important; transition: opacity var(--uchusen-fade, 400ms) ease; }
+}
+`;
+function adopt(root, css, holder) {
+    try {
+        if (!holder.sheet) {
+            holder.sheet = new CSSStyleSheet();
+            holder.sheet.replaceSync(css);
+        }
+        root.adoptedStyleSheets = [holder.sheet];
+    }
+    catch {
+        const style = document.createElement("style");
+        style.textContent = css;
+        root.appendChild(style);
+    }
+}
+const rocketSheet = { sheet: null };
+const lineupSheet = { sheet: null };
+const media = (query) => typeof matchMedia === "function" && matchMedia(query).matches;
+let webgl = null;
+function webglWorks() {
+    if (webgl !== null)
+        return webgl;
+    try {
+        const probe = document.createElement("canvas");
+        const gl = probe.getContext("webgl2") ?? probe.getContext("webgl");
+        webgl = Boolean(gl);
+        gl?.getExtension("WEBGL_lose_context")?.loseContext();
+    }
+    catch {
+        webgl = false;
+    }
+    return webgl;
+}
+function whyNot(mode) {
+    if (mode === "drawing")
+        return "off";
+    const connection = navigator.connection;
+    if (connection?.saveData || media("(prefers-reduced-data: reduce)"))
+        return "reduced-data";
+    if (!webglWorks())
+        return "no-webgl";
+    return "";
+}
+export class UchusenRocket extends HTMLBase {
+    static observedAttributes = ["rocket", "variant", "show", "look", "view", "build", "mode", "assets", "spin", "way", "label"];
+    descriptionValue = null;
+    picture = null;
+    holder = null;
+    drawing = null;
+    viewer = null;
+    watch = null;
+    cleanups = [];
+    releaseTimer = 0;
+    revealTimer = 0;
+    generation = 0;
+    builtNow = null;
+    queued = false;
+    stateNow = "picture";
+    shownAt = 0;
+    starting = false;
+    key = "";
+    /** What is showing now. */
+    get state() {
+        return this.stateNow;
+    }
+    /** What the fit check said about what is showing: its label, parts and credits. */
+    get report() {
+        return this.builtNow?.report ?? null;
+    }
+    /** A rocket from parts, as a property: the same as the `build` attribute's JSON. */
+    get description() {
+        return this.descriptionValue;
+    }
+    set description(value) {
+        this.descriptionValue = value;
+        this.queue();
+    }
+    /** Where the camera is looking from, while there is a 3D view. */
+    get angle() {
+        return this.viewer?.currentAngle() ?? null;
+    }
+    connectedCallback() {
+        if (!this.shadowRoot)
+            adopt(this.attachShadow({ mode: "open" }), CSS, rocketSheet);
+        this.queue();
+    }
+    disconnectedCallback() {
+        this.teardown();
+        this.key = "";
+    }
+    attributeChangedCallback(name, before, after) {
+        if (before === after)
+            return;
+        if (name === "spin" || name === "way")
+            this.viewer?.setSpin(this.spin());
+        else
+            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" };
+    }
+    descriptionNow() {
+        if (this.descriptionValue)
+            return this.descriptionValue;
+        const raw = this.getAttribute("build");
+        if (raw) {
+            try {
+                const parsed = JSON.parse(raw);
+                return { rocket: String(parsed.rocket ?? ""), ...(parsed.variant ? { variant: String(parsed.variant) } : {}), ...(parsed.parts ? { parts: parsed.parts } : {}) };
+            }
+            catch {
+                return { rocket: "" };
+            }
+        }
+        const variant = this.getAttribute("variant");
+        return { rocket: this.getAttribute("rocket") ?? "starship", ...(variant ? { variant } : {}) };
+    }
+    queue() {
+        if (this.queued)
+            return;
+        this.queued = true;
+        queueMicrotask(() => {
+            this.queued = false;
+            if (this.isConnected)
+                this.update();
+        });
+    }
+    teardown() {
+        this.generation++;
+        this.watch?.disconnect();
+        this.watch = null;
+        window.clearTimeout(this.releaseTimer);
+        window.clearTimeout(this.revealTimer);
+        for (const clean of this.cleanups.splice(0))
+            clean();
+        this.viewer?.dispose();
+        this.viewer = null;
+    }
+    setState(state, why = "") {
+        this.stateNow = state;
+        if (this.picture)
+            this.picture.dataset.state = state;
+        this.dataset.state = state;
+        if (why)
+            this.dataset.why = why;
+        else
+            delete this.dataset.why;
+    }
+    emit(name, detail) {
+        this.dispatchEvent(new CustomEvent(name, { detail, bubbles: true, composed: true }));
+    }
+    /** What to draw from the attributes, every value checked. */
+    settings(built) {
+        const look = cleanLook(this.getAttribute("look"));
+        const show = cleanShow(this.getAttribute("show"), built.parts.map((part) => part.slot));
+        const viewName = cleanView(this.getAttribute("view"));
+        return { look, show, viewName, angle: VIEWS[viewName] };
+    }
+    update() {
+        const description = this.descriptionNow();
+        const key = JSON.stringify(description);
+        if (key !== this.key || !this.builtNow) {
+            this.key = key;
+            try {
+                this.builtNow = build(description);
+            }
+            catch (error) {
+                this.builtNow = null;
+                this.renderShell();
+                this.setState("error", error instanceof FitError ? error.report.issues[0]?.code ?? "error" : "error");
+                this.emit("uchusen-error", { error });
+                return;
+            }
+            if (!this.picture)
+                this.renderShell();
+            void this.applyRocket();
+            return;
+        }
+        this.applySettings();
+    }
+    renderShell() {
+        const root = this.shadowRoot;
+        if (!root)
+            return;
+        for (const child of [...root.childNodes])
+            child.remove();
+        const reduced = media("(prefers-reduced-motion: reduce)");
+        const picture = document.createElement("figure");
+        picture.className = "picture";
+        picture.setAttribute("part", "figure");
+        picture.style.setProperty("--uchusen-fade", `${reduced ? REDUCED_FADE_MS : CROSSFADE_MS}ms`);
+        const drawing = document.createElement("div");
+        drawing.className = "drawing";
+        drawing.setAttribute("part", "drawing");
+        const holder = document.createElement("div");
+        holder.className = "stage";
+        picture.append(drawing, holder);
+        root.appendChild(picture);
+        this.picture = picture;
+        this.drawing = drawing;
+        this.holder = holder;
+        this.startWatching();
+    }
+    /** The drawing for what the attributes say now. It is made from code, so it needs no file. */
+    redraw() {
+        if (!this.builtNow || !this.drawing)
+            return;
+        const { look, show, angle } = this.settings(this.builtNow);
+        // when a 3D view is showing, a drawing of the same angle is ready behind it
+        const from = this.viewer?.currentAngle() ?? angle;
+        const svg = this.builtNow.svg({ look, show, view: from });
+        const template = document.createElement("template");
+        template.innerHTML = svg;
+        const node = template.content.firstElementChild;
+        if (!node)
+            return;
+        node.setAttribute("aria-label", this.getAttribute("label") ?? this.builtNow.report.label);
+        this.drawing.replaceChildren(node);
+    }
+    mark() {
+        if (!this.builtNow)
+            return;
+        const { look, show, viewName } = this.settings(this.builtNow);
+        this.dataset.look = look;
+        this.dataset.show = show;
+        this.dataset.viewAngle = viewName;
+        this.dataset.variant = this.builtNow.report.variant?.id ?? "";
+        this.dataset.custom = String(this.builtNow.report.custom);
+    }
+    async applyRocket() {
+        this.mark();
+        this.redraw();
+        if (!this.builtNow)
+            return;
+        if (this.viewer) {
+            const { look, show, viewName, angle } = this.settings(this.builtNow);
+            this.viewer.setLabel(this.getAttribute("label") ?? this.builtNow.report.label);
+            // a new rocket keeps the angle, unless the same change named another view
+            const from = viewName !== this.lastView ? angle : this.viewer.currentAngle();
+            this.lastView = viewName;
+            await this.viewer.load(this.builtNow, show, look, from);
+            this.emit("uchusen-change", { report: this.builtNow.report });
+        }
+    }
+    lastView = "";
+    applySettings() {
+        if (!this.builtNow)
+            return;
+        this.mark();
+        const { look, show, viewName, angle } = this.settings(this.builtNow);
+        if (this.viewer) {
+            this.viewer.setLook(look);
+            this.viewer.setShow(show);
+            if (viewName !== this.lastView)
+                this.viewer.setAngle(angle, true);
+            this.viewer.setHome(angle);
+        }
+        this.lastView = viewName;
+        this.redraw();
+    }
+    startWatching() {
+        this.watch?.disconnect();
+        const reason = whyNot(this.getAttribute("mode") ?? "auto");
+        if (reason) {
+            this.setState(reason === "off" ? "picture" : "fallback", reason);
+            if (reason !== "off")
+                this.emit("uchusen-fallback", { reason });
+            return;
+        }
+        this.setState("picture");
+        this.watch = new IntersectionObserver(([seen]) => {
+            if (seen.isIntersecting) {
+                this.shownAt ||= performance.now();
+                window.clearTimeout(this.releaseTimer);
+                if (this.viewer)
+                    this.viewer.setVisible(true);
+                else if (!this.starting)
+                    void this.start();
+            }
+            else if (this.viewer) {
+                this.viewer.setVisible(false);
+                const generation = this.generation;
+                this.releaseTimer = window.setTimeout(() => {
+                    this.viewer?.dispose();
+                    this.viewer = null;
+                    if (generation === this.generation)
+                        this.setState("picture");
+                }, RELEASE_MS);
+            }
+        }, { rootMargin: "200px 0px" });
+        this.watch.observe(this);
+    }
+    fallBack(why) {
+        this.viewer?.dispose();
+        this.viewer = null;
+        this.setState("fallback", why);
+        this.emit("uchusen-fallback", { reason: why });
+    }
+    async start() {
+        const generation = this.generation;
+        const built = this.builtNow;
+        const holder = this.holder;
+        if (!built || !holder)
+            return;
+        this.starting = true;
+        this.setState("loading");
+        const reduced = media("(prefers-reduced-motion: reduce)");
+        try {
+            const { RocketViewer } = await import("./element/scene.js");
+            if (generation !== this.generation)
+                return;
+            const assets = this.getAttribute("assets");
+            const made = new RocketViewer(holder, {
+                label: this.getAttribute("label") ?? built.report.label,
+                reducedMotion: reduced,
+                onLost: () => this.fallBack("context-lost"),
+                assets: assets ? `${assets.replace(/\/$/, "")}/` : defaultBase(),
+                onPainted: (state) => {
+                    this.dataset.painted = state;
+                    this.emit("uchusen-painted", { state });
+                },
+            });
+            this.viewer = made;
+            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)
+                return;
+            made.setSpin(this.spin());
+            const wait = revealDelay(this.shownAt, performance.now(), reduced);
+            this.revealTimer = window.setTimeout(() => {
+                if (generation === this.generation && this.viewer === made) {
+                    this.setState("3d");
+                    this.emit("uchusen-ready", { frames: made.frames });
+                    this.startTilt();
+                }
+            }, wait);
+        }
+        catch (error) {
+            if (generation === this.generation) {
+                this.emit("uchusen-error", { error });
+                this.fallBack("error");
+            }
+        }
+        finally {
+            this.starting = false;
+        }
+    }
+    startTilt() {
+        const Orientation = (typeof DeviceOrientationEvent === "undefined" ? undefined : DeviceOrientationEvent);
+        const mode = tiltMode({
+            reducedMotion: media("(prefers-reduced-motion: reduce)"),
+            coarsePointer: media("(pointer: coarse)"),
+            hasOrientation: Orientation !== undefined,
+            needsPermission: typeof Orientation?.requestPermission === "function",
+        });
+        const listen = () => {
+            let rest = null;
+            const onTilt = (event) => {
+                const reading = { beta: event.beta, gamma: event.gamma };
+                rest ??= reading;
+                const turn = tiltTurn(reading, rest, window.screen.orientation?.angle ?? 0);
+                if (turn)
+                    this.viewer?.setTilt(turn.azimuth, turn.polar);
+            };
+            window.addEventListener("deviceorientation", onTilt);
+            this.cleanups.push(() => window.removeEventListener("deviceorientation", onTilt));
+        };
+        if (mode === "on")
+            listen();
+        if (mode === "ask" && this.picture) {
+            const button = document.createElement("button");
+            button.type = "button";
+            button.className = "tilt";
+            button.setAttribute("part", "tilt");
+            button.textContent = "Tilt to turn";
+            button.addEventListener("click", async () => {
+                button.remove();
+                try {
+                    if ((await Orientation?.requestPermission?.()) === "granted")
+                        listen();
+                }
+                catch {
+                    // no tilt, then: the view still turns by finger
+                }
+            });
+            this.picture.appendChild(button);
+            this.cleanups.push(() => button.remove());
+        }
+    }
+}
+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>`. */
+export class UchusenLineup extends HTMLBase {
+    static observedAttributes = ["items", "unit", "look", "view", "show", "ruler", "labels"];
+    connectedCallback() {
+        if (!this.shadowRoot)
+            adopt(this.attachShadow({ mode: "open" }), LINEUP_CSS, lineupSheet);
+        this.render();
+    }
+    attributeChangedCallback(name, before, after) {
+        if (before !== after && this.shadowRoot)
+            this.render();
+    }
+    render() {
+        const root = this.shadowRoot;
+        if (!root)
+            return;
+        const raw = Number.parseFloat(this.getAttribute("unit") ?? "3");
+        const unit = Number.isFinite(raw) && raw > 0 && raw <= 100 ? raw : 3;
+        const items = (this.getAttribute("items") ?? "").split(",").map((item) => item.trim()).filter(Boolean);
+        const { svg, items: shown } = lineupSvg({
+            items,
+            unit,
+            look: cleanLook(this.getAttribute("look")),
+            view: cleanView(this.getAttribute("view") ?? "front"),
+            show: this.getAttribute("show") ?? undefined,
+            ruler: this.hasAttribute("ruler"),
+            labels: this.hasAttribute("labels"),
+        });
+        const template = document.createElement("template");
+        template.innerHTML = svg;
+        const node = template.content.firstElementChild;
+        if (!node)
+            return;
+        for (const child of [...root.childNodes])
+            child.remove();
+        root.appendChild(node);
+        this.dataset.count = String(shown.length);
+    }
+}
+/** Defines both elements, once. Importing this module does it. */
+export function defineUchusenRocket() {
+    if (typeof customElements === "undefined")
+        return;
+    if (!customElements.get("uchusen-rocket"))
+        customElements.define("uchusen-rocket", UchusenRocket);
+    if (!customElements.get("uchusen-lineup"))
+        customElements.define("uchusen-lineup", UchusenLineup);
+}
+defineUchusenRocket();
+export { ROCKETS };

package/dist/fit.d.ts

@@ -0,0 +1,43 @@
+import { type CreditId, type ModelCredit } from "./data/credits.ts";
+import type { Variant } from "./data/types.ts";
+import type { PartRecord } from "./parts.ts";
+export interface Description {
+    rocket: string;
+    /** Left out: the rocket's default variant. */
+    variant?: string;
+    /** Another part in a slot, by its id. */
+    parts?: Readonly<Record<string, string>>;
+}
+export type FitCode = "unknown-rocket" | "unknown-variant" | "unknown-slot" | "unknown-part" | "wrong-kind" | "no-joint" | "joint-kind" | "joint-diameter" | "custom";
+export interface FitIssue {
+    code: FitCode;
+    /** "error" stops the build. "note" says what the check decided. */
+    level: "error" | "note";
+    message: string;
+}
+export interface SlotPart {
+    slot: string;
+    part: PartRecord;
+}
+export interface FitReport {
+    ok: boolean;
+    issues: readonly FitIssue[];
+    /** What to call it: a real variant's name, or a plain words label for a mix. */
+    label: string;
+    /** True when any part is not true for the named variant: never presented as a vehicle that flew. */
+    custom: boolean;
+    variant: Variant | null;
+    /** The parts, bottom up. */
+    parts: readonly SlotPart[];
+    /** Metres, as drawn: the parts' heights added, the widest diameter. Null when it does not fit. */
+    size: {
+        height: number;
+        diameter: number;
+    } | null;
+    /** Whose work each licensed part is. Empty when only this package's code is used. */
+    credits: readonly (ModelCredit & {
+        id: CreditId;
+        usedFor: readonly string[];
+    })[];
+}
+export declare function check(description: Description): FitReport;