@jgengine/react 0.2.0 → 0.4.0

package/dist/components.d.ts

@@ -1,6 +1,8 @@
-import type { ReactNode } from "react";
+import { type ReactNode } from "react";
 import type { InventorySlot } from "@jgengine/core/inventory/inventoryModel";
 import type { ProximityPrompt as ProximityPromptDef } from "@jgengine/core/interaction/proximityPrompt";
+import type { FeedEntry } from "@jgengine/core/game/feed";
+import type { StatLevelUpEvent } from "@jgengine/core/game/events";
 export declare function SlotGrid({ inventoryId, className, renderSlot, }: {
     inventoryId: string;
     className?: string;
@@ -53,3 +55,22 @@ export declare function DialogueBox({ dialogue, onChoice, className, }: {
     onChoice?: (choice: DialogueChoice) => void;
     className?: string;
 }): import("react").JSX.Element;
+export declare function ToastStack({ action, limit, className, renderToast, }: {
+    action: string;
+    limit?: number;
+    className?: string;
+    renderToast?: (entry: FeedEntry, index: number) => ReactNode;
+}): import("react").JSX.Element | null;
+export declare function DeathScreen({ statId, open, className, children, }: {
+    statId?: string;
+    open?: boolean;
+    className?: string;
+    children?: ReactNode;
+}): import("react").JSX.Element;
+export declare function LevelUpFlash({ stat, durationMs, className, children, renderFlash, }: {
+    stat?: string;
+    durationMs?: number;
+    className?: string;
+    children?: ReactNode;
+    renderFlash?: (event: StatLevelUpEvent) => ReactNode;
+}): import("react").JSX.Element | null;

package/dist/components.js

@@ -1,5 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCurrency, useEntityStat, useInventory } from "./hooks.js";
+import { useEffect, useRef, useState } from "react";
+import { useGameContext } from "./provider.js";
+import { useCurrency, useEntityStat, useFeed, useInventory, useLocalPlayerDead } from "./hooks.js";
 export function SlotGrid({ inventoryId, className, renderSlot, }) {
     const slots = useInventory(inventoryId);
     return (_jsx("div", { className: className, "data-inventory": inventoryId, children: slots.map((slot, index) => (_jsx("div", { "data-slot": index, children: renderSlot !== undefined
@@ -41,3 +43,44 @@ export function KeybindRow({ action, keys, className, }) {
 export function DialogueBox({ dialogue, onChoice, className, }) {
     return (_jsx("div", { className: className, "data-dialogue": dialogue.id, children: dialogue.lines.map((line, index) => "choices" in line ? (_jsx("div", { "data-choices": true, children: line.choices.map((choice) => (_jsx("button", { type: "button", onClick: () => onChoice?.(choice), children: choice.label }, choice.label))) }, index)) : (_jsxs("p", { children: [_jsx("span", { "data-speaker": true, children: line.speaker }), _jsx("span", { children: line.text })] }, index))) }));
 }
+function defaultToast(entry) {
+    const data = entry.data;
+    if (data?.drops !== undefined) {
+        return data.drops.map((drop) => `${drop.item ?? drop.currency ?? "item"} ×${drop.count}`).join("  ");
+    }
+    return typeof entry.data === "string" ? entry.data : JSON.stringify(entry.data);
+}
+export function ToastStack({ action, limit = 4, className, renderToast, }) {
+    const entries = useFeed({ action, limit });
+    if (entries.length === 0)
+        return null;
+    const newestFirst = [...entries].reverse();
+    return (_jsx("div", { className: className, "data-toast-stack": action, children: newestFirst.map((entry, index) => (_jsx("div", { "data-toast": true, children: renderToast !== undefined ? renderToast(entry, index) : defaultToast(entry) }, `${entry.at}-${index}`))) }));
+}
+export function DeathScreen({ statId = "health", open, className, children, }) {
+    const dead = useLocalPlayerDead(statId);
+    return (_jsx(Screen, { id: "death", open: open ?? dead, className: className, children: children }));
+}
+export function LevelUpFlash({ stat, durationMs = 1600, className, children, renderFlash, }) {
+    const ctx = useGameContext();
+    const [flash, setFlash] = useState(null);
+    const timerRef = useRef(null);
+    useEffect(() => {
+        const unsubscribe = ctx.game.events.on("stat.levelUp", (event) => {
+            if (stat !== undefined && event.stat !== stat)
+                return;
+            setFlash(event);
+            if (timerRef.current !== null)
+                clearTimeout(timerRef.current);
+            timerRef.current = setTimeout(() => setFlash(null), durationMs);
+        });
+        return () => {
+            unsubscribe();
+            if (timerRef.current !== null)
+                clearTimeout(timerRef.current);
+        };
+    }, [ctx, stat, durationMs]);
+    if (flash === null)
+        return null;
+    return (_jsx("div", { className: className, "data-levelup": flash.level, children: renderFlash !== undefined ? renderFlash(flash) : children ?? `Level ${flash.level}` }));
+}

package/dist/hooks.d.ts

@@ -39,5 +39,6 @@ export declare function useLeaderboard(stat: string, options: {
     userId: string;
     value: number;
 }[];
+export declare function useLocalPlayerDead(healthStatId?: string): boolean;
 export declare function localPlayerEntity(ctx: GameContext): SceneEntity | null;
 export declare function useActivePrompt<T extends PositionedPrompt>(prompts?: readonly T[]): T | null;

package/dist/hooks.js

@@ -50,6 +50,15 @@ export function usePresence(userId) {
 export function useLeaderboard(stat, options) {
     return useGameStore((ctx) => ctx.game.leaderboard.getTop(stat, options));
 }
+export function useLocalPlayerDead(healthStatId = "health") {
+    return useGameStore((ctx) => {
+        const player = localPlayerEntity(ctx);
+        if (player === null)
+            return false;
+        const health = ctx.scene.entity.stats.get(player.id, healthStatId);
+        return health !== null && health.current <= health.min;
+    });
+}
 export function localPlayerEntity(ctx) {
     return (ctx.scene.entity.get(ctx.player.userId) ??
         ctx.scene.entity.list().find((entity) => entity.role === "player") ??

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jgengine/react",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "description": "React UI layer for JGengine: GameProvider, hooks, and headless primitives over @jgengine/core.",
   "license": "AGPL-3.0-only",
   "type": "module",
@@ -18,11 +18,11 @@
     }
   },
   "scripts": {
-    "build": "tsc -p tsconfig.build.json && bun ../../scripts/fix-extensions.ts dist",
-    "check-types": "tsc --noEmit -p tsconfig.json"
+    "build": "tsgo -p tsconfig.build.json && bun ../../scripts/fix-extensions.ts dist",
+    "check-types": "tsgo --noEmit -p tsconfig.json"
   },
   "dependencies": {
-    "@jgengine/core": "^0.2.0"
+    "@jgengine/core": "^0.4.0"
   },
   "peerDependencies": {
     "react": "^19.0.0"