@energy8platform/game-engine 0.2.1 → 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;
   }
 }

package/src/ui/ScrollContainer.ts

@@ -0,0 +1,126 @@
+import { Container, type ColorSource } from 'pixi.js';
+import { ScrollBox as PixiScrollBox } from '@pixi/ui';
+import type { ScrollBoxOptions } from '@pixi/ui';
+
+// ─── Types ───────────────────────────────────────────────
+
+export type ScrollDirection = 'vertical' | 'horizontal' | 'both';
+
+export interface ScrollContainerConfig {
+  /** Visible viewport width */
+  width: number;
+
+  /** Visible viewport height */
+  height: number;
+
+  /** Scroll direction (default: 'vertical') */
+  direction?: ScrollDirection;
+
+  /** Background color (undefined = transparent) */
+  backgroundColor?: ColorSource;
+
+  /** Border radius for the mask (default: 0) */
+  borderRadius?: number;
+
+  /** Gap between items (default: 0) */
+  elementsMargin?: number;
+
+  /** Padding */
+  padding?: number;
+
+  /** Disable dynamic rendering (render all items even when offscreen) */
+  disableDynamicRendering?: boolean;
+
+  /** Disable easing/inertia */
+  disableEasing?: boolean;
+
+  /** Global scroll — scroll even when mouse is not over the component */
+  globalScroll?: boolean;
+}
+
+const DIRECTION_MAP: Record<ScrollDirection, 'vertical' | 'horizontal' | 'bidirectional'> = {
+  vertical: 'vertical',
+  horizontal: 'horizontal',
+  both: 'bidirectional',
+};
+
+/**
+ * Scrollable container powered by `@pixi/ui` ScrollBox.
+ *
+ * Provides touch/drag scrolling, mouse wheel support, inertia, and
+ * dynamic rendering optimization for off-screen items.
+ *
+ * @example
+ * ```ts
+ * const scroll = new ScrollContainer({
+ *   width: 600,
+ *   height: 400,
+ *   direction: 'vertical',
+ *   elementsMargin: 8,
+ * });
+ *
+ * for (let i = 0; i < 50; i++) {
+ *   scroll.addItem(createRow(i));
+ * }
+ *
+ * scene.container.addChild(scroll);
+ * ```
+ */
+export class ScrollContainer extends PixiScrollBox {
+  private _scrollConfig: ScrollContainerConfig;
+
+  constructor(config: ScrollContainerConfig) {
+    const options: ScrollBoxOptions = {
+      width: config.width,
+      height: config.height,
+      type: DIRECTION_MAP[config.direction ?? 'vertical'],
+      radius: config.borderRadius ?? 0,
+      elementsMargin: config.elementsMargin ?? 0,
+      padding: config.padding ?? 0,
+      disableDynamicRendering: config.disableDynamicRendering ?? false,
+      disableEasing: config.disableEasing ?? false,
+      globalScroll: config.globalScroll ?? true,
+    };
+
+    if (config.backgroundColor !== undefined) {
+      options.background = config.backgroundColor;
+    }
+
+    super(options);
+
+    this._scrollConfig = config;
+  }
+
+  /** Set scrollable content. Replaces any existing content. */
+  setContent(content: Container): void {
+    // Remove existing items
+    const existing = this.items;
+    if (existing.length > 0) {
+      for (let i = existing.length - 1; i >= 0; i--) {
+        this.removeItem(i);
+      }
+    }
+
+    // Add all children from the content container
+    const children = [...content.children] as Container[];
+    if (children.length > 0) {
+      this.addItems(children);
+    }
+  }
+
+  /** Add a single item */
+  addItem(...items: Container[]): Container {
+    this.addItems(items);
+    return items[0];
+  }
+
+  /** Scroll to make a specific item/child visible */
+  scrollToItem(index: number): void {
+    this.scrollTo(index);
+  }
+
+  /** Current scroll position */
+  get scrollPosition(): { x: number; y: number } {
+    return { x: this.scrollX, y: this.scrollY };
+  }
+}

package/src/ui/Toast.ts

@@ -1,4 +1,5 @@
-import { Container, Graphics, Text } from 'pixi.js';
+import { Container, Text } from 'pixi.js';
+import { LayoutContainer } from '@pixi/layout/components';
 import { Tween } from '../animation/Tween';
 import { Easing } from '../animation/Easing';
 
@@ -21,6 +22,8 @@ const TOAST_COLORS: Record<ToastType, number> = {
 /**
  * Toast notification component for displaying transient messages.
  *
+ * Uses `@pixi/layout` LayoutContainer for auto-sized background.
+ *
  * @example
  * ```ts
  * const toast = new Toast();
@@ -29,7 +32,7 @@ const TOAST_COLORS: Record<ToastType, number> = {
  * ```
  */
 export class Toast extends Container {
-  private _bg: Graphics;
+  private _bg: LayoutContainer;
   private _text: Text;
   private _config: Required<ToastConfig>;
   private _dismissTimeout: ReturnType<typeof setTimeout> | null = null;
@@ -38,12 +41,11 @@ export class Toast extends Container {
     super();
 
     this._config = {
-      duration: 3000,
-      bottomOffset: 60,
-      ...config,
+      duration: config.duration ?? 3000,
+      bottomOffset: config.bottomOffset ?? 60,
     };
 
-    this._bg = new Graphics();
+    this._bg = new LayoutContainer();
     this.addChild(this._bg);
 
     this._text = new Text({
@@ -69,7 +71,6 @@ export class Toast extends Container {
     viewWidth?: number,
     viewHeight?: number,
   ): Promise<void> {
-    // Clear previous dismiss
     if (this._dismissTimeout) {
       clearTimeout(this._dismissTimeout);
     }
@@ -81,10 +82,17 @@ export class Toast extends Container {
     const height = 44;
     const radius = 8;
 
-    this._bg.clear();
-    this._bg.roundRect(-width / 2, -height / 2, width, height, radius).fill(TOAST_COLORS[type]);
-    this._bg.roundRect(-width / 2, -height / 2, width, height, radius)
-      .fill({ color: 0x000000, alpha: 0.2 });
+    // Style the background
+    this._bg.layout = {
+      width,
+      height,
+      borderRadius: radius,
+      backgroundColor: TOAST_COLORS[type],
+    };
+
+    // Center the bg around origin
+    this._bg.x = -width / 2;
+    this._bg.y = -height / 2;
 
     // Position
     if (viewWidth && viewHeight) {
@@ -96,10 +104,8 @@ export class Toast extends Container {
     this.alpha = 0;
     this.y += 20;
 
-    // Animate in
     await Tween.to(this, { alpha: 1, y: this.y - 20 }, 300, Easing.easeOutCubic);
 
-    // Auto-dismiss
     if (this._config.duration > 0) {
       this._dismissTimeout = setTimeout(() => {
         this.dismiss();

package/src/ui/index.ts

@@ -1,3 +1,7 @@
+// ─── @pixi/layout setup (must be imported before creating containers) ────
+import '@pixi/layout';
+
+// ─── Engine UI Components ─────────────────────────────────
 export { Button } from './Button';
 export type { ButtonConfig, ButtonState } from './Button';
 export { ProgressBar } from './ProgressBar';
@@ -14,3 +18,16 @@ export { Modal } from './Modal';
 export type { ModalConfig } from './Modal';
 export { Toast } from './Toast';
 export type { ToastConfig, ToastType } from './Toast';
+export { Layout } from './Layout';
+export type { LayoutConfig, LayoutDirection, LayoutAlignment, LayoutAnchor } from './Layout';
+export { ScrollContainer } from './ScrollContainer';
+export type { ScrollContainerConfig, ScrollDirection } from './ScrollContainer';
+
+// ─── Re-exports from @pixi/ui for direct use ─────────────
+export { FancyButton, ScrollBox, ButtonContainer } from '@pixi/ui';
+export type { ButtonOptions, ScrollBoxOptions, ProgressBarOptions } from '@pixi/ui';
+
+// ─── Re-exports from @pixi/layout for direct use ─────────
+export { LayoutContainer } from '@pixi/layout/components';
+export { Layout as PixiLayout } from '@pixi/layout';
+export type { LayoutStyles, LayoutOptions } from '@pixi/layout';

package/src/viewport/ViewportManager.ts

@@ -205,6 +205,8 @@ export class ViewportManager extends EventEmitter<ViewportEvents> {
     this._destroyed = true;
     this._resizeObserver?.disconnect();
     this._resizeObserver = null;
+    // Remove fallback window resize listener if it was used
+    window.removeEventListener('resize', this.onWindowResize);
     if (this._resizeTimeout !== null) {
       clearTimeout(this._resizeTimeout);
     }