@jgengine/shell 0.7.0 → 0.9.0

package/dist/world/SpriteBatch.js

@@ -0,0 +1,112 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useFrame, useLoader, useThree } from "@react-three/fiber";
+import { useEffect, useMemo, useRef } from "react";
+import * as THREE from "three";
+const DEFAULT_CAPACITY = 1024;
+const DEFAULT_ALPHA_TEST = 0.08;
+const XZ_BASE_QUATERNION = new THREE.Quaternion().setFromEuler(new THREE.Euler(-Math.PI / 2, 0, 0));
+const LOCAL_NORMAL_AXIS = new THREE.Vector3(0, 0, 1);
+/**
+ * Renders a sprite sheet / tile atlas as a single InstancedMesh — one draw call for the whole
+ * batch. Each instance picks its atlas frame via a per-instance UV offset attribute patched into
+ * the material's vertex shader, so platformer/puzzle-grid presentation never needs one draw call
+ * per sprite. Transforms and UV offsets are written directly into the mesh's typed arrays each
+ * frame from a plain instance list (bodies never touch the per-entity React path).
+ */
+export function SpriteBatch({ url, columns = 1, rows = 1, capacity = DEFAULT_CAPACITY, instances, plane = "xy", billboard = false, pixelated = true, alphaTest = DEFAULT_ALPHA_TEST, opacity = 1, }) {
+    const meshRef = useRef(null);
+    const { camera } = useThree();
+    const texture = useLoader(THREE.TextureLoader, url);
+    useEffect(() => {
+        texture.colorSpace = THREE.SRGBColorSpace;
+        if (pixelated) {
+            texture.magFilter = THREE.NearestFilter;
+            texture.minFilter = THREE.NearestFilter;
+            texture.anisotropy = 1;
+        }
+        else {
+            texture.anisotropy = 4;
+        }
+        texture.needsUpdate = true;
+    }, [texture, pixelated]);
+    const geometry = useMemo(() => new THREE.PlaneGeometry(1, 1), []);
+    const spriteUvOffset = useMemo(() => new THREE.InstancedBufferAttribute(new Float32Array(capacity * 2), 2), [capacity]);
+    const material = useMemo(() => {
+        const mat = new THREE.MeshBasicMaterial({
+            map: texture,
+            transparent: true,
+            alphaTest,
+            depthWrite: false,
+            opacity,
+        });
+        mat.onBeforeCompile = (shader) => {
+            shader.uniforms.spriteUvScale = { value: new THREE.Vector2(1 / columns, 1 / rows) };
+            shader.vertexShader = shader.vertexShader
+                .replace("#include <common>", `#include <common>
+attribute vec2 spriteUvOffset;
+uniform vec2 spriteUvScale;`)
+                .replace("#include <uv_vertex>", `#include <uv_vertex>
+#ifdef USE_MAP
+  vMapUv = vMapUv * spriteUvScale + spriteUvOffset;
+#endif`);
+        };
+        mat.customProgramCacheKey = () => `jgengine-sprite-batch-${columns}x${rows}`;
+        return mat;
+    }, [texture, columns, rows, alphaTest, opacity]);
+    useEffect(() => {
+        const mesh = meshRef.current;
+        if (mesh === null)
+            return;
+        mesh.geometry.setAttribute("spriteUvOffset", spriteUvOffset);
+        mesh.instanceMatrix.setUsage(THREE.DynamicDrawUsage);
+        spriteUvOffset.setUsage(THREE.DynamicDrawUsage);
+    }, [spriteUvOffset]);
+    const baseQuaternion = useMemo(() => (plane === "xz" ? XZ_BASE_QUATERNION.clone() : new THREE.Quaternion()), [plane]);
+    const position = useMemo(() => new THREE.Vector3(), []);
+    const quaternion = useMemo(() => new THREE.Quaternion(), []);
+    const rotationQuaternion = useMemo(() => new THREE.Quaternion(), []);
+    const scaleVector = useMemo(() => new THREE.Vector3(), []);
+    const matrix = useMemo(() => new THREE.Matrix4(), []);
+    useFrame(() => {
+        const mesh = meshRef.current;
+        if (mesh === null)
+            return;
+        const list = instances();
+        const count = Math.min(list.length, capacity);
+        mesh.count = count;
+        const matrixArray = mesh.instanceMatrix.array;
+        const uvArray = spriteUvOffset.array;
+        for (let i = 0; i < count; i += 1) {
+            const instance = list[i];
+            position.set(instance.x, instance.y, instance.z ?? 0);
+            if (billboard) {
+                quaternion.copy(camera.quaternion);
+            }
+            else {
+                quaternion.copy(baseQuaternion);
+            }
+            const rotation = instance.rotation ?? 0;
+            if (rotation !== 0) {
+                rotationQuaternion.setFromAxisAngle(LOCAL_NORMAL_AXIS, rotation);
+                quaternion.multiply(rotationQuaternion);
+            }
+            const scale = instance.scale ?? 1;
+            scaleVector.set(scale, scale, scale);
+            matrix.compose(position, quaternion, scaleVector);
+            matrix.toArray(matrixArray, i * 16);
+            const frame = instance.frame ?? 0;
+            const col = frame % columns;
+            const row = Math.floor(frame / columns);
+            const uo = i * 2;
+            uvArray[uo] = col / columns;
+            uvArray[uo + 1] = 1 - (row + 1) / rows;
+        }
+        mesh.instanceMatrix.needsUpdate = true;
+        spriteUvOffset.needsUpdate = true;
+    });
+    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/WorldHud.d.ts

@@ -1,6 +1,13 @@
-export declare function WorldEntityBars({ statId, height }: {
+import type { SceneEntity } from "@jgengine/core/scene/entityStore";
+import type { CatalogEntityRole } from "@jgengine/core/runtime/gameContext";
+export type { WorldBarSample } from "./worldBarSamples.js";
+export { collectWorldBarSamples, paintWorldBarSamples } from "./worldBarSamples.js";
+export { telegraphPulseOpacity } from "./telegraphPulse.js";
+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;

package/dist/world/WorldHud.js

@@ -4,22 +4,42 @@ 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 { useCameraShake } from "../camera/shakeChannel.js";
 import { resolveFloatTextStyle } from "./floatTextStyle.js";
+import { collectWorldBarSamples, paintWorldBarSamples, } from "./worldBarSamples.js";
+import { telegraphPulseOpacity } from "./telegraphPulse.js";
+export { collectWorldBarSamples, paintWorldBarSamples } from "./worldBarSamples.js";
+export { telegraphPulseOpacity } from "./telegraphPulse.js";
 const MUZZLE_HEIGHT = 1.4;
-function EntityBar({ entity, statId, height }) {
-    const stat = useEntityStat(entity.id, statId);
-    if (stat === null)
-        return null;
-    const range = stat.max - stat.min;
-    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}%` } }) }) }));
+function pinOverlayToViewport(_el, _camera, size) {
+    return [size.width / 2, size.height / 2];
 }
-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))) }));
+    const camera = useThree((state) => state.camera);
+    const size = useThree((state) => state.size);
+    const gl = useThree((state) => state.gl);
+    const canvasRef = useRef(null);
+    const samplesRef = useRef([]);
+    const projectRef = useRef(new THREE.Vector3());
+    useFrame(() => {
+        const canvas = canvasRef.current;
+        if (canvas === null)
+            return;
+        const dpr = Math.min(2, gl.getPixelRatio());
+        const cssW = size.width;
+        const cssH = size.height;
+        const pixelW = Math.max(1, Math.floor(cssW * dpr));
+        const pixelH = Math.max(1, Math.floor(cssH * dpr));
+        if (canvas.width !== pixelW || canvas.height !== pixelH) {
+            canvas.width = pixelW;
+            canvas.height = pixelH;
+        }
+        camera.updateMatrixWorld();
+        collectWorldBarSamples(ctx, statId, height, roles, resolveRole, camera, { width: cssW, height: cssH }, samplesRef.current, projectRef.current);
+        paintWorldBarSamples(canvas, samplesRef.current, dpr);
+    });
+    return (_jsx(Html, { fullscreen: true, calculatePosition: pinOverlayToViewport, zIndexRange: [20, 0], style: { pointerEvents: "none" }, children: _jsx("canvas", { ref: canvasRef, style: { width: "100%", height: "100%", display: "block", pointerEvents: "none" } }) }));
 }
 function FloatTextItem({ event, lifeMs }) {
     const [shown, setShown] = useState(false);
@@ -43,12 +63,24 @@ export function WorldFloatText({ height = 1.9, lifeMs = 950 }) {
     const ctx = useGameContext();
     const [floaters, setFloaters] = useState([]);
     const nextId = useRef(0);
+    const timers = useRef(new Set());
     useEffect(() => {
-        return ctx.game.events.on("entity.floatText", (event) => {
+        const pending = timers.current;
+        const off = ctx.game.events.on("entity.floatText", (event) => {
             const id = nextId.current++;
             setFloaters((current) => [...current, { id, position: event.position, event }]);
-            window.setTimeout(() => setFloaters((current) => current.filter((floater) => floater.id !== id)), lifeMs);
+            const timer = window.setTimeout(() => {
+                pending.delete(timer);
+                setFloaters((current) => current.filter((floater) => floater.id !== id));
+            }, lifeMs);
+            pending.add(timer);
         });
+        return () => {
+            off();
+            for (const timer of pending)
+                window.clearTimeout(timer);
+            pending.clear();
+        };
     }, [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, { event: floater.event, lifeMs: lifeMs }) }, floater.id))) }));
 }
@@ -61,60 +93,69 @@ function TelegraphGeometry({ shape }) {
         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));
+function TelegraphDecal({ active }) {
+    const materialRef = useRef(null);
     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 })] }));
+    useFrame(() => {
+        const material = materialRef.current;
+        if (material === null)
+            return;
+        material.opacity = telegraphPulseOpacity(active.bornMs, active.event.windupMs, performance.now());
+    });
+    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", { ref: materialRef, color: color, transparent: true, opacity: 0.45, 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()));
+    const timers = useRef(new Set());
     useEffect(() => {
-        return ctx.game.events.on("combat.telegraph", (event) => {
+        const pending = timers.current;
+        const off = 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);
+            const timer = window.setTimeout(() => {
+                pending.delete(timer);
+                setTelegraphs((current) => current.filter((t) => t.key !== entry.key));
+            }, event.windupMs + 120);
+            pending.add(timer);
         });
+        const offCancel = ctx.game.events.on("combat.telegraphCancelled", (event) => {
+            setTelegraphs((current) => current.filter((t) => t.event.id !== event.id));
+        });
+        return () => {
+            off();
+            offCancel();
+            for (const timer of pending)
+                window.clearTimeout(timer);
+            pending.clear();
+        };
     }, [ctx]);
-    return (_jsx(_Fragment, { children: telegraphs.map((active) => (_jsx(TelegraphDecal, { active: active, nowMs: nowMs }, active.key))) }));
+    return (_jsx(_Fragment, { children: telegraphs.map((active) => (_jsx(TelegraphDecal, { active: active }, active.key))) }));
 }
 export function CombatCameraShake() {
     const ctx = useGameContext();
-    const camera = useThree((state) => state.camera);
-    const trauma = useRef(0);
-    const decay = useRef(4);
+    const shake = useCameraShake();
     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;
+            shake.shake(event.shake.amplitude, 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);
-    });
+    }, [ctx, shake]);
     return null;
 }
 export function ProjectileTracers({ lifeMs = 130 }) {
     const ctx = useGameContext();
     const [tracers, setTracers] = useState([]);
     const nextId = useRef(0);
+    const timers = useRef(new Set());
     useEffect(() => {
-        return ctx.game.events.on("projectile.settled", (event) => {
+        const unsub = ctx.game.events.on("projectile.settled", (event) => {
             const id = nextId.current++;
             setTracers((current) => [
                 ...current,
@@ -126,8 +167,18 @@ export function ProjectileTracers({ lifeMs = 130 }) {
                     ],
                 },
             ]);
-            window.setTimeout(() => setTracers((current) => current.filter((tracer) => tracer.id !== id)), lifeMs);
+            const handle = setTimeout(() => {
+                timers.current.delete(handle);
+                setTracers((current) => current.filter((tracer) => tracer.id !== id));
+            }, lifeMs);
+            timers.current.add(handle);
         });
+        return () => {
+            unsub();
+            for (const handle of timers.current)
+                clearTimeout(handle);
+            timers.current.clear();
+        };
     }, [ctx, lifeMs]);
     return (_jsx(_Fragment, { children: tracers.map((tracer) => (_jsx(Line, { points: tracer.points, color: "#fde68a", lineWidth: 2, transparent: true, opacity: 0.85 }, tracer.id))) }));
 }

package/dist/world/WorldItems.js

@@ -1,18 +1,37 @@
 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 { 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]);
-    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] }));
+    // 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 }) {

package/dist/world/entityPose.d.ts

@@ -0,0 +1,14 @@
+export interface PoseWritable {
+    position: {
+        set(x: number, y: number, z: number): void;
+    };
+    rotation: {
+        y: number;
+    };
+}
+export interface PoseSource {
+    position: readonly [number, number, number];
+    rotationY: number;
+}
+export declare function writeEntityPose(target: PoseWritable, source: PoseSource): void;
+export declare function posesEqual(a: PoseSource, b: PoseSource): boolean;

package/dist/world/entityPose.js

@@ -0,0 +1,10 @@
+export function writeEntityPose(target, source) {
+    target.position.set(source.position[0], source.position[1], source.position[2]);
+    target.rotation.y = source.rotationY;
+}
+export function posesEqual(a, b) {
+    return (a.position[0] === b.position[0] &&
+        a.position[1] === b.position[1] &&
+        a.position[2] === b.position[2] &&
+        a.rotationY === b.rotationY);
+}

package/dist/world/telegraphPulse.d.ts

@@ -0,0 +1 @@
+export declare function telegraphPulseOpacity(bornMs: number, windupMs: number, nowMs: number): number;

package/dist/world/telegraphPulse.js

@@ -0,0 +1,4 @@
+export function telegraphPulseOpacity(bornMs, windupMs, nowMs) {
+    const progress = Math.max(0, Math.min(1, (nowMs - bornMs) / Math.max(1, windupMs)));
+    return 0.45 + 0.5 * progress;
+}

package/dist/world/worldBarSamples.d.ts

@@ -0,0 +1,30 @@
+import type { SceneEntity } from "@jgengine/core/scene/entityStore";
+import type { CatalogEntityRole } from "@jgengine/core/runtime/gameContext";
+import type { GameContext } from "@jgengine/core/runtime/gameContext";
+export interface WorldBarSample {
+    x: number;
+    y: number;
+    percent: number;
+}
+export interface Projectable {
+    set(x: number, y: number, z: number): this;
+    project(camera: {
+        matrixWorldInverse: unknown;
+        projectionMatrix: unknown;
+    }): this;
+    x: number;
+    y: number;
+    z: number;
+}
+export declare function collectWorldBarSamples(ctx: GameContext, statId: string, height: number, roles: readonly CatalogEntityRole[] | undefined, resolveRole: ((entity: SceneEntity) => CatalogEntityRole | undefined) | undefined, camera: {
+    matrixWorldInverse: unknown;
+    projectionMatrix: unknown;
+}, viewport: {
+    width: number;
+    height: number;
+}, into: WorldBarSample[], project: Projectable): number;
+export declare function paintWorldBarSamples(canvas: {
+    width: number;
+    height: number;
+    getContext(kind: "2d"): CanvasRenderingContext2D | null;
+}, samples: readonly WorldBarSample[], dpr: number, barWidthPx?: number, barHeightPx?: number): void;

package/dist/world/worldBarSamples.js

@@ -0,0 +1,51 @@
+import { worldHealthBarAllowsRole } from "@jgengine/core/game/playableGame";
+export function collectWorldBarSamples(ctx, statId, height, roles, resolveRole, camera, viewport, into, project) {
+    into.length = 0;
+    const playerId = ctx.player.userId;
+    for (const entity of ctx.scene.entity.list()) {
+        if (entity.id === playerId)
+            continue;
+        if (!worldHealthBarAllowsRole(roles, resolveRole?.(entity)))
+            continue;
+        const stat = ctx.scene.entity.stats.get(entity.id, statId);
+        if (stat === null)
+            continue;
+        const range = stat.max - stat.min;
+        const percent = range <= 0 ? 0 : Math.max(0, Math.min(1, (stat.current - stat.min) / range));
+        project.set(entity.position[0], entity.position[1] + height, entity.position[2]);
+        project.project(camera);
+        if (project.z < -1 || project.z > 1)
+            continue;
+        const x = (project.x * 0.5 + 0.5) * viewport.width;
+        const y = (-project.y * 0.5 + 0.5) * viewport.height;
+        into.push({ x, y, percent });
+    }
+    return into.length;
+}
+export function paintWorldBarSamples(canvas, samples, dpr, barWidthPx = 112, barHeightPx = 10) {
+    const g = canvas.getContext("2d");
+    if (g === null)
+        return;
+    g.setTransform(1, 0, 0, 1, 0, 0);
+    g.clearRect(0, 0, canvas.width, canvas.height);
+    g.setTransform(dpr, 0, 0, dpr, 0, 0);
+    const halfW = barWidthPx / 2;
+    const halfH = barHeightPx / 2;
+    for (const sample of samples) {
+        const left = sample.x - halfW;
+        const top = sample.y - halfH;
+        g.fillStyle = "rgba(0,0,0,0.7)";
+        g.strokeStyle = "rgba(0,0,0,0.7)";
+        g.lineWidth = 1;
+        g.fillRect(left, top, barWidthPx, barHeightPx);
+        g.strokeRect(left + 0.5, top + 0.5, barWidthPx - 1, barHeightPx - 1);
+        const fill = Math.max(0, Math.min(barWidthPx, sample.percent * barWidthPx));
+        if (fill > 0) {
+            const gradient = g.createLinearGradient(left, top, left + barWidthPx, top);
+            gradient.addColorStop(0, "#e11d48");
+            gradient.addColorStop(1, "#f87171");
+            g.fillStyle = gradient;
+            g.fillRect(left, top, fill, barHeightPx);
+        }
+    }
+}