@jgengine/shell 0.5.0 → 0.7.0

package/dist/demo/builderDemo.js

@@ -0,0 +1,189 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useThree } from "@react-three/fiber";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { defineGame } from "@jgengine/core/game/defineGame";
+import { createAssetCatalog } from "@jgengine/core/scene/assetCatalog";
+import { noiseField } from "@jgengine/core/world/terrain";
+import { createEditableTerrain, createTerraformBrush } from "@jgengine/core/world/terraform";
+import { createPlacementController, } from "@jgengine/core/world/placementController";
+import { createPlacedStructureStore, } from "@jgengine/core/world/placedStructureStore";
+import { createPointerService } from "../pointer/pointerService.js";
+import { EditableGround } from "../terrain/EditableGround.js";
+import { TerraformBrushCursor } from "../terrain/TerraformBrushCursor.js";
+import { PlacementGhost } from "../structures/PlacementGhost.js";
+const BOUNDS = { minX: -20, minZ: -20, maxX: 20, maxZ: 20 };
+const FOOTPRINT = { w: 3, d: 3 };
+const HUT_HEIGHT = 2.4;
+const terrain = createEditableTerrain({
+    bounds: BOUNDS,
+    base: noiseField({ seed: "builder", amplitude: 0.6, frequency: 0.04 }),
+    cellSize: 1,
+});
+const brush = createTerraformBrush(terrain, { radius: 3.5, strength: 0.6 });
+const structures = createPlacedStructureStore();
+function seedScene() {
+    structures.clear();
+    terrain.reset();
+    terrain.apply({ mode: "raise", center: [8, -6], radius: 7, strength: 3 });
+    terrain.apply({ mode: "flatten", center: [-6, 4], radius: 6, strength: 1, target: 0 });
+    for (let i = 0; i < 6; i += 1)
+        terrain.apply({ mode: "paint", center: [-14 + i * 3, -12 + i * 2], radius: 1.6, surface: "path" });
+    structures.add({ catalogId: "hut", position: [-6, terrain.sampleHeight(-6, 4), 4], rotationY: 0 });
+    structures.add({ catalogId: "hut", position: [-2, terrain.sampleHeight(-2, 6), 6], rotationY: Math.PI / 6 });
+    structures.add({ catalogId: "hut", position: [2, terrain.sampleHeight(2, 3), 3], rotationY: -Math.PI / 5 });
+}
+seedScene();
+function Hut({ structure }) {
+    return (_jsxs("group", { position: [structure.position[0], structure.position[1], structure.position[2]], "rotation-y": structure.rotationY, children: [_jsxs("mesh", { "position-y": HUT_HEIGHT / 2, castShadow: true, children: [_jsx("boxGeometry", { args: [FOOTPRINT.w, HUT_HEIGHT, FOOTPRINT.d] }), _jsx("meshStandardMaterial", { color: "#b08968", roughness: 0.85 })] }), _jsxs("mesh", { "position-y": HUT_HEIGHT + 0.55, "rotation-y": Math.PI / 4, children: [_jsx("coneGeometry", { args: [FOOTPRINT.w * 0.82, 1.3, 4] }), _jsx("meshStandardMaterial", { color: "#6d4c3d", roughness: 0.9 })] })] }));
+}
+function obstaclesFrom(list) {
+    return list.map((s) => ({
+        id: s.id,
+        aabb: {
+            minX: s.position[0] - FOOTPRINT.w / 2,
+            maxX: s.position[0] + FOOTPRINT.w / 2,
+            minZ: s.position[2] - FOOTPRINT.d / 2,
+            maxZ: s.position[2] + FOOTPRINT.d / 2,
+        },
+    }));
+}
+function BuilderScene() {
+    const three = useThree();
+    const pointer = useMemo(() => createPointerService(), []);
+    const controller = useRef(createPlacementController({ footprint: FOOTPRINT, snapMode: "grid", grid: 1, rules: { bounds: BOUNDS } }));
+    const [preview, setPreview] = useState(null);
+    const [brushCenter, setBrushCenter] = useState([8, -6]);
+    const [placed, setPlaced] = useState(structures.list());
+    const [version, setVersion] = useState(0);
+    const stateRef = useRef({ mode: "build", terraformMode: "raise", snapMode: "grid" });
+    useEffect(() => structures.subscribe(() => setPlaced(structures.list())), []);
+    useEffect(() => {
+        const seed = controller.current.hover({ point: [-6, terrain.sampleHeight(-6, -4), -4], normal: [0, 1, 0] });
+        setPreview(seed);
+    }, []);
+    useEffect(() => {
+        const dom = three.gl.domElement;
+        const onMove = (event) => {
+            const rect = dom.getBoundingClientRect();
+            const ndcX = ((event.clientX - rect.left) / rect.width) * 2 - 1;
+            const ndcY = -(((event.clientY - rect.top) / rect.height) * 2 - 1);
+            pointer.setCursor(ndcX, ndcY, true);
+            pointer.bind({ camera: three.camera, scene: three.scene, width: rect.width, height: rect.height });
+            const hit = pointer.worldHit();
+            if (hit === null)
+                return;
+            const st = stateRef.current;
+            if (st.mode === "build") {
+                controller.current.setRules({ bounds: BOUNDS, obstacles: obstaclesFrom(structures.list()) });
+                setPreview(controller.current.hover({ point: hit.point, normal: hit.normal }));
+            }
+            else {
+                setBrushCenter([hit.point[0], hit.point[2]]);
+            }
+        };
+        const onLeave = () => pointer.setCursor(0, 0, false);
+        const onDown = (event) => {
+            if (event.button !== 0)
+                return;
+            const st = stateRef.current;
+            if (st.mode === "build") {
+                const commit = controller.current.commit();
+                if (commit === null)
+                    return;
+                structures.add({
+                    catalogId: "hut",
+                    position: [commit.center[0], terrain.sampleHeight(commit.center[0], commit.center[1]), commit.center[1]],
+                    rotationY: commit.rotationY,
+                });
+            }
+            else {
+                const center = brushCenter;
+                if (center === null)
+                    return;
+                if (st.terraformMode === "raise")
+                    brush.raise(center);
+                else if (st.terraformMode === "lower")
+                    brush.lower(center);
+                else if (st.terraformMode === "flatten")
+                    brush.flatten(center);
+                else
+                    brush.paint(center, "gravel");
+                setVersion((v) => v + 1);
+            }
+        };
+        const onKey = (event) => {
+            const st = stateRef.current;
+            if (event.code === "KeyB")
+                st.mode = "build";
+            else if (event.code === "KeyT")
+                st.mode = "terraform";
+            else if (event.code === "KeyR")
+                setPreview(controller.current.rotate());
+            else if (event.code === "KeyG") {
+                st.snapMode = controller.current.cycleSnapMode();
+                setPreview(controller.current.current());
+            }
+            else if (event.code === "Digit1")
+                st.terraformMode = "raise";
+            else if (event.code === "Digit2")
+                st.terraformMode = "lower";
+            else if (event.code === "Digit3")
+                st.terraformMode = "flatten";
+            else if (event.code === "Digit4")
+                st.terraformMode = "paint";
+        };
+        dom.addEventListener("pointermove", onMove);
+        dom.addEventListener("pointerleave", onLeave);
+        dom.addEventListener("pointerdown", onDown);
+        window.addEventListener("keydown", onKey);
+        return () => {
+            dom.removeEventListener("pointermove", onMove);
+            dom.removeEventListener("pointerleave", onLeave);
+            dom.removeEventListener("pointerdown", onDown);
+            window.removeEventListener("keydown", onKey);
+        };
+    }, [pointer, three, brushCenter]);
+    const invalidGhost = useMemo(() => {
+        const c = createPlacementController({ footprint: FOOTPRINT, snapMode: "free", rules: { bounds: BOUNDS, obstacles: obstaclesFrom(structures.list()) } });
+        return c.hover({ point: [-6, terrain.sampleHeight(-6, 4) + 0.05, 4], normal: [0, 1, 0] });
+    }, [placed]);
+    return (_jsxs(_Fragment, { children: [_jsx("hemisphereLight", { args: ["#cfe8ff", "#3a3320", 0.8] }), _jsx(EditableGround, { terrain: terrain, bounds: BOUNDS, version: version, baseColor: "#4b7f3f" }), placed.map((structure) => (_jsx(Hut, { structure: structure }, structure.id))), _jsx(PlacementGhost, { preview: preview, height: HUT_HEIGHT }), _jsx(PlacementGhost, { preview: invalidGhost, height: HUT_HEIGHT }), _jsx(TerraformBrushCursor, { center: brushCenter, radius: brush.config().radius, mode: "raise" })] }));
+}
+const game = defineGame({
+    name: "builder-sandbox",
+    assets: createAssetCatalog(),
+    multiplayer: null,
+    inventories: {},
+    input: {
+        moveForward: ["KeyW"],
+        moveBack: ["KeyS"],
+        moveLeft: ["KeyA"],
+        moveRight: ["KeyD"],
+    },
+});
+function onInit(_ctx) {
+    seedScene();
+}
+function onNewPlayer(_ctx) { }
+function onTick(_ctx, _dt) { }
+function BuilderUI() {
+    return (_jsxs("div", { className: "pointer-events-none absolute inset-0 font-sans text-white", children: [_jsxs("div", { className: "absolute left-4 top-4 rounded-lg border border-amber-300/25 bg-neutral-900/80 px-4 py-3 shadow-xl backdrop-blur-sm", children: [_jsx("h1", { className: "text-sm font-semibold tracking-wide text-amber-200", children: "Build & Terraform Sandbox" }), _jsx("p", { className: "text-xs text-white/60", children: "Ghost placement \u00B7 valid/invalid tint \u00B7 terraform brush" })] }), _jsxs("div", { className: "absolute bottom-4 left-4 w-72 rounded-lg border border-white/15 bg-neutral-900/80 p-3 text-[13px] leading-6 shadow-xl backdrop-blur-sm", children: [_jsx("div", { className: "mb-1 border-b border-white/10 pb-1 text-[10px] font-semibold uppercase tracking-widest text-white/45", children: "Tools" }), _jsxs("ul", { className: "text-white/80", children: [_jsxs("li", { children: [_jsx("span", { className: "text-amber-300", children: "B" }), " \u2014 build mode \u00B7 ", _jsx("span", { className: "text-amber-300", children: "Left-click" }), " place hut"] }), _jsxs("li", { children: [_jsx("span", { className: "text-amber-300", children: "R" }), " \u2014 rotate ghost \u00B7 ", _jsx("span", { className: "text-amber-300", children: "G" }), " \u2014 grid/free/surface snap"] }), _jsxs("li", { children: [_jsx("span", { className: "text-amber-300", children: "T" }), " \u2014 terraform \u00B7 ", _jsx("span", { className: "text-amber-300", children: "1-4" }), " raise/lower/flatten/paint"] }), _jsxs("li", { children: [_jsx("span", { className: "text-emerald-300", children: "Green ghost" }), " valid \u00B7 ", _jsx("span", { className: "text-red-300", children: "Red ghost" }), " blocked"] })] })] })] }));
+}
+export const builderDemoGame = {
+    game,
+    content: {},
+    loop: { onInit, onNewPlayer, onTick },
+    GameUI: BuilderUI,
+    environment: BuilderScene,
+    camera: {
+        perspective: "third",
+        followEnabled: false,
+        initialDistance: 46,
+        initialHeight: 40,
+        minDistance: 14,
+        maxDistance: 120,
+        targetHeight: 1,
+        targetOffset: { x: 0, z: -2 },
+        maxPolarAngle: 1.15,
+    },
+};

package/dist/demo/demoGame.js

@@ -2,7 +2,7 @@ import { 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 { CurrencyPill, HealthBar, SlotGrid } from "@jgengine/react/components";
-import { useFeed, useGameStore, usePlayer, useTarget } from "@jgengine/react/hooks";
+import { useFeed, useGameClock, useGameStore, usePlayer, useTarget } from "@jgengine/react/hooks";
 const HERO = "hero";
 const MOB = "gloomSlime";
 const LOOT_TABLE = "slime-drops";
@@ -39,6 +39,7 @@ const game = defineGame({
     assets: createAssetCatalog(),
     multiplayer: null,
     inventories: { [HOTBAR]: { slots: 4, hud: "hotbar" } },
+    time: { start: 8 * 3600, speeds: [1, 2, 3, 4] },
     input: {
         moveForward: ["KeyW"],
         moveBack: ["KeyS"],
@@ -185,9 +186,16 @@ function KillFeedPanel() {
 function HotbarPanel() {
     return (_jsx(SlotGrid, { inventoryId: HOTBAR, className: "flex gap-1.5", renderSlot: (slot, index) => (_jsxs("div", { className: "w-16 rounded border border-white/20 bg-black/60 px-1.5 py-1 text-center text-[11px]", children: [_jsx("span", { className: "text-white/50", children: index + 1 }), _jsx("p", { className: "truncate text-white", children: slot === null ? "—" : slot.itemId })] })) }));
 }
+function ClockPanel() {
+    const { paused, playSpeed, speeds, calendar, controls } = useGameClock();
+    const pad = (value) => value.toString().padStart(2, "0");
+    return (_jsxs("div", { className: "pointer-events-auto flex items-center gap-2 rounded bg-black/60 px-2 py-1 text-xs", children: [_jsxs("span", { className: "tabular-nums text-white", children: ["Day ", calendar.day + 1, " \u00B7 ", pad(calendar.hour), ":", pad(calendar.minute)] }), _jsx("button", { onClick: () => controls.toggle(), className: "rounded border border-white/25 px-1.5 py-0.5 text-white/80 hover:bg-white/10", children: paused ? "▶" : "⏸" }), _jsx("div", { className: "flex gap-0.5", children: speeds.map((speed) => (_jsxs("button", { onClick: () => controls.setSpeed(speed), className: `rounded border px-1.5 py-0.5 ${!paused && speed === playSpeed
+                        ? "border-amber-300 bg-amber-300/20 text-amber-200"
+                        : "border-white/25 text-white/70 hover:bg-white/10"}`, children: [speed, "\u00D7"] }, speed))) })] }));
+}
 function DemoGameUI() {
     const player = usePlayer();
-    return (_jsxs("div", { className: "pointer-events-none absolute inset-0 font-mono text-white", children: [_jsx("div", { className: "absolute left-1/2 top-4 w-56 -translate-x-1/2", children: _jsx(TargetPanel, { userId: player.userId }) }), _jsxs("div", { className: "absolute right-4 top-4 flex flex-col items-end gap-2", children: [_jsx(CurrencyPill, { currencyId: GOLD, className: "rounded bg-black/60 px-2 py-1 text-sm text-amber-300" }), _jsx(KillFeedPanel, {})] }), _jsx("div", { className: "absolute bottom-4 left-4 w-64", children: _jsx(VitalsPanel, { userId: player.userId }) }), _jsx("div", { className: "absolute bottom-4 left-1/2 -translate-x-1/2", children: _jsx(HotbarPanel, {}) }), _jsx("div", { className: "absolute bottom-4 right-4 max-w-[220px] text-right text-[11px] leading-4 text-white/40", children: "WASD move \u00B7 Space jump \u00B7 Shift sprint \u00B7 Q/E turn \u00B7 Tab target \u00B7 Esc clear \u00B7 1 sword \u00B7 2 zap" })] }));
+    return (_jsxs("div", { className: "pointer-events-none absolute inset-0 font-mono text-white", children: [_jsx("div", { className: "absolute left-4 top-4", children: _jsx(ClockPanel, {}) }), _jsx("div", { className: "absolute left-1/2 top-4 w-56 -translate-x-1/2", children: _jsx(TargetPanel, { userId: player.userId }) }), _jsxs("div", { className: "absolute right-4 top-4 flex flex-col items-end gap-2", children: [_jsx(CurrencyPill, { currencyId: GOLD, className: "rounded bg-black/60 px-2 py-1 text-sm text-amber-300" }), _jsx(KillFeedPanel, {})] }), _jsx("div", { className: "absolute bottom-4 left-4 w-64", children: _jsx(VitalsPanel, { userId: player.userId }) }), _jsx("div", { className: "absolute bottom-4 left-1/2 -translate-x-1/2", children: _jsx(HotbarPanel, {}) }), _jsx("div", { className: "absolute bottom-4 right-4 max-w-[220px] text-right text-[11px] leading-4 text-white/40", children: "WASD move \u00B7 Space jump \u00B7 Shift sprint \u00B7 Q/E turn \u00B7 Tab target \u00B7 Esc clear \u00B7 1 sword \u00B7 2 zap" })] }));
 }
 export const demoGame = {
     game,

package/dist/demo/environmentShowcase.d.ts

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

package/dist/demo/environmentShowcase.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { building, environment, grass, ocean, rain, terrain, } from "@jgengine/core/world/features";
+import { EnvironmentScene } from "../environment/EnvironmentScene.js";
+import { demoGame } from "./demoGame.js";
+const showcase = environment({
+    terrain: terrain({ bounds: { w: 220, d: 220 }, height: 4, frequency: 0.035, seed: "showcase", waterLevel: -1 }),
+    vegetation: grass({ area: { w: 120, d: 120 }, density: 5, colors: ["#31531f", "#8fbf4a"], seed: "showcase" }),
+    water: ocean({ bounds: { w: 520, d: 520 }, level: -1.4, waveHeight: 0.9, waveSpeed: 0.5, color: "#1f6f92" }),
+    weather: rain({ area: { w: 160, d: 160, h: 70 }, density: 0.5, wind: [1.4, 0.4] }),
+    structures: building({ count: 6, footprint: { w: 12, d: 9 }, stories: [3, 7], storyHeight: 2.8, spacing: 6, seed: "showcase" }),
+});
+export const environmentShowcaseGame = {
+    ...demoGame,
+    environment: () => _jsx(EnvironmentScene, { feature: showcase }),
+};

package/dist/demo/mapDemo.d.ts

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

package/dist/demo/mapDemo.js

@@ -0,0 +1,206 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useSyncExternalStore } from "react";
+import { defineGame } from "@jgengine/core/game/defineGame";
+import { createPingSystem, DEFAULT_PING_CATEGORIES, PING_FEED_ACTION, } from "@jgengine/core/game/ping";
+import { createAssetCatalog } from "@jgengine/core/scene/assetCatalog";
+import { environment, grass, terrain } from "@jgengine/core/world/features";
+import { createFogField } from "@jgengine/core/world/fog";
+import { createMarkerSet } from "@jgengine/core/world/markers";
+import { headingToBearing } from "@jgengine/core/world/minimap";
+import { resolveTerrainField } from "@jgengine/core/world/terrain";
+import { Compass, Minimap, WorldMap } from "@jgengine/react/map";
+import { usePlayer, useSceneEntities, useFeed } from "@jgengine/react/hooks";
+import { EnvironmentScene } from "../environment/EnvironmentScene.js";
+import { bakeTerrainMap } from "../map/terrainMap.js";
+import { MapMarkerBeacons } from "../map/MapMarkerBeacons.js";
+const SCOUT = "scout";
+const RAIDER = "raider";
+const CACHE = "cache";
+const HAZARD = "hazard";
+const RAIDER_ID = "raider-1";
+const RAIDER_MARKER = "raider-marker";
+const BOUNDS = { minX: -60, minZ: -60, maxX: 60, maxZ: 60 };
+const FOG_CELL = 6;
+const terrainFeature = environment({
+    terrain: terrain({ bounds: { w: 120, d: 120 }, height: 5, frequency: 0.03, seed: "extraction", waterLevel: -2 }),
+    vegetation: grass({ area: { w: 100, d: 100 }, density: 4, colors: ["#2f4f1e", "#8fbf4a"], seed: "extraction" }),
+});
+const objectPingCategory = {
+    [CACHE]: "loot",
+    [HAZARD]: "danger",
+};
+const entityCatalog = {
+    [SCOUT]: { movement: { walkSpeed: 6 }, role: "player" },
+    [RAIDER]: { movement: { walkSpeed: 4 }, role: "enemy" },
+};
+const objectCatalog = {
+    [CACHE]: {},
+    [HAZARD]: {},
+};
+const OBJECTIVES = [
+    { id: "obj-extract", label: "Extraction", position: [44, 0, -46] },
+    { id: "obj-relay", label: "Relay", position: [-40, 0, 30] },
+];
+const CACHES = [
+    [18, 0, 12],
+    [-26, 0, -18],
+    [8, 0, -34],
+];
+const HAZARDS = [[-12, 0, -6]];
+const terrainField = resolveTerrainField(terrainFeature.terrain);
+const markerSet = createMarkerSet();
+const fogField = createFogField({ bounds: BOUNDS, cellSize: FOG_CELL });
+let pingSystem = null;
+let raiderAngle = 0;
+let lastPlayerXZ = null;
+let worldMapOpen = true;
+const mapListeners = new Set();
+function setWorldMapOpen(open) {
+    worldMapOpen = open;
+    for (const listener of mapListeners)
+        listener();
+}
+const game = defineGame({
+    name: "extraction-map",
+    assets: createAssetCatalog(),
+    multiplayer: null,
+    inventories: {},
+    input: {
+        moveForward: ["KeyW"],
+        moveBack: ["KeyS"],
+        moveLeft: ["KeyA"],
+        moveRight: ["KeyD"],
+        ping: ["KeyQ"],
+        toggleMap: ["KeyM"],
+    },
+});
+function seedMarkers() {
+    markerSet.clear();
+    for (const objective of OBJECTIVES) {
+        markerSet.add({ id: objective.id, kind: "objective", position: objective.position, label: objective.label });
+    }
+    CACHES.forEach((position, index) => {
+        markerSet.add({ id: `cache-${index}`, kind: "loot", position, label: "Supply cache" });
+    });
+    HAZARDS.forEach((position, index) => {
+        markerSet.add({ id: `hazard-${index}`, kind: "danger", position, label: "Minefield" });
+    });
+}
+function onInit(ctx) {
+    raiderAngle = 0;
+    lastPlayerXZ = null;
+    worldMapOpen = true;
+    fogField.reset();
+    seedMarkers();
+    fogField.reveal(0, 0, 22);
+    fogField.revealAlong([0, 0], [18, 12], 10);
+    fogField.revealAlong([0, 0], [-26, -18], 8);
+    pingSystem = createPingSystem({
+        markers: markerSet,
+        feed: { push: (action, entry) => ctx.game.feed.push(action, entry) },
+        party: ctx.game.social.party,
+        ttlMs: 45_000,
+        categories: DEFAULT_PING_CATEGORIES,
+        classify: {
+            roleOf: (id) => {
+                const entity = ctx.scene.entity.get(id);
+                return entity === null ? null : entityCatalog[entity.name]?.role ?? null;
+            },
+            categoryOf: (id) => {
+                const object = ctx.scene.object.get(id);
+                return object === null ? null : objectPingCategory[object.catalogId] ?? null;
+            },
+        },
+    });
+    ctx.game.commands.define("map.ping", {
+        apply(state, input) {
+            if (pingSystem === null)
+                return state;
+            pingSystem.ping(state.player.userId, input);
+            return state;
+        },
+    });
+    ctx.game.commands.define("ui.toggleMap", {
+        apply(state) {
+            setWorldMapOpen(!worldMapOpen);
+            return state;
+        },
+    });
+    for (const position of CACHES)
+        ctx.scene.object.place(CACHE, position[0], 0, position[2]);
+    for (const position of HAZARDS)
+        ctx.scene.object.place(HAZARD, position[0], 0, position[2]);
+}
+function onNewPlayer(ctx) {
+    ctx.scene.entity.spawn(SCOUT, { id: ctx.player.userId, position: [0, 0, 0], role: "player" });
+    ctx.scene.entity.spawn(RAIDER, { id: RAIDER_ID, position: [24, 0, -24], role: "npc" });
+    markerSet.add({ id: RAIDER_MARKER, kind: "enemy", position: [24, 0, -24], label: "Raider" });
+    if (pingSystem !== null) {
+        pingSystem.ping(ctx.player.userId, {
+            point: [30, 0, 8],
+            normal: [0, 1, 0],
+            entity: null,
+            object: null,
+        }, "location");
+    }
+}
+function onTick(ctx, dt) {
+    raiderAngle += dt * 0.4;
+    const raiderX = 24 + Math.cos(raiderAngle) * 14;
+    const raiderZ = -24 + Math.sin(raiderAngle) * 14;
+    ctx.scene.entity.setPose(RAIDER_ID, { position: [raiderX, 0, raiderZ], rotationY: raiderAngle, dt });
+    markerSet.add({ id: RAIDER_MARKER, kind: "enemy", position: [raiderX, 0, raiderZ], label: "Raider" });
+    const player = ctx.scene.entity.get(ctx.player.userId);
+    if (player !== null) {
+        const here = [player.position[0], player.position[2]];
+        if (lastPlayerXZ === null)
+            fogField.reveal(here[0], here[1], 14);
+        else
+            fogField.revealAlong(lastPlayerXZ, here, 14);
+        lastPlayerXZ = here;
+    }
+    markerSet.prune(Date.now());
+}
+function useWorldMapOpen() {
+    return useSyncExternalStore((listener) => {
+        mapListeners.add(listener);
+        return () => mapListeners.delete(listener);
+    }, () => worldMapOpen, () => worldMapOpen);
+}
+function MapUI() {
+    const player = usePlayer();
+    const entities = useSceneEntities();
+    const pings = useFeed({ action: PING_FEED_ACTION, limit: 3 });
+    const open = useWorldMapOpen();
+    const self = entities.find((entity) => entity.id === player.userId) ??
+        entities.find((entity) => entity.role === "player") ??
+        null;
+    const center = self === null ? [0, 0] : [self.position[0], self.position[2]];
+    const heading = self === null ? 0 : headingToBearing(self.rotationY);
+    const baked = useMemo(() => bakeTerrainMap(terrainField, BOUNDS, { resolution: 160 }), []);
+    const background = baked?.url;
+    return (_jsxs("div", { className: "pointer-events-none absolute inset-0 font-sans text-white", children: [_jsx("div", { className: "absolute left-1/2 top-4 -translate-x-1/2", children: _jsx(Compass, { heading: heading, center: center, markers: markerSet, width: 360 }) }), open ? (_jsx("div", { className: "pointer-events-auto absolute left-4 top-4", children: _jsx(WorldMap, { markers: markerSet, bounds: BOUNDS, fog: fogField, player: center, heading: heading, background: background, width: 340, onClose: () => setWorldMapOpen(false) }) })) : (_jsxs("div", { className: "absolute left-4 top-16 rounded-md border border-white/15 bg-neutral-900/80 px-3 py-2 text-[11px] text-white/60", children: ["Press ", _jsx("span", { className: "text-emerald-300", children: "M" }), " for the world map"] })), _jsx("div", { className: "absolute bottom-4 right-4", children: _jsx(Minimap, { markers: markerSet, fog: fogField, center: center, heading: heading, worldRadius: 46, size: 188, background: background, mapBounds: BOUNDS, title: "Sector" }) }), _jsxs("div", { className: "absolute bottom-4 left-4 w-64 rounded-lg border border-white/15 bg-neutral-900/80 p-3 text-[12px] leading-6 shadow-xl backdrop-blur-sm", children: [_jsx("div", { className: "mb-1 border-b border-white/10 pb-1 text-[10px] font-semibold uppercase tracking-widest text-white/45", children: "Comms" }), pings.length === 0 ? (_jsx("p", { className: "text-white/50", children: "Press Q to ping what you aim at." })) : (_jsx("ul", { className: "text-white/85", children: [...pings].reverse().map((entry, index) => {
+                            const payload = entry.data;
+                            return (_jsxs("li", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-cyan-300", children: "\u25CE" }), payload.callout] }, `${entry.at}-${index}`));
+                        }) }))] })] }));
+}
+export const mapDemoGame = {
+    game,
+    content: {
+        entityById: (catalogId) => entityCatalog[catalogId] ?? null,
+        objectById: (catalogId) => objectCatalog[catalogId] ?? null,
+    },
+    loop: { onInit, onNewPlayer, onTick },
+    GameUI: MapUI,
+    environment: () => _jsx(EnvironmentScene, { feature: terrainFeature }),
+    WorldOverlay: () => _jsx(MapMarkerBeacons, { markers: markerSet }),
+    pointer: { pingCommand: "map.ping" },
+    camera: {
+        initialDistance: 40,
+        initialHeight: 34,
+        minDistance: 16,
+        maxDistance: 80,
+        targetHeight: 0,
+        maxPolarAngle: 1.35,
+    },
+};

package/dist/demo/pointerDemo.d.ts

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

package/dist/demo/pointerDemo.js

@@ -0,0 +1,151 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { defineGame } from "@jgengine/core/game/defineGame";
+import { contextVerb } from "@jgengine/core/interaction/contextMenu";
+import { createNavGrid, findPath, } from "@jgengine/core/nav/navGrid";
+import { advancePathFollow, createPathFollow, pathFromNav, } from "@jgengine/core/nav/pathFollow";
+import { createAssetCatalog } from "@jgengine/core/scene/assetCatalog";
+const VILLAGER = "villager";
+const CREEP = "creep";
+const BOULDER = "boulder";
+const CREEP_ID = "creep-1";
+const BOUNDS = { minX: -24, minZ: -24, maxX: 24, maxZ: 24 };
+const CELL = 1.5;
+const OBSTACLES = [
+    [-6, -4],
+    [5, 6],
+    [8, -9],
+    [-11, 8],
+];
+const SQUAD = [
+    [3, 0, 2],
+    [-3, 0, 2],
+    [0, 0, 4],
+];
+const CREEP_PATH = [
+    [-22, 0, -16],
+    [-8, 0, -16],
+    [-8, 0, 10],
+    [10, 0, 10],
+    [10, 0, -14],
+    [22, 0, -14],
+];
+const entityCatalog = {
+    [VILLAGER]: {
+        movement: { walkSpeed: 5 },
+        role: "npc",
+        verbs: [contextVerb("Stop", "unit.stop"), contextVerb("Cheer", "unit.cheer")],
+    },
+    [CREEP]: { role: "enemy" },
+};
+const objectCatalog = {
+    [BOULDER]: { verbs: [contextVerb("Inspect", "world.inspect")] },
+};
+let nav = null;
+const movers = new Map();
+let creep = null;
+function orderUnit(ctx, id, point) {
+    if (nav === null)
+        return;
+    const unit = ctx.scene.entity.get(id);
+    if (unit === null)
+        return;
+    const route = findPath(nav, [unit.position[0], unit.position[2]], [point[0], point[2]], { clearance: 1.4 });
+    if (route === null)
+        return;
+    const config = { waypoints: pathFromNav(route, 0), speed: unit.movement.walkSpeed ?? 5 };
+    movers.set(id, { config, state: createPathFollow(config) });
+}
+const game = defineGame({
+    name: "pointer-commander",
+    assets: createAssetCatalog(),
+    multiplayer: null,
+    inventories: {},
+    input: {
+        moveForward: ["KeyW"],
+        moveBack: ["KeyS"],
+        moveLeft: ["KeyA"],
+        moveRight: ["KeyD"],
+    },
+});
+function onInit(ctx) {
+    movers.clear();
+    creep = null;
+    const grid = createNavGrid({ bounds: BOUNDS, cellSize: CELL });
+    for (const [x, z] of OBSTACLES) {
+        ctx.scene.object.place(BOULDER, x, 0, z);
+        grid.blockAabb({ minX: x - 1.6, minZ: z - 1.6, maxX: x + 1.6, maxZ: z + 1.6 });
+    }
+    nav = grid;
+    ctx.game.commands.define("unit.order", {
+        apply(state, input) {
+            for (const id of input.selection)
+                orderUnit(state, id, input.point);
+            return state;
+        },
+    });
+    ctx.game.commands.define("unit.stop", {
+        apply(state, input) {
+            movers.delete(input.target);
+            return state;
+        },
+    });
+    ctx.game.commands.define("unit.cheer", {
+        apply(state, input) {
+            state.scene.entity.floatText({ instanceId: input.target, text: "For the realm!", kind: "info" });
+            return state;
+        },
+    });
+    ctx.game.commands.define("world.inspect", {
+        apply(state, input) {
+            if (input.point !== undefined)
+                state.scene.entity.floatText({ position: input.point, text: "Granite", kind: "info" });
+            return state;
+        },
+    });
+}
+function onNewPlayer(ctx) {
+    ctx.scene.entity.spawn(VILLAGER, { id: ctx.player.userId, position: [0, 0, 0], role: "player" });
+    for (const position of SQUAD)
+        ctx.scene.entity.spawn(VILLAGER, { position, role: "npc" });
+    const config = { waypoints: CREEP_PATH, speed: 3.5, loop: true };
+    creep = { config, state: createPathFollow(config) };
+    ctx.scene.entity.spawn(CREEP, { id: CREEP_ID, position: CREEP_PATH[0], role: "npc" });
+}
+function onTick(ctx, dt) {
+    for (const [id, mover] of movers) {
+        mover.state = advancePathFollow(mover.config, mover.state, dt);
+        ctx.scene.entity.setPose(id, { position: mover.state.position, rotationY: mover.state.heading, dt });
+        if (mover.state.done)
+            movers.delete(id);
+    }
+    if (creep !== null) {
+        creep.state = advancePathFollow(creep.config, creep.state, dt);
+        ctx.scene.entity.setPose(CREEP_ID, { position: creep.state.position, rotationY: creep.state.heading, dt });
+    }
+}
+function CommanderUI() {
+    return (_jsxs("div", { className: "pointer-events-none absolute inset-0 font-sans text-white", children: [_jsxs("div", { className: "absolute left-4 top-4 rounded-lg border border-emerald-300/25 bg-neutral-900/80 px-4 py-3 shadow-xl backdrop-blur-sm", children: [_jsx("h1", { className: "text-sm font-semibold tracking-wide text-emerald-200", children: "RTS Commander" }), _jsx("p", { className: "text-xs text-white/60", children: "Pointer-driven unit command" })] }), _jsxs("div", { className: "absolute bottom-4 left-4 w-72 rounded-lg border border-white/15 bg-neutral-900/80 p-3 text-[13px] leading-6 shadow-xl backdrop-blur-sm", children: [_jsx("div", { className: "mb-1 border-b border-white/10 pb-1 text-[10px] font-semibold uppercase tracking-widest text-white/45", children: "Controls" }), _jsxs("ul", { className: "text-white/80", children: [_jsxs("li", { children: [_jsx("span", { className: "text-emerald-300", children: "Left-drag" }), " \u2014 box-select villagers"] }), _jsxs("li", { children: [_jsx("span", { className: "text-emerald-300", children: "Left-click" }), " \u2014 select one"] }), _jsxs("li", { children: [_jsx("span", { className: "text-emerald-300", children: "Right-click ground" }), " \u2014 move here (A*)"] }), _jsxs("li", { children: [_jsx("span", { className: "text-emerald-300", children: "Right-click unit / rock" }), " \u2014 verb menu"] }), _jsxs("li", { children: [_jsx("span", { className: "text-emerald-300", children: "Middle-drag" }), " \u2014 orbit \u00B7 wheel \u2014 zoom"] })] })] }), _jsx("div", { className: "absolute bottom-4 right-4 max-w-[220px] rounded-lg border border-white/10 bg-neutral-900/70 px-3 py-2 text-right text-[11px] text-white/50", children: "Green ring = selected. The looping creep walks an authored path (tower-defense pathFollow)." })] }));
+}
+export const pointerDemoGame = {
+    game,
+    content: {
+        entityById: (catalogId) => entityCatalog[catalogId] ?? null,
+        objectById: (catalogId) => objectCatalog[catalogId] ?? null,
+    },
+    loop: { onInit, onNewPlayer, onTick },
+    GameUI: CommanderUI,
+    pointer: {
+        select: true,
+        selectFilter: (id) => id !== CREEP_ID,
+        orderCommand: "unit.order",
+        contextMenu: true,
+    },
+    camera: {
+        initialDistance: 34,
+        initialHeight: 28,
+        minDistance: 12,
+        maxDistance: 64,
+        targetHeight: 0,
+        maxPolarAngle: 1.25,
+    },
+};

package/dist/demo/sensorShowcase.d.ts

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