@jgengine/shell 0.6.0 → 0.7.0

package/dist/weather/FireSpreadLayer.d.ts

@@ -0,0 +1,14 @@
+import * as THREE from "three";
+import type { FireGrid } from "@jgengine/core/world/weather";
+export interface FireSpreadLayerProps {
+    grid: FireGrid;
+    cellSize: number;
+    origin?: readonly [number, number];
+    /** Sample ground height so flames sit on terrain; defaults to y=0. */
+    heightAt?: (x: number, z: number) => number;
+    /** Flame quad height. Default 1.6. */
+    flameHeight?: number;
+    burningColor?: THREE.ColorRepresentation;
+    emberColor?: THREE.ColorRepresentation;
+}
+export declare function FireSpreadLayer({ grid, cellSize, origin, heightAt, flameHeight, burningColor, emberColor, }: FireSpreadLayerProps): import("react").JSX.Element;

package/dist/weather/FireSpreadLayer.js

@@ -0,0 +1,68 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef } from "react";
+import { useFrame } from "@react-three/fiber";
+import * as THREE from "three";
+const HIDDEN = new THREE.Matrix4().makeScale(0, 0, 0);
+export function FireSpreadLayer({ grid, cellSize, origin = [0, 0], heightAt, flameHeight = 1.6, burningColor = "#ff6a1a", emberColor = "#4a1206", }) {
+    const flames = useRef(null);
+    const scorch = useRef(null);
+    const capacity = grid.cols * grid.rows;
+    const flameGeometry = useMemo(() => new THREE.PlaneGeometry(cellSize * 0.9, flameHeight), [cellSize, flameHeight]);
+    const scorchGeometry = useMemo(() => {
+        const geometry = new THREE.PlaneGeometry(cellSize, cellSize);
+        geometry.rotateX(-Math.PI / 2);
+        return geometry;
+    }, [cellSize]);
+    const flameMaterial = useMemo(() => new THREE.MeshBasicMaterial({ color: burningColor, transparent: true, opacity: 0.85, depthWrite: false, side: THREE.DoubleSide }), [burningColor]);
+    const scorchMaterial = useMemo(() => new THREE.MeshBasicMaterial({ color: emberColor, transparent: true, opacity: 0.7, depthWrite: false }), [emberColor]);
+    useEffect(() => () => {
+        flameGeometry.dispose();
+        scorchGeometry.dispose();
+        flameMaterial.dispose();
+        scorchMaterial.dispose();
+    }, [flameGeometry, scorchGeometry, flameMaterial, scorchMaterial]);
+    const matrix = useMemo(() => new THREE.Matrix4(), []);
+    const position = useMemo(() => new THREE.Vector3(), []);
+    const quaternion = useMemo(() => new THREE.Quaternion(), []);
+    const scale = useMemo(() => new THREE.Vector3(1, 1, 1), []);
+    useFrame((state) => {
+        const flameMesh = flames.current;
+        const scorchMesh = scorch.current;
+        if (flameMesh === null || scorchMesh === null)
+            return;
+        const cells = grid.snapshot();
+        const flicker = 0.85 + 0.15 * Math.sin(state.clock.elapsedTime * 12);
+        let flameIndex = 0;
+        let scorchIndex = 0;
+        for (let row = 0; row < grid.rows; row += 1) {
+            for (let col = 0; col < grid.cols; col += 1) {
+                const cell = cells[row * grid.cols + col];
+                const x = origin[0] + col * cellSize;
+                const z = origin[1] + row * cellSize;
+                const groundY = heightAt?.(x, z) ?? 0;
+                if (cell.state === "burning") {
+                    position.set(x, groundY + flameHeight * 0.5, z);
+                    quaternion.setFromEuler(new THREE.Euler(0, state.camera.rotation.y, 0));
+                    scale.set(1, flicker, 1);
+                    matrix.compose(position, quaternion, scale);
+                    flameMesh.setMatrixAt(flameIndex, matrix);
+                    flameIndex += 1;
+                }
+                else if (cell.state === "burnt") {
+                    position.set(x, groundY + 0.05, z);
+                    scorchMesh.setMatrixAt(scorchIndex, matrix.compose(position, new THREE.Quaternion(), scale.set(1, 1, 1)));
+                    scorchIndex += 1;
+                }
+            }
+        }
+        for (let i = flameIndex; i < capacity; i += 1)
+            flameMesh.setMatrixAt(i, HIDDEN);
+        for (let i = scorchIndex; i < capacity; i += 1)
+            scorchMesh.setMatrixAt(i, HIDDEN);
+        flameMesh.count = capacity;
+        scorchMesh.count = capacity;
+        flameMesh.instanceMatrix.needsUpdate = true;
+        scorchMesh.instanceMatrix.needsUpdate = true;
+    });
+    return (_jsxs("group", { children: [_jsx("instancedMesh", { ref: scorch, args: [scorchGeometry, scorchMaterial, capacity], frustumCulled: false, renderOrder: 5 }), _jsx("instancedMesh", { ref: flames, args: [flameGeometry, flameMaterial, capacity], frustumCulled: false, renderOrder: 11 })] }));
+}

package/dist/weather/index.d.ts

@@ -1,3 +1,4 @@
+export { FireSpreadLayer, type FireSpreadLayerProps } from "./FireSpreadLayer.js";
 export { LightningStrike, type LightningStrikeProps } from "./LightningStrike.js";
 export { RainField, type RainFieldProps } from "./RainField.js";
 export { SnowField, type SnowFieldProps } from "./SnowField.js";

package/dist/weather/index.js

@@ -1,3 +1,4 @@
+export { FireSpreadLayer } from "./FireSpreadLayer.js";
 export { LightningStrike } from "./LightningStrike.js";
 export { RainField } from "./RainField.js";
 export { SnowField } from "./SnowField.js";

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.6.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",
@@ -19,6 +19,10 @@
       "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"
@@ -30,9 +34,9 @@
     "test": "bun test src"
   },
   "dependencies": {
-    "@jgengine/core": "^0.6.0",
-    "@jgengine/react": "^0.6.0",
-    "@jgengine/ws": "^0.6.0"
+    "@jgengine/core": "^0.7.0",
+    "@jgengine/react": "^0.7.0",
+    "@jgengine/ws": "^0.7.0"
   },
   "peerDependencies": {
     "@react-three/drei": "^10.0.0",