@jgengine/shell 0.6.0 → 0.7.0

package/dist/demo/sensorShowcase.js

@@ -0,0 +1,131 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { defineGame } from "@jgengine/core/game/defineGame";
+import { createAssetCatalog } from "@jgengine/core/scene/assetCatalog";
+import { localPlayerEntity, useGameStore } from "@jgengine/react/hooks";
+import { useGameContext } from "@jgengine/react/provider";
+import { useSessionRecorder } from "../replay/useSessionRecorder.js";
+import { FrustumSensorReadout } from "../vision/FrustumSensorHud.js";
+import { SensorReadoutMeter, useHiddenStateProbe } from "../vision/HiddenStateProbeHud.js";
+import { RevealHighlights, RevealScreenTint } from "../vision/RevealVision.js";
+const HERO = "hero";
+const CULPRIT = "culprit";
+const CLUE = "clue-mote";
+const WALL = "sensor-wall";
+const CULPRIT_ID = "sensor-showcase-culprit";
+const TAGS_BY_CATALOG_ID = {
+    [CULPRIT]: ["culprit"],
+    [CLUE]: ["clue"],
+};
+const HIDDEN_SOURCES = [
+    { id: "cold-spot", position: [0, 0, -9], variables: { ghostType: "poltergeist", activity: 0.85 } },
+];
+const entityCatalog = {
+    [HERO]: { movement: { walkSpeed: 2.6 } },
+    [CULPRIT]: {},
+    [CLUE]: {},
+};
+const game = defineGame({
+    name: "sensor-showcase",
+    assets: createAssetCatalog(),
+    multiplayer: null,
+    input: {
+        moveForward: ["KeyW"],
+        moveBack: ["KeyS"],
+        moveLeft: ["KeyA"],
+        moveRight: ["KeyD"],
+        jump: ["Space"],
+        sprint: ["ShiftLeft"],
+        turnLeft: ["KeyQ"],
+        turnRight: ["KeyE"],
+        darkSight: ["KeyV"],
+    },
+});
+let elapsed = 0;
+function onInit(ctx) {
+    elapsed = 0;
+    ctx.game.commands.define("darkSight", {
+        apply(state) {
+            const toggle = darkSightStateFor(state);
+            toggle.on = !toggle.on;
+            for (const listener of toggle.listeners)
+                listener();
+            return state;
+        },
+    });
+}
+function onNewPlayer(ctx) {
+    ctx.scene.entity.spawn(HERO, { id: ctx.player.userId, position: [0, 0, 4], role: "player" });
+    ctx.scene.entity.spawn(CULPRIT, { id: CULPRIT_ID, position: [0, 0, -9], role: "npc" });
+    ctx.scene.entity.spawn(CLUE, { position: [4, 0, -6], role: "prop" });
+    for (let x = -3; x <= 3; x += 1) {
+        for (let y = 0; y <= 1; y += 1) {
+            ctx.scene.object.place(WALL, x, y, -2);
+        }
+    }
+}
+function onTick(ctx, dt) {
+    elapsed += dt;
+    const culprit = ctx.scene.entity.get(CULPRIT_ID);
+    if (culprit === null)
+        return;
+    const x = Math.sin(elapsed * 0.35) * 5;
+    ctx.scene.entity.setPose(CULPRIT_ID, { position: [x, 0, -9], dt });
+}
+function tagsForEntity(entity) {
+    return TAGS_BY_CATALOG_ID[entity.name] ?? [];
+}
+const darkSightByContext = new WeakMap();
+function darkSightStateFor(ctx) {
+    let state = darkSightByContext.get(ctx);
+    if (state === undefined) {
+        state = { on: false, listeners: new Set() };
+        darkSightByContext.set(ctx, state);
+    }
+    return state;
+}
+/** Dark Sight toggle shared between the WorldOverlay (3D reveal) and GameUI (screen tint + button) — both mount as separate React trees over the same GameContext. */
+function useDarkSight() {
+    const ctx = useGameContext();
+    const state = darkSightStateFor(ctx);
+    const [, forceRender] = useState(0);
+    useEffect(() => {
+        const listener = () => forceRender((count) => count + 1);
+        state.listeners.add(listener);
+        return () => {
+            state.listeners.delete(listener);
+        };
+    }, [state]);
+    return [state.on, () => ctx.game.commands.run("darkSight", {})];
+}
+function GhostTrail() {
+    const buffer = useSessionRecorder(CULPRIT_ID, { maxDurationSeconds: 6 });
+    const frames = buffer.frames().filter((_, index) => index % 6 === 0);
+    return (_jsx(_Fragment, { children: frames.map((frame, index) => (_jsxs("mesh", { position: [frame.data.position[0], frame.data.position[1] + 0.2, frame.data.position[2]], children: [_jsx("sphereGeometry", { args: [0.08, 8, 8] }), _jsx("meshBasicMaterial", { color: "#a78bfa", transparent: true, opacity: 0.45, depthTest: false })] }, index))) }));
+}
+function SensorWorldOverlay() {
+    const [darkSight] = useDarkSight();
+    return (_jsxs(_Fragment, { children: [_jsx(RevealHighlights, { enabled: darkSight, radius: 20, tags: ["culprit", "clue"], resolveTags: tagsForEntity }), _jsx(FrustumSensorReadout, { subjectIds: [CULPRIT_ID], subjectRadius: 0.6, idealDistance: 7 }), _jsx(GhostTrail, {})] }));
+}
+function SensorHud() {
+    const [darkSight, toggleDarkSight] = useDarkSight();
+    const playerPosition = useGameStore((ctx) => localPlayerEntity(ctx)?.position ?? [0, 0, 0]);
+    const reading = useHiddenStateProbe(playerPosition, HIDDEN_SOURCES, { range: 18, variableId: "activity" });
+    return (_jsxs("div", { className: "pointer-events-none absolute inset-0 font-mono text-white", children: [_jsx(RevealScreenTint, { enabled: darkSight }), _jsx("div", { className: "absolute left-4 top-4 flex flex-col gap-2", children: _jsx(SensorReadoutMeter, { label: "EMF reader", reading: reading }) }), _jsx("div", { className: "pointer-events-auto absolute right-4 top-4", children: _jsx("button", { onClick: toggleDarkSight, className: `rounded border px-3 py-1.5 text-xs font-semibold uppercase tracking-wide ${darkSight
+                        ? "border-sky-300 bg-sky-400/20 text-sky-100"
+                        : "border-white/25 bg-black/60 text-white/70 hover:bg-white/10"}`, children: "Dark Sight (V)" }) }), _jsx("div", { className: "absolute bottom-4 left-4 max-w-xs text-[11px] leading-4 text-white/50", children: "WASD move \u00B7 Q/E turn \u00B7 V toggles Dark Sight (reveals tagged entities through the wall) \u00B7 EMF reader tracks the culprit's cold spot \u00B7 bottom-right shows framing/dwell for the culprit in your camera view." })] }));
+}
+export const sensorShowcaseGame = {
+    game,
+    content: {
+        entityById: (catalogId) => entityCatalog[catalogId] ?? null,
+    },
+    loop: { onInit, onNewPlayer, onTick },
+    GameUI: SensorHud,
+    WorldOverlay: SensorWorldOverlay,
+    camera: {
+        cinematic: {
+            keyframes: [{ position: { x: 0, y: 1.6, z: 3 }, lookAt: { x: 0, y: 1, z: -9 }, fov: 55 }],
+        },
+    },
+};

package/dist/demo/survivalDemo.d.ts

@@ -0,0 +1,2 @@
+import type { PlayableGame } from "../registry.js";
+export declare const survivalDemoGame: PlayableGame;

package/dist/demo/survivalDemo.js

@@ -0,0 +1,291 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { defineGame } from "@jgengine/core/game/defineGame";
+import { createAssetCatalog } from "@jgengine/core/scene/assetCatalog";
+import { createDecayMeterSet, } from "@jgengine/core/survival/decayMeter";
+import { createMoodleStack, stackMoodles, } from "@jgengine/core/survival/moodle";
+import { createMultiRegionHealth, } from "@jgengine/core/survival/regionHealth";
+import { environment, rain, terrain } from "@jgengine/core/world/features";
+import { createEnvironmentField, } from "@jgengine/core/world/envField";
+import { resolveTerrainField } from "@jgengine/core/world/terrain";
+import { createFireGrid, resolveWeather, } from "@jgengine/core/world/weather";
+import { useEngineState } from "@jgengine/react/engineStore";
+import { EnvironmentScene } from "../environment/EnvironmentScene.js";
+import { FireSpreadLayer } from "../weather/FireSpreadLayer.js";
+const HERO = "survivor";
+const HOTBAR = "hotbar";
+const DAY_LENGTH = 24 * 3600;
+const FIRE_ORIGIN = [-16, -16];
+const FIRE_CELL = 2;
+const CAMPFIRE = { x: 8, z: 0, radius: 9, strength: 26 };
+const weatherTable = {
+    clear: {},
+    rain: { grip: 0.65, visibility: 0.7, spread: 0.35, chill: -4 },
+    storm: { grip: 0.45, visibility: 0.4, structureDamage: 4, ignition: 0.15, spread: 0.25, chill: -8 },
+};
+function createSurvivalSim() {
+    const meters = createDecayMeterSet([
+        {
+            id: "hunger",
+            max: 100,
+            rate: 0.9,
+            thresholds: [
+                { id: "peckish", label: "Peckish", at: 55, when: "below", severity: "neutral" },
+                { id: "hungry", label: "Hungry", at: 30, when: "below", severity: "warning" },
+                { id: "starving", label: "Starving", at: 12, when: "below", severity: "critical" },
+            ],
+        },
+        {
+            id: "thirst",
+            max: 100,
+            rate: 1.3,
+            thresholds: [
+                { id: "thirsty", label: "Thirsty", at: 35, when: "below", severity: "warning" },
+                { id: "dehydrated", label: "Dehydrated", at: 12, when: "below", severity: "critical" },
+            ],
+        },
+        {
+            id: "warmth",
+            max: 100,
+            start: 72,
+            rate: 0.6,
+            thresholds: [
+                { id: "chilly", label: "Chilly", at: 45, when: "below", severity: "neutral" },
+                { id: "freezing", label: "Freezing", at: 20, when: "below", severity: "critical" },
+            ],
+        },
+        {
+            id: "stamina",
+            max: 100,
+            rate: 0,
+            thresholds: [{ id: "winded", label: "Winded", at: 20, when: "below", severity: "warning" }],
+        },
+    ]);
+    const health = createMultiRegionHealth({
+        regions: [
+            { id: "head", label: "Head", max: 35, vital: true, vulnerability: 2 },
+            { id: "torso", label: "Torso", max: 85, vital: true },
+            { id: "leftArm", label: "L. Arm", max: 55 },
+            { id: "rightArm", label: "R. Arm", max: 55 },
+            { id: "legs", label: "Legs", max: 70 },
+        ],
+        ailments: {
+            bleed: {
+                id: "bleed",
+                label: "Bleeding",
+                region: "torso",
+                severity: "critical",
+                drainPerSecond: 1.4,
+                stacking: true,
+                treatedBy: ["bandage"],
+            },
+            fracture: {
+                id: "fracture",
+                label: "Fractured Leg",
+                region: "legs",
+                severity: "warning",
+                treatedBy: ["splint"],
+            },
+        },
+    });
+    const buffs = createMoodleStack();
+    const fire = createFireGrid({
+        cols: 16,
+        rows: 16,
+        cellSize: FIRE_CELL,
+        origin: FIRE_ORIGIN,
+        spreadRate: 0.9,
+        burnRate: 0.05,
+        wind: [1, 0.35],
+        windBias: 0.7,
+    });
+    let weather = { kind: "rain", intensity: 0.55, wind: [1, 0.35] };
+    const field = createEnvironmentField({
+        dayLength: DAY_LENGTH,
+        baseTemperature: 14,
+        nightDrop: 14,
+        heatSources: [CAMPFIRE],
+        rain: () => (weather.kind === "clear" ? 0 : weather.intensity),
+        occluders: [{ x: 20, z: 18, w: 10, d: 10, shade: 1 }],
+    });
+    let version = 0;
+    let currentTime = 0;
+    const listeners = new Set();
+    function computeSnapshot() {
+        const resolved = resolveWeather(weather, weatherTable);
+        const temperature = field.temperature(0, 0, currentTime, 0);
+        return {
+            version,
+            meters: meters.snapshot(),
+            moodles: stackMoodles(buffs.list(), meters.moodles(), health.ailmentMoodles()),
+            regions: health.regions(),
+            overall: health.overall(),
+            temperature,
+            wetness: field.wetness(0, 0, currentTime),
+            weather,
+            visibility: resolved.visibility,
+            grip: resolved.grip,
+            burning: fire.burning,
+        };
+    }
+    let snapshot = computeSnapshot();
+    function notify() {
+        version += 1;
+        snapshot = computeSnapshot();
+        for (const listener of listeners)
+            listener(snapshot);
+    }
+    return {
+        store: {
+            getState: () => snapshot,
+            subscribe: (listener) => {
+                listeners.add(listener);
+                return () => listeners.delete(listener);
+            },
+        },
+        fire,
+        field,
+        bootstrap() {
+            health.damage("head", 9);
+            health.damage("legs", 26);
+            health.applyAilment("bleed");
+            health.applyAilment("bleed");
+            health.applyAilment("fracture");
+            buffs.add({ id: "cookedMeat", label: "Cooked Meat", duration: 320, severity: "good", note: "+HP regen" });
+            buffs.add({ id: "berries", label: "Berries", duration: 180, severity: "good" });
+            meters.refill("hunger", -58);
+            meters.refill("thirst", -66);
+            meters.refill("warmth", -34);
+            meters.refill("stamina", -70);
+            fire.ignite(-4, 4);
+            fire.ignite(-2, 4);
+            fire.ignite(-4, 6);
+            fire.ignite(0, 6);
+            notify();
+        },
+        tick(_ctx, dt, gameTime) {
+            currentTime = gameTime;
+            const sample = field.sample(0, 0, gameTime, 0);
+            const coldPenalty = sample.temperature < 8 ? 2.4 : sample.temperature < 16 ? 1.4 : 0.6;
+            meters.setRateModifier("warmth", coldPenalty);
+            meters.tick(dt);
+            buffs.tick(dt);
+            health.tick(dt);
+            const resolved = resolveWeather(weather, weatherTable);
+            const wetnessAt = (col, row) => field.wetness(FIRE_ORIGIN[0] + col * FIRE_CELL, FIRE_ORIGIN[1] + row * FIRE_CELL, gameTime);
+            fire.step(dt, { spread: resolved.spread, wetnessAt });
+            notify();
+        },
+        treat(itemId) {
+            health.treat(itemId);
+            notify();
+        },
+    };
+}
+let sim = createSurvivalSim();
+const entityCatalog = {
+    [HERO]: {
+        stats: { health: { max: 100 }, stamina: { max: 100 } },
+        receive: { damage: { order: ["health"] } },
+        movement: { poses: ["standing", "running", "crouch"], walkSpeed: 2.4 },
+    },
+};
+const game = defineGame({
+    name: "survival-demo",
+    assets: createAssetCatalog(),
+    multiplayer: null,
+    inventories: { [HOTBAR]: { slots: 4, hud: "hotbar" } },
+    time: { start: 6 * 3600, dayLength: DAY_LENGTH, speeds: [1, 2, 3, 4] },
+    input: {
+        moveForward: ["KeyW"],
+        moveBack: ["KeyS"],
+        moveLeft: ["KeyA"],
+        moveRight: ["KeyD"],
+        jump: ["Space"],
+        sprint: ["Shift"],
+        slot1: ["Digit1"],
+        slot2: ["Digit2"],
+    },
+});
+function onInit(ctx) {
+    sim = createSurvivalSim();
+    sim.bootstrap();
+    ctx.item.use.register({
+        treatWound: {
+            apply(state, input) {
+                sim.treat(input.itemId);
+                return { state };
+            },
+        },
+    });
+}
+function onNewPlayer(ctx) {
+    ctx.scene.entity.spawn(HERO, { id: ctx.player.userId, position: [0, 0, 0], role: "player" });
+    ctx.player.inventory.put(HOTBAR, "bandage", 3);
+    ctx.player.inventory.put(HOTBAR, "splint", 1);
+}
+function onTick(ctx, dt) {
+    sim.tick(ctx, dt, ctx.time.now());
+}
+const survivalWorld = environment({
+    terrain: terrain({ bounds: { w: 160, d: 160 }, height: 3, frequency: 0.03, seed: "survival" }),
+    weather: rain({ area: { w: 160, d: 120, h: 60 }, density: 0.5, wind: [1.2, 0.3] }),
+});
+const survivalField = resolveTerrainField(survivalWorld.terrain);
+function SurvivalWorld() {
+    return (_jsxs(_Fragment, { children: [_jsx(EnvironmentScene, { feature: survivalWorld }), _jsx(FireSpreadLayer, { grid: sim.fire, cellSize: FIRE_CELL, origin: FIRE_ORIGIN, heightAt: survivalField.sampleHeight })] }));
+}
+const SEVERITY_STYLE = {
+    good: "border-emerald-400/70 bg-emerald-500/15 text-emerald-200",
+    neutral: "border-sky-400/60 bg-sky-500/10 text-sky-200",
+    warning: "border-amber-400/70 bg-amber-500/15 text-amber-200",
+    critical: "border-rose-500/80 bg-rose-600/20 text-rose-200",
+};
+function MoodleChip({ moodle }) {
+    return (_jsxs("div", { className: `flex min-w-[86px] items-center gap-2 rounded-md border px-2 py-1.5 shadow-lg shadow-black/40 backdrop-blur-sm ${SEVERITY_STYLE[moodle.severity]}`, children: [_jsxs("div", { className: "relative flex h-9 w-9 shrink-0 items-center justify-center rounded bg-black/40 text-base font-bold", children: [moodle.icon ?? moodle.label.slice(0, 1), moodle.stacks > 1 ? (_jsx("span", { className: "absolute -bottom-1 -right-1 rounded-full bg-black/80 px-1 text-[10px] font-bold text-white", children: moodle.stacks })) : null] }), _jsxs("div", { className: "leading-tight", children: [_jsx("p", { className: "text-xs font-semibold", children: moodle.label }), moodle.note !== undefined ? _jsx("p", { className: "text-[10px] opacity-80", children: moodle.note }) : null, moodle.fraction !== undefined ? (_jsx("div", { className: "mt-1 h-1 w-16 overflow-hidden rounded bg-black/50", children: _jsx("div", { className: "h-full bg-current", style: { width: `${Math.round(moodle.fraction * 100)}%` } }) })) : null] })] }));
+}
+function MoodleStackPanel() {
+    const state = useEngineState(sim.store);
+    return (_jsx("div", { className: "flex max-w-[220px] flex-wrap gap-1.5", children: state.moodles.map((moodle) => (_jsx(MoodleChip, { moodle: moodle }, moodle.id))) }));
+}
+const METER_STYLE = {
+    hunger: { label: "Hunger", fill: "bg-orange-400" },
+    thirst: { label: "Thirst", fill: "bg-sky-400" },
+    warmth: { label: "Warmth", fill: "bg-rose-400" },
+    stamina: { label: "Stamina", fill: "bg-lime-400" },
+};
+function MetersPanel() {
+    const state = useEngineState(sim.store);
+    return (_jsxs("div", { className: "w-60 rounded-lg border border-white/15 bg-black/70 p-3 shadow-xl shadow-black/50", children: [_jsx("p", { className: "mb-2 text-[11px] font-bold uppercase tracking-widest text-white/60", children: "Condition" }), _jsx("div", { className: "space-y-2", children: Object.entries(METER_STYLE).map(([id, style]) => {
+                    const meter = state.meters[id];
+                    if (meter === undefined)
+                        return null;
+                    return (_jsxs("div", { children: [_jsxs("div", { className: "mb-0.5 flex justify-between text-[11px] text-white/70", children: [_jsx("span", { children: style.label }), _jsx("span", { className: "tabular-nums", children: Math.round(meter.value) })] }), _jsx("div", { className: "h-2.5 overflow-hidden rounded bg-white/10", children: _jsx("div", { className: `h-full rounded ${style.fill}`, style: { width: `${Math.round(meter.fraction * 100)}%` } }) })] }, id));
+                }) })] }));
+}
+function RegionHealthPanel() {
+    const state = useEngineState(sim.store);
+    const barColor = (fraction) => fraction > 0.6 ? "bg-emerald-400" : fraction > 0.3 ? "bg-amber-400" : "bg-rose-500";
+    return (_jsxs("div", { className: "w-56 rounded-lg border border-white/15 bg-black/70 p-3 shadow-xl shadow-black/50", children: [_jsxs("div", { className: "mb-2 flex items-center justify-between", children: [_jsx("p", { className: "text-[11px] font-bold uppercase tracking-widest text-white/60", children: "Body" }), _jsxs("span", { className: "text-[11px] tabular-nums text-white/70", children: [Math.round(state.overall * 100), "%"] })] }), _jsx("div", { className: "space-y-1.5", children: state.regions.map((region) => (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: `w-14 shrink-0 text-[11px] ${region.vital ? "text-white" : "text-white/70"}`, children: region.label }), _jsx("div", { className: "h-2 flex-1 overflow-hidden rounded bg-white/10", children: _jsx("div", { className: `h-full rounded ${barColor(region.fraction)}`, style: { width: `${Math.round(region.fraction * 100)}%` } }) }), _jsx("span", { className: "w-8 shrink-0 text-right text-[10px] tabular-nums text-white/60", children: Math.round(region.current) })] }, region.id))) })] }));
+}
+function EnvironmentReadout() {
+    const state = useEngineState(sim.store);
+    return (_jsxs("div", { className: "rounded-lg border border-white/15 bg-black/70 px-3 py-2 text-right shadow-xl shadow-black/50", children: [_jsx("p", { className: "text-[11px] font-bold uppercase tracking-widest text-white/60", children: "Weather" }), _jsxs("p", { className: "mt-1 text-sm font-semibold capitalize text-sky-200", children: [state.weather.kind, " \u00B7 ", Math.round(state.weather.intensity * 100), "%"] }), _jsxs("div", { className: "mt-1 space-y-0.5 text-[11px] tabular-nums text-white/70", children: [_jsxs("p", { children: ["Temp ", state.temperature.toFixed(1), "\u00B0"] }), _jsxs("p", { children: ["Wet ", Math.round(state.wetness * 100), "%"] }), _jsxs("p", { children: ["Grip ", Math.round(state.grip * 100), "% \u00B7 Vis ", Math.round(state.visibility * 100), "%"] }), state.burning > 0 ? _jsxs("p", { className: "text-orange-300", children: [state.burning, " cells ablaze"] }) : null] })] }));
+}
+function SurvivalGameUI() {
+    return (_jsxs("div", { className: "pointer-events-none absolute inset-0 font-sans text-white", children: [_jsx("div", { className: "absolute left-4 top-4", children: _jsx(MoodleStackPanel, {}) }), _jsx("div", { className: "absolute right-4 top-4", children: _jsx(EnvironmentReadout, {}) }), _jsx("div", { className: "absolute bottom-4 left-4", children: _jsx(MetersPanel, {}) }), _jsx("div", { className: "absolute bottom-4 right-4", children: _jsx(RegionHealthPanel, {}) })] }));
+}
+const itemCatalog = {
+    bandage: { use: "treatWound" },
+    splint: { use: "treatWound" },
+};
+export const survivalDemoGame = {
+    game,
+    content: {
+        entityById: (catalogId) => entityCatalog[catalogId] ?? null,
+        itemById: (itemId) => (itemId in itemCatalog ? itemCatalog[itemId] : null),
+    },
+    loop: { onInit, onNewPlayer, onTick },
+    GameUI: SurvivalGameUI,
+    environment: SurvivalWorld,
+    camera: { minDistance: 8, maxDistance: 40, initialDistance: 26, targetHeight: 1.4 },
+};

package/dist/map/MapMarkerBeacons.d.ts

@@ -0,0 +1,12 @@
+import { type MarkerKindStyle, type MarkerSet } from "@jgengine/core/world/markers";
+export interface MapMarkerBeaconsProps {
+    markers: MarkerSet;
+    kindStyles?: Record<string, MarkerKindStyle>;
+    height?: number;
+}
+/**
+ * World-space beacons for map markers (the visible in-world side of a ping):
+ * a floating diamond over a soft light beam, colored by marker kind. Wire it
+ * through `PlayableGame.WorldOverlay`.
+ */
+export declare function MapMarkerBeacons({ markers, kindStyles, height }: MapMarkerBeaconsProps): import("react").JSX.Element;

package/dist/map/MapMarkerBeacons.js

@@ -0,0 +1,16 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { markerKindStyle } from "@jgengine/core/world/markers";
+import { useMarkers } from "@jgengine/react/map";
+/**
+ * World-space beacons for map markers (the visible in-world side of a ping):
+ * a floating diamond over a soft light beam, colored by marker kind. Wire it
+ * through `PlayableGame.WorldOverlay`.
+ */
+export function MapMarkerBeacons({ markers, kindStyles, height = 5 }) {
+    const list = useMarkers(markers);
+    return (_jsx(_Fragment, { children: list.map((marker) => {
+            const style = markerKindStyle(marker.kind, kindStyles);
+            const baseY = marker.position[1];
+            return (_jsxs("group", { position: [marker.position[0], baseY, marker.position[2]], children: [_jsxs("mesh", { "position-y": height / 2, children: [_jsx("cylinderGeometry", { args: [0.09, 0.09, height, 6] }), _jsx("meshBasicMaterial", { color: style.color, transparent: true, opacity: 0.4 })] }), _jsxs("mesh", { "position-y": height + 0.5, rotation: [0, Math.PI / 4, 0], children: [_jsx("octahedronGeometry", { args: [0.55, 0] }), _jsx("meshBasicMaterial", { color: style.color })] }), _jsxs("mesh", { "rotation-x": -Math.PI / 2, "position-y": 0.06, children: [_jsx("ringGeometry", { args: [0.7, 0.95, 24] }), _jsx("meshBasicMaterial", { color: style.color, transparent: true, opacity: 0.75 })] })] }, marker.id));
+        }) }));
+}

package/dist/map/index.d.ts

@@ -0,0 +1,2 @@
+export { bakeTerrainMap, type BakedMap, type BakeTerrainMapOptions, type MapBakeBounds } from "./terrainMap.js";
+export { MapMarkerBeacons, type MapMarkerBeaconsProps } from "./MapMarkerBeacons.js";

package/dist/map/index.js

@@ -0,0 +1,2 @@
+export { bakeTerrainMap } from "./terrainMap.js";
+export { MapMarkerBeacons } from "./MapMarkerBeacons.js";

package/dist/map/terrainMap.d.ts

@@ -0,0 +1,23 @@
+import type { TerrainField } from "@jgengine/core/world/terrain";
+export interface MapBakeBounds {
+    minX: number;
+    minZ: number;
+    maxX: number;
+    maxZ: number;
+}
+export interface BakeTerrainMapOptions {
+    resolution?: number;
+    landLow?: readonly [number, number, number];
+    landHigh?: readonly [number, number, number];
+    water?: readonly [number, number, number];
+}
+export interface BakedMap {
+    url: string;
+    bounds: MapBakeBounds;
+}
+/**
+ * Bake a top-down image of a `TerrainField` (or `RegionField`) over `bounds`
+ * for the react `Minimap` / `WorldMap` background. Runs in the browser via a
+ * 2D canvas; renderer-side, so it lives in the shell.
+ */
+export declare function bakeTerrainMap(field: TerrainField, bounds: MapBakeBounds, options?: BakeTerrainMapOptions): BakedMap | null;

package/dist/map/terrainMap.js

@@ -0,0 +1,79 @@
+import { isRegionField } from "@jgengine/core/world/regions";
+function mix(a, b, t) {
+    return [a[0] + (b[0] - a[0]) * t, a[1] + (b[1] - a[1]) * t, a[2] + (b[2] - a[2]) * t];
+}
+const DEFAULT_LAND_LOW = [46, 74, 45];
+const DEFAULT_LAND_HIGH = [180, 172, 128];
+const DEFAULT_WATER = [28, 74, 108];
+/**
+ * Bake a top-down image of a `TerrainField` (or `RegionField`) over `bounds`
+ * for the react `Minimap` / `WorldMap` background. Runs in the browser via a
+ * 2D canvas; renderer-side, so it lives in the shell.
+ */
+export function bakeTerrainMap(field, bounds, options = {}) {
+    const res = options.resolution ?? 160;
+    if (typeof document === "undefined")
+        return null;
+    const canvas = document.createElement("canvas");
+    canvas.width = res;
+    canvas.height = res;
+    const context = canvas.getContext("2d");
+    if (context === null)
+        return null;
+    const region = isRegionField(field) ? field : null;
+    const waterLevel = field.waterLevel ?? Number.NEGATIVE_INFINITY;
+    const worldW = bounds.maxX - bounds.minX;
+    const worldD = bounds.maxZ - bounds.minZ;
+    const landLow = options.landLow ?? DEFAULT_LAND_LOW;
+    const landHigh = options.landHigh ?? DEFAULT_LAND_HIGH;
+    const water = options.water ?? DEFAULT_WATER;
+    const heights = new Float32Array(res * res);
+    let minHeight = Number.POSITIVE_INFINITY;
+    let maxHeight = Number.NEGATIVE_INFINITY;
+    for (let py = 0; py < res; py += 1) {
+        for (let px = 0; px < res; px += 1) {
+            const worldX = bounds.minX + ((px + 0.5) / res) * worldW;
+            const worldZ = bounds.minZ + ((py + 0.5) / res) * worldD;
+            const height = field.sampleHeight(worldX, worldZ);
+            heights[py * res + px] = height;
+            if (height < minHeight)
+                minHeight = height;
+            if (height > maxHeight)
+                maxHeight = height;
+        }
+    }
+    const span = maxHeight - minHeight || 1;
+    const image = context.createImageData(res, res);
+    for (let py = 0; py < res; py += 1) {
+        for (let px = 0; px < res; px += 1) {
+            const index = py * res + px;
+            const height = heights[index];
+            const normalized = (height - minHeight) / span;
+            let color;
+            if (height < waterLevel) {
+                color = [...water];
+            }
+            else if (region !== null) {
+                const worldX = bounds.minX + ((px + 0.5) / res) * worldW;
+                const worldZ = bounds.minZ + ((py + 0.5) / res) * worldD;
+                const sample = region.sampleRegion(worldX, worldZ);
+                const shade = 0.55 + normalized * 0.5;
+                color = [
+                    Math.min(255, sample.tint[0] * 255 * shade),
+                    Math.min(255, sample.tint[1] * 255 * shade),
+                    Math.min(255, sample.tint[2] * 255 * shade),
+                ];
+            }
+            else {
+                color = mix(landLow, landHigh, normalized);
+            }
+            const offset = index * 4;
+            image.data[offset] = color[0];
+            image.data[offset + 1] = color[1];
+            image.data[offset + 2] = color[2];
+            image.data[offset + 3] = 255;
+        }
+    }
+    context.putImageData(image, 0, 0);
+    return { url: canvas.toDataURL("image/png"), bounds };
+}

package/dist/pointer/PointerOverlays.d.ts

@@ -0,0 +1,12 @@
+import type { ContextMenu, ContextVerb } from "@jgengine/core/interaction/contextMenu";
+import type { ScreenRect } from "@jgengine/core/scene/selection";
+export declare function MarqueeBox({ rect }: {
+    rect: ScreenRect;
+}): import("react").JSX.Element;
+export declare function ContextMenuView({ menu, x, y, onPick, onClose, }: {
+    menu: ContextMenu;
+    x: number;
+    y: number;
+    onPick: (verb: ContextVerb) => void;
+    onClose: () => void;
+}): import("react").JSX.Element;

package/dist/pointer/PointerOverlays.js

@@ -0,0 +1,17 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function MarqueeBox({ rect }) {
+    return (_jsx("div", { className: "pointer-events-none absolute z-40 rounded-sm border border-emerald-300/80 bg-emerald-300/15", style: {
+            left: rect.minX,
+            top: rect.minY,
+            width: rect.maxX - rect.minX,
+            height: rect.maxY - rect.minY,
+        } }));
+}
+export function ContextMenuView({ menu, x, y, onPick, onClose, }) {
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "fixed inset-0 z-40", onPointerDown: onClose, onContextMenu: (event) => event.preventDefault() }), _jsxs("div", { className: "pointer-events-auto absolute z-50 min-w-40 overflow-hidden rounded-md border border-white/15 bg-neutral-900/95 py-1 shadow-2xl backdrop-blur-sm", style: { left: x, top: y }, onContextMenu: (event) => event.preventDefault(), children: [_jsx("div", { className: "border-b border-white/10 px-3 py-1.5 text-[10px] font-semibold uppercase tracking-wider text-white/45", children: menu.kind === "entity" ? "Unit" : "Object" }), menu.verbs.map((verb, index) => (_jsx("button", { type: "button", disabled: verb.disabled === true, onPointerDown: (event) => {
+                            event.stopPropagation();
+                            if (verb.disabled === true)
+                                return;
+                            onPick(verb);
+                        }, className: "flex w-full items-center px-3 py-1.5 text-left text-[13px] text-white/85 hover:bg-emerald-400/20 hover:text-white disabled:cursor-not-allowed disabled:text-white/30 disabled:hover:bg-transparent", children: verb.label }, `${verb.command}-${index}`)))] })] }));
+}

package/dist/pointer/PointerProbe.d.ts

@@ -0,0 +1,4 @@
+import type { PointerService } from "./pointerService.js";
+export declare function PointerProbe({ service }: {
+    service: PointerService;
+}): null;

package/dist/pointer/PointerProbe.js

@@ -0,0 +1,27 @@
+import { useThree } from "@react-three/fiber";
+import { useEffect } from "react";
+export function PointerProbe({ service }) {
+    const camera = useThree((state) => state.camera);
+    const scene = useThree((state) => state.scene);
+    const gl = useThree((state) => state.gl);
+    const size = useThree((state) => state.size);
+    service.bind({ camera, scene, width: size.width, height: size.height });
+    useEffect(() => {
+        const el = gl.domElement;
+        const onMove = (event) => {
+            const rect = el.getBoundingClientRect();
+            const x = ((event.clientX - rect.left) / rect.width) * 2 - 1;
+            const y = -(((event.clientY - rect.top) / rect.height) * 2 - 1);
+            service.setCursor(x, y, true);
+        };
+        const onLeave = () => service.setCursor(0, 0, false);
+        el.addEventListener("pointermove", onMove);
+        el.addEventListener("pointerleave", onLeave);
+        return () => {
+            el.removeEventListener("pointermove", onMove);
+            el.removeEventListener("pointerleave", onLeave);
+            service.bind(null);
+        };
+    }, [gl, service]);
+    return null;
+}