@energy8platform/game-engine 0.14.9 → 0.15.0

package/dist/react.esm.js

@@ -22,7 +22,7 @@ function extend(components) {
 
 const RESERVED = new Set(['children', 'key', 'ref']);
 /** Props handled by the reconciler as flex item config, not forwarded to components */
-const FLEX_ITEM_PROPS$1 = new Set(['flexGrow', 'flexShrink', 'layoutWidth', 'layoutHeight', 'alignSelf', 'flexExclude', 'top', 'right', 'bottom', 'left']);
+const FLEX_ITEM_PROPS$1 = new Set(['flexGrow', 'flexShrink', 'layoutWidth', 'layoutHeight', 'alignSelf', 'flexExclude', 'top', 'right', 'bottom', 'left', 'centerX', 'centerY']);
 /** Base Container props applied directly to the instance (not via config) */
 const CONTAINER_PROPS = new Set([
     'x', 'y', 'alpha', 'visible', 'rotation', 'angle', 'zIndex',
@@ -149,6 +149,34 @@ function hasEventProps(props) {
     }
     return false;
 }
+/**
+ * Graphics does not have an intrinsic size — its bounds come from the `draw` callback.
+ * PixiJS's `Container.width` setter applies a scale transform to match the requested
+ * value, which silently makes the rendered size diverge from `getLocalBounds()` and
+ * breaks downstream flex layout. For Graphics we treat `width`/`height` as layout
+ * hints instead, storing them on `_flexConfig.layoutWidth`/`layoutHeight` so parent
+ * FlexContainers measure correctly without touching the child's scale.
+ */
+function isGraphicsLike(instance) {
+    return typeof instance?.clear === 'function'
+        && typeof instance?.fill === 'function'
+        && typeof instance?.rect === 'function';
+}
+/** Redirect a width/height write on a Graphics into its flex layout hint. Returns true if handled. */
+function applyGraphicsDimension(instance, key, value) {
+    if ((key !== 'width' && key !== 'height') || !isGraphicsLike(instance))
+        return false;
+    const target = key === 'width' ? 'layoutWidth' : 'layoutHeight';
+    if (value === undefined) {
+        if (instance._flexConfig)
+            delete instance._flexConfig[target];
+        return true;
+    }
+    if (!instance._flexConfig)
+        instance._flexConfig = {};
+    instance._flexConfig[target] = value;
+    return true;
+}
 function setNestedValue(target, path, value) {
     let obj = target;
     for (let i = 0; i < path.length - 1; i++) {
@@ -213,6 +241,7 @@ function applyProps(instance, newProps, oldProps = {}) {
         }
         else if (key === 'draw') ;
         else if (key.includes('-')) ;
+        else if (applyGraphicsDimension(instance, key, undefined)) ;
         else {
             try {
                 instance[key] = undefined;
@@ -239,6 +268,7 @@ function applyProps(instance, newProps, oldProps = {}) {
             const parts = key.split('-');
             setNestedValue(instance, parts, value);
         }
+        else if (applyGraphicsDimension(instance, key, value)) ;
         else {
             try {
                 instance[key] = value;
@@ -787,22 +817,31 @@ class FlexContainer extends Container {
             this._computedWidth = this._explicitWidth > 0 ? this._explicitWidth : (pl + totalCrossNatural + pr);
             this._computedHeight = this._explicitHeight > 0 ? this._explicitHeight : (pt + naturalMainSize + pb);
         }
-        // Position flexExclude children (absolute positioning)
+        // Position flexExclude children (absolute positioning).
+        // All position props describe the visual (bounds) rectangle, so we subtract
+        // `ox/oy` to compensate for children with a centered origin (Button, Label).
+        // `centerX/centerY` take precedence over `left/right` / `top/bottom` on each axis.
         for (const child of this._layoutChildren) {
             if (!child._flexConfig?.flexExclude)
                 continue;
             const cfg = child._flexConfig;
-            const { w, h } = measureChild(child, pctRefW, pctRefH);
+            const { w, h, ox, oy } = measureChild(child, pctRefW, pctRefH);
             const cw = this._computedWidth;
             const ch = this._computedHeight;
-            if (cfg.left !== undefined)
-                child.x = cfg.left;
+            const centerX = resolveDimension(cfg.centerX, pctRefW);
+            if (centerX !== undefined)
+                child.x = centerX - w / 2 - ox;
+            else if (cfg.left !== undefined)
+                child.x = cfg.left - ox;
             else if (cfg.right !== undefined)
-                child.x = cw - w - cfg.right;
-            if (cfg.top !== undefined)
-                child.y = cfg.top;
+                child.x = cw - w - cfg.right - ox;
+            const centerY = resolveDimension(cfg.centerY, pctRefH);
+            if (centerY !== undefined)
+                child.y = centerY - h / 2 - oy;
+            else if (cfg.top !== undefined)
+                child.y = cfg.top - oy;
             else if (cfg.bottom !== undefined)
-                child.y = ch - h - cfg.bottom;
+                child.y = ch - h - cfg.bottom - oy;
         }
     }
     /** Computed content size (after layout) */
@@ -861,7 +900,7 @@ class FlexContainer extends Container {
 }
 
 /** Flex item prop names that should be forwarded to _flexConfig on the child */
-const FLEX_ITEM_PROPS = ['flexGrow', 'flexShrink', 'layoutWidth', 'layoutHeight', 'alignSelf', 'flexExclude', 'top', 'right', 'bottom', 'left'];
+const FLEX_ITEM_PROPS = ['flexGrow', 'flexShrink', 'layoutWidth', 'layoutHeight', 'alignSelf', 'flexExclude', 'top', 'right', 'bottom', 'left', 'centerX', 'centerY'];
 function isSuspendable(obj) {
     return typeof obj?.suspendLayout === 'function' && typeof obj?.resumeLayout === 'function';
 }
@@ -1860,6 +1899,97 @@ class Label extends Container {
     }
 }
 
+/**
+ * Two-row text cell with a muted caption above and a prominent value below —
+ * the archetypal casino UI pattern (BALANCE/€500, BET/€1, WIN/€0.00).
+ *
+ * Extends FlexContainer, so it participates in parent flex layouts directly
+ * (you can pass `flexGrow`, `alignSelf`, etc. when it's a child of another
+ * FlexContainer) and auto-sizes to its contents when no explicit size is set.
+ *
+ * @example
+ * ```tsx
+ * <labelValue
+ *   label="BALANCE"
+ *   value={`€${balance.toFixed(2)}`}
+ *   labelStyle={{ fontSize: 12, fill: 0x888888 }}
+ *   valueStyle={{ fontSize: 22, fill: 0xffffff, fontWeight: 'bold' }}
+ *   gap={6}
+ *   align="center"
+ * />
+ * ```
+ */
+class LabelValue extends FlexContainer {
+    _labelEl;
+    _valueEl;
+    _valueMaxWidth;
+    constructor(config = {}) {
+        super({
+            direction: 'column',
+            alignItems: toAlignItems(config.align ?? 'center'),
+            gap: config.gap ?? 4,
+            padding: config.padding,
+        });
+        this._valueMaxWidth = config.maxWidth ?? Infinity;
+        this._labelEl = new Label({
+            text: config.label ?? '',
+            style: config.labelStyle,
+        });
+        this._valueEl = new Label({
+            text: config.value ?? '',
+            style: config.valueStyle,
+            maxWidth: config.maxWidth,
+            autoFit: config.maxWidth !== undefined,
+        });
+        this.addFlexChild(this._labelEl);
+        this.addFlexChild(this._valueEl);
+    }
+    /** Get the caption Label (for advanced styling / animation) */
+    get labelElement() {
+        return this._labelEl;
+    }
+    /** Get the value Label */
+    get valueElement() {
+        return this._valueEl;
+    }
+    /** Update caption text */
+    setLabel(text) {
+        this._labelEl.text = text;
+        this.updateLayout();
+    }
+    /** Update value text */
+    setValue(text) {
+        this._valueEl.text = text;
+        this.updateLayout();
+    }
+    /** React reconciler update hook */
+    updateConfig(changed) {
+        if ('label' in changed)
+            this._labelEl.text = changed.label ?? '';
+        if ('value' in changed)
+            this._valueEl.text = changed.value ?? '';
+        if ('labelStyle' in changed && typeof changed.labelStyle === 'object') {
+            Object.assign(this._labelEl.style, changed.labelStyle);
+        }
+        if ('valueStyle' in changed && typeof changed.valueStyle === 'object') {
+            Object.assign(this._valueEl.style, changed.valueStyle);
+        }
+        if ('maxWidth' in changed) {
+            this._valueMaxWidth = changed.maxWidth ?? Infinity;
+            this._valueEl.maxWidth = this._valueMaxWidth;
+        }
+        if ('gap' in changed)
+            this.setGap(changed.gap);
+        if ('align' in changed)
+            this.setAlignItems(toAlignItems(changed.align));
+        // Forward remaining FlexContainer props (e.g. padding, width, height)
+        super.updateConfig(changed);
+    }
+}
+function toAlignItems(align) {
+    return align;
+}
+
 /**
  * Background panel with optional flexbox content layout.
  *
@@ -3457,7 +3587,7 @@ function extendPixiElements() {
  */
 function extendUIElements() {
     extend({
-        Button, Label, Panel, FlexContainer, ProgressBar,
+        Button, Label, LabelValue, Panel, FlexContainer, ProgressBar,
         ScrollContainer, Modal, Toast, BalanceDisplay, WinDisplay, Layout,
         Slider, Toggle,
     });