@unboxy/phaser-sdk 0.2.29 → 0.2.31

package/dist/index.d.ts

@@ -28,5 +28,5 @@ export { setupEditorBridge } from './editor/EditorBridge.js';
 export { EditorOverlayScene, EDITOR_OVERLAY_KEY } from './editor/EditorOverlayScene.js';
 export type { EditorEntityPatch, EditorEnterMessage, EditorExitMessage, EditorGetSceneMessage, EditorApplyEditMessage, EditorSetSelectionMessage, EditorPanZoomMessage, EditorHostToSdkMessage, EditorSceneLoadedMessage, EditorSelectionPickedMessage, EditorDragEndMessage, EditorShortcutMessage, EditorCreateEntityMessage, EditorDeleteEntityMessage, EditorSetEditModeMessage, EditorSelectionRectMessage, EditorSdkToHostMessage, } from './protocol.js';
 export { SCHEMA_VERSION, } from './scene/types.js';
-export type { Manifest, SceneRef, HudRef, AssetRecord, AssetKind, SceneType, SceneFile, WorldScene, HudScene, WorldSceneConfig, CameraConfig, WorldEntity, WorldEntityKind, NonGroupWorldEntity, SpriteEntity, PrimitiveEntity, CodeRenderedEntity, GroupEntity, TilemapEntity, TriggerEntity, TriggerShape, WorldVisual, SpriteVisual, PrimitiveVisual, PrimitiveRectVisual, PrimitiveCircleVisual, CodeRenderedVisual, HudEntity, HudEntityKind, HudEntityBase, HudTextEntity, HudImageEntity, HudIconButtonEntity, HudVisual, HudTextVisual, HudImageVisual, HudIconButtonVisual, HudTextSource, HudLayer, Transform, Anchor, AnchorSide, } from './scene/types.js';
+export type { Manifest, SceneRef, HudRef, AssetRecord, AssetKind, SceneType, SceneFile, WorldScene, HudScene, WorldSceneConfig, CameraConfig, WorldEntity, WorldEntityKind, NonGroupWorldEntity, SpriteEntity, PrimitiveEntity, CodeRenderedEntity, GroupEntity, TilemapEntity, TriggerEntity, TriggerShape, WorldVisual, SpriteVisual, PrimitiveVisual, PrimitiveRectVisual, PrimitiveCircleVisual, CodeRenderedVisual, HudEntity, HudEntityKind, HudEntityBase, HudTextEntity, HudImageEntity, HudIconButtonEntity, HudProgressBarEntity, HudPanelEntity, HudVisual, HudTextVisual, HudImageVisual, HudIconButtonVisual, HudProgressBarVisual, HudPanelVisual, HudTextSource, HudNumberSource, HudLayer, Transform, Anchor, AnchorSide, } from './scene/types.js';
 export { PROTOCOL_VERSION, type HelloMessage, type InitMessage, type RpcRequestMessage, type RpcResultOk, type RpcResultError, type HostToSdkMessage, type SdkToHostMessage, type RpcErrorPayload, type RpcMethod, type SavesGetParams, type SavesGetResult, type SavesSetParams, type SavesSetResult, type SavesDeleteParams, type SavesDeleteResult, type SavesListResult, type GameDataGetParams, type GameDataGetResult, type GameDataSetParams, type GameDataSetResult, type GameDataDeleteParams, type GameDataDeleteResult, type GameDataListResult, type RealtimeGetTokenParams, type RealtimeGetTokenResult, } from './protocol.js';

package/dist/scene/HudRuntime.js

@@ -96,6 +96,12 @@ export function spawnHudEntity(ctx, entity) {
         case 'icon-button':
             go = createIconButton(ctx, entity, pos);
             break;
+        case 'progress-bar':
+            go = createProgressBar(ctx, entity, pos);
+            break;
+        case 'panel':
+            go = createPanel(ctx, entity, pos);
+            break;
         default: {
             const exhaustive = entity;
             throw new Error(`[unboxy/hud] unknown HUD entity kind: ${JSON.stringify(exhaustive)}`);
@@ -227,6 +233,144 @@ function createIconButton(ctx, entity, pos) {
     container.setData('editorHitHeight', h);
     return container;
 }
+/**
+ * Progress bar — Graphics-rendered (no Phaser primitive matches "fill that
+ * shrinks/grows from one edge"). Subscribes to value + max bindings if
+ * either is dynamic; redraws whenever a relevant registry key changes.
+ */
+function createProgressBar(ctx, entity, pos) {
+    const v = entity.visual;
+    const w = v.width ?? 200;
+    const h = v.height ?? 16;
+    const container = ctx.scene.add.container(pos.x, pos.y);
+    // Background + fill drawn into a Graphics so width-stretching doesn't
+    // distort corners (no setDisplaySize stretching, no extra dependencies).
+    const g = ctx.scene.add.graphics();
+    container.add(g);
+    const draw = (frac) => {
+        const f = Math.max(0, Math.min(1, frac));
+        g.clear();
+        const radius = v.borderRadius ?? 0;
+        // Centered draw: the container is positioned by applyContainerOriginShift
+        // so child visuals at (0,0) sit at the resolved anchor; drawing the rect
+        // from (-w/2, -h/2) keeps the visual aligned with the editor's
+        // editorHit{Width,Height} bounds (which are computed center-based).
+        const x0 = -w / 2;
+        const y0 = -h / 2;
+        // Background.
+        if (v.backgroundColor) {
+            g.fillStyle(parseColor(v.backgroundColor), 1);
+            if (radius > 0)
+                g.fillRoundedRect(x0, y0, w, h, radius);
+            else
+                g.fillRect(x0, y0, w, h);
+        }
+        // Fill.
+        const fillColor = v.fillColor ?? '#22c55e';
+        g.fillStyle(parseColor(fillColor), 1);
+        const fillW = w * f;
+        if (fillW > 0) {
+            if (radius > 0)
+                g.fillRoundedRect(x0, y0, fillW, h, Math.min(radius, fillW / 2));
+            else
+                g.fillRect(x0, y0, fillW, h);
+        }
+        // Border.
+        if (v.borderColor && (v.borderWidth ?? 0) > 0) {
+            g.lineStyle(v.borderWidth ?? 1, parseColor(v.borderColor), 1);
+            if (radius > 0)
+                g.strokeRoundedRect(x0, y0, w, h, radius);
+            else
+                g.strokeRect(x0, y0, w, h);
+        }
+    };
+    const computeFrac = () => {
+        const value = readNumberSource(v.value, ctx.scene);
+        const max = readNumberSource(v.max, ctx.scene);
+        if (max <= 0)
+            return 0;
+        return value / max;
+    };
+    draw(computeFrac());
+    // Subscribe to dynamic bindings. Either value or max can be dynamic;
+    // each pushes a redraw on registry change.
+    const cleanups = [];
+    if (v.value.mode === 'dynamic') {
+        const key = `changedata-${v.value.binding}`;
+        const handler = () => draw(computeFrac());
+        ctx.scene.game.registry.events.on(key, handler);
+        cleanups.push(() => ctx.scene.game.registry.events.off(key, handler));
+    }
+    if (v.max.mode === 'dynamic') {
+        const key = `changedata-${v.max.binding}`;
+        const handler = () => draw(computeFrac());
+        ctx.scene.game.registry.events.on(key, handler);
+        cleanups.push(() => ctx.scene.game.registry.events.off(key, handler));
+    }
+    // setSize so the editor's bounds-based hit-test works on the container.
+    container.setSize(w, h);
+    container.setData('editorHitWidth', w);
+    container.setData('editorHitHeight', h);
+    applyContainerOriginShift(container, entity.anchor.side, w, h);
+    // Persist redraw + cleanup on the GameObject for applyHudPatch to reach.
+    container.setData('hudRedraw', () => draw(computeFrac()));
+    container.setData('hudCleanup', () => cleanups.forEach((fn) => fn()));
+    container.once(Phaser.GameObjects.Events.DESTROY, () => {
+        const fn = container.getData('hudCleanup');
+        fn?.();
+    });
+    return container;
+}
+/**
+ * Panel — a colored rectangle with optional border + rounded corners. Used
+ * as a visual frame behind other HUD widgets (no children layout in v1;
+ * children live alongside the panel as separate entities).
+ */
+function createPanel(ctx, entity, pos) {
+    const v = entity.visual;
+    const w = v.width ?? 200;
+    const h = v.height ?? 100;
+    const container = ctx.scene.add.container(pos.x, pos.y);
+    const g = ctx.scene.add.graphics();
+    container.add(g);
+    const draw = () => {
+        g.clear();
+        const radius = v.borderRadius ?? 0;
+        // Centered draw — see createProgressBar for the rationale.
+        const x0 = -w / 2;
+        const y0 = -h / 2;
+        if (v.backgroundColor) {
+            g.fillStyle(parseColor(v.backgroundColor), v.backgroundAlpha ?? 1);
+            if (radius > 0)
+                g.fillRoundedRect(x0, y0, w, h, radius);
+            else
+                g.fillRect(x0, y0, w, h);
+        }
+        if (v.borderColor && (v.borderWidth ?? 0) > 0) {
+            g.lineStyle(v.borderWidth ?? 1, parseColor(v.borderColor), 1);
+            if (radius > 0)
+                g.strokeRoundedRect(x0, y0, w, h, radius);
+            else
+                g.strokeRect(x0, y0, w, h);
+        }
+    };
+    draw();
+    container.setSize(w, h);
+    container.setData('editorHitWidth', w);
+    container.setData('editorHitHeight', h);
+    applyContainerOriginShift(container, entity.anchor.side, w, h);
+    container.setData('hudRedraw', draw);
+    return container;
+}
+/** Read a numeric source (static or dynamic from registry). */
+function readNumberSource(source, scene) {
+    if (source.mode === 'static')
+        return source.value;
+    const raw = scene.game.registry.get(source.binding);
+    if (typeof raw === 'number' && Number.isFinite(raw))
+        return raw;
+    return source.fallback ?? 0;
+}
 /**
  * Map a 9-grid anchor side to a Phaser origin pair so the rendered widget
  * is positioned correctly relative to the resolved anchor coordinate.
@@ -596,6 +740,39 @@ export function applyHudPatch(game, entityId, patch) {
             image.setDisplaySize(p.width, p.height);
         }
     }
+    if (patch.visual && (entity.kind === 'progress-bar' || entity.kind === 'panel')) {
+        // Both kinds are container + Graphics. Patches that change geometry
+        // (width/height) or styling are handled by mutating the entity record
+        // then re-spawning the widget in place — same pattern as icon-button.
+        // For binding-source changes on progress-bar, also re-spawn so the
+        // registry subscriptions get rewired cleanly.
+        const v = entity.visual;
+        for (const [k, val] of Object.entries(patch.visual)) {
+            if (val !== undefined)
+                v[k] = val;
+        }
+        const reg2 = reg;
+        const safeArea2 = safeArea;
+        const oldDepth = go.depth;
+        go.destroy();
+        reg2.unregister(entityId);
+        const ctx = {
+            scene: hud,
+            registry: reg2,
+            safeArea: safeArea2,
+            resolveAsset: (id) => {
+                const m = getManifest(hud);
+                const a = m.assets?.find((x) => x.id === id);
+                if (!a)
+                    throw new Error(`[unboxy/hud] manifest has no asset with id '${id}'`);
+                return a;
+            },
+        };
+        const fresh = spawnHudEntity(ctx, entity);
+        if (typeof oldDepth === 'number') {
+            fresh.setDepth?.(oldDepth);
+        }
+    }
     if (patch.visual && entity.kind === 'icon-button') {
         // Icon-button is a Container — visual patches require a small refresh.
         // For v1 we just patch the entity record + label/colour fields cheaply;

package/dist/scene/types.d.ts

@@ -318,8 +318,50 @@ export interface HudIconButtonVisual {
     textColor?: string;
     fontSize?: number;
 }
-export type HudVisual = HudTextVisual | HudImageVisual | HudIconButtonVisual;
-export type HudEntityKind = 'text' | 'image' | 'icon-button';
+/**
+ * A progress bar's numeric input. Static = literal number; dynamic = read
+ * from `unboxy.gameData` / Phaser's game registry by key. Mirrors
+ * `HudTextSource` but for numbers (no prefix/suffix — bar is visual).
+ */
+export type HudNumberSource = {
+    mode: 'static';
+    value: number;
+} | {
+    mode: 'dynamic';
+    binding: string;
+    /** Used when the binding is unset at runtime. Defaults to 0. */
+    fallback?: number;
+};
+export interface HudProgressBarVisual {
+    kind: 'progress-bar';
+    /** Current value source (e.g. player's HP). */
+    value: HudNumberSource;
+    /** Max value source (e.g. player's max HP). */
+    max: HudNumberSource;
+    width?: number;
+    height?: number;
+    fillColor?: string;
+    backgroundColor?: string;
+    borderColor?: string | null;
+    borderWidth?: number;
+    /** Border radius for rounded rectangles. Defaults to 0 (sharp corners). */
+    borderRadius?: number;
+}
+export interface HudPanelVisual {
+    kind: 'panel';
+    width?: number;
+    height?: number;
+    /** Solid fill colour. Falls back to a transparent panel if omitted. */
+    backgroundColor?: string;
+    /** Background alpha (independent of widget-level alpha). */
+    backgroundAlpha?: number;
+    borderColor?: string | null;
+    borderWidth?: number;
+    /** Border radius for the rect. Defaults to 0. */
+    borderRadius?: number;
+}
+export type HudVisual = HudTextVisual | HudImageVisual | HudIconButtonVisual | HudProgressBarVisual | HudPanelVisual;
+export type HudEntityKind = 'text' | 'image' | 'icon-button' | 'progress-bar' | 'panel';
 export interface HudEntityBase {
     id: string;
     /** Optional semantic tag. Behavior code keys off this. */
@@ -358,7 +400,15 @@ export interface HudIconButtonEntity extends HudEntityBase {
     kind: 'icon-button';
     visual: HudIconButtonVisual;
 }
-export type HudEntity = HudTextEntity | HudImageEntity | HudIconButtonEntity;
+export interface HudProgressBarEntity extends HudEntityBase {
+    kind: 'progress-bar';
+    visual: HudProgressBarVisual;
+}
+export interface HudPanelEntity extends HudEntityBase {
+    kind: 'panel';
+    visual: HudPanelVisual;
+}
+export type HudEntity = HudTextEntity | HudImageEntity | HudIconButtonEntity | HudProgressBarEntity | HudPanelEntity;
 export interface HudScene {
     schemaVersion: number;
     id: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unboxy/phaser-sdk",
-  "version": "0.2.29",
+  "version": "0.2.31",
   "description": "Unboxy Phaser 3 SDK — game infrastructure for the Unboxy platform",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",