@energy8platform/game-engine 0.20.0 → 0.22.0

package/src/ui/Toast.ts

@@ -1,150 +0,0 @@
-import { Container, Graphics, Text } from 'pixi.js';
-import { Tween } from '../animation/Tween';
-import { Easing } from '../animation/Easing';
-import { resolveView } from './view';
-import type { ViewInput } from './view';
-
-export type ToastType = 'info' | 'success' | 'warning' | 'error';
-
-export interface ToastConfig {
-  /** Auto-dismiss after this many ms (0 = manual dismiss only) */
-  duration?: number;
-  /** Toast position from bottom */
-  bottomOffset?: number;
-  /** Custom background view (string texture name, Texture, or Container). Sized to fit text. */
-  backgroundView?: ViewInput;
-}
-
-const TOAST_COLORS: Record<ToastType, number> = {
-  info: 0x3498db,
-  success: 0x27ae60,
-  warning: 0xf39c12,
-  error: 0xe74c3c,
-};
-
-/**
- * Toast notification component for displaying transient messages.
- *
- * @example
- * ```ts
- * const toast = new Toast();
- * scene.container.addChild(toast);
- * await toast.show('Connection lost', 'error', 1920, 1080);
- * ```
- */
-export class Toast extends Container {
-  readonly __uiComponent = true as const;
-
-  private _bg: Container;
-  private _customBg: boolean;
-  private _text: Text;
-  private _config: Required<Pick<ToastConfig, 'duration' | 'bottomOffset'>>;
-  private _dismissPending = false;
-
-  constructor(config: ToastConfig = {}) {
-    super();
-
-    this._config = {
-      duration: config.duration ?? 3000,
-      bottomOffset: config.bottomOffset ?? 60,
-    };
-
-    const customBg = resolveView(config.backgroundView);
-    this._customBg = !!customBg;
-    this._bg = customBg ?? new Graphics();
-    this.addChild(this._bg);
-
-    this._text = new Text({
-      text: '',
-      style: {
-        fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
-        fontSize: 16,
-        fill: 0xffffff,
-      },
-    });
-    this._text.anchor.set(0.5);
-    this.addChild(this._text);
-
-    this.visible = false;
-  }
-
-  /**
-   * Show a toast message.
-   */
-  async show(
-    message: string,
-    type: ToastType = 'info',
-    viewWidth?: number,
-    viewHeight?: number,
-  ): Promise<void> {
-    // Cancel any pending dismiss
-    Tween.killTweensOf(this);
-    this._dismissPending = false;
-
-    this._text.text = message;
-
-    const padding = 20;
-    const width = Math.max(200, this._text.width + padding * 2);
-    const height = 44;
-    const radius = 8;
-
-    // Draw the background
-    if (this._customBg) {
-      this._bg.width = width;
-      this._bg.height = height;
-      this._bg.x = -width / 2;
-      this._bg.y = -height / 2;
-    } else {
-      const g = this._bg as Graphics;
-      g.clear();
-      g.roundRect(-width / 2, -height / 2, width, height, radius);
-      g.fill(TOAST_COLORS[type]);
-    }
-
-    // Position
-    if (viewWidth && viewHeight) {
-      this.x = viewWidth / 2;
-      this.y = viewHeight - this._config.bottomOffset;
-    }
-
-    this.visible = true;
-    this.alpha = 0;
-    this.y += 20;
-
-    await Tween.to(this, { alpha: 1, y: this.y - 20 }, 300, Easing.easeOutCubic);
-
-    if (this._config.duration > 0) {
-      this._dismissPending = true;
-      await Tween.delay(this._config.duration);
-      if (this._dismissPending) {
-        this._dismissPending = false;
-        await this.dismiss();
-      }
-    }
-  }
-
-  /**
-   * Dismiss the toast.
-   */
-  async dismiss(): Promise<void> {
-    if (!this.visible) return;
-
-    this._dismissPending = false;
-    Tween.killTweensOf(this);
-
-    await Tween.to(this, { alpha: 0, y: this.y + 20 }, 200, Easing.easeInCubic);
-    this.visible = false;
-  }
-
-  /** React reconciler update hook */
-  updateConfig(changed: Record<string, any>): void {
-    if ('duration' in changed) this._config.duration = changed.duration;
-    if ('bottomOffset' in changed) this._config.bottomOffset = changed.bottomOffset;
-  }
-
-  override destroy(options?: boolean | { children?: boolean; texture?: boolean; textureSource?: boolean }): void {
-    this._dismissPending = false;
-    Tween.killTweensOf(this);
-    super.destroy(options);
-  }
-}

package/src/ui/Toggle.ts

@@ -1,201 +0,0 @@
-import { Container, Graphics } from 'pixi.js';
-import { Tween } from '../animation/Tween';
-import { resolveView } from './view';
-import type { ViewInput } from './view';
-
-export interface ToggleConfig {
-  /** Initial state (default: false) */
-  value?: boolean;
-  /** Custom view for the ON state */
-  onView?: ViewInput;
-  /** Custom view for the OFF state */
-  offView?: ViewInput;
-  /** Width (for Graphics-based toggle, default: 52) */
-  width?: number;
-  /** Height (for Graphics-based toggle, default: 28) */
-  height?: number;
-  /** Track color when ON (ignored when custom views provided) */
-  onColor?: number;
-  /** Track color when OFF (ignored when custom views provided) */
-  offColor?: number;
-  /** Handle color (for Graphics-based toggle) */
-  handleColor?: number;
-  /** Handle radius (for Graphics-based toggle, default: auto) */
-  handleRadius?: number;
-  /** Animation duration in ms (default: 200) */
-  animationDuration?: number;
-
-  /** Called when value changes */
-  onChange?: (value: boolean) => void;
-}
-
-/**
- * Toggle switch with two states.
- *
- * Supports custom ON/OFF views or auto-generated Graphics-based toggle.
- * Click to toggle, or use `forceSwitch(value)` programmatically.
- *
- * @example
- * ```ts
- * const mute = new Toggle({
- *   value: false,
- *   onColor: 0x22cc22,
- *   onChange: (on) => audioManager.mute(!on),
- * });
- * ```
- */
-export class Toggle extends Container {
-  readonly __uiComponent = true as const;
-
-  private _value: boolean;
-  private _onView: Container | null = null;
-  private _offView: Container | null = null;
-  private _handle: Container | null = null;
-  private _trackGfx: Graphics | null = null;
-  private _config: Required<Pick<ToggleConfig, 'width' | 'height' | 'onColor' | 'offColor' | 'handleColor' | 'handleRadius' | 'animationDuration'>>;
-  private _useCustomViews: boolean;
-
-  onChange: ((value: boolean) => void) | null = null;
-
-  constructor(config: ToggleConfig = {}) {
-    super();
-
-    this._config = {
-      width: config.width ?? 52,
-      height: config.height ?? 28,
-      onColor: config.onColor ?? 0x22cc22,
-      offColor: config.offColor ?? 0x666666,
-      handleColor: config.handleColor ?? 0xffffff,
-      handleRadius: config.handleRadius ?? 0, // 0 = auto
-      animationDuration: config.animationDuration ?? 200,
-    };
-
-    this._value = config.value ?? false;
-    this.onChange = config.onChange ?? null;
-
-    const customOn = resolveView(config.onView);
-    const customOff = resolveView(config.offView);
-    this._useCustomViews = !!(customOn || customOff);
-
-    if (this._useCustomViews) {
-      // Custom view mode: show/hide ON and OFF views
-      if (customOn) {
-        this._onView = customOn;
-        this._onView.visible = this._value;
-        this.addChild(this._onView);
-      }
-      if (customOff) {
-        this._offView = customOff;
-        this._offView.visible = !this._value;
-        this.addChild(this._offView);
-      }
-    } else {
-      // Graphics mode: track + sliding handle
-      const { width, height, handleColor } = this._config;
-      const handleRadius = this._config.handleRadius || (height / 2 - 3);
-      this._config.handleRadius = handleRadius;
-
-      this._trackGfx = new Graphics();
-      this.addChild(this._trackGfx);
-      this._drawTrack();
-
-      const handle = new Graphics();
-      handle.circle(0, 0, handleRadius).fill(handleColor);
-      handle.y = height / 2;
-      handle.x = this._value ? width - handleRadius - 3 : handleRadius + 3;
-      this._handle = handle;
-      this.addChild(handle);
-    }
-
-    // Interaction
-    this.eventMode = 'static';
-    this.cursor = 'pointer';
-    this.on('pointertap', this._onTap, this);
-  }
-
-  /** Current toggle state */
-  get value(): boolean {
-    return this._value;
-  }
-
-  set value(v: boolean) {
-    if (v === this._value) return;
-    this.forceSwitch(v);
-  }
-
-  /** Programmatically switch to a specific state with animation */
-  forceSwitch(value: boolean): void {
-    this._value = value;
-    this._animateToState();
-  }
-
-  /** React reconciler update hook */
-  updateConfig(changed: Record<string, any>): void {
-    if ('value' in changed) this.value = changed.value;
-    if ('onChange' in changed) this.onChange = changed.onChange;
-    if ('animationDuration' in changed) this._config.animationDuration = changed.animationDuration;
-  }
-
-  private _onTap(): void {
-    this._value = !this._value;
-    this._animateToState();
-    this.onChange?.(this._value);
-  }
-
-  private _animateToState(): void {
-    const duration = this._config.animationDuration;
-
-    if (this._useCustomViews) {
-      // Custom views: crossfade
-      if (this._onView) {
-        Tween.killTweensOf(this._onView);
-        if (this._value) {
-          this._onView.visible = true;
-          Tween.to(this._onView, { alpha: 1 }, duration);
-        } else {
-          Tween.to(this._onView, { alpha: 0 }, duration).then(() => {
-            if (this._onView) this._onView.visible = false;
-          });
-        }
-      }
-      if (this._offView) {
-        Tween.killTweensOf(this._offView);
-        if (!this._value) {
-          this._offView.visible = true;
-          Tween.to(this._offView, { alpha: 1 }, duration);
-        } else {
-          Tween.to(this._offView, { alpha: 0 }, duration).then(() => {
-            if (this._offView) this._offView.visible = false;
-          });
-        }
-      }
-    } else {
-      // Graphics mode: slide handle + recolor track
-      this._drawTrack();
-      if (this._handle) {
-        const { width } = this._config;
-        const handleRadius = this._config.handleRadius;
-        const targetX = this._value ? width - handleRadius - 3 : handleRadius + 3;
-        Tween.killTweensOf(this._handle);
-        Tween.to(this._handle, { x: targetX }, duration);
-      }
-    }
-  }
-
-  private _drawTrack(): void {
-    if (!this._trackGfx) return;
-    const { width, height, onColor, offColor } = this._config;
-    const radius = height / 2;
-    this._trackGfx.clear();
-    this._trackGfx.roundRect(0, 0, width, height, radius).fill(this._value ? onColor : offColor);
-  }
-
-  override destroy(options?: boolean | { children?: boolean; texture?: boolean; textureSource?: boolean }): void {
-    this.off('pointertap', this._onTap, this);
-    if (this._handle) Tween.killTweensOf(this._handle);
-    if (this._onView) Tween.killTweensOf(this._onView);
-    if (this._offView) Tween.killTweensOf(this._offView);
-    this.onChange = null;
-    super.destroy(options);
-  }
-}

package/src/ui/WinDisplay.ts

@@ -1,145 +0,0 @@
-import { Container } from 'pixi.js';
-import { Label } from './Label';
-import { Tween } from '../animation/Tween';
-import { Easing } from '../animation/Easing';
-
-export interface WinDisplayConfig {
-  /** Text style overrides */
-  style?: Record<string, unknown>;
-  /** Currency code */
-  currency?: string;
-  /** Locale for number formatting */
-  locale?: string;
-  /** Countup duration in ms */
-  countupDuration?: number;
-  /** Scale pop animation on win */
-  popScale?: number;
-}
-
-/**
- * Win amount display with countup animation.
- *
- * Shows a dramatic countup from 0 to the win amount, with optional
- * scale pop effect — typical of slot games. Uses engine Tween system.
- *
- * @example
- * ```ts
- * const winDisplay = new WinDisplay({ currency: 'USD' });
- * scene.container.addChild(winDisplay);
- * await winDisplay.showWin(150.50); // countup animation
- * winDisplay.hide();
- * ```
- */
-export class WinDisplay extends Container {
-  readonly __uiComponent = true as const;
-
-  private _label: Label;
-  private _config: Required<Pick<WinDisplayConfig, 'currency' | 'locale' | 'countupDuration' | 'popScale'>>;
-  /** Internal target for Tween countup */
-  private _tweenTarget = { value: 0 };
-
-  constructor(config: WinDisplayConfig = {}) {
-    super();
-
-    this._config = {
-      currency: config.currency ?? 'USD',
-      locale: config.locale ?? 'en-US',
-      countupDuration: config.countupDuration ?? 1500,
-      popScale: config.popScale ?? 1.2,
-    };
-
-    this._label = new Label({
-      text: '',
-      style: {
-        fontSize: 48,
-        fontWeight: 'bold',
-        fill: 0xffd700,
-        stroke: { color: 0x000000, width: 3 },
-        ...(config.style as any),
-      },
-    });
-    this.addChild(this._label);
-
-    this.visible = false;
-  }
-
-  /**
-   * Show a win with countup animation.
-   *
-   * @param amount - Win amount
-   * @returns Promise that resolves when the animation completes
-   */
-  async showWin(amount: number): Promise<void> {
-    this.visible = true;
-    this.alpha = 1;
-
-    // Cancel any running animation
-    Tween.killTweensOf(this._tweenTarget);
-    Tween.killTweensOf(this);
-
-    // Setup countup
-    this._tweenTarget.value = 0;
-    this.scale.set(0.5);
-
-    // Scale pop animation
-    const scalePromise = Tween.to(
-      this,
-      { 'scale.x': 1, 'scale.y': 1 },
-      300,
-      Easing.easeOutBack,
-    );
-
-    // Countup animation
-    const countupPromise = Tween.to(
-      this._tweenTarget,
-      { value: amount },
-      this._config.countupDuration,
-      Easing.easeOutCubic,
-      () => {
-        this.displayAmount(this._tweenTarget.value);
-      },
-    );
-
-    await Promise.all([scalePromise, countupPromise]);
-
-    // Ensure final value is exact
-    this.displayAmount(amount);
-    this.scale.set(1);
-  }
-
-  /**
-   * Skip the countup animation and show the final amount immediately.
-   */
-  skipCountup(amount: number): void {
-    Tween.killTweensOf(this._tweenTarget);
-    Tween.killTweensOf(this);
-    this.displayAmount(amount);
-    this.scale.set(1);
-  }
-
-  /**
-   * Hide the win display.
-   */
-  hide(): void {
-    Tween.killTweensOf(this._tweenTarget);
-    Tween.killTweensOf(this);
-    this.visible = false;
-    this._label.text = '';
-  }
-
-  private displayAmount(amount: number): void {
-    this._label.setCurrency(amount, this._config.currency, this._config.locale);
-  }
-
-  /** React reconciler update hook */
-  updateConfig(changed: Record<string, any>): void {
-    if ('currency' in changed) this._config.currency = changed.currency;
-    if ('locale' in changed) this._config.locale = changed.locale;
-  }
-
-  override destroy(options?: boolean | { children?: boolean; texture?: boolean; textureSource?: boolean }): void {
-    Tween.killTweensOf(this._tweenTarget);
-    Tween.killTweensOf(this);
-    super.destroy(options);
-  }
-}

package/src/ui/index.ts

@@ -1,33 +0,0 @@
-// ─── View helpers ─────────────────────────────────────────
-export { resolveView } from './view';
-export type { ViewInput } from './view';
-
-// ─── Engine UI Components ─────────────────────────────────
-export { FlexContainer } from './FlexContainer';
-export type { FlexContainerConfig, FlexDirection, JustifyContent, AlignItems, AlignSelf, AlignContent, FlexItemConfig } from './FlexContainer';
-export { Button } from './Button';
-export type { ButtonConfig, ButtonState } from './Button';
-export { ProgressBar } from './ProgressBar';
-export type { ProgressBarConfig } from './ProgressBar';
-export { Label } from './Label';
-export type { LabelConfig } from './Label';
-export { LabelValue } from './LabelValue';
-export type { LabelValueConfig, LabelValueAlign } from './LabelValue';
-export { Panel } from './Panel';
-export type { PanelConfig } from './Panel';
-export { BalanceDisplay } from './BalanceDisplay';
-export type { BalanceDisplayConfig } from './BalanceDisplay';
-export { WinDisplay } from './WinDisplay';
-export type { WinDisplayConfig } from './WinDisplay';
-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';
-export { Slider } from './Slider';
-export type { SliderConfig } from './Slider';
-export { Toggle } from './Toggle';
-export type { ToggleConfig } from './Toggle';

package/src/ui/view.ts

@@ -1,28 +0,0 @@
-import { Container, Sprite, Texture } from 'pixi.js';
-
-/**
- * Universal view input type for UI component visual slots.
- *
- * - `string` — texture name, resolved via `Sprite.from()`
- * - `Texture` — wrapped in a `Sprite`
- * - `Container` — used as-is (Sprite, Graphics, NineSliceSprite, AnimatedSprite, custom...)
- */
-export type ViewInput = string | Texture | Container;
-
-/**
- * Resolve a ViewInput to a Container instance.
- *
- * @example
- * ```ts
- * resolveView('btn-idle')          // → Sprite.from('btn-idle')
- * resolveView(someTexture)         // → new Sprite(someTexture)
- * resolveView(myCustomContainer)   // → myCustomContainer (as-is)
- * resolveView(undefined)           // → null
- * ```
- */
-export function resolveView(input: ViewInput | undefined | null): Container | null {
-  if (input == null) return null;
-  if (typeof input === 'string') return Sprite.from(input);
-  if (input instanceof Texture) return new Sprite(input);
-  return input;
-}