@jgengine/shell 0.6.0 → 0.8.0

package/dist/world/GridWorldScene.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef } from "react";
+import * as THREE from "three";
+import { resolveGridInstances } from "@jgengine/core/world/gridInstances";
+function isGridWorldFeature(feature) {
+    return (feature.kind === "biomes" || feature.kind === "voxel" || feature.kind === "plots" || feature.kind === "tilemap");
+}
+/**
+ * Data-driven renderer for the `biomes()`/`voxel()`/`plots()`/`tilemap()` world-feature kinds
+ * (#207.1): one `InstancedMesh` of extruded, colored boxes built from each feature's declared
+ * `cells`, following the same direct-buffer pattern as `InstancedBodies`.
+ */
+export function GridWorldScene({ feature }) {
+    const instances = useMemo(() => (isGridWorldFeature(feature) ? resolveGridInstances(feature) : []), [feature]);
+    const meshRef = useRef(null);
+    const geometry = useMemo(() => new THREE.BoxGeometry(1, 1, 1), []);
+    const material = useMemo(() => new THREE.MeshStandardMaterial({ roughness: 0.9, metalness: 0 }), []);
+    const instanceColor = useMemo(() => new THREE.InstancedBufferAttribute(new Float32Array(Math.max(instances.length, 1) * 3), 3), [instances.length]);
+    useEffect(() => {
+        const mesh = meshRef.current;
+        if (mesh === null)
+            return;
+        mesh.instanceColor = instanceColor;
+        mesh.count = instances.length;
+        const m = mesh.instanceMatrix.array;
+        const c = instanceColor.array;
+        const color = new THREE.Color();
+        for (let i = 0; i < instances.length; i += 1) {
+            const instance = instances[i];
+            const o = i * 16;
+            m[o] = instance.scale[0];
+            m[o + 5] = instance.scale[1];
+            m[o + 10] = instance.scale[2];
+            m[o + 12] = instance.position[0];
+            m[o + 13] = instance.position[1];
+            m[o + 14] = instance.position[2];
+            m[o + 15] = 1;
+            color.set(instance.color);
+            const co = i * 3;
+            c[co] = color.r;
+            c[co + 1] = color.g;
+            c[co + 2] = color.b;
+        }
+        mesh.instanceMatrix.needsUpdate = true;
+        instanceColor.needsUpdate = true;
+    }, [instances, instanceColor]);
+    useEffect(() => () => {
+        geometry.dispose();
+        material.dispose();
+    }, [geometry, material]);
+    if (instances.length === 0)
+        return null;
+    return (_jsx("instancedMesh", { ref: meshRef, args: [geometry, material, instances.length], castShadow: true, receiveShadow: true }));
+}

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

@@ -1,11 +1,17 @@
-export declare function WorldEntityBars({ statId, height }: {
+import type { SceneEntity } from "@jgengine/core/scene/entityStore";
+import type { CatalogEntityRole } from "@jgengine/core/runtime/gameContext";
+export declare function WorldEntityBars({ statId, height, roles, resolveRole, }: {
     statId: string;
     height?: number;
+    roles?: readonly CatalogEntityRole[];
+    resolveRole?: (entity: SceneEntity) => CatalogEntityRole | undefined;
 }): import("react").JSX.Element;
 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,12 @@
 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 { worldHealthBarAllowsRole } from "@jgengine/core/game/playableGame";
 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);
@@ -13,27 +16,32 @@ function EntityBar({ entity, statId, height }) {
     const percent = range <= 0 ? 0 : Math.max(0, Math.min(1, (stat.current - stat.min) / range));
     return (_jsx(Html, { position: [entity.position[0], entity.position[1] + height, entity.position[2]], center: true, distanceFactor: 12, zIndexRange: [20, 0], children: _jsx("div", { className: "h-2.5 w-28 overflow-hidden rounded-sm border border-black/70 bg-black/70 shadow", children: _jsx("div", { className: "h-full bg-gradient-to-r from-rose-600 to-red-400", style: { width: `${percent * 100}%` } }) }) }));
 }
-export function WorldEntityBars({ statId, height = 2.2 }) {
+export function WorldEntityBars({ statId, height = 2.2, roles, resolveRole, }) {
     const ctx = useGameContext();
     const entities = useSceneEntities();
     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))) }));
+    return (_jsx(_Fragment, { children: entities
+            .filter((entity) => entity.id !== playerId)
+            .filter((entity) => worldHealthBarAllowsRole(roles, resolveRole?.(entity)))
+            .map((entity) => (_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 +50,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,50 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Html, Line } from "@react-three/drei";
+import { useMemo, useRef } from "react";
+import { useFrame } from "@react-three/fiber";
+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";
+const REST_HEIGHT = 0.32;
+const SPAWN_DURATION = 0.4;
+function WorldItemMarker({ instanceId, position, color, beam, label, beamHeight, }) {
+    const beamPoints = useMemo(() => [
+        [0, 0, 0],
+        [0, beamHeight, 0],
+    ], [beamHeight]);
+    // Drop animation: the gem leaps up on spawn, settles, then idles with a slow
+    // spin + hover so a fresh drop reads as "something just fell here". Age is
+    // accumulated from frame deltas (Date.now is unavailable to keep runs pure).
+    const gemRef = useRef(null);
+    const ageRef = useRef(0);
+    useFrame((_state, delta) => {
+        const gem = gemRef.current;
+        if (gem === null)
+            return;
+        const age = ageRef.current + delta;
+        ageRef.current = age;
+        const spawn = age < SPAWN_DURATION ? Math.sin((age / SPAWN_DURATION) * Math.PI) * 0.35 : 0;
+        const bob = Math.sin(age * 2.2) * 0.06;
+        gem.position.y = REST_HEIGHT + bob + spawn;
+        gem.rotation.y = age * 1.6;
+    });
+    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 })] }), _jsx("group", { ref: gemRef, "position-y": REST_HEIGHT, children: _jsxs("mesh", { 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)",
+    };
+}