@fluritheme/moon-explorer 0.0.0-stage → 0.1.0

package/dist/index.js

@@ -0,0 +1,428 @@
+import { Expedition, clamp } from "./model.js";
+import { paint } from "./render.js";
+const validMissions = [
+    "explore",
+    "sample",
+    "flag",
+    "rover",
+    "observe",
+    "wave",
+    "jump",
+    "rest",
+];
+function finite(n, fallback, min, max) {
+    return typeof n === "number" && Number.isFinite(n)
+        ? clamp(n, min, max)
+        : fallback;
+}
+/** Create a self-contained lunar expedition. Importing the module is SSR-safe. */
+export function createMoonExplorer(input = {}) {
+    const browser = typeof window !== "undefined" && typeof document !== "undefined";
+    let opts = {
+        size: finite(input.size, 1, 0.55, 1.8),
+        pace: finite(input.pace, 1, 0.3, 2.5),
+        autoExplore: input.autoExplore ?? true,
+        interactive: input.interactive ?? true,
+        rover: input.rover ?? true,
+        lander: input.lander ?? true,
+        shootingStars: input.shootingStars ?? true,
+        maxFlags: Math.round(finite(input.maxFlags, 5, 0, 12)),
+        accent: typeof input.accent === "string" && /^#[0-9a-f]{3,8}$/i.test(input.accent)
+            ? input.accent
+            : "#ef9459",
+        maxFPS: finite(input.maxFPS, 40, 12, 60),
+        maxDPR: finite(input.maxDPR, 1.5, 1, 2.5),
+        zIndex: Math.round(finite(input.zIndex, 30, -2147483647, 2147483647)),
+        motion: input.motion ?? "respect",
+    };
+    let state = browser ? "running" : "idle";
+    let reduced = false, destroyed = false, manualPause = false, hidden = false;
+    const listeners = new Map();
+    const emptyWorld = {
+        bounds: { x: 0, y: 0, width: 800, height: 600 },
+        view: { x: 0, y: 0, width: 800, height: 600 },
+        surfaces: [{ id: "floor", x: 40, y: 480, width: 720 }],
+    };
+    let model = new Expedition(emptyWorld, opts.size, opts.autoExplore, opts.rover, opts.maxFlags, input.seed ?? 42);
+    model.onEvent = (event, data) => {
+        for (const f of listeners.get(event) ?? [])
+            try {
+                f({ ...data });
+            }
+            catch {
+                /* A listener cannot interrupt the animation loop. */
+            }
+    };
+    let canvas = null, context = null, root = null, frame = 0, last = 0, drawLast = 0, resize = null, mutation = null, media = null;
+    let refreshFrame = 0;
+    const pointer = { x: 0, y: 0, active: false };
+    const elements = new Map();
+    let ids = 0;
+    const rootIsPage = () => root === document.body || root === document.documentElement;
+    function measure() {
+        if (!root)
+            return emptyWorld;
+        const page = rootIsPage();
+        const rect = root.getBoundingClientRect();
+        const sx = window.scrollX, sy = window.scrollY;
+        const bounds = page
+            ? {
+                x: 0,
+                y: 0,
+                width: Math.max(innerWidth, document.documentElement.scrollWidth),
+                height: Math.max(innerHeight, document.documentElement.scrollHeight),
+            }
+            : {
+                x: rect.left + sx,
+                y: rect.top + sy,
+                width: rect.width,
+                height: rect.height,
+            };
+        const view = { x: sx, y: sy, width: innerWidth, height: innerHeight };
+        let targets = [];
+        try {
+            targets = [
+                ...root.querySelectorAll(input.surfaces ??
+                    "[data-moon-surface], button, h1, h2, article, .card"),
+            ].slice(0, 180);
+        }
+        catch {
+            targets = [];
+        }
+        const surfaces = [];
+        for (const el of targets) {
+            if (el === canvas || el.contains(canvas))
+                continue;
+            const r = el.getBoundingClientRect();
+            if (r.width < 110 * opts.size ||
+                r.height < 2 ||
+                r.top + sy < bounds.y ||
+                r.top + sy > bounds.y + bounds.height)
+                continue;
+            const css = getComputedStyle(el);
+            if (css.display === "none" ||
+                css.visibility === "hidden" ||
+                css.position === "fixed")
+                continue;
+            if (!elements.has(el))
+                elements.set(el, "surface-" + ++ids);
+            surfaces.push({
+                id: elements.get(el),
+                x: r.left + sx + 5,
+                y: r.top + sy,
+                width: r.width - 10,
+            });
+        }
+        surfaces.push({
+            id: "floor",
+            x: bounds.x + 30,
+            y: bounds.y + bounds.height - 30,
+            width: Math.max(120, bounds.width - 60),
+        });
+        return { bounds, view, surfaces };
+    }
+    function refresh() {
+        if (destroyed || !browser)
+            return;
+        model.size = opts.size;
+        model.auto = opts.autoExplore;
+        model.rover = opts.rover;
+        model.maxFlags = opts.maxFlags;
+        model.refresh(measure());
+        draw();
+    }
+    function queueRefresh() {
+        if (!refreshFrame)
+            refreshFrame = requestAnimationFrame(() => {
+                refreshFrame = 0;
+                refresh();
+            });
+    }
+    function draw() {
+        if (!canvas || !context || !root)
+            return;
+        const dpr = Math.min(devicePixelRatio || 1, opts.maxDPR);
+        const w = innerWidth, h = innerHeight;
+        if (canvas.width !== Math.round(w * dpr) ||
+            canvas.height !== Math.round(h * dpr)) {
+            canvas.width = Math.round(w * dpr);
+            canvas.height = Math.round(h * dpr);
+            canvas.style.width = w + "px";
+            canvas.style.height = h + "px";
+        }
+        context.setTransform(dpr, 0, 0, dpr, 0, 0);
+        context.clearRect(0, 0, w, h);
+        context.save();
+        if (!rootIsPage()) {
+            const r = root.getBoundingClientRect();
+            context.beginPath();
+            context.rect(r.left, r.top, r.width, r.height);
+            context.clip();
+        }
+        context.translate(-scrollX, -scrollY);
+        paint(context, model, {
+            accent: opts.accent,
+            lander: opts.lander,
+            rover: opts.rover,
+            pointer,
+            reduced,
+        });
+        context.restore();
+    }
+    function tick(now) {
+        frame = 0;
+        if (destroyed || manualPause || hidden || reduced)
+            return;
+        const delta = last ? Math.min(0.06, (now - last) / 1000) : 0;
+        last = now;
+        model.step(delta * opts.pace);
+        if (opts.shootingStars && model.rng() < delta * 0.012)
+            model.shootingStar();
+        if (now - drawLast >= 1000 / opts.maxFPS) {
+            drawLast = now;
+            draw();
+        }
+        frame = requestAnimationFrame(tick);
+    }
+    function sync() {
+        if (!browser || destroyed)
+            return;
+        cancelAnimationFrame(frame);
+        frame = 0;
+        last = 0;
+        state = manualPause || hidden ? "paused" : "running";
+        if (reduced) {
+            model.staticPose();
+            draw();
+        }
+        else if (!manualPause && !hidden)
+            frame = requestAnimationFrame(tick);
+    }
+    function motionChange() {
+        reduced = opts.motion === "static" || Boolean(media?.matches);
+        sync();
+    }
+    function visibility() {
+        hidden = document.hidden;
+        sync();
+    }
+    function scroll() {
+        model.world.view = {
+            x: scrollX,
+            y: scrollY,
+            width: innerWidth,
+            height: innerHeight,
+        };
+        if (!rootIsPage()) {
+            const r = root.getBoundingClientRect();
+            const nextHidden = document.hidden || r.bottom < 0 || r.top > innerHeight;
+            if (nextHidden !== hidden) {
+                hidden = nextHidden;
+                sync();
+            }
+        }
+        draw();
+    }
+    function move(e) {
+        pointer.x = e.clientX + scrollX;
+        pointer.y = e.clientY + scrollY;
+        pointer.active = e.pointerType !== "touch";
+    }
+    function click(e) {
+        if (!opts.interactive || reduced || manualPause)
+            return;
+        if (Math.hypot(e.clientX + scrollX - model.x, e.clientY + scrollY - (model.y - 45 * opts.size)) <
+            70 * opts.size)
+            model.enqueue("wave");
+    }
+    function leave() {
+        pointer.active = false;
+    }
+    function resolve(selector) {
+        if (!selector || !root)
+            return undefined;
+        try {
+            const el = root.matches(selector) ? root : root.querySelector(selector);
+            if (!el)
+                return undefined;
+            const r = el.getBoundingClientRect();
+            if (r.width < 100)
+                return undefined;
+            if (!elements.has(el))
+                elements.set(el, "surface-" + ++ids);
+            return {
+                id: elements.get(el),
+                x: r.left + scrollX + 5,
+                y: r.top + scrollY,
+                width: r.width - 10,
+            };
+        }
+        catch {
+            return undefined;
+        }
+    }
+    function mission(kind, selector) {
+        if (destroyed || !validMissions.includes(kind) || !browser)
+            return false;
+        const target = resolve(selector);
+        if (selector && !target)
+            return false;
+        if (reduced)
+            return false;
+        return model.enqueue(kind, target);
+    }
+    if (browser) {
+        root = input.root ?? document.body;
+        canvas = document.createElement("canvas");
+        canvas.dataset.moonExplorer = "";
+        canvas.setAttribute("aria-hidden", "true");
+        canvas.style.cssText = `position:fixed;inset:0;pointer-events:none;z-index:${opts.zIndex};contain:strict;`;
+        document.body.append(canvas);
+        context = canvas.getContext("2d");
+        media = matchMedia("(prefers-reduced-motion: reduce)");
+        reduced = opts.motion === "static" || media.matches;
+        model.world = measure();
+        model.land();
+        if (reduced)
+            model.staticPose();
+        window.addEventListener("scroll", scroll, { passive: true });
+        window.addEventListener("resize", queueRefresh, { passive: true });
+        window.addEventListener("pointermove", move, { passive: true });
+        window.addEventListener("pointerdown", click, { passive: true });
+        window.addEventListener("pointerleave", leave, { passive: true });
+        document.addEventListener("visibilitychange", visibility);
+        media.addEventListener("change", motionChange);
+        if (typeof ResizeObserver !== "undefined") {
+            resize = new ResizeObserver(queueRefresh);
+            resize.observe(root);
+        }
+        if (typeof MutationObserver !== "undefined") {
+            mutation = new MutationObserver((records) => {
+                if (records.some((r) => [...r.addedNodes, ...r.removedNodes].some((n) => n !== canvas)))
+                    queueRefresh();
+            });
+            mutation.observe(root, { childList: true, subtree: true });
+        }
+        draw();
+        sync();
+    }
+    return {
+        mission,
+        explore: (selector) => mission("explore", selector),
+        collect: () => mission("sample"),
+        plantFlag: () => mission("flag"),
+        ride: () => mission("rover"),
+        observe: () => mission("observe"),
+        jump: () => mission("jump"),
+        wave: () => mission("wave"),
+        rest: () => mission("rest"),
+        shootingStar() {
+            if (!destroyed && !reduced) {
+                model.shootingStar();
+                draw();
+            }
+        },
+        land(selector) {
+            if (destroyed || !browser || reduced)
+                return false;
+            const target = resolve(selector);
+            if (selector && !target)
+                return false;
+            model.land(target);
+            return true;
+        },
+        pause() {
+            if (destroyed)
+                return;
+            manualPause = true;
+            sync();
+            if (!browser)
+                state = "paused";
+        },
+        resume() {
+            if (destroyed)
+                return;
+            manualPause = false;
+            sync();
+        },
+        refresh,
+        update(options) {
+            if (destroyed)
+                return;
+            opts = {
+                ...opts,
+                size: finite(options.size, opts.size, 0.55, 1.8),
+                pace: finite(options.pace, opts.pace, 0.3, 2.5),
+                maxFPS: finite(options.maxFPS, opts.maxFPS, 12, 60),
+                maxDPR: finite(options.maxDPR, opts.maxDPR, 1, 2.5),
+                maxFlags: Math.round(finite(options.maxFlags, opts.maxFlags, 0, 12)),
+                autoExplore: options.autoExplore ?? opts.autoExplore,
+                interactive: options.interactive ?? opts.interactive,
+                rover: options.rover ?? opts.rover,
+                lander: options.lander ?? opts.lander,
+                shootingStars: options.shootingStars ?? opts.shootingStars,
+                motion: options.motion ?? opts.motion,
+                accent: typeof options.accent === "string" &&
+                    /^#[0-9a-f]{3,8}$/i.test(options.accent)
+                    ? options.accent
+                    : opts.accent,
+                zIndex: Math.round(finite(options.zIndex, opts.zIndex, -2147483647, 2147483647)),
+            };
+            if (canvas)
+                canvas.style.zIndex = String(opts.zIndex);
+            refresh();
+            motionChange();
+        },
+        destroy() {
+            if (destroyed)
+                return;
+            destroyed = true;
+            state = "destroyed";
+            if (browser) {
+                cancelAnimationFrame(frame);
+                cancelAnimationFrame(refreshFrame);
+                resize?.disconnect();
+                mutation?.disconnect();
+                media?.removeEventListener("change", motionChange);
+                window.removeEventListener("scroll", scroll);
+                window.removeEventListener("resize", queueRefresh);
+                window.removeEventListener("pointermove", move);
+                window.removeEventListener("pointerdown", click);
+                window.removeEventListener("pointerleave", leave);
+                document.removeEventListener("visibilitychange", visibility);
+                canvas?.remove();
+            }
+            listeners.clear();
+            elements.clear();
+        },
+        getState() {
+            return Object.freeze({
+                state,
+                phase: model.phase,
+                mission: model.mission,
+                x: model.x,
+                y: model.y,
+                facing: model.facing,
+                surface: model.surface.id,
+                samples: model.samples,
+                flags: model.flags.length,
+                distance: Math.round(model.distance),
+                roverDistance: Math.round(model.roverDistance),
+                missionsCompleted: model.missionsCompleted,
+                elapsed: model.elapsed,
+                reducedMotion: reduced,
+            });
+        },
+        on(event, handler) {
+            if (destroyed)
+                return () => { };
+            let set = listeners.get(event);
+            if (!set) {
+                set = new Set();
+                listeners.set(event, set);
+            }
+            set.add(handler);
+            return () => set.delete(handler);
+        },
+    };
+}

package/dist/model.d.ts

@@ -0,0 +1,100 @@
+import type { ExplorerPhase, Mission, MoonWorld, LunarSurface, ExplorerEvent, ExplorerEventData } from "./types.js";
+export declare const clamp: (n: number, a: number, b: number) => number;
+export declare const lerp: (a: number, b: number, t: number) => number;
+export declare const ease: (t: number) => number;
+export declare function random(seed: number): () => number;
+export interface Dust {
+    x: number;
+    y: number;
+    vx: number;
+    vy: number;
+    life: number;
+    ttl: number;
+    radius: number;
+}
+export interface Footprint {
+    x: number;
+    y: number;
+    facing: number;
+    side: number;
+    life: number;
+}
+export interface Flag {
+    x: number;
+    y: number;
+    phase: number;
+    surface: string;
+}
+export interface Rock {
+    x: number;
+    y: number;
+    size: number;
+    collected: boolean;
+    surface: string;
+    angle: number;
+}
+export interface ShootingStar {
+    x: number;
+    y: number;
+    vx: number;
+    vy: number;
+    life: number;
+    ttl: number;
+}
+export declare class Expedition {
+    world: MoonWorld;
+    size: number;
+    auto: boolean;
+    rover: boolean;
+    maxFlags: number;
+    phase: ExplorerPhase;
+    mission: Mission | null;
+    phaseTime: number;
+    elapsed: number;
+    x: number;
+    y: number;
+    startX: number;
+    startY: number;
+    targetX: number;
+    targetY: number;
+    facing: 1 | -1;
+    surface: LunarSurface;
+    distance: number;
+    roverDistance: number;
+    samples: number;
+    missionsCompleted: number;
+    dust: Dust[];
+    footprints: Footprint[];
+    flags: Flag[];
+    rocks: Rock[];
+    stars: ShootingStar[];
+    queue: {
+        kind: Mission;
+        target?: LunarSurface;
+    }[];
+    roverX: number;
+    roverY: number;
+    landerX: number;
+    landerY: number;
+    landingStartY: number;
+    sampled: boolean;
+    flagged: boolean;
+    lastStep: number;
+    nextAuto: number;
+    rng: () => number;
+    onEvent: (event: ExplorerEvent, data: ExplorerEventData) => void;
+    constructor(world: MoonWorld, size?: number, auto?: boolean, rover?: boolean, maxFlags?: number, seed?: number);
+    event(event: ExplorerEvent): void;
+    choose(target?: LunarSurface): LunarSurface;
+    setPhase(phase: ExplorerPhase): void;
+    land(target?: LunarSurface): void;
+    populateRocks(): void;
+    enqueue(kind: Mission, target?: LunarSurface): boolean;
+    startMission(kind: Mission, target?: LunarSurface): void;
+    finish(): void;
+    burst(x?: number, y?: number, amount?: number, power?: number): void;
+    shootingStar(): void;
+    staticPose(): void;
+    refresh(world: MoonWorld): void;
+    step(dt: number): void;
+}