@energy8platform/game-engine 0.3.0 → 0.5.0

package/src/ui/Button.ts

@@ -1,8 +1,8 @@
-import { Container, Graphics, Sprite, Texture } from 'pixi.js';
-import { Tween } from '../animation/Tween';
-import { Easing } from '../animation/Easing';
+import { Graphics, Texture } from 'pixi.js';
+import { FancyButton } from '@pixi/ui';
+import type { ButtonOptions } from '@pixi/ui';
 
-export type ButtonState = 'normal' | 'hover' | 'pressed' | 'disabled';
+export type ButtonState = 'default' | 'hover' | 'pressed' | 'disabled';
 
 export interface ButtonConfig {
   /** Default texture/sprite for each state (optional — uses Graphics if not provided) */
@@ -21,179 +21,120 @@ export interface ButtonConfig {
   animationDuration?: number;
   /** Start disabled */
   disabled?: boolean;
+  /** Button text */
+  text?: string;
+  /** Button text style */
+  textStyle?: Record<string, unknown>;
 }
 
 const DEFAULT_COLORS: Record<ButtonState, number> = {
-  normal: 0xffd700,
+  default: 0xffd700,
   hover: 0xffe44d,
   pressed: 0xccac00,
   disabled: 0x666666,
 };
 
+function makeGraphicsView(
+  w: number, h: number, radius: number, color: number,
+): Graphics {
+  const g = new Graphics();
+  g.roundRect(0, 0, w, h, radius).fill(color);
+  // Highlight overlay
+  g.roundRect(2, 2, w - 4, h * 0.45, radius).fill({ color: 0xffffff, alpha: 0.1 });
+  return g;
+}
+
 /**
- * Interactive button component with state management and animation.
+ * Interactive button component powered by `@pixi/ui` FancyButton.
  *
- * Supports both texture-based and Graphics-based rendering.
+ * Supports both texture-based and Graphics-based rendering with
+ * per-state views, press animation, and text.
  *
  * @example
  * ```ts
  * const btn = new Button({
  *   width: 200, height: 60, borderRadius: 12,
- *   colors: { normal: 0x22aa22, hover: 0x33cc33 },
+ *   colors: { default: 0x22aa22, hover: 0x33cc33 },
+ *   text: 'SPIN',
  * });
  *
- * btn.onTap = () => console.log('Clicked!');
+ * btn.onPress.connect(() => console.log('Clicked!'));
  * scene.container.addChild(btn);
  * ```
  */
-export class Button extends Container {
-  private _state: ButtonState = 'normal';
-  private _bg: Graphics;
-  private _sprites: Partial<Record<ButtonState, Sprite>> = {};
-  private _config: Required<
+export class Button extends FancyButton {
+  private _buttonConfig: Required<
     Pick<ButtonConfig, 'width' | 'height' | 'borderRadius' | 'pressScale' | 'animationDuration'>
   > & ButtonConfig;
 
-  /** Called when the button is tapped/clicked */
-  public onTap?: () => void;
-
-  /** Called when the button state changes */
-  public onStateChange?: (state: ButtonState) => void;
-
   constructor(config: ButtonConfig = {}) {
-    super();
-
-    this._config = {
-      width: 200,
-      height: 60,
-      borderRadius: 8,
-      pressScale: 0.95,
-      animationDuration: 100,
+    const resolvedConfig = {
+      width: config.width ?? 200,
+      height: config.height ?? 60,
+      borderRadius: config.borderRadius ?? 8,
+      pressScale: config.pressScale ?? 0.95,
+      animationDuration: config.animationDuration ?? 100,
       ...config,
     };
 
-    // Create Graphics background
-    this._bg = new Graphics();
-    this.addChild(this._bg);
+    const colorMap = { ...DEFAULT_COLORS, ...config.colors };
+    const { width, height, borderRadius } = resolvedConfig;
+
+    // Build FancyButton options
+    const options: ButtonOptions = {
+      anchor: 0.5,
+      animations: {
+        hover: {
+          props: { scale: { x: 1.03, y: 1.03 } },
+          duration: resolvedConfig.animationDuration,
+        },
+        pressed: {
+          props: { scale: { x: resolvedConfig.pressScale, y: resolvedConfig.pressScale } },
+          duration: resolvedConfig.animationDuration,
+        },
+      },
+    };
 
-    // Create texture sprites if provided
+    // Texture-based views
     if (config.textures) {
-      for (const [state, tex] of Object.entries(config.textures)) {
-        const texture = typeof tex === 'string' ? Texture.from(tex) : tex;
-        const sprite = new Sprite(texture);
-        sprite.anchor.set(0.5);
-        sprite.visible = state === 'normal';
-        this._sprites[state as ButtonState] = sprite;
-        this.addChild(sprite);
-      }
+      if (config.textures.default) options.defaultView = config.textures.default as any;
+      if (config.textures.hover) options.hoverView = config.textures.hover as any;
+      if (config.textures.pressed) options.pressedView = config.textures.pressed as any;
+      if (config.textures.disabled) options.disabledView = config.textures.disabled as any;
+    } else {
+      // Graphics-based views
+      options.defaultView = makeGraphicsView(width, height, borderRadius, colorMap.default);
+      options.hoverView = makeGraphicsView(width, height, borderRadius, colorMap.hover);
+      options.pressedView = makeGraphicsView(width, height, borderRadius, colorMap.pressed);
+      options.disabledView = makeGraphicsView(width, height, borderRadius, colorMap.disabled);
     }
 
-    // Make interactive
-    this.eventMode = 'static';
-    this.cursor = 'pointer';
-
-    // Set up hit area for Graphics-based
-    this.pivot.set(this._config.width / 2, this._config.height / 2);
+    // Text
+    if (config.text) {
+      options.text = config.text;
+    }
 
-    // Bind events
-    this.on('pointerover', this.onPointerOver);
-    this.on('pointerout', this.onPointerOut);
-    this.on('pointerdown', this.onPointerDown);
-    this.on('pointerup', this.onPointerUp);
-    this.on('pointertap', this.onPointerTap);
+    super(options);
 
-    // Initial render
-    this.setState('normal');
+    this._buttonConfig = resolvedConfig;
 
     if (config.disabled) {
-      this.disable();
+      this.enabled = false;
     }
   }
 
-  /** Current button state */
-  get state(): ButtonState {
-    return this._state;
-  }
-
   /** Enable the button */
   enable(): void {
-    if (this._state === 'disabled') {
-      this.setState('normal');
-      this.eventMode = 'static';
-      this.cursor = 'pointer';
-    }
+    this.enabled = true;
   }
 
   /** Disable the button */
   disable(): void {
-    this.setState('disabled');
-    this.eventMode = 'none';
-    this.cursor = 'default';
+    this.enabled = false;
   }
 
   /** Whether the button is disabled */
   get disabled(): boolean {
-    return this._state === 'disabled';
+    return !this.enabled;
   }
-
-  private setState(state: ButtonState): void {
-    if (this._state === state) return;
-    this._state = state;
-    this.render();
-    this.onStateChange?.(state);
-  }
-
-  private render(): void {
-    const { width, height, borderRadius, colors } = this._config;
-    const colorMap = { ...DEFAULT_COLORS, ...colors };
-
-    // Update Graphics
-    this._bg.clear();
-    this._bg.roundRect(0, 0, width, height, borderRadius).fill(colorMap[this._state]);
-
-    // Add highlight for normal/hover
-    if (this._state === 'normal' || this._state === 'hover') {
-      this._bg
-        .roundRect(2, 2, width - 4, height * 0.45, borderRadius)
-        .fill({ color: 0xffffff, alpha: 0.1 });
-    }
-
-    // Update sprite visibility
-    for (const [state, sprite] of Object.entries(this._sprites)) {
-      if (sprite) sprite.visible = state === this._state;
-    }
-    // Fall back to normal sprite if state sprite doesn't exist
-    if (!this._sprites[this._state] && this._sprites.normal) {
-      this._sprites.normal.visible = true;
-    }
-  }
-
-  private onPointerOver = (): void => {
-    if (this._state === 'disabled') return;
-    this.setState('hover');
-  };
-
-  private onPointerOut = (): void => {
-    if (this._state === 'disabled') return;
-    this.setState('normal');
-    Tween.to(this.scale, { x: 1, y: 1 }, this._config.animationDuration);
-  };
-
-  private onPointerDown = (): void => {
-    if (this._state === 'disabled') return;
-    this.setState('pressed');
-    const s = this._config.pressScale;
-    Tween.to(this.scale, { x: s, y: s }, this._config.animationDuration, Easing.easeOutQuad);
-  };
-
-  private onPointerUp = (): void => {
-    if (this._state === 'disabled') return;
-    this.setState('hover');
-    Tween.to(this.scale, { x: 1, y: 1 }, this._config.animationDuration, Easing.easeOutBack);
-  };
-
-  private onPointerTap = (): void => {
-    if (this._state === 'disabled') return;
-    this.onTap?.();
-  };
 }

package/src/ui/Layout.ts

@@ -1,4 +1,5 @@
 import { Container } from 'pixi.js';
+import type { LayoutStyles } from '@pixi/layout';
 
 // ─── Types ───────────────────────────────────────────────
 
@@ -38,8 +39,65 @@ export interface LayoutConfig {
   breakpoints?: Record<number, Partial<LayoutConfig>>;
 }
 
+// ─── Helpers ─────────────────────────────────────────────
+
+const ALIGNMENT_MAP: Record<LayoutAlignment, LayoutStyles['alignItems']> = {
+  start: 'flex-start',
+  center: 'center',
+  end: 'flex-end',
+  stretch: 'stretch',
+};
+
+function normalizePadding(
+  padding: number | [number, number, number, number],
+): [number, number, number, number] {
+  if (typeof padding === 'number') return [padding, padding, padding, padding];
+  return padding;
+}
+
+function directionToFlexStyles(
+  direction: LayoutDirection,
+  maxWidth: number,
+): Partial<LayoutStyles> {
+  switch (direction) {
+    case 'horizontal':
+      return { flexDirection: 'row', flexWrap: 'nowrap' };
+    case 'vertical':
+      return { flexDirection: 'column', flexWrap: 'nowrap' };
+    case 'grid':
+      return { flexDirection: 'row', flexWrap: 'wrap' };
+    case 'wrap':
+      return {
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        ...(maxWidth < Infinity ? { maxWidth } : {}),
+      };
+  }
+}
+
+function buildLayoutStyles(config: {
+  direction: LayoutDirection;
+  gap: number;
+  alignment: LayoutAlignment;
+  columns: number;
+  padding: [number, number, number, number];
+  maxWidth: number;
+}): LayoutStyles {
+  const [pt, pr, pb, pl] = config.padding;
+
+  return {
+    ...directionToFlexStyles(config.direction, config.maxWidth),
+    gap: config.gap,
+    alignItems: ALIGNMENT_MAP[config.alignment],
+    paddingTop: pt,
+    paddingRight: pr,
+    paddingBottom: pb,
+    paddingLeft: pl,
+  };
+}
+
 /**
- * Responsive layout container that automatically arranges its children.
+ * Responsive layout container powered by `@pixi/layout` (Yoga flexbox engine).
  *
  * Supports horizontal, vertical, grid, and wrap layout modes with
  * alignment, padding, gap, and viewport-anchor positioning.
@@ -62,17 +120,15 @@ export interface LayoutConfig {
  * toolbar.addItem(betLabel);
  * scene.container.addChild(toolbar);
  *
- * // On resize, update layout position relative to viewport
  * toolbar.updateViewport(width, height);
  * ```
  */
 export class Layout extends Container {
-  private _config: Required<Pick<LayoutConfig, 'direction' | 'gap' | 'alignment' | 'autoLayout' | 'columns'>>;
+  private _layoutConfig: Required<Pick<LayoutConfig, 'direction' | 'gap' | 'alignment' | 'autoLayout' | 'columns'>>;
   private _padding: [number, number, number, number];
   private _anchor: LayoutAnchor;
   private _maxWidth: number;
   private _breakpoints: [number, Partial<LayoutConfig>][];
-  private _content: Container;
   private _items: Container[] = [];
   private _viewportWidth = 0;
   private _viewportHeight = 0;
@@ -80,7 +136,7 @@ export class Layout extends Container {
   constructor(config: LayoutConfig = {}) {
     super();
 
-    this._config = {
+    this._layoutConfig = {
       direction: config.direction ?? 'vertical',
       gap: config.gap ?? 0,
       alignment: config.alignment ?? 'start',
@@ -88,26 +144,28 @@ export class Layout extends Container {
       columns: config.columns ?? 2,
     };
 
-    this._padding = Layout.normalizePadding(config.padding ?? 0);
+    this._padding = normalizePadding(config.padding ?? 0);
     this._anchor = config.anchor ?? 'top-left';
     this._maxWidth = config.maxWidth ?? Infinity;
 
-    // Sort breakpoints by width ascending for correct resolution
     this._breakpoints = config.breakpoints
       ? Object.entries(config.breakpoints)
           .map(([w, cfg]) => [Number(w), cfg] as [number, Partial<LayoutConfig>])
           .sort((a, b) => a[0] - b[0])
       : [];
 
-    this._content = new Container();
-    this.addChild(this._content);
+    this.applyLayoutStyles();
   }
 
   /** Add an item to the layout */
   addItem(child: Container): this {
     this._items.push(child);
-    this._content.addChild(child);
-    if (this._config.autoLayout) this.layout();
+    this.addChild(child);
+
+    if (this._layoutConfig.direction === 'grid') {
+      this.applyGridChildWidth(child);
+    }
+
     return this;
   }
 
@@ -116,8 +174,7 @@ export class Layout extends Container {
     const idx = this._items.indexOf(child);
     if (idx !== -1) {
       this._items.splice(idx, 1);
-      this._content.removeChild(child);
-      if (this._config.autoLayout) this.layout();
+      this.removeChild(child);
     }
     return this;
   }
@@ -125,10 +182,9 @@ export class Layout extends Container {
   /** Remove all items */
   clearItems(): this {
     for (const item of this._items) {
-      this._content.removeChild(item);
+      this.removeChild(item);
     }
     this._items.length = 0;
-    if (this._config.autoLayout) this.layout();
     return this;
   }
 
@@ -144,192 +200,81 @@ export class Layout extends Container {
   updateViewport(width: number, height: number): void {
     this._viewportWidth = width;
     this._viewportHeight = height;
-    this.layout();
+    this.applyLayoutStyles();
+    this.applyAnchor();
   }
 
-  /**
-   * Recalculate layout positions of all children.
-   */
-  layout(): void {
-    if (this._items.length === 0) return;
-
-    // Resolve effective config (apply breakpoint overrides)
+  private applyLayoutStyles(): void {
     const effective = this.resolveConfig();
-    const gap = effective.gap ?? this._config.gap;
-    const direction = effective.direction ?? this._config.direction;
-    const alignment = effective.alignment ?? this._config.alignment;
-    const columns = effective.columns ?? this._config.columns;
+    const direction = effective.direction ?? this._layoutConfig.direction;
+    const gap = effective.gap ?? this._layoutConfig.gap;
+    const alignment = effective.alignment ?? this._layoutConfig.alignment;
+    const columns = effective.columns ?? this._layoutConfig.columns;
     const padding = effective.padding !== undefined
-      ? Layout.normalizePadding(effective.padding)
+      ? normalizePadding(effective.padding)
       : this._padding;
     const maxWidth = effective.maxWidth ?? this._maxWidth;
 
-    const [pt, pr, pb, pl] = padding;
-
-    switch (direction) {
-      case 'horizontal':
-        this.layoutLinear('x', 'y', gap, alignment, pl, pt);
-        break;
-      case 'vertical':
-        this.layoutLinear('y', 'x', gap, alignment, pt, pl);
-        break;
-      case 'grid':
-        this.layoutGrid(columns, gap, alignment, pl, pt);
-        break;
-      case 'wrap':
-        this.layoutWrap(maxWidth - pl - pr, gap, alignment, pl, pt);
-        break;
-    }
-
-    // Apply anchor positioning relative to viewport
-    this.applyAnchor(effective.anchor ?? this._anchor);
-  }
+    const styles = buildLayoutStyles({ direction, gap, alignment, columns, padding, maxWidth });
+    this.layout = styles;
 
-  // ─── Private layout helpers ────────────────────────────
-
-  private layoutLinear(
-    mainAxis: 'x' | 'y',
-    crossAxis: 'x' | 'y',
-    gap: number,
-    alignment: LayoutAlignment,
-    mainOffset: number,
-    crossOffset: number,
-  ): void {
-    let pos = mainOffset;
-    const sizes = this._items.map(item => this.getItemSize(item));
-    const maxCross = Math.max(...sizes.map(s => (crossAxis === 'x' ? s.width : s.height)));
-
-    for (let i = 0; i < this._items.length; i++) {
-      const item = this._items[i];
-      const size = sizes[i];
-
-      item[mainAxis] = pos;
-
-      // Cross-axis alignment
-      const itemCross = crossAxis === 'x' ? size.width : size.height;
-      switch (alignment) {
-        case 'start':
-          item[crossAxis] = crossOffset;
-          break;
-        case 'center':
-          item[crossAxis] = crossOffset + (maxCross - itemCross) / 2;
-          break;
-        case 'end':
-          item[crossAxis] = crossOffset + maxCross - itemCross;
-          break;
-        case 'stretch':
-          item[crossAxis] = crossOffset;
-          // Note: stretch doesn't resize children — that's up to the item
-          break;
+    if (direction === 'grid') {
+      for (const item of this._items) {
+        this.applyGridChildWidth(item);
       }
-
-      const mainSize = mainAxis === 'x' ? size.width : size.height;
-      pos += mainSize + gap;
     }
   }
 
-  private layoutGrid(
-    columns: number,
-    gap: number,
-    alignment: LayoutAlignment,
-    offsetX: number,
-    offsetY: number,
-  ): void {
-    const sizes = this._items.map(item => this.getItemSize(item));
-    const maxItemWidth = Math.max(...sizes.map(s => s.width));
-    const maxItemHeight = Math.max(...sizes.map(s => s.height));
-    const cellW = maxItemWidth + gap;
-    const cellH = maxItemHeight + gap;
-
-    for (let i = 0; i < this._items.length; i++) {
-      const item = this._items[i];
-      const col = i % columns;
-      const row = Math.floor(i / columns);
-      const size = sizes[i];
-
-      // X alignment within cell
-      switch (alignment) {
-        case 'center':
-          item.x = offsetX + col * cellW + (maxItemWidth - size.width) / 2;
-          break;
-        case 'end':
-          item.x = offsetX + col * cellW + maxItemWidth - size.width;
-          break;
-        default:
-          item.x = offsetX + col * cellW;
-      }
-
-      item.y = offsetY + row * cellH;
-    }
-  }
-
-  private layoutWrap(
-    maxWidth: number,
-    gap: number,
-    alignment: LayoutAlignment,
-    offsetX: number,
-    offsetY: number,
-  ): void {
-    let x = offsetX;
-    let y = offsetY;
-    let rowHeight = 0;
-    const sizes = this._items.map(item => this.getItemSize(item));
-
-    for (let i = 0; i < this._items.length; i++) {
-      const item = this._items[i];
-      const size = sizes[i];
-
-      // Check if item fits in current row
-      if (x + size.width > maxWidth + offsetX && x > offsetX) {
-        // Wrap to next row
-        x = offsetX;
-        y += rowHeight + gap;
-        rowHeight = 0;
-      }
-
-      item.x = x;
-      item.y = y;
-
-      x += size.width + gap;
-      rowHeight = Math.max(rowHeight, size.height);
+  private applyGridChildWidth(child: Container): void {
+    const effective = this.resolveConfig();
+    const columns = effective.columns ?? this._layoutConfig.columns;
+    const gap = effective.gap ?? this._layoutConfig.gap;
+
+    // Account for gaps between columns: total gap space = gap * (columns - 1)
+    // Each column gets: (100% - total_gap) / columns
+    // We use flexBasis + flexGrow to let Yoga handle the math when gap > 0
+    const styles: Record<string, unknown> = gap > 0
+      ? { flexBasis: 0, flexGrow: 1, flexShrink: 1, maxWidth: `${(100 / columns).toFixed(2)}%` }
+      : { width: `${(100 / columns).toFixed(2)}%` };
+
+    if (child._layout) {
+      child._layout.setStyle(styles);
+    } else {
+      child.layout = styles;
     }
   }
 
-  private applyAnchor(anchor: LayoutAnchor): void {
+  private applyAnchor(): void {
+    const anchor = this.resolveConfig().anchor ?? this._anchor;
     if (this._viewportWidth === 0 || this._viewportHeight === 0) return;
 
-    const bounds = this._content.getBounds();
-    const contentW = bounds.width;
-    const contentH = bounds.height;
+    const bounds = this.getLocalBounds();
+    const contentW = bounds.width * this.scale.x;
+    const contentH = bounds.height * this.scale.y;
     const vw = this._viewportWidth;
     const vh = this._viewportHeight;
 
     let anchorX = 0;
     let anchorY = 0;
 
-    // Horizontal
     if (anchor.includes('left')) {
       anchorX = 0;
     } else if (anchor.includes('right')) {
       anchorX = vw - contentW;
     } else {
-      // center
       anchorX = (vw - contentW) / 2;
     }
 
-    // Vertical
     if (anchor.startsWith('top')) {
       anchorY = 0;
     } else if (anchor.startsWith('bottom')) {
       anchorY = vh - contentH;
     } else {
-      // center
       anchorY = (vh - contentH) / 2;
     }
 
-    // Compensate for content's local bounds offset
-    this.x = anchorX - bounds.x;
-    this.y = anchorY - bounds.y;
+    this.x = anchorX - bounds.x * this.scale.x;
+    this.y = anchorY - bounds.y * this.scale.y;
   }
 
   private resolveConfig(): Partial<LayoutConfig> {
@@ -337,28 +282,11 @@ export class Layout extends Container {
       return {};
     }
 
-    // Find the largest breakpoint that's ≤ current viewport width
-    let resolved: Partial<LayoutConfig> = {};
     for (const [maxWidth, overrides] of this._breakpoints) {
       if (this._viewportWidth <= maxWidth) {
-        resolved = overrides;
-        break;
+        return overrides;
       }
     }
-    return resolved;
-  }
-
-  private getItemSize(item: Container): { width: number; height: number } {
-    const bounds = item.getBounds();
-    return { width: bounds.width, height: bounds.height };
-  }
-
-  private static normalizePadding(
-    padding: number | [number, number, number, number],
-  ): [number, number, number, number] {
-    if (typeof padding === 'number') {
-      return [padding, padding, padding, padding];
-    }
-    return padding;
+    return {};
   }
 }