@unboxy/phaser-sdk 0.2.30 → 0.2.32

package/dist/scene/HudRuntime.js

@@ -251,13 +251,19 @@ function createProgressBar(ctx, entity, pos) {
         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(0, 0, w, h, radius);
+                g.fillRoundedRect(x0, y0, w, h, radius);
             else
-                g.fillRect(0, 0, w, h);
+                g.fillRect(x0, y0, w, h);
         }
         // Fill.
         const fillColor = v.fillColor ?? '#22c55e';
@@ -265,17 +271,17 @@ function createProgressBar(ctx, entity, pos) {
         const fillW = w * f;
         if (fillW > 0) {
             if (radius > 0)
-                g.fillRoundedRect(0, 0, fillW, h, Math.min(radius, fillW / 2));
+                g.fillRoundedRect(x0, y0, fillW, h, Math.min(radius, fillW / 2));
             else
-                g.fillRect(0, 0, fillW, h);
+                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(0, 0, w, h, radius);
+                g.strokeRoundedRect(x0, y0, w, h, radius);
             else
-                g.strokeRect(0, 0, w, h);
+                g.strokeRect(x0, y0, w, h);
         }
     };
     const computeFrac = () => {
@@ -330,19 +336,22 @@ function createPanel(ctx, entity, pos) {
     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(0, 0, w, h, radius);
+                g.fillRoundedRect(x0, y0, w, h, radius);
             else
-                g.fillRect(0, 0, w, h);
+                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(0, 0, w, h, radius);
+                g.strokeRoundedRect(x0, y0, w, h, radius);
             else
-                g.strokeRect(0, 0, w, h);
+                g.strokeRect(x0, y0, w, h);
         }
     };
     draw();
@@ -386,11 +395,32 @@ function applyOriginFromAnchor(go, side) {
     go.setOrigin(ox, oy);
 }
 /**
- * Containers don't support setOrigin; instead nudge their position by half
- * of (origin × size) so they end up positioned consistently with widgets
- * that DO have setOrigin. Called once at spawn.
+ * Compute the per-side origin-shift offset for a container widget. Containers
+ * don't support setOrigin, so we shift the container's position so its
+ * (centred) child visuals appear at the right place relative to the
+ * resolved anchor coord. Used both at spawn and during applyHudPatch when
+ * the anchor side changes.
  */
-function applyContainerOriginShift(container, side, w, h) {
+/** Default container widths/heights — must mirror the spawners' fallbacks. */
+function defaultContainerWidth(entity) {
+    if (entity.kind === 'icon-button')
+        return entity.visual.width ?? 96;
+    if (entity.kind === 'progress-bar')
+        return entity.visual.width ?? 200;
+    if (entity.kind === 'panel')
+        return entity.visual.width ?? 200;
+    return 0;
+}
+function defaultContainerHeight(entity) {
+    if (entity.kind === 'icon-button')
+        return entity.visual.height ?? 48;
+    if (entity.kind === 'progress-bar')
+        return entity.visual.height ?? 16;
+    if (entity.kind === 'panel')
+        return entity.visual.height ?? 100;
+    return 0;
+}
+function originShiftFor(side, w, h) {
     const map = {
         'top-left': [0, 0],
         'top': [0.5, 0],
@@ -403,11 +433,12 @@ function applyContainerOriginShift(container, side, w, h) {
         'bottom-right': [1, 1],
     };
     const [ox, oy] = map[side];
-    // Container's children are drawn relative to (0,0) inside the container,
-    // and we drew bg at (0,0) (its setOrigin is 0.5/0.5). To shift the
-    // container so the desired anchor corner lands at the resolved coord:
-    container.x += (0.5 - ox) * w;
-    container.y += (0.5 - oy) * h;
+    return { x: (0.5 - ox) * w, y: (0.5 - oy) * h };
+}
+function applyContainerOriginShift(container, side, w, h) {
+    const s = originShiftFor(side, w, h);
+    container.x += s.x;
+    container.y += s.y;
 }
 /**
  * Compute the rendered string for a text source. Static returns the literal;
@@ -645,27 +676,42 @@ export function applyHudPatch(game, entityId, patch) {
         if (typeof patch.anchor.offsetY === 'number')
             entity.anchor.offsetY = patch.anchor.offsetY;
         const pos = resolveAnchor(hud, entity.anchor, safeArea);
-        go.x = pos.x;
-        go.y = pos.y;
-        // Text + image origins were set per anchor.side at spawn — re-apply on
-        // side change so e.g. switching top-left → top-right re-pivots the
-        // origin and the widget grows in the correct direction.
-        if (typeof patch.anchor.side === 'string') {
-            const sideMap = {
-                'top-left': [0, 0],
-                'top': [0.5, 0],
-                'top-right': [1, 0],
-                'left': [0, 0.5],
-                'center': [0.5, 0.5],
-                'right': [1, 0.5],
-                'bottom-left': [0, 1],
-                'bottom': [0.5, 1],
-                'bottom-right': [1, 1],
-            };
-            const o = sideMap[patch.anchor.side];
-            if (o) {
-                const setOrigin = go.setOrigin;
-                setOrigin?.call(go, o[0], o[1]);
+        // Container-based widgets (icon-button, progress-bar, panel) have no
+        // setOrigin — they were shifted at spawn by `applyContainerOriginShift`
+        // so their centred child visuals appear at the right place. The same
+        // shift must be re-applied on every anchor change, otherwise the
+        // container ends up centred on the raw anchor coord and the visual is
+        // off by ±(w/2, h/2). Text + image have setOrigin so we use that path.
+        const isContainer = entity.kind === 'icon-button' || entity.kind === 'progress-bar' || entity.kind === 'panel';
+        if (isContainer) {
+            const visual = entity.visual;
+            const w = visual.width ?? defaultContainerWidth(entity);
+            const h = visual.height ?? defaultContainerHeight(entity);
+            const shift = originShiftFor(entity.anchor.side, w, h);
+            go.x = pos.x + shift.x;
+            go.y = pos.y + shift.y;
+        }
+        else {
+            go.x = pos.x;
+            go.y = pos.y;
+            // Re-pivot the origin for setOrigin-based widgets (text, image).
+            if (typeof patch.anchor.side === 'string') {
+                const sideMap = {
+                    'top-left': [0, 0],
+                    'top': [0.5, 0],
+                    'top-right': [1, 0],
+                    'left': [0, 0.5],
+                    'center': [0.5, 0.5],
+                    'right': [1, 0.5],
+                    'bottom-left': [0, 1],
+                    'bottom': [0.5, 1],
+                    'bottom-right': [1, 1],
+                };
+                const o = sideMap[patch.anchor.side];
+                if (o) {
+                    const setOrigin = go.setOrigin;
+                    setOrigin?.call(go, o[0], o[1]);
+                }
             }
         }
     }

package/package.json

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