@jgengine/shell 0.5.0 → 0.7.0

package/dist/world/InstancedBodies.js

@@ -0,0 +1,84 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useFrame } from "@react-three/fiber";
+import { useEffect, useMemo, useRef } from "react";
+import * as THREE from "three";
+const SLEEPING_COLOR = new THREE.Color(0.32, 0.4, 0.62);
+const AWAKE_COLOR = new THREE.Color(0.45, 0.78, 0.5);
+const CONTACT_COLOR = new THREE.Color(0.96, 0.55, 0.18);
+const DEFAULT_BASE = new THREE.Color(0.62, 0.64, 0.68);
+/**
+ * Renders a PhysicsWorld's box bodies as a single InstancedMesh — one draw call per batch.
+ * Transforms are written directly into `instanceMatrix.array` each frame (bodies never touch
+ * the per-entity React path). Reusable by any game: hand it a physics world and go.
+ */
+export function InstancedBodies({ world, debugTint = false, baseColors, epoch = 0 }) {
+    const meshRef = useRef(null);
+    const geometry = useMemo(() => new THREE.BoxGeometry(1, 1, 1), []);
+    const material = useMemo(() => new THREE.MeshStandardMaterial({ roughness: 0.85, metalness: 0, vertexColors: false }), []);
+    const capacity = world.capacity;
+    const instanceColor = useMemo(() => new THREE.InstancedBufferAttribute(new Float32Array(capacity * 3), 3), [capacity]);
+    useEffect(() => {
+        const mesh = meshRef.current;
+        if (mesh === null)
+            return;
+        mesh.instanceColor = instanceColor;
+        mesh.instanceMatrix.setUsage(THREE.DynamicDrawUsage);
+        instanceColor.setUsage(THREE.DynamicDrawUsage);
+    }, [instanceColor]);
+    const lastTintRef = useRef(null);
+    useEffect(() => {
+        lastTintRef.current = null;
+    }, [epoch, debugTint]);
+    useFrame(() => {
+        const mesh = meshRef.current;
+        if (mesh === null)
+            return;
+        const count = world.count;
+        mesh.count = count;
+        const m = mesh.instanceMatrix.array;
+        const { posX, posY, posZ, halfX, halfY, halfZ } = world;
+        for (let i = 0; i < count; i += 1) {
+            const o = i * 16;
+            m[o] = halfX[i] * 2;
+            m[o + 5] = halfY[i] * 2;
+            m[o + 10] = halfZ[i] * 2;
+            m[o + 12] = posX[i];
+            m[o + 13] = posY[i];
+            m[o + 14] = posZ[i];
+            m[o + 15] = 1;
+        }
+        mesh.instanceMatrix.needsUpdate = true;
+        const c = instanceColor.array;
+        if (debugTint) {
+            const { contact } = world;
+            for (let i = 0; i < count; i += 1) {
+                const col = contact[i] !== 0 ? CONTACT_COLOR : world.isSleeping(i) ? SLEEPING_COLOR : AWAKE_COLOR;
+                const o = i * 3;
+                c[o] = col.r;
+                c[o + 1] = col.g;
+                c[o + 2] = col.b;
+            }
+            instanceColor.needsUpdate = true;
+        }
+        else if (lastTintRef.current !== false) {
+            if (baseColors !== undefined) {
+                c.set(baseColors.subarray(0, capacity * 3));
+            }
+            else {
+                for (let i = 0; i < capacity; i += 1) {
+                    const o = i * 3;
+                    c[o] = DEFAULT_BASE.r;
+                    c[o + 1] = DEFAULT_BASE.g;
+                    c[o + 2] = DEFAULT_BASE.b;
+                }
+            }
+            instanceColor.needsUpdate = true;
+        }
+        lastTintRef.current = debugTint;
+    });
+    useEffect(() => () => {
+        geometry.dispose();
+        material.dispose();
+    }, [geometry, material]);
+    return (_jsx("instancedMesh", { ref: meshRef, args: [geometry, material, capacity], frustumCulled: false, castShadow: false, receiveShadow: false }));
+}

package/dist/world/InstancedJoints.d.ts

@@ -0,0 +1,14 @@
+import * as THREE from "three";
+import type { PhysicsWorld } from "@jgengine/core/physics/physicsWorld";
+export interface InstancedJointsProps {
+    /** Physics world whose active joints are drawn as line segments between their world anchors. */
+    world: PhysicsWorld;
+    /** Line color. Default warm yellow. */
+    color?: THREE.ColorRepresentation;
+}
+/**
+ * Debug overlay drawing a PhysicsWorld's joints (suspension, ragdoll links, carry tethers) as one
+ * LineSegments batch. Endpoints are streamed each frame from `world.readJointSegments`; pair with
+ * `InstancedBodies` to see the constraint structure over the bodies.
+ */
+export declare function InstancedJoints({ world, color }: InstancedJointsProps): import("react").JSX.Element;

package/dist/world/InstancedJoints.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useFrame } from "@react-three/fiber";
+import { useEffect, useMemo, useRef } from "react";
+import * as THREE from "three";
+/**
+ * Debug overlay drawing a PhysicsWorld's joints (suspension, ragdoll links, carry tethers) as one
+ * LineSegments batch. Endpoints are streamed each frame from `world.readJointSegments`; pair with
+ * `InstancedBodies` to see the constraint structure over the bodies.
+ */
+export function InstancedJoints({ world, color = "#f5c542" }) {
+    const geometryRef = useRef(null);
+    const positions = useMemo(() => new Float32Array(world.jointCapacity * 6), [world.jointCapacity]);
+    const attribute = useMemo(() => new THREE.BufferAttribute(positions, 3), [positions]);
+    const material = useMemo(() => new THREE.LineBasicMaterial({ color }), [color]);
+    useEffect(() => {
+        const geometry = geometryRef.current;
+        if (geometry === null)
+            return;
+        geometry.setAttribute("position", attribute);
+        attribute.setUsage(THREE.DynamicDrawUsage);
+    }, [attribute]);
+    useFrame(() => {
+        const geometry = geometryRef.current;
+        if (geometry === null)
+            return;
+        const count = world.readJointSegments(positions);
+        attribute.needsUpdate = true;
+        geometry.setDrawRange(0, count * 2);
+    });
+    useEffect(() => () => material.dispose(), [material]);
+    return (_jsxs("lineSegments", { frustumCulled: false, children: [_jsx("bufferGeometry", { ref: geometryRef }), _jsx("primitive", { object: material, attach: "material" })] }));
+}

package/dist/world/WorldHud.d.ts

@@ -6,6 +6,8 @@ export declare function WorldFloatText({ height, lifeMs }: {
     height?: number;
     lifeMs?: number;
 }): import("react").JSX.Element;
+export declare function WorldTelegraphs(): import("react").JSX.Element;
+export declare function CombatCameraShake(): null;
 export declare function ProjectileTracers({ lifeMs }: {
     lifeMs?: number;
 }): import("react").JSX.Element;

package/dist/world/WorldHud.js

@@ -1,9 +1,11 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Html, Line } from "@react-three/drei";
-import { useEffect, useRef, useState } from "react";
+import { useFrame, useThree } from "@react-three/fiber";
+import { useEffect, useMemo, useRef, useState } from "react";
 import * as THREE from "three";
 import { useGameContext } from "@jgengine/react/provider";
 import { useEntityStat, useSceneEntities } from "@jgengine/react/hooks";
+import { resolveFloatTextStyle } from "./floatTextStyle.js";
 const MUZZLE_HEIGHT = 1.4;
 function EntityBar({ entity, statId, height }) {
     const stat = useEntityStat(entity.id, statId);
@@ -19,21 +21,23 @@ export function WorldEntityBars({ statId, height = 2.2 }) {
     const playerId = ctx.player.userId;
     return (_jsx(_Fragment, { children: entities.map((entity) => entity.id === playerId ? null : (_jsx(EntityBar, { entity: entity, statId: statId, height: height }, entity.id))) }));
 }
-function FloatTextItem({ text, kind, lifeMs }) {
+function FloatTextItem({ event, lifeMs }) {
     const [shown, setShown] = useState(false);
+    const style = useMemo(() => resolveFloatTextStyle(event), [event]);
     useEffect(() => {
         const raf = requestAnimationFrame(() => setShown(true));
         return () => cancelAnimationFrame(raf);
     }, []);
-    return (_jsx("span", { className: kind === "heal" ? "text-emerald-300" : "text-amber-200", style: {
+    return (_jsx("span", { style: {
             display: "inline-block",
-            fontWeight: 800,
-            fontSize: "18px",
-            textShadow: "0 1px 3px rgba(0,0,0,0.95)",
+            color: style.color,
+            fontWeight: style.fontWeight,
+            fontSize: `${style.fontSizePx}px`,
+            textShadow: style.glow,
             transition: `transform ${lifeMs}ms ease-out, opacity ${lifeMs}ms ease-out`,
             transform: shown ? "translateY(-30px)" : "translateY(0)",
             opacity: shown ? 0 : 1,
-        }, children: text }));
+        }, children: event.text }));
 }
 export function WorldFloatText({ height = 1.9, lifeMs = 950 }) {
     const ctx = useGameContext();
@@ -42,14 +46,68 @@ export function WorldFloatText({ height = 1.9, lifeMs = 950 }) {
     useEffect(() => {
         return ctx.game.events.on("entity.floatText", (event) => {
             const id = nextId.current++;
-            setFloaters((current) => [
-                ...current,
-                { id, position: event.position, text: event.text, kind: event.kind },
-            ]);
+            setFloaters((current) => [...current, { id, position: event.position, event }]);
             window.setTimeout(() => setFloaters((current) => current.filter((floater) => floater.id !== id)), lifeMs);
         });
     }, [ctx, lifeMs]);
-    return (_jsx(_Fragment, { children: floaters.map((floater) => (_jsx(Html, { position: [floater.position[0], floater.position[1] + height, floater.position[2]], center: true, distanceFactor: 12, zIndexRange: [30, 0], children: _jsx(FloatTextItem, { text: floater.text, kind: floater.kind, lifeMs: lifeMs }) }, floater.id))) }));
+    return (_jsx(_Fragment, { children: floaters.map((floater) => (_jsx(Html, { position: [floater.position[0], floater.position[1] + height, floater.position[2]], center: true, distanceFactor: 12, zIndexRange: [30, 0], children: _jsx(FloatTextItem, { event: floater.event, lifeMs: lifeMs }) }, floater.id))) }));
+}
+function TelegraphGeometry({ shape }) {
+    if (shape.kind === "circle")
+        return _jsx("circleGeometry", { args: [shape.radius, 48] });
+    if (shape.kind === "ring")
+        return _jsx("ringGeometry", { args: [shape.innerRadius, shape.radius, 48] });
+    if (shape.kind === "cone")
+        return _jsx("circleGeometry", { args: [shape.radius, 40, -shape.angle / 2, shape.angle] });
+    return _jsx("planeGeometry", { args: [shape.width, shape.length] });
+}
+function TelegraphDecal({ active, nowMs }) {
+    const progress = Math.max(0, Math.min(1, (nowMs - active.bornMs) / active.event.windupMs));
+    const [x, y, z] = active.event.position;
+    const dir = active.event.dir ?? 0;
+    const shape = active.event.shape;
+    const forwardOffset = shape.kind === "line" ? shape.length / 2 : 0;
+    const color = active.event.kind === "danger" ? "#ef4444" : "#f59e0b";
+    const pulse = 0.45 + 0.5 * progress;
+    return (_jsxs("mesh", { position: [x + Math.sin(dir) * forwardOffset, y + 0.06, z + Math.cos(dir) * forwardOffset], rotation: [-Math.PI / 2, 0, shape.kind === "line" || shape.kind === "cone" ? -dir : 0], renderOrder: 999, children: [_jsx(TelegraphGeometry, { shape: shape }), _jsx("meshBasicMaterial", { color: color, transparent: true, opacity: pulse, side: THREE.DoubleSide, depthWrite: false, depthTest: false, toneMapped: false })] }));
+}
+export function WorldTelegraphs() {
+    const ctx = useGameContext();
+    const [telegraphs, setTelegraphs] = useState([]);
+    const key = useRef(0);
+    const [nowMs, setNowMs] = useState(() => performance.now());
+    useFrame(() => setNowMs(performance.now()));
+    useEffect(() => {
+        return ctx.game.events.on("combat.telegraph", (event) => {
+            const entry = { key: key.current++, event, bornMs: performance.now() };
+            setTelegraphs((current) => [...current, entry]);
+            window.setTimeout(() => setTelegraphs((current) => current.filter((t) => t.key !== entry.key)), event.windupMs + 120);
+        });
+    }, [ctx]);
+    return (_jsx(_Fragment, { children: telegraphs.map((active) => (_jsx(TelegraphDecal, { active: active, nowMs: nowMs }, active.key))) }));
+}
+export function CombatCameraShake() {
+    const ctx = useGameContext();
+    const camera = useThree((state) => state.camera);
+    const trauma = useRef(0);
+    const decay = useRef(4);
+    useEffect(() => {
+        return ctx.game.events.on("combat.hitReaction", (event) => {
+            if (event.shake === undefined)
+                return;
+            trauma.current = Math.min(1, trauma.current + event.shake.amplitude);
+            decay.current = event.shake.decay;
+        });
+    }, [ctx]);
+    useFrame((_state, dt) => {
+        if (trauma.current <= 0.0001)
+            return;
+        const magnitude = trauma.current * trauma.current;
+        camera.position.x += (Math.random() * 2 - 1) * magnitude * 0.4;
+        camera.position.y += (Math.random() * 2 - 1) * magnitude * 0.4;
+        trauma.current = Math.max(0, trauma.current - decay.current * dt);
+    });
+    return null;
 }
 export function ProjectileTracers({ lifeMs = 130 }) {
     const ctx = useGameContext();

package/dist/world/WorldItems.d.ts

@@ -0,0 +1,5 @@
+import type { WorldItemRenderConfig } from "@jgengine/core/game/playableGame";
+/** Rarity→beam/color/label render binding + loot-filter overlay (#32/#33) for every dropped `worldItem`. */
+export declare function WorldItems({ config }: {
+    config?: WorldItemRenderConfig;
+}): import("react").JSX.Element;

package/dist/world/WorldItems.js

@@ -0,0 +1,31 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Html, Line } from "@react-three/drei";
+import { useMemo } from "react";
+import { resolveWorldItemPresentation } from "@jgengine/core/game/worldItem";
+import { useGameContext } from "@jgengine/react/provider";
+import { useWorldItems } from "@jgengine/react/hooks";
+import { POINTER_ENTITY_KEY } from "../pointer/pointerService.js";
+const DEFAULT_BEAM_HEIGHT = 2.5;
+const FALLBACK_COLOR = "#e5e7eb";
+function WorldItemMarker({ instanceId, position, color, beam, label, beamHeight, }) {
+    const beamPoints = useMemo(() => [
+        [0, 0, 0],
+        [0, beamHeight, 0],
+    ], [beamHeight]);
+    return (_jsxs("group", { position: [position[0], position[1], position[2]], userData: { [POINTER_ENTITY_KEY]: instanceId }, children: [_jsxs("mesh", { "rotation-x": -Math.PI / 2, "position-y": 0.03, children: [_jsx("ringGeometry", { args: [0.26, 0.4, 24] }), _jsx("meshBasicMaterial", { color: color, transparent: true, opacity: 0.85 })] }), _jsxs("mesh", { "position-y": 0.32, children: [_jsx("octahedronGeometry", { args: [0.22, 0] }), _jsx("meshStandardMaterial", { color: color, emissive: color, emissiveIntensity: 0.6 })] }), beam ? _jsx(Line, { points: beamPoints, color: color, lineWidth: 2, transparent: true, opacity: 0.55 }) : null, label !== undefined && label.length > 0 ? (_jsx(Html, { position: [0, beamHeight + 0.2, 0], center: true, distanceFactor: 12, zIndexRange: [15, 0], children: _jsx("div", { className: "whitespace-nowrap rounded-sm border px-1.5 py-0.5 text-[11px] font-bold shadow", style: { borderColor: color, color, backgroundColor: "rgba(10,10,14,0.75)" }, children: label }) })) : null] }));
+}
+/** Rarity→beam/color/label render binding + loot-filter overlay (#32/#33) for every dropped `worldItem`. */
+export function WorldItems({ config }) {
+    const ctx = useGameContext();
+    const items = useWorldItems();
+    const beamHeight = config?.beamHeight ?? DEFAULT_BEAM_HEIGHT;
+    return (_jsx(_Fragment, { children: items.map((item) => {
+            const entity = ctx.scene.entity.get(item.instanceId);
+            if (entity === null)
+                return null;
+            const presentation = resolveWorldItemPresentation(item, config?.rarityStyle, config?.filter);
+            if (presentation.hidden)
+                return null;
+            return (_jsx(WorldItemMarker, { instanceId: item.instanceId, position: entity.position, color: presentation.color ?? FALLBACK_COLOR, beam: presentation.beam, label: presentation.label, beamHeight: beamHeight }, item.instanceId));
+        }) }));
+}

package/dist/world/floatTextStyle.d.ts

@@ -0,0 +1,14 @@
+export interface FloatTextInfo {
+    kind: string;
+    hitType?: string;
+    element?: string;
+    crit?: boolean;
+    scale?: number;
+}
+export interface FloatTextStyle {
+    color: string;
+    fontSizePx: number;
+    fontWeight: number;
+    glow: string;
+}
+export declare function resolveFloatTextStyle(info: FloatTextInfo): FloatTextStyle;

package/dist/world/floatTextStyle.js

@@ -0,0 +1,39 @@
+const BASE_SIZE = 18;
+const ELEMENT_COLORS = {
+    fire: "#fb923c",
+    frost: "#7dd3fc",
+    ice: "#7dd3fc",
+    lightning: "#fde047",
+    shock: "#fde047",
+    poison: "#a3e635",
+    rot: "#a3e635",
+    bleed: "#f87171",
+    arcane: "#c084fc",
+    holy: "#fef08a",
+    void: "#c084fc",
+};
+export function resolveFloatTextStyle(info) {
+    const crit = info.crit === true || info.hitType === "crit";
+    let color;
+    if (info.kind === "heal") {
+        color = "#6ee7b7";
+    }
+    else if (info.element !== undefined && ELEMENT_COLORS[info.element] !== undefined) {
+        color = ELEMENT_COLORS[info.element];
+    }
+    else if (crit) {
+        color = "#fbbf24";
+    }
+    else {
+        color = "#fde68a";
+    }
+    const critScale = crit ? 1.55 : 1;
+    const scale = info.scale ?? 1;
+    const fontSizePx = Math.round(BASE_SIZE * critScale * scale);
+    return {
+        color,
+        fontSizePx,
+        fontWeight: crit ? 900 : 800,
+        glow: crit ? `0 0 10px ${color}` : "0 1px 3px rgba(0,0,0,0.95)",
+    };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jgengine/shell",
-  "version": "0.5.0",
+  "version": "0.7.0",
   "description": "Game player shell for JGengine: React Three Fiber canvas, orbit camera, input tracking, HUD mounting, GameUiPreview, and a demo game. Consumers supply a GameRegistry.",
   "license": "AGPL-3.0-only",
   "type": "module",
@@ -15,6 +15,14 @@
     "CHANGELOG.md"
   ],
   "exports": {
+    "./weather": {
+      "types": "./dist/weather/index.d.ts",
+      "default": "./dist/weather/index.js"
+    },
+    "./camera": {
+      "types": "./dist/camera/index.d.ts",
+      "default": "./dist/camera/index.js"
+    },
     "./*": {
       "types": "./dist/*.d.ts",
       "default": "./dist/*.js"
@@ -26,9 +34,9 @@
     "test": "bun test src"
   },
   "dependencies": {
-    "@jgengine/core": "^0.5.0",
-    "@jgengine/react": "^0.5.0",
-    "@jgengine/ws": "^0.5.0"
+    "@jgengine/core": "^0.7.0",
+    "@jgengine/react": "^0.7.0",
+    "@jgengine/ws": "^0.7.0"
   },
   "peerDependencies": {
     "@react-three/drei": "^10.0.0",