@energy8platform/game-engine 0.1.0

package/src/ui/Button.ts

@@ -0,0 +1,199 @@
+import { Container, Graphics, Sprite, Texture, FederatedPointerEvent } from 'pixi.js';
+import { Tween } from '../animation/Tween';
+import { Easing } from '../animation/Easing';
+
+export type ButtonState = 'normal' | 'hover' | 'pressed' | 'disabled';
+
+export interface ButtonConfig {
+  /** Default texture/sprite for each state (optional — uses Graphics if not provided) */
+  textures?: Partial<Record<ButtonState, string | Texture>>;
+  /** Width (for Graphics-based button) */
+  width?: number;
+  /** Height (for Graphics-based button) */
+  height?: number;
+  /** Corner radius (for Graphics-based button) */
+  borderRadius?: number;
+  /** Colors for each state (for Graphics-based button) */
+  colors?: Partial<Record<ButtonState, number>>;
+  /** Scale on press */
+  pressScale?: number;
+  /** Scale animation duration (ms) */
+  animationDuration?: number;
+  /** Start disabled */
+  disabled?: boolean;
+}
+
+const DEFAULT_COLORS: Record<ButtonState, number> = {
+  normal: 0xffd700,
+  hover: 0xffe44d,
+  pressed: 0xccac00,
+  disabled: 0x666666,
+};
+
+/**
+ * Interactive button component with state management and animation.
+ *
+ * Supports both texture-based and Graphics-based rendering.
+ *
+ * @example
+ * ```ts
+ * const btn = new Button({
+ *   width: 200, height: 60, borderRadius: 12,
+ *   colors: { normal: 0x22aa22, hover: 0x33cc33 },
+ * });
+ *
+ * btn.onTap = () => 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<
+    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,
+      ...config,
+    };
+
+    // Create Graphics background
+    this._bg = new Graphics();
+    this.addChild(this._bg);
+
+    // Create texture sprites if provided
+    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);
+      }
+    }
+
+    // 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);
+
+    // 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);
+
+    // Initial render
+    this.setState('normal');
+
+    if (config.disabled) {
+      this.disable();
+    }
+  }
+
+  /** 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';
+    }
+  }
+
+  /** Disable the button */
+  disable(): void {
+    this.setState('disabled');
+    this.eventMode = 'none';
+    this.cursor = 'default';
+  }
+
+  /** Whether the button is disabled */
+  get disabled(): boolean {
+    return this._state === 'disabled';
+  }
+
+  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/Label.ts

@@ -0,0 +1,111 @@
+import { Container, Text, TextStyle } from 'pixi.js';
+
+export interface LabelConfig {
+  text?: string;
+  style?: Partial<TextStyle>;
+  /** Maximum width — text will be scaled down to fit */
+  maxWidth?: number;
+  /** Auto-fit: scale text to fit maxWidth */
+  autoFit?: boolean;
+}
+
+/**
+ * Enhanced text label with auto-fit scaling and currency formatting.
+ *
+ * @example
+ * ```ts
+ * const label = new Label({
+ *   text: 'BALANCE',
+ *   style: { fontSize: 24, fill: 0xffd700 },
+ *   maxWidth: 200,
+ *   autoFit: true,
+ * });
+ * ```
+ */
+export class Label extends Container {
+  private _text: Text;
+  private _maxWidth: number;
+  private _autoFit: boolean;
+
+  constructor(config: LabelConfig = {}) {
+    super();
+
+    this._maxWidth = config.maxWidth ?? Infinity;
+    this._autoFit = config.autoFit ?? false;
+
+    this._text = new Text({
+      text: config.text ?? '',
+      style: {
+        fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+        fontSize: 24,
+        fill: 0xffffff,
+        ...config.style,
+      },
+    });
+    this._text.anchor.set(0.5);
+    this.addChild(this._text);
+
+    this.fitText();
+  }
+
+  /** Get/set the displayed text */
+  get text(): string {
+    return this._text.text;
+  }
+
+  set text(value: string) {
+    this._text.text = value;
+    this.fitText();
+  }
+
+  /** Get/set the text style */
+  get style(): TextStyle {
+    return this._text.style as TextStyle;
+  }
+
+  /** Set max width constraint */
+  set maxWidth(value: number) {
+    this._maxWidth = value;
+    this.fitText();
+  }
+
+  /**
+   * Format and display a number as currency.
+   *
+   * @param amount - The numeric amount
+   * @param currency - Currency code (e.g., 'USD', 'EUR')
+   * @param locale - Locale string (default: 'en-US')
+   */
+  setCurrency(amount: number, currency: string, locale = 'en-US'): void {
+    try {
+      this.text = new Intl.NumberFormat(locale, {
+        style: 'currency',
+        currency,
+        minimumFractionDigits: 2,
+        maximumFractionDigits: 2,
+      }).format(amount);
+    } catch {
+      this.text = `${amount.toFixed(2)} ${currency}`;
+    }
+  }
+
+  /**
+   * Format a number with thousands separators.
+   */
+  setNumber(value: number, decimals = 0, locale = 'en-US'): void {
+    this.text = new Intl.NumberFormat(locale, {
+      minimumFractionDigits: decimals,
+      maximumFractionDigits: decimals,
+    }).format(value);
+  }
+
+  private fitText(): void {
+    if (!this._autoFit || this._maxWidth === Infinity) return;
+
+    this._text.scale.set(1);
+    if (this._text.width > this._maxWidth) {
+      const scale = this._maxWidth / this._text.width;
+      this._text.scale.set(scale);
+    }
+  }
+}

package/src/ui/Modal.ts

@@ -0,0 +1,134 @@
+import { Container, Graphics } from 'pixi.js';
+import { Tween } from '../animation/Tween';
+import { Easing } from '../animation/Easing';
+
+export interface ModalConfig {
+  /** Overlay color */
+  overlayColor?: number;
+  /** Overlay alpha */
+  overlayAlpha?: number;
+  /** Close on overlay tap */
+  closeOnOverlay?: boolean;
+  /** Animation duration */
+  animationDuration?: number;
+}
+
+/**
+ * Modal overlay component.
+ * Shows content on top of a dark overlay with enter/exit animations.
+ *
+ * @example
+ * ```ts
+ * const modal = new Modal({ closeOnOverlay: true });
+ * modal.content.addChild(settingsPanel);
+ * modal.onClose = () => console.log('Closed');
+ * await modal.show(1920, 1080);
+ * ```
+ */
+export class Modal extends Container {
+  private _overlay: Graphics;
+  private _contentContainer: Container;
+  private _config: Required<ModalConfig>;
+  private _showing = false;
+
+  /** Called when the modal is closed */
+  public onClose?: () => void;
+
+  constructor(config: ModalConfig = {}) {
+    super();
+
+    this._config = {
+      overlayColor: 0x000000,
+      overlayAlpha: 0.7,
+      closeOnOverlay: true,
+      animationDuration: 300,
+      ...config,
+    };
+
+    // Overlay
+    this._overlay = new Graphics();
+    this._overlay.eventMode = 'static';
+    this.addChild(this._overlay);
+
+    if (this._config.closeOnOverlay) {
+      this._overlay.on('pointertap', () => this.hide());
+    }
+
+    // Content container
+    this._contentContainer = new Container();
+    this.addChild(this._contentContainer);
+
+    this.visible = false;
+  }
+
+  /** Content container — add your UI here */
+  get content(): Container {
+    return this._contentContainer;
+  }
+
+  /** Whether the modal is currently showing */
+  get isShowing(): boolean {
+    return this._showing;
+  }
+
+  /**
+   * Show the modal with animation.
+   */
+  async show(viewWidth: number, viewHeight: number): Promise<void> {
+    this._showing = true;
+    this.visible = true;
+
+    // Draw overlay to cover full screen
+    this._overlay.clear();
+    this._overlay.rect(0, 0, viewWidth, viewHeight).fill(this._config.overlayColor);
+    this._overlay.alpha = 0;
+
+    // Center content
+    this._contentContainer.x = viewWidth / 2;
+    this._contentContainer.y = viewHeight / 2;
+    this._contentContainer.alpha = 0;
+    this._contentContainer.scale.set(0.8);
+
+    // Animate in
+    await Promise.all([
+      Tween.to(
+        this._overlay,
+        { alpha: this._config.overlayAlpha },
+        this._config.animationDuration,
+        Easing.easeOutCubic,
+      ),
+      Tween.to(
+        this._contentContainer,
+        { alpha: 1, 'scale.x': 1, 'scale.y': 1 },
+        this._config.animationDuration,
+        Easing.easeOutBack,
+      ),
+    ]);
+  }
+
+  /**
+   * Hide the modal with animation.
+   */
+  async hide(): Promise<void> {
+    if (!this._showing) return;
+
+    await Promise.all([
+      Tween.to(
+        this._overlay,
+        { alpha: 0 },
+        this._config.animationDuration * 0.7,
+        Easing.easeInCubic,
+      ),
+      Tween.to(
+        this._contentContainer,
+        { alpha: 0, 'scale.x': 0.8, 'scale.y': 0.8 },
+        this._config.animationDuration * 0.7,
+        Easing.easeInCubic,
+      ),
+    ]);
+
+    this.visible = false;
+    this._showing = false;
+    this.onClose?.();
+  }
+}

package/src/ui/Panel.ts

@@ -0,0 +1,125 @@
+import { Container, Graphics, NineSliceSprite, Texture } from 'pixi.js';
+
+export interface PanelConfig {
+  /** Width */
+  width?: number;
+  /** Height */
+  height?: number;
+  /** Background color (for Graphics-based panel) */
+  backgroundColor?: number;
+  /** Background alpha */
+  backgroundAlpha?: number;
+  /** Corner radius */
+  borderRadius?: number;
+  /** Border color */
+  borderColor?: number;
+  /** Border width */
+  borderWidth?: number;
+  /** 9-slice texture (if provided, uses NineSliceSprite instead of Graphics) */
+  nineSliceTexture?: string | Texture;
+  /** 9-slice borders [left, top, right, bottom] */
+  nineSliceBorders?: [number, number, number, number];
+  /** Padding inside the panel */
+  padding?: number;
+}
+
+/**
+ * Background panel that can use either Graphics or 9-slice sprite.
+ *
+ * @example
+ * ```ts
+ * // Simple colored panel
+ * const panel = new Panel({ width: 400, height: 300, backgroundColor: 0x222222, borderRadius: 12 });
+ *
+ * // 9-slice panel (texture-based)
+ * const panel = new Panel({
+ *   nineSliceTexture: 'panel-bg',
+ *   nineSliceBorders: [20, 20, 20, 20],
+ *   width: 400, height: 300,
+ * });
+ * ```
+ */
+export class Panel extends Container {
+  private _bg: Graphics | NineSliceSprite;
+  private _content: Container;
+  private _config: Required<
+    Pick<PanelConfig, 'width' | 'height' | 'padding' | 'backgroundAlpha'>
+  > & PanelConfig;
+
+  constructor(config: PanelConfig = {}) {
+    super();
+
+    this._config = {
+      width: 400,
+      height: 300,
+      padding: 16,
+      backgroundAlpha: 1,
+      ...config,
+    };
+
+    // Create background
+    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({
+        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();
+    }
+
+    this._bg.alpha = this._config.backgroundAlpha;
+    this.addChild(this._bg);
+
+    // Content container with padding
+    this._content = new Container();
+    this._content.x = this._config.padding;
+    this._content.y = this._config.padding;
+    this.addChild(this._content);
+  }
+
+  /** Content container — add children here */
+  get content(): Container {
+    return this._content;
+  }
+
+  /** Resize the panel */
+  setSize(width: number, height: number): void {
+    this._config.width = width;
+    this._config.height = height;
+
+    if (this._bg instanceof Graphics) {
+      this.drawGraphicsBg();
+    } else {
+      this._bg.width = width;
+      this._bg.height = height;
+    }
+  }
+
+  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);
+
+    if (borderColor !== undefined && borderWidth) {
+      bg.roundRect(0, 0, width!, height!, borderRadius ?? 0)
+        .stroke({ color: borderColor, width: borderWidth });
+    }
+  }
+}

package/src/ui/ProgressBar.ts

@@ -0,0 +1,121 @@
+import { Container, Graphics } from 'pixi.js';
+
+export interface ProgressBarConfig {
+  width?: number;
+  height?: number;
+  borderRadius?: number;
+  fillColor?: number;
+  trackColor?: number;
+  borderColor?: number;
+  borderWidth?: number;
+  /** Animated fill (smoothly interpolate) */
+  animated?: boolean;
+  /** Animation speed (0..1 per frame, default: 0.1) */
+  animationSpeed?: number;
+}
+
+/**
+ * Horizontal progress bar with optional smooth fill animation.
+ *
+ * @example
+ * ```ts
+ * const bar = new ProgressBar({ width: 300, height: 20, fillColor: 0x22cc22 });
+ * scene.container.addChild(bar);
+ * bar.progress = 0.5; // 50%
+ * ```
+ */
+export class ProgressBar extends Container {
+  private _track: Graphics;
+  private _fill: Graphics;
+  private _border: Graphics;
+  private _config: Required<ProgressBarConfig>;
+  private _progress = 0;
+  private _displayedProgress = 0;
+
+  constructor(config: ProgressBarConfig = {}) {
+    super();
+
+    this._config = {
+      width: 300,
+      height: 16,
+      borderRadius: 8,
+      fillColor: 0xffd700,
+      trackColor: 0x333333,
+      borderColor: 0x555555,
+      borderWidth: 1,
+      animated: true,
+      animationSpeed: 0.1,
+      ...config,
+    };
+
+    this._track = new Graphics();
+    this._fill = new Graphics();
+    this._border = new Graphics();
+
+    this.addChild(this._track, this._fill, this._border);
+    this.drawTrack();
+    this.drawBorder();
+    this.drawFill(0);
+  }
+
+  /** Get/set progress (0..1) */
+  get progress(): number {
+    return this._progress;
+  }
+
+  set progress(value: number) {
+    this._progress = Math.max(0, Math.min(1, value));
+    if (!this._config.animated) {
+      this._displayedProgress = this._progress;
+      this.drawFill(this._displayedProgress);
+    }
+  }
+
+  /**
+   * Call each frame if animated is true.
+   */
+  update(dt: number): void {
+    if (!this._config.animated) return;
+    if (Math.abs(this._displayedProgress - this._progress) < 0.001) {
+      this._displayedProgress = this._progress;
+      return;
+    }
+
+    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 });
+    }
+  }
+}