@energy8platform/game-engine 0.3.0 → 0.4.0

package/src/ui/Panel.ts

@@ -1,4 +1,6 @@
-import { Container, Graphics, NineSliceSprite, Texture } from 'pixi.js';
+import { Container, NineSliceSprite, Texture } from 'pixi.js';
+import { LayoutContainer } from '@pixi/layout/components';
+import type { LayoutStyles } from '@pixi/layout';
 
 export interface PanelConfig {
   /** Width */
@@ -24,7 +26,10 @@ export interface PanelConfig {
 }
 
 /**
- * Background panel that can use either Graphics or 9-slice sprite.
+ * Background panel powered by `@pixi/layout` LayoutContainer.
+ *
+ * Supports both Graphics-based (color + border) and 9-slice sprite backgrounds.
+ * Children added to `content` participate in flexbox layout automatically.
  *
  * @example
  * ```ts
@@ -39,87 +44,79 @@ export interface PanelConfig {
  * });
  * ```
  */
-export class Panel extends Container {
-  private _bg: Graphics | NineSliceSprite;
-  private _content: Container;
-  private _config: Required<
+export class Panel extends LayoutContainer {
+  private _panelConfig: Required<
     Pick<PanelConfig, 'width' | 'height' | 'padding' | 'backgroundAlpha'>
   > & PanelConfig;
 
   constructor(config: PanelConfig = {}) {
-    super();
-
-    this._config = {
-      width: 400,
-      height: 300,
-      padding: 16,
-      backgroundAlpha: 1,
+    const resolvedConfig = {
+      width: config.width ?? 400,
+      height: config.height ?? 300,
+      padding: config.padding ?? 16,
+      backgroundAlpha: config.backgroundAlpha ?? 1,
       ...config,
     };
 
-    // Create background
+    // If using a 9-slice texture, pass it as a custom background
+    let customBackground: Container | undefined;
     if (config.nineSliceTexture) {
       const texture =
         typeof config.nineSliceTexture === 'string'
           ? Texture.from(config.nineSliceTexture)
           : config.nineSliceTexture;
-
       const [left, top, right, bottom] = config.nineSliceBorders ?? [10, 10, 10, 10];
-
-      this._bg = new NineSliceSprite({
+      const nineSlice = new NineSliceSprite({
         texture,
         leftWidth: left,
         topHeight: top,
         rightWidth: right,
         bottomHeight: bottom,
       });
-      (this._bg as NineSliceSprite).width = this._config.width;
-      (this._bg as NineSliceSprite).height = this._config.height;
-    } else {
-      this._bg = new Graphics();
-      this.drawGraphicsBg();
+      nineSlice.width = resolvedConfig.width;
+      nineSlice.height = resolvedConfig.height;
+      nineSlice.alpha = resolvedConfig.backgroundAlpha;
+      customBackground = nineSlice;
     }
 
-    this._bg.alpha = this._config.backgroundAlpha;
-    this.addChild(this._bg);
+    super(customBackground ? { background: customBackground } : undefined);
 
-    // Content container with padding
-    this._content = new Container();
-    this._content.x = this._config.padding;
-    this._content.y = this._config.padding;
-    this.addChild(this._content);
-  }
+    this._panelConfig = resolvedConfig;
 
-  /** Content container — add children here */
-  get content(): Container {
-    return this._content;
-  }
+    // Apply layout styles
+    const layoutStyles: LayoutStyles = {
+      width: resolvedConfig.width,
+      height: resolvedConfig.height,
+      padding: resolvedConfig.padding,
+      flexDirection: 'column',
+    };
 
-  /** Resize the panel */
-  setSize(width: number, height: number): void {
-    this._config.width = width;
-    this._config.height = height;
+    // Graphics-based background via layout styles
+    if (!config.nineSliceTexture) {
+      layoutStyles.backgroundColor = config.backgroundColor ?? 0x1a1a2e;
+      layoutStyles.borderRadius = config.borderRadius ?? 0;
+      if (config.borderColor !== undefined && config.borderWidth) {
+        layoutStyles.borderColor = config.borderColor;
+        layoutStyles.borderWidth = config.borderWidth;
+      }
+    }
+
+    this.layout = layoutStyles;
 
-    if (this._bg instanceof Graphics) {
-      this.drawGraphicsBg();
-    } else {
-      this._bg.width = width;
-      this._bg.height = height;
+    if (!config.nineSliceTexture) {
+      this.background.alpha = resolvedConfig.backgroundAlpha;
     }
   }
 
-  private drawGraphicsBg(): void {
-    const bg = this._bg as Graphics;
-    const {
-      width, height, backgroundColor, borderRadius, borderColor, borderWidth,
-    } = this._config;
-
-    bg.clear();
-    bg.roundRect(0, 0, width!, height!, borderRadius ?? 0).fill(backgroundColor ?? 0x1a1a2e);
+  /** Access the content container (children added here participate in layout) */
+  get content(): Container {
+    return this.overflowContainer;
+  }
 
-    if (borderColor !== undefined && borderWidth) {
-      bg.roundRect(0, 0, width!, height!, borderRadius ?? 0)
-        .stroke({ color: borderColor, width: borderWidth });
-    }
+  /** Resize the panel */
+  setSize(width: number, height: number): void {
+    this._panelConfig.width = width;
+    this._panelConfig.height = height;
+    this._layout?.setStyle({ width, height });
   }
 }

package/src/ui/ProgressBar.ts

@@ -1,4 +1,6 @@
 import { Container, Graphics } from 'pixi.js';
+import { ProgressBar as PixiProgressBar } from '@pixi/ui';
+import type { ProgressBarOptions } from '@pixi/ui';
 
 export interface ProgressBarConfig {
   width?: number;
@@ -14,8 +16,16 @@ export interface ProgressBarConfig {
   animationSpeed?: number;
 }
 
+function makeBarGraphics(
+  w: number, h: number, radius: number, color: number,
+): Graphics {
+  return new Graphics().roundRect(0, 0, w, h, radius).fill(color);
+}
+
 /**
- * Horizontal progress bar with optional smooth fill animation.
+ * Horizontal progress bar powered by `@pixi/ui` ProgressBar.
+ *
+ * Provides optional smooth animated fill via per-frame `update()`.
  *
  * @example
  * ```ts
@@ -25,9 +35,8 @@ export interface ProgressBarConfig {
  * ```
  */
 export class ProgressBar extends Container {
-  private _track: Graphics;
-  private _fill: Graphics;
-  private _border: Graphics;
+  private _bar: PixiProgressBar;
+  private _borderGfx: Graphics;
   private _config: Required<ProgressBarConfig>;
   private _progress = 0;
   private _displayedProgress = 0;
@@ -36,26 +45,45 @@ export class ProgressBar extends Container {
     super();
 
     this._config = {
-      width: 300,
-      height: 16,
-      borderRadius: 8,
-      fillColor: 0xffd700,
-      trackColor: 0x333333,
-      borderColor: 0x555555,
-      borderWidth: 1,
-      animated: true,
-      animationSpeed: 0.1,
-      ...config,
+      width: config.width ?? 300,
+      height: config.height ?? 16,
+      borderRadius: config.borderRadius ?? 8,
+      fillColor: config.fillColor ?? 0xffd700,
+      trackColor: config.trackColor ?? 0x333333,
+      borderColor: config.borderColor ?? 0x555555,
+      borderWidth: config.borderWidth ?? 1,
+      animated: config.animated ?? true,
+      animationSpeed: config.animationSpeed ?? 0.1,
     };
 
-    this._track = new Graphics();
-    this._fill = new Graphics();
-    this._border = new Graphics();
+    const { width, height, borderRadius, fillColor, trackColor, borderColor, borderWidth } = this._config;
 
-    this.addChild(this._track, this._fill, this._border);
-    this.drawTrack();
-    this.drawBorder();
-    this.drawFill(0);
+    const bgGraphics = makeBarGraphics(width, height, borderRadius, trackColor);
+    const fillGraphics = makeBarGraphics(width - borderWidth * 2, height - borderWidth * 2, Math.max(0, borderRadius - 1), fillColor);
+
+    const options: ProgressBarOptions = {
+      bg: bgGraphics,
+      fill: fillGraphics,
+      fillPaddings: {
+        top: borderWidth,
+        right: borderWidth,
+        bottom: borderWidth,
+        left: borderWidth,
+      },
+      progress: 0,
+    };
+
+    this._bar = new PixiProgressBar(options);
+    this.addChild(this._bar);
+
+    // Border overlay
+    this._borderGfx = new Graphics();
+    if (borderColor !== undefined && borderWidth > 0) {
+      this._borderGfx
+        .roundRect(0, 0, width, height, borderRadius)
+        .stroke({ color: borderColor, width: borderWidth });
+    }
+    this.addChild(this._borderGfx);
   }
 
   /** Get/set progress (0..1) */
@@ -67,14 +95,14 @@ export class ProgressBar extends Container {
     this._progress = Math.max(0, Math.min(1, value));
     if (!this._config.animated) {
       this._displayedProgress = this._progress;
-      this.drawFill(this._displayedProgress);
+      this._bar.progress = this._displayedProgress * 100;
     }
   }
 
   /**
    * Call each frame if animated is true.
    */
-  update(dt: number): void {
+  update(_dt: number): void {
     if (!this._config.animated) return;
     if (Math.abs(this._displayedProgress - this._progress) < 0.001) {
       this._displayedProgress = this._progress;
@@ -83,39 +111,6 @@ export class ProgressBar extends Container {
 
     this._displayedProgress +=
       (this._progress - this._displayedProgress) * this._config.animationSpeed;
-    this.drawFill(this._displayedProgress);
-  }
-
-  private drawTrack(): void {
-    const { width, height, borderRadius, trackColor } = this._config;
-    this._track.clear();
-    this._track.roundRect(0, 0, width, height, borderRadius).fill(trackColor);
-  }
-
-  private drawBorder(): void {
-    const { width, height, borderRadius, borderColor, borderWidth } = this._config;
-    this._border.clear();
-    this._border
-      .roundRect(0, 0, width, height, borderRadius)
-      .stroke({ color: borderColor, width: borderWidth });
-  }
-
-  private drawFill(progress: number): void {
-    const { width, height, borderRadius, fillColor, borderWidth } = this._config;
-    const innerWidth = width - borderWidth * 2;
-    const innerHeight = height - borderWidth * 2;
-    const fillWidth = Math.max(0, innerWidth * progress);
-
-    this._fill.clear();
-    if (fillWidth > 0) {
-      this._fill.x = borderWidth;
-      this._fill.y = borderWidth;
-      this._fill.roundRect(0, 0, fillWidth, innerHeight, borderRadius - 1).fill(fillColor);
-
-      // Highlight
-      this._fill
-        .roundRect(0, 0, fillWidth, innerHeight * 0.4, borderRadius - 1)
-        .fill({ color: 0xffffff, alpha: 0.15 });
-    }
+    this._bar.progress = this._displayedProgress * 100;
   }
 }