@jgengine/shell 0.6.0 → 0.7.0

package/dist/GamePlayerShell.js

@@ -1,18 +1,27 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Canvas, useFrame, useLoader } from "@react-three/fiber";
-import { Component, useEffect, useMemo, useRef, useState } from "react";
+import { Component, useEffect, useMemo, useRef, useState, useSyncExternalStore, } from "react";
 import * as THREE from "three";
 import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
 import { createActionStateTracker, hotbarSlotActionIndex, resolveActionCommand, toActionStateBindingMap, } from "@jgengine/core/input/actionBindings";
+import { buildContextMenu, contextVerbInput, } from "@jgengine/core/interaction/contextMenu";
 import { resolveActivePrompt } from "@jgengine/core/interaction/proximityPrompt";
+import { aimToPoint } from "@jgengine/core/input/pointer";
+import { createSelectionSet, isMarquee, screenRect, selectWithinRect, } from "@jgengine/core/scene/selection";
 import { advancePlayerMotion, createEmptyMovementKeys, createPlayerMotionState, resolveMovementIntent, } from "@jgengine/core/movement/movementModel";
 import { createGameContext } from "@jgengine/core/runtime/gameContext";
+import { DEFAULT_PICKUP_RADIUS, WORLD_ITEM_ENTITY_NAME } from "@jgengine/core/game/worldItem";
 import { useGameContext } from "@jgengine/react/provider";
 import { useSceneEntities, useSceneObjects, usePlayer, useTarget } from "@jgengine/react/hooks";
 import { GameProvider } from "@jgengine/react/provider";
-import { GAME_SIM_FRAME_PRIORITY, GameOrbitCamera } from "./camera/index.js";
-import { GameFirstPersonCamera } from "./camera/GameFirstPersonCamera.js";
-import { ProjectileTracers, Reticle, WorldEntityBars, WorldFloatText } from "./world/WorldHud.js";
+import { AudioListener, EntityAudioEmitters, ObjectAudioEmitters } from "./audio/AudioComponents.js";
+import { createAudioEngine } from "./audio/audioEngine.js";
+import { GAME_SIM_FRAME_PRIORITY, GameCameraRig, resolveRigKind } from "./camera/index.js";
+import { PointerProbe } from "./pointer/PointerProbe.js";
+import { MarqueeBox, ContextMenuView } from "./pointer/PointerOverlays.js";
+import { createPointerService, POINTER_ENTITY_KEY, POINTER_OBJECT_KEY, } from "./pointer/pointerService.js";
+import { CombatCameraShake, ProjectileTracers, Reticle, WorldEntityBars, WorldFloatText, WorldTelegraphs, } from "./world/WorldHud.js";
+import { WorldItems } from "./world/WorldItems.js";
 const DEV_USER_ID = "dev-player";
 const TURN_SPEED = 2.4;
 const PRIMARY_CLICK_MOVE_THRESHOLD_PX = 6;
@@ -54,18 +63,38 @@ function hotbarIdFor(playable) {
     const hud = declarations.find(([, declaration]) => declaration.hud === "hotbar");
     return (hud ?? declarations[0])?.[0] ?? null;
 }
-function executeHotbarSlot(ctx, hotbarId, slot, yaw, pitch) {
+function executeHotbarSlot(ctx, fromId, hotbarId, slot, yaw, pitch, aimOverride) {
     const stack = ctx.player.inventory.state(hotbarId).slots[slot];
     if (stack === undefined || stack === null)
         return { ok: false, error: `Hotbar slot ${slot + 1} is empty` };
     const result = ctx.item.use.use({
-        from: ctx.player.userId,
+        from: fromId,
         itemId: stack.itemId,
         inventoryId: hotbarId,
-        aim: { yaw, pitch },
+        aim: aimOverride ?? { yaw, pitch },
     });
     return result.error === undefined ? { ok: true } : { ok: false, error: result.error };
 }
+function pointerAimFor(ctx, service) {
+    const hit = service.worldHit();
+    if (hit === null)
+        return undefined;
+    const player = ctx.scene.entity.get(ctx.player.userId);
+    const origin = player === null ? hit.point : player.position;
+    return aimToPoint([origin[0], origin[1] + 1, origin[2]], hit.point);
+}
+function pointerContextMenu(ctx, playable, hit) {
+    if (hit.entity !== null) {
+        const entity = ctx.scene.entity.get(hit.entity);
+        const verbs = entity === null ? undefined : playable.content.entityById?.(entity.name)?.verbs;
+        return buildContextMenu({ kind: "entity", targetId: hit.entity, verbs, point: hit.point });
+    }
+    if (hit.object !== null) {
+        const verbs = ctx.scene.object.catalog(hit.object)?.verbs;
+        return buildContextMenu({ kind: "object", targetId: hit.object, verbs, point: hit.point });
+    }
+    return null;
+}
 function colorFromId(id) {
     let hash = 0;
     for (let index = 0; index < id.length; index += 1)
@@ -103,13 +132,13 @@ function resolveModel(value, assets) {
         return undefined;
     return ref.dims === undefined ? { url: ref.url } : { url: ref.url, dims: ref.dims };
 }
-function EntityMarker({ entity, custom, model, sprite, isLocal, targeted, onSelect, }) {
+function EntityMarker({ entity, custom, model, sprite, isLocal, targeted, selected, onSelect, }) {
     const color = isLocal ? "#4ade80" : entity.role === "npc" ? colorFromId(entity.name) : "#9ca3af";
-    return (_jsxs("group", { position: [entity.position[0], entity.position[1], entity.position[2]], "rotation-y": entity.rotationY, onPointerDown: (event) => {
+    return (_jsxs("group", { position: [entity.position[0], entity.position[1], entity.position[2]], "rotation-y": entity.rotationY, userData: { [POINTER_ENTITY_KEY]: entity.id }, onPointerDown: (event) => {
             event.stopPropagation();
             if (!isLocal)
                 onSelect(entity);
-        }, children: [custom !== undefined && custom !== null ? (custom) : model !== undefined ? (_jsx(EntityModel, { model: model })) : sprite !== undefined ? (_jsx(EntitySprite, { sprite: sprite })) : entity.role === "prop" ? (_jsxs("mesh", { "position-y": 0.5, children: [_jsx("sphereGeometry", { args: [0.45, 16, 16] }), _jsx("meshStandardMaterial", { color: color })] })) : (_jsxs(_Fragment, { children: [_jsxs("mesh", { "position-y": 0.95, children: [_jsx("capsuleGeometry", { args: [0.35, 1.1, 6, 14] }), _jsx("meshStandardMaterial", { color: color })] }), _jsxs("mesh", { position: [0, 1.35, 0.32], children: [_jsx("boxGeometry", { args: [0.16, 0.16, 0.16] }), _jsx("meshStandardMaterial", { color: "#f8fafc" })] })] })), targeted ? (_jsxs("mesh", { "rotation-x": -Math.PI / 2, "position-y": 0.03, children: [_jsx("ringGeometry", { args: [0.6, 0.75, 28] }), _jsx("meshBasicMaterial", { color: "#f87171" })] })) : null] }));
+        }, children: [selected ? (_jsxs("mesh", { "rotation-x": -Math.PI / 2, "position-y": 0.02, children: [_jsx("ringGeometry", { args: [0.8, 0.95, 32] }), _jsx("meshBasicMaterial", { color: "#34d399", transparent: true, opacity: 0.9 })] })) : null, custom !== undefined && custom !== null ? (custom) : model !== undefined ? (_jsx(EntityModel, { model: model })) : sprite !== undefined ? (_jsx(EntitySprite, { sprite: sprite })) : entity.role === "prop" ? (_jsxs("mesh", { "position-y": 0.5, children: [_jsx("sphereGeometry", { args: [0.45, 16, 16] }), _jsx("meshStandardMaterial", { color: color })] })) : (_jsxs(_Fragment, { children: [_jsxs("mesh", { "position-y": 0.95, children: [_jsx("capsuleGeometry", { args: [0.35, 1.1, 6, 14] }), _jsx("meshStandardMaterial", { color: color })] }), _jsxs("mesh", { position: [0, 1.35, 0.32], children: [_jsx("boxGeometry", { args: [0.16, 0.16, 0.16] }), _jsx("meshStandardMaterial", { color: "#f8fafc" })] })] })), targeted ? (_jsxs("mesh", { "rotation-x": -Math.PI / 2, "position-y": 0.03, children: [_jsx("ringGeometry", { args: [0.6, 0.75, 28] }), _jsx("meshBasicMaterial", { color: "#f87171" })] })) : null] }));
 }
 function GroundPlane() {
     const geometry = useMemo(() => {
@@ -142,26 +171,29 @@ function RockField() {
     }), []);
     return (_jsx(_Fragment, { children: rocks.map((rock) => (_jsxs("mesh", { position: [rock.x, 0.25 * rock.scale, rock.z], rotation: [0.1, rock.rotation, -0.08], scale: [rock.scale * 1.4, rock.scale * 0.7, rock.scale], children: [_jsx("dodecahedronGeometry", { args: [0.8, 0] }), _jsx("meshStandardMaterial", { color: "#6b6f63", roughness: 1 })] }, rock.id))) }));
 }
-function WorldView({ entitySprites, entityModels, objectModels, environment: Environment, assets, renderEntity, }) {
+function WorldView({ entitySprites, entityModels, objectModels, environment: Environment, assets, renderEntity, selectedIds, }) {
     const ctx = useGameContext();
     const entities = useSceneEntities();
     const objects = useSceneObjects();
     const player = usePlayer();
     const targetId = useTarget(player.userId);
+    const controlledId = ctx.player.possession.active(player.userId);
     const handleSelect = (entity) => {
         const relation = ctx.scene.entity.canReceive(entity.id, "damage") === null ? "hostile" : "friendly";
-        ctx.scene.entity.setTarget(player.userId, relation === "hostile" || entity.role === "npc" ? entity.id : null);
+        ctx.scene.entity.setTarget(controlledId, relation === "hostile" || entity.role === "npc" ? entity.id : null);
     };
-    return (_jsxs(_Fragment, { children: [Environment !== undefined ? (_jsx(Environment, {})) : (_jsxs(_Fragment, { children: [_jsx(GroundPlane, {}), _jsx("gridHelper", { args: [160, 80, "#3a3f4a", "#2b2f38"], "position-y": 0.01 }), _jsx(RockField, {})] })), entities.map((entity) => (_jsx(EntityMarker, { entity: entity, custom: renderEntity?.(entity), model: resolveModel(entityModels?.[entity.name], assets), sprite: entitySprites?.[entity.name], isLocal: entity.id === player.userId, targeted: entity.id === targetId, onSelect: handleSelect }, entity.id))), objects.map((object) => {
+    return (_jsxs(_Fragment, { children: [Environment !== undefined ? (_jsx(Environment, {})) : (_jsxs(_Fragment, { children: [_jsx(GroundPlane, {}), _jsx("gridHelper", { args: [160, 80, "#3a3f4a", "#2b2f38"], "position-y": 0.01 }), _jsx(RockField, {})] })), entities
+                .filter((entity) => entity.name !== WORLD_ITEM_ENTITY_NAME)
+                .map((entity) => (_jsx(EntityMarker, { entity: entity, custom: renderEntity?.(entity), model: resolveModel(entityModels?.[entity.name], assets), sprite: entitySprites?.[entity.name], isLocal: entity.id === controlledId, targeted: entity.id === targetId, selected: selectedIds.has(entity.id), onSelect: handleSelect }, entity.id))), objects.map((object) => {
                 const model = resolveModel(objectModels?.[object.catalogId], assets) ??
                     resolveModel(object.catalogId, assets);
-                return (_jsx("group", { position: [object.position[0], object.position[1], object.position[2]], "rotation-y": object.rotationY, children: model !== undefined ? (_jsx(EntityModel, { model: model })) : (_jsxs("mesh", { "position-y": 0.5, children: [_jsx("boxGeometry", { args: [1, 1, 1] }), _jsx("meshStandardMaterial", { color: colorFromId(object.catalogId) })] })) }, object.instanceId));
+                return (_jsx("group", { position: [object.position[0], object.position[1], object.position[2]], "rotation-y": object.rotationY, userData: { [POINTER_OBJECT_KEY]: object.instanceId }, children: model !== undefined ? (_jsx(EntityModel, { model: model })) : (_jsxs("mesh", { "position-y": 0.5, children: [_jsx("boxGeometry", { args: [1, 1, 1] }), _jsx("meshStandardMaterial", { color: colorFromId(object.catalogId) })] })) }, object.instanceId));
             })] }));
 }
 function RemotePlayers({ rows }) {
     return (_jsx(_Fragment, { children: rows.map((row) => (_jsxs("group", { position: [row.position.x, row.position.y, row.position.z], "rotation-y": row.rotationY, children: [_jsxs("mesh", { "position-y": 0.95, children: [_jsx("capsuleGeometry", { args: [0.35, 1.1, 6, 14] }), _jsx("meshStandardMaterial", { color: colorFromId(row.userId) })] }), _jsxs("mesh", { position: [0, 1.35, 0.32], children: [_jsx("boxGeometry", { args: [0.16, 0.16, 0.16] }), _jsx("meshStandardMaterial", { color: "#f8fafc" })] })] }, row.userId))) }));
 }
-function FrameDriver({ ctx, playable, tracker, yawRef, pitchRef, primaryClickRef, onRuntimeError, multiplayer, serverIdRef, }) {
+function FrameDriver({ ctx, playable, tracker, yawRef, pitchRef, primaryClickRef, onRuntimeError, multiplayer, serverIdRef, pointerService, pointerAim, pingCommand, }) {
     const motionRef = useRef(createPlayerMotionState());
     const hasReportedTickError = useRef(false);
     const slotActions = useMemo(() => findHotbarSlotActions(playable.game.input), [playable]);
@@ -174,7 +206,7 @@ function FrameDriver({ ctx, playable, tracker, yawRef, pitchRef, primaryClickRef
                 yawRef.current += TURN_SPEED * dt;
             if (tracker.isDown("turnRight"))
                 yawRef.current -= TURN_SPEED * dt;
-            const playerId = ctx.player.userId;
+            const playerId = ctx.player.possession.active(ctx.player.userId);
             const player = ctx.scene.entity.get(playerId);
             const forwardX = Math.sin(yawRef.current);
             const forwardZ = Math.cos(yawRef.current);
@@ -210,9 +242,22 @@ function FrameDriver({ ctx, playable, tracker, yawRef, pitchRef, primaryClickRef
                 else
                     ctx.scene.entity.setTarget(playerId, null);
             }
+            if (pingCommand !== undefined && tracker.wasPressed("ping")) {
+                const hit = pointerService.worldHit();
+                if (hit !== null && ctx.game.commands.has(pingCommand)) {
+                    ctx.game.commands.run(pingCommand, {
+                        point: hit.point,
+                        entity: hit.entity,
+                        object: hit.object,
+                        normal: hit.normal,
+                    });
+                }
+            }
             for (const action of Object.keys(playable.game.input ?? {})) {
                 if (!tracker.wasPressed(action))
                     continue;
+                if (action === "ping" && pingCommand !== undefined)
+                    continue;
                 if (action === "interact") {
                     const prompts = playable.prompts?.(ctx);
                     const focus = prompts === undefined ? null : ctx.scene.entity.get(playerId);
@@ -229,10 +274,11 @@ function FrameDriver({ ctx, playable, tracker, yawRef, pitchRef, primaryClickRef
                     ctx.game.commands.run(command, {});
             }
             if (hotbarId !== null) {
+                const aimOverride = pointerAim ? pointerAimFor(ctx, pointerService) : undefined;
                 for (const { action, slot } of slotActions) {
                     if (!tracker.wasPressed(action))
                         continue;
-                    const result = executeHotbarSlot(ctx, hotbarId, slot, yawRef.current, pitchRef.current);
+                    const result = executeHotbarSlot(ctx, playerId, hotbarId, slot, yawRef.current, pitchRef.current, aimOverride);
                     if (!result.ok)
                         console.warn(`[jgengine:item-use] ${result.error}`);
                 }
@@ -245,7 +291,7 @@ function FrameDriver({ ctx, playable, tracker, yawRef, pitchRef, primaryClickRef
                         ? preferred
                         : slots.findIndex((stack) => stack !== null);
                     if (slot >= 0) {
-                        const result = executeHotbarSlot(ctx, hotbarId, slot, yawRef.current, pitchRef.current);
+                        const result = executeHotbarSlot(ctx, playerId, hotbarId, slot, yawRef.current, pitchRef.current, aimOverride);
                         if (!result.ok)
                             console.warn(`[jgengine:item-use] ${result.error}`);
                     }
@@ -306,7 +352,15 @@ export function GamePlayerShell({ playable, multiplayer = null, }) {
     const cameraDraggingRef = useRef(false);
     const primaryClickRef = useRef(false);
     const pointerDownRef = useRef(null);
+    const marqueeStartRef = useRef(null);
+    const pointerService = useMemo(() => createPointerService(), []);
+    const selection = useMemo(() => createSelectionSet(), [playable]);
+    const [marquee, setMarquee] = useState(null);
+    const [selectedIds, setSelectedIds] = useState(() => new Set());
+    const [contextMenu, setContextMenu] = useState(null);
     const tracker = useMemo(() => createActionStateTracker(toActionStateBindingMap(playable.game.input ?? {})), [playable]);
+    const audioEngine = useMemo(() => createAudioEngine({ sounds: playable.audio?.sounds, buses: playable.audio?.buses }), [playable]);
+    useEffect(() => () => audioEngine.dispose(), [audioEngine]);
     const userId = multiplayer?.userId ?? DEV_USER_ID;
     const reportRuntimeError = (error, phase) => {
         const diagnostic = logRuntimeError(error, phase);
@@ -398,39 +452,156 @@ export function GamePlayerShell({ playable, multiplayer = null, }) {
     useEffect(() => {
         wrapperRef.current?.focus();
     }, [ctx]);
+    useSyncExternalStore(ctx?.subscribe ?? (() => () => undefined), ctx?.version ?? (() => 0), ctx?.version ?? (() => 0));
     if (ctx === null)
         return _jsx("div", { className: "h-full w-full bg-neutral-950" });
     const GameUI = playable.GameUI;
     const WorldOverlay = playable.WorldOverlay;
-    const firstPerson = playable.camera?.perspective === "first";
-    const showReticle = firstPerson && playable.camera?.firstPerson?.reticle !== false;
+    const controlledEntityId = ctx.player.possession.active(userId);
+    const cameraConfig = playable.camera?.followEntityId !== undefined
+        ? playable.camera
+        : { ...playable.camera, followEntityId: controlledEntityId };
+    const rigKind = resolveRigKind(cameraConfig);
+    const firstPerson = rigKind === "first";
+    const showReticle = (firstPerson && playable.camera?.firstPerson?.reticle !== false) || rigKind === "shoulder";
     const worldBars = playable.worldHealthBars;
     const barsStatId = worldBars === undefined || worldBars === false
         ? null
         : worldBars === true
             ? "health"
             : worldBars.statId ?? "health";
+    const pointer = playable.pointer;
+    const pointerUsesLeft = pointer !== undefined && (pointer.select === true || pointer.moveCommand !== undefined);
+    const selectFilter = pointer?.selectFilter;
+    const localXY = (event) => {
+        const rect = wrapperRef.current?.getBoundingClientRect();
+        return rect === undefined
+            ? { x: event.clientX, y: event.clientY }
+            : { x: event.clientX - rect.left, y: event.clientY - rect.top };
+    };
+    const commitSelection = (ids) => {
+        selection.replace(ids);
+        setSelectedIds(new Set(ids));
+    };
+    const finishMarquee = (rect) => {
+        const candidates = [];
+        for (const entity of ctx.scene.entity.list()) {
+            if (selectFilter !== undefined && !selectFilter(entity.id))
+                continue;
+            const screen = pointerService.screenOf(entity.position);
+            if (screen !== null)
+                candidates.push({ id: entity.id, x: screen.x, y: screen.y });
+        }
+        commitSelection(selectWithinRect(candidates, rect));
+    };
+    const handlePointerDown = (event) => {
+        wrapperRef.current?.focus();
+        audioEngine.resume();
+        if (contextMenu !== null)
+            setContextMenu(null);
+        if (event.button === 0) {
+            const point = localXY(event);
+            pointerDownRef.current = point;
+            if (pointer?.select === true)
+                marqueeStartRef.current = point;
+        }
+    };
+    const handlePointerMove = (event) => {
+        if (pointer?.select !== true)
+            return;
+        const start = marqueeStartRef.current;
+        if (start === null || (event.buttons & 1) === 0)
+            return;
+        const point = localXY(event);
+        setMarquee(screenRect(start.x, start.y, point.x, point.y));
+    };
+    const handlePointerUp = (event) => {
+        if (event.button !== 0 || pointerDownRef.current === null)
+            return;
+        const start = pointerDownRef.current;
+        pointerDownRef.current = null;
+        marqueeStartRef.current = null;
+        const end = localXY(event);
+        const rect = screenRect(start.x, start.y, end.x, end.y);
+        const wasMarquee = marquee !== null && isMarquee(rect, PRIMARY_CLICK_MOVE_THRESHOLD_PX);
+        setMarquee(null);
+        if (pointer?.select === true && wasMarquee) {
+            finishMarquee(rect);
+            return;
+        }
+        if (cameraDraggingRef.current)
+            return;
+        if (pointer?.grabWorldItems === true) {
+            const hit = pointerService.worldHit();
+            const itemInstanceId = hit?.entity ?? null;
+            const record = itemInstanceId === null ? null : ctx.scene.worldItem.get(itemInstanceId);
+            if (record !== null && itemInstanceId !== null) {
+                const itemEntity = ctx.scene.entity.get(itemInstanceId);
+                const localPlayer = ctx.scene.entity.get(ctx.player.userId);
+                const pickupRadius = playable.worldItem?.pickupRadius ?? DEFAULT_PICKUP_RADIUS;
+                const withinRadius = itemEntity !== null &&
+                    localPlayer !== null &&
+                    Math.hypot(localPlayer.position[0] - itemEntity.position[0], localPlayer.position[1] - itemEntity.position[1], localPlayer.position[2] - itemEntity.position[2]) <= pickupRadius;
+                if (withinRadius) {
+                    ctx.scene.worldItem.pickup(itemInstanceId, ctx.player.userId);
+                    return;
+                }
+            }
+        }
+        if (pointer?.select === true) {
+            const hit = pointerService.worldHit();
+            if (hit !== null && hit.entity !== null && (selectFilter === undefined || selectFilter(hit.entity))) {
+                commitSelection([hit.entity]);
+            }
+            else {
+                commitSelection([]);
+            }
+            return;
+        }
+        if (pointer?.moveCommand !== undefined) {
+            const hit = pointerService.worldHit();
+            if (hit !== null && ctx.game.commands.has(pointer.moveCommand)) {
+                ctx.game.commands.run(pointer.moveCommand, { point: hit.point, entity: hit.entity, object: hit.object });
+            }
+            return;
+        }
+        const moved = (end.x - start.x) ** 2 + (end.y - start.y) ** 2;
+        if (moved <= PRIMARY_CLICK_MOVE_THRESHOLD_PX * PRIMARY_CLICK_MOVE_THRESHOLD_PX)
+            primaryClickRef.current = true;
+    };
+    const handleContextMenu = (event) => {
+        if (pointer === undefined)
+            return;
+        event.preventDefault();
+        const hit = pointerService.worldHit();
+        if (hit === null)
+            return;
+        if (pointer.contextMenu === true && (hit.entity !== null || hit.object !== null)) {
+            const menu = pointerContextMenu(ctx, playable, hit);
+            if (menu !== null) {
+                const point = localXY(event);
+                setContextMenu({ menu, x: point.x, y: point.y });
+                return;
+            }
+        }
+        if (pointer.select === true && pointer.orderCommand !== undefined && selection.size() > 0) {
+            if (ctx.game.commands.has(pointer.orderCommand)) {
+                ctx.game.commands.run(pointer.orderCommand, { selection: selection.list(), point: hit.point });
+            }
+        }
+    };
+    const handleVerbPick = (verb) => {
+        const state = contextMenu;
+        setContextMenu(null);
+        if (state !== null && ctx.game.commands.has(verb.command)) {
+            ctx.game.commands.run(verb.command, contextVerbInput(state.menu, verb));
+        }
+    };
     return (_jsxs("div", { ref: wrapperRef, tabIndex: 0, className: "relative h-full w-full bg-neutral-950 outline-none", onKeyDown: (event) => {
             if (event.code === "Tab" || event.code === "Space")
                 event.preventDefault();
             tracker.handleDown(event.code);
-        }, onKeyUp: (event) => tracker.handleUp(event.code), onBlur: () => tracker.reset(), onPointerDown: (event) => {
-            wrapperRef.current?.focus();
-            if (event.button === 0) {
-                pointerDownRef.current = { x: event.clientX, y: event.clientY };
-            }
-        }, onPointerUp: (event) => {
-            if (event.button !== 0 || pointerDownRef.current === null)
-                return;
-            const start = pointerDownRef.current;
-            pointerDownRef.current = null;
-            const dx = event.clientX - start.x;
-            const dy = event.clientY - start.y;
-            const moved = dx * dx + dy * dy;
-            if (!cameraDraggingRef.current && moved <= PRIMARY_CLICK_MOVE_THRESHOLD_PX * PRIMARY_CLICK_MOVE_THRESHOLD_PX) {
-                primaryClickRef.current = true;
-            }
-        }, onWheel: (event) => {
+        }, onKeyUp: (event) => tracker.handleUp(event.code), onBlur: () => tracker.reset(), onPointerDown: handlePointerDown, onPointerMove: handlePointerMove, onPointerUp: handlePointerUp, onContextMenu: handleContextMenu, onWheel: (event) => {
             if (ctx === null || !event.shiftKey)
                 return;
             event.preventDefault();
@@ -440,7 +611,7 @@ export function GamePlayerShell({ playable, multiplayer = null, }) {
             else if (event.deltaY > 0 && ctx.game.commands.has("ui.hotbarScrollPrev")) {
                 ctx.game.commands.run("ui.hotbarScrollPrev", {});
             }
-        }, children: [_jsxs(Canvas, { camera: { fov: 55, near: 0.1, far: 300 }, children: [_jsx("color", { attach: "background", args: ["#14161b"] }), _jsx("ambientLight", { intensity: 0.55 }), _jsx("directionalLight", { position: [10, 16, 6], intensity: 1.3 }), _jsxs(GameProvider, { context: ctx, children: [_jsx(WorldView, { entitySprites: playable.entitySprites, entityModels: playable.entityModels, objectModels: playable.objectModels, environment: playable.environment, assets: playable.game.assets, renderEntity: playable.renderEntity }), WorldOverlay !== undefined ? _jsx(WorldOverlay, {}) : null, barsStatId !== null ? _jsx(WorldEntityBars, { statId: barsStatId }) : null, _jsx(WorldFloatText, {}), _jsx(ProjectileTracers, {}), firstPerson ? (_jsx(GameFirstPersonCamera, { yawRef: yawRef, pitchRef: pitchRef, config: playable.camera?.firstPerson, followEntityId: playable.camera?.followEntityId })) : (_jsx(GameOrbitCamera, { yawRef: yawRef, pitchRef: pitchRef, config: playable.camera, followEntityId: playable.camera?.followEntityId, onCameraFollow: playable.camera?.onCameraFollow, onDragChange: (dragging) => {
+        }, children: [_jsxs(Canvas, { camera: { fov: 55, near: 0.1, far: 300 }, children: [_jsx("color", { attach: "background", args: ["#14161b"] }), _jsx("ambientLight", { intensity: 0.55 }), _jsx("directionalLight", { position: [10, 16, 6], intensity: 1.3 }), _jsxs(GameProvider, { context: ctx, children: [_jsx(WorldView, { entitySprites: playable.entitySprites, entityModels: playable.entityModels, objectModels: playable.objectModels, environment: playable.environment, assets: playable.game.assets, renderEntity: playable.renderEntity, selectedIds: selectedIds }), WorldOverlay !== undefined ? _jsx(WorldOverlay, {}) : null, barsStatId !== null ? _jsx(WorldEntityBars, { statId: barsStatId }) : null, _jsx(WorldItems, { config: playable.worldItem }), _jsx(WorldTelegraphs, {}), _jsx(WorldFloatText, {}), _jsx(ProjectileTracers, {}), _jsx(CombatCameraShake, {}), _jsx(AudioListener, { engine: audioEngine }), _jsx(EntityAudioEmitters, { engine: audioEngine, entitySounds: playable.entitySounds }), _jsx(ObjectAudioEmitters, { engine: audioEngine, objectSounds: playable.objectSounds }), _jsx(GameCameraRig, { yawRef: yawRef, pitchRef: pitchRef, config: cameraConfig, pointerControls: pointerUsesLeft, onDragChange: (dragging) => {
                                     cameraDraggingRef.current = dragging;
-                                } }))] }), _jsx(RemotePlayers, { rows: remotePlayers }), _jsx(FrameDriver, { ctx: ctx, playable: playable, tracker: tracker, yawRef: yawRef, pitchRef: pitchRef, primaryClickRef: primaryClickRef, onRuntimeError: reportRuntimeError, multiplayer: multiplayer, serverIdRef: serverIdRef })] }), _jsx(GameUiErrorBoundary, { onRuntimeError: reportRuntimeError, children: _jsx(GameProvider, { context: ctx, children: _jsx(GameUI, {}) }) }), showReticle ? _jsx(Reticle, {}) : null, _jsx(DiagnosticOverlay, { diagnostics: diagnostics })] }));
+                                } }), _jsx(PointerProbe, { service: pointerService })] }), _jsx(RemotePlayers, { rows: remotePlayers }), _jsx(FrameDriver, { ctx: ctx, playable: playable, tracker: tracker, yawRef: yawRef, pitchRef: pitchRef, primaryClickRef: primaryClickRef, onRuntimeError: reportRuntimeError, multiplayer: multiplayer, serverIdRef: serverIdRef, pointerService: pointerService, pointerAim: pointer?.aim === true, pingCommand: pointer?.pingCommand })] }), _jsx(GameUiErrorBoundary, { onRuntimeError: reportRuntimeError, children: _jsx(GameProvider, { context: ctx, children: _jsx(GameUI, {}) }) }), showReticle ? _jsx(Reticle, {}) : null, marquee !== null ? _jsx(MarqueeBox, { rect: marquee }) : null, contextMenu !== null ? (_jsx(ContextMenuView, { menu: contextMenu.menu, x: contextMenu.x, y: contextMenu.y, onPick: handleVerbPick, onClose: () => setContextMenu(null) })) : null, _jsx(DiagnosticOverlay, { diagnostics: diagnostics })] }));
 }

package/dist/audio/AudioComponents.d.ts

@@ -0,0 +1,12 @@
+import type { AudioEngine } from "./audioEngine.js";
+export declare function AudioListener({ engine }: {
+    engine: AudioEngine;
+}): null;
+export declare function EntityAudioEmitters({ engine, entitySounds, }: {
+    engine: AudioEngine;
+    entitySounds: Record<string, string> | undefined;
+}): null;
+export declare function ObjectAudioEmitters({ engine, objectSounds, }: {
+    engine: AudioEngine;
+    objectSounds: Record<string, string> | undefined;
+}): null;

package/dist/audio/AudioComponents.js

@@ -0,0 +1,53 @@
+import { useFrame, useThree } from "@react-three/fiber";
+import { useEffect, useRef } from "react";
+import { useSceneEntities, useSceneObjects } from "@jgengine/react/hooks";
+export function AudioListener({ engine }) {
+    const camera = useThree((state) => state.camera);
+    useFrame(() => {
+        engine.setListenerPose({ x: camera.position.x, y: camera.position.y, z: camera.position.z });
+    });
+    return null;
+}
+function useTrackedEmitters(engine, soundByKey, entries) {
+    const handles = useRef(new Map());
+    useEffect(() => () => {
+        for (const handle of handles.current.values())
+            handle.stop();
+        handles.current.clear();
+    }, [engine]);
+    useFrame(() => {
+        if (soundByKey === undefined)
+            return;
+        const live = new Set();
+        for (const entry of entries) {
+            const soundId = soundByKey[entry.key];
+            if (soundId === undefined)
+                continue;
+            live.add(entry.id);
+            let handle = handles.current.get(entry.id);
+            if (handle === undefined) {
+                handle = engine.playLoop(soundId, { x: entry.position[0], y: entry.position[1], z: entry.position[2] }) ?? undefined;
+                if (handle !== undefined)
+                    handles.current.set(entry.id, handle);
+                continue;
+            }
+            handle.setPosition({ x: entry.position[0], y: entry.position[1], z: entry.position[2] });
+        }
+        for (const [id, handle] of handles.current) {
+            if (!live.has(id)) {
+                handle.stop();
+                handles.current.delete(id);
+            }
+        }
+    });
+}
+export function EntityAudioEmitters({ engine, entitySounds, }) {
+    const entities = useSceneEntities();
+    useTrackedEmitters(engine, entitySounds, entities.map((entity) => ({ id: entity.id, key: entity.name, position: entity.position })));
+    return null;
+}
+export function ObjectAudioEmitters({ engine, objectSounds, }) {
+    const objects = useSceneObjects();
+    useTrackedEmitters(engine, objectSounds, objects.map((object) => ({ id: object.instanceId, key: object.catalogId, position: object.position })));
+    return null;
+}

package/dist/audio/audioEngine.d.ts

@@ -0,0 +1,23 @@
+import { type AudioBusDef, type SoundDef } from "@jgengine/core/audio/audioFalloff";
+export interface Vec3 {
+    x: number;
+    y: number;
+    z: number;
+}
+export interface AudioSceneConfig {
+    sounds?: Record<string, SoundDef>;
+    buses?: Record<string, AudioBusDef>;
+}
+export interface AudioEmitterHandle {
+    setPosition(position: Vec3): void;
+    stop(): void;
+}
+export interface AudioEngine {
+    setListenerPose(position: Vec3): void;
+    playOneShot(soundId: string, position?: Vec3): void;
+    playLoop(soundId: string, position?: Vec3): AudioEmitterHandle | null;
+    setBusGain(busId: string, gain: number): void;
+    resume(): void;
+    dispose(): void;
+}
+export declare function createAudioEngine(config?: AudioSceneConfig): AudioEngine;

package/dist/audio/audioEngine.js

@@ -0,0 +1,110 @@
+import { distance3, resolveEmitterGain } from "@jgengine/core/audio/audioFalloff";
+function createNoopEngine() {
+    return {
+        setListenerPose: () => undefined,
+        playOneShot: () => undefined,
+        playLoop: () => null,
+        setBusGain: () => undefined,
+        resume: () => undefined,
+        dispose: () => undefined,
+    };
+}
+function resolveAudioContextCtor() {
+    if (typeof window === "undefined")
+        return undefined;
+    return (window.AudioContext ??
+        window.webkitAudioContext);
+}
+export function createAudioEngine(config = {}) {
+    const sounds = config.sounds ?? {};
+    const busDefs = config.buses ?? {};
+    const AudioContextCtor = resolveAudioContextCtor();
+    if (AudioContextCtor === undefined)
+        return createNoopEngine();
+    let context;
+    let masterGain;
+    try {
+        context = new AudioContextCtor();
+        masterGain = context.createGain();
+        masterGain.connect(context.destination);
+    }
+    catch {
+        return createNoopEngine();
+    }
+    const busGains = new Map();
+    function busGainNode(busId) {
+        let node = busGains.get(busId);
+        if (node === undefined) {
+            node = context.createGain();
+            node.gain.value = busDefs[busId]?.gain ?? 1;
+            node.connect(masterGain);
+            busGains.set(busId, node);
+        }
+        return node;
+    }
+    const bufferCache = new Map();
+    function loadBuffer(url) {
+        let pending = bufferCache.get(url);
+        if (pending === undefined) {
+            pending = fetch(url)
+                .then((response) => response.arrayBuffer())
+                .then((data) => context.decodeAudioData(data))
+                .catch(() => null);
+            bufferCache.set(url, pending);
+        }
+        return pending;
+    }
+    let listenerPosition = { x: 0, y: 0, z: 0 };
+    function playInternal(soundId, position, loop) {
+        const sound = sounds[soundId];
+        if (sound === undefined)
+            return null;
+        const bus = busGainNode(sound.bus);
+        let currentPosition = position ?? listenerPosition;
+        let gainNode = null;
+        let stopped = false;
+        void loadBuffer(sound.url).then((buffer) => {
+            if (stopped || buffer === null)
+                return;
+            const sourceNode = context.createBufferSource();
+            sourceNode.buffer = buffer;
+            sourceNode.loop = loop || (sound.loop ?? false);
+            gainNode = context.createGain();
+            gainNode.gain.value = resolveEmitterGain(distance3(currentPosition, listenerPosition), sound, 1);
+            sourceNode.connect(gainNode);
+            gainNode.connect(bus);
+            sourceNode.start();
+        });
+        return {
+            setPosition(next) {
+                currentPosition = next;
+                if (gainNode !== null) {
+                    gainNode.gain.value = resolveEmitterGain(distance3(currentPosition, listenerPosition), sound, 1);
+                }
+            },
+            stop() {
+                stopped = true;
+            },
+        };
+    }
+    return {
+        setListenerPose(position) {
+            listenerPosition = position;
+        },
+        playOneShot(soundId, position) {
+            playInternal(soundId, position, false);
+        },
+        playLoop(soundId, position) {
+            return playInternal(soundId, position, true);
+        },
+        setBusGain(busId, gain) {
+            busGainNode(busId).gain.value = gain;
+        },
+        resume() {
+            void context.resume().catch(() => undefined);
+        },
+        dispose() {
+            void context.close().catch(() => undefined);
+        },
+    };
+}

package/dist/camera/GameCameraRig.d.ts

@@ -0,0 +1,11 @@
+import { type MutableRefObject } from "react";
+import type { CameraRigKind, GameCameraConfig } from "@jgengine/core/game/playableGame";
+export interface GameCameraRigProps {
+    yawRef: MutableRefObject<number>;
+    pitchRef: MutableRefObject<number>;
+    config?: GameCameraConfig;
+    onDragChange?: (dragging: boolean) => void;
+    pointerControls?: boolean;
+}
+export declare function resolveRigKind(config: GameCameraConfig | undefined): CameraRigKind;
+export declare function GameCameraRig({ yawRef, pitchRef, config, onDragChange, pointerControls }: GameCameraRigProps): import("react").JSX.Element;

package/dist/camera/GameCameraRig.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { ChaseRig, CinematicRig, LockOnRig, ObserverRig, RtsRig, ShoulderRig, TopDownRig, } from "./cameraRigs.js";
+import { GameFirstPersonCamera } from "./GameFirstPersonCamera.js";
+import { GameOrbitCamera } from "./GameOrbitCamera.js";
+import { CameraShakeContext, createCameraShakeChannel } from "./shakeChannel.js";
+export function resolveRigKind(config) {
+    if (config?.rig !== undefined)
+        return config.rig;
+    if (config?.perspective === "first")
+        return "first";
+    return "orbit";
+}
+export function GameCameraRig({ yawRef, pitchRef, config, onDragChange, pointerControls }) {
+    const channel = useMemo(() => createCameraShakeChannel(config?.shake?.decayPerSecond), [config?.shake?.decayPerSecond]);
+    const followEntityId = config?.followEntityId;
+    const rig = (() => {
+        if (config?.cinematic !== undefined) {
+            return _jsx(CinematicRig, { yawRef: yawRef, pitchRef: pitchRef, config: config, followEntityId: followEntityId });
+        }
+        const kind = resolveRigKind(config);
+        switch (kind) {
+            case "first":
+                return (_jsx(GameFirstPersonCamera, { yawRef: yawRef, pitchRef: pitchRef, config: config?.firstPerson, followEntityId: followEntityId ?? undefined }));
+            case "topDown":
+                return _jsx(TopDownRig, { yawRef: yawRef, pitchRef: pitchRef, config: config, followEntityId: followEntityId });
+            case "rts":
+                return _jsx(RtsRig, { yawRef: yawRef, pitchRef: pitchRef, config: config, followEntityId: followEntityId });
+            case "shoulder":
+                return _jsx(ShoulderRig, { yawRef: yawRef, pitchRef: pitchRef, config: config, followEntityId: followEntityId });
+            case "lockOn":
+                return _jsx(LockOnRig, { yawRef: yawRef, pitchRef: pitchRef, config: config, followEntityId: followEntityId });
+            case "chase":
+                return _jsx(ChaseRig, { yawRef: yawRef, pitchRef: pitchRef, config: config, followEntityId: followEntityId });
+            case "observer":
+                return _jsx(ObserverRig, { yawRef: yawRef, pitchRef: pitchRef, config: config, followEntityId: followEntityId });
+            default:
+                return (_jsx(GameOrbitCamera, { yawRef: yawRef, pitchRef: pitchRef, config: config, followEntityId: followEntityId ?? undefined, onCameraFollow: config?.onCameraFollow, onDragChange: onDragChange, pointerControls: pointerControls }));
+        }
+    })();
+    return _jsx(CameraShakeContext.Provider, { value: channel, children: rig });
+}