@energy8platform/game-engine 0.10.11 → 0.12.0

package/src/ui/Slider.ts

@@ -0,0 +1,241 @@
+import { Container, Graphics, FederatedPointerEvent } from 'pixi.js';
+import { resolveView } from './view';
+import type { ViewInput } from './view';
+
+export interface SliderConfig {
+  /** Minimum value (default: 0) */
+  min?: number;
+  /** Maximum value (default: 1) */
+  max?: number;
+  /** Step increment (0 = continuous, default: 0) */
+  step?: number;
+  /** Initial value (default: min) */
+  value?: number;
+  /** Track width in pixels (default: 200) */
+  width?: number;
+  /** Track height in pixels (default: 8) */
+  height?: number;
+  /** Corner radius for Graphics-based track/fill (default: 4) */
+  borderRadius?: number;
+  /** Track background color (ignored when trackView provided) */
+  trackColor?: number;
+  /** Fill bar color (ignored when fillView provided) */
+  fillColor?: number;
+  /** Handle radius (for Graphics-based handle, default: 12) */
+  handleRadius?: number;
+  /** Handle color (for Graphics-based handle, ignored when handleView provided) */
+  handleColor?: number;
+
+  /** Custom track background view */
+  trackView?: ViewInput;
+  /** Custom fill bar view */
+  fillView?: ViewInput;
+  /** Custom handle view */
+  handleView?: ViewInput;
+
+  /** Called when value changes during drag */
+  onUpdate?: (value: number) => void;
+  /** Called when drag ends */
+  onChange?: (value: number) => void;
+}
+
+/**
+ * Draggable slider with customizable track, fill, and handle views.
+ *
+ * @example
+ * ```ts
+ * const volume = new Slider({
+ *   min: 0, max: 1, value: 0.5,
+ *   width: 200, height: 8,
+ *   fillColor: 0xffd700,
+ *   onUpdate: (v) => console.log('Volume:', v),
+ * });
+ * ```
+ */
+export class Slider extends Container {
+  readonly __uiComponent = true as const;
+
+  private _track: Container;
+  private _fill: Container;
+  private _fillMask: Graphics;
+  private _handle: Container;
+  private _config: Required<Pick<SliderConfig, 'min' | 'max' | 'step' | 'width' | 'height' | 'borderRadius' | 'trackColor' | 'fillColor' | 'handleRadius' | 'handleColor'>>;
+  private _value: number;
+  private _dragging = false;
+
+  onUpdate: ((value: number) => void) | null = null;
+  onChange: ((value: number) => void) | null = null;
+
+  constructor(config: SliderConfig = {}) {
+    super();
+
+    this._config = {
+      min: config.min ?? 0,
+      max: config.max ?? 1,
+      step: config.step ?? 0,
+      width: config.width ?? 200,
+      height: config.height ?? 8,
+      borderRadius: config.borderRadius ?? 4,
+      trackColor: config.trackColor ?? 0x333333,
+      fillColor: config.fillColor ?? 0xffd700,
+      handleRadius: config.handleRadius ?? 12,
+      handleColor: config.handleColor ?? 0xffffff,
+    };
+
+    this._value = config.value ?? this._config.min;
+    this.onUpdate = config.onUpdate ?? null;
+    this.onChange = config.onChange ?? null;
+
+    const { width, height, borderRadius, trackColor, fillColor, handleRadius, handleColor } = this._config;
+
+    // Track
+    const customTrack = resolveView(config.trackView);
+    if (customTrack) {
+      customTrack.width = width;
+      customTrack.height = height;
+      this._track = customTrack;
+    } else {
+      const g = new Graphics();
+      g.roundRect(0, 0, width, height, borderRadius).fill(trackColor);
+      this._track = g;
+    }
+    this.addChild(this._track);
+
+    // Fill
+    const customFill = resolveView(config.fillView);
+    if (customFill) {
+      customFill.width = width;
+      customFill.height = height;
+      this._fill = customFill;
+    } else {
+      const g = new Graphics();
+      g.roundRect(0, 0, width, height, borderRadius).fill(fillColor);
+      this._fill = g;
+    }
+    this.addChild(this._fill);
+
+    // Fill mask
+    this._fillMask = new Graphics();
+    this.addChild(this._fillMask);
+    this._fill.mask = this._fillMask;
+
+    // Handle
+    const customHandle = resolveView(config.handleView);
+    if (customHandle) {
+      this._handle = customHandle;
+    } else {
+      const g = new Graphics();
+      g.circle(0, 0, handleRadius).fill(handleColor);
+      this._handle = g;
+    }
+    this._handle.y = height / 2;
+    this.addChild(this._handle);
+
+    // Interaction
+    this.eventMode = 'static';
+    this.cursor = 'pointer';
+
+    // Hit area covers track + handle overflow
+    const hitPad = Math.max(handleRadius - height / 2, 0);
+    this.hitArea = { contains: (x: number, y: number) => x >= -hitPad && x <= width + hitPad && y >= -hitPad && y <= height + hitPad };
+
+    this.on('pointerdown', this._onPointerDown, this);
+    this.on('globalpointermove', this._onPointerMove, this);
+    this.on('pointerup', this._onPointerUp, this);
+    this.on('pointerupoutside', this._onPointerUp, this);
+
+    this._updateVisuals();
+  }
+
+  /** Current value */
+  get value(): number {
+    return this._value;
+  }
+
+  set value(v: number) {
+    const clamped = this._applyStep(Math.max(this._config.min, Math.min(this._config.max, v)));
+    if (clamped === this._value) return;
+    this._value = clamped;
+    this._updateVisuals();
+  }
+
+  get min(): number { return this._config.min; }
+  get max(): number { return this._config.max; }
+
+  /** React reconciler update hook */
+  updateConfig(changed: Record<string, any>): void {
+    if ('value' in changed) this.value = changed.value;
+    if ('min' in changed) { this._config.min = changed.min; this._updateVisuals(); }
+    if ('max' in changed) { this._config.max = changed.max; this._updateVisuals(); }
+    if ('step' in changed) this._config.step = changed.step;
+    if ('onUpdate' in changed) this.onUpdate = changed.onUpdate;
+    if ('onChange' in changed) this.onChange = changed.onChange;
+  }
+
+  private _fraction(): number {
+    const { min, max } = this._config;
+    return max === min ? 0 : (this._value - min) / (max - min);
+  }
+
+  private _applyStep(v: number): number {
+    const { step, min } = this._config;
+    if (step <= 0) return v;
+    return min + Math.round((v - min) / step) * step;
+  }
+
+  private _updateVisuals(): void {
+    const frac = this._fraction();
+    const w = this._config.width;
+    const h = this._config.height;
+
+    // Update fill mask
+    this._fillMask.clear();
+    this._fillMask.rect(0, 0, w * frac, h).fill(0xffffff);
+
+    // Update handle position
+    this._handle.x = w * frac;
+  }
+
+  private _valueFromPointer(e: FederatedPointerEvent): number {
+    const local = this.toLocal(e.global);
+    const frac = Math.max(0, Math.min(1, local.x / this._config.width));
+    const { min, max } = this._config;
+    return this._applyStep(min + frac * (max - min));
+  }
+
+  private _onPointerDown(e: FederatedPointerEvent): void {
+    this._dragging = true;
+    const newValue = this._valueFromPointer(e);
+    if (newValue !== this._value) {
+      this._value = newValue;
+      this._updateVisuals();
+      this.onUpdate?.(this._value);
+    }
+  }
+
+  private _onPointerMove(e: FederatedPointerEvent): void {
+    if (!this._dragging) return;
+    const newValue = this._valueFromPointer(e);
+    if (newValue !== this._value) {
+      this._value = newValue;
+      this._updateVisuals();
+      this.onUpdate?.(this._value);
+    }
+  }
+
+  private _onPointerUp(_e: FederatedPointerEvent): void {
+    if (!this._dragging) return;
+    this._dragging = false;
+    this.onChange?.(this._value);
+  }
+
+  override destroy(options?: boolean | { children?: boolean; texture?: boolean; textureSource?: boolean }): void {
+    this.off('pointerdown', this._onPointerDown, this);
+    this.off('globalpointermove', this._onPointerMove, this);
+    this.off('pointerup', this._onPointerUp, this);
+    this.off('pointerupoutside', this._onPointerUp, this);
+    this.onUpdate = null;
+    this.onChange = null;
+    super.destroy(options);
+  }
+}

package/src/ui/Toast.ts

@@ -1,6 +1,8 @@
 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';
 
@@ -9,6 +11,8 @@ export interface ToastConfig {
   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> = {
@@ -29,10 +33,13 @@ const TOAST_COLORS: Record<ToastType, number> = {
  * ```
  */
 export class Toast extends Container {
-  private _bg: Graphics;
+  readonly __uiComponent = true as const;
+
+  private _bg: Container;
+  private _customBg: boolean;
   private _text: Text;
-  private _config: Required<ToastConfig>;
-  private _dismissTimeout: ReturnType<typeof setTimeout> | null = null;
+  private _config: Required<Pick<ToastConfig, 'duration' | 'bottomOffset'>>;
+  private _dismissPending = false;
 
   constructor(config: ToastConfig = {}) {
     super();
@@ -42,7 +49,9 @@ export class Toast extends Container {
       bottomOffset: config.bottomOffset ?? 60,
     };
 
-    this._bg = new Graphics();
+    const customBg = resolveView(config.backgroundView);
+    this._customBg = !!customBg;
+    this._bg = customBg ?? new Graphics();
     this.addChild(this._bg);
 
     this._text = new Text({
@@ -68,9 +77,9 @@ export class Toast extends Container {
     viewWidth?: number,
     viewHeight?: number,
   ): Promise<void> {
-    if (this._dismissTimeout) {
-      clearTimeout(this._dismissTimeout);
-    }
+    // Cancel any pending dismiss
+    Tween.killTweensOf(this);
+    this._dismissPending = false;
 
     this._text.text = message;
 
@@ -80,9 +89,17 @@ export class Toast extends Container {
     const radius = 8;
 
     // Draw the background
-    this._bg.clear();
-    this._bg.roundRect(-width / 2, -height / 2, width, height, radius);
-    this._bg.fill(TOAST_COLORS[type]);
+    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) {
@@ -97,9 +114,12 @@ export class Toast extends Container {
     await Tween.to(this, { alpha: 1, y: this.y - 20 }, 300, Easing.easeOutCubic);
 
     if (this._config.duration > 0) {
-      this._dismissTimeout = setTimeout(() => {
-        this.dismiss();
-      }, this._config.duration);
+      this._dismissPending = true;
+      await Tween.delay(this._config.duration);
+      if (this._dismissPending) {
+        this._dismissPending = false;
+        await this.dismiss();
+      }
     }
   }
 
@@ -109,12 +129,22 @@ export class Toast extends Container {
   async dismiss(): Promise<void> {
     if (!this.visible) return;
 
-    if (this._dismissTimeout) {
-      clearTimeout(this._dismissTimeout);
-      this._dismissTimeout = null;
-    }
+    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

@@ -0,0 +1,201 @@
+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,5 +1,6 @@
 import { Container } from 'pixi.js';
 import { Label } from './Label';
+import { Tween } from '../animation/Tween';
 import { Easing } from '../animation/Easing';
 
 export interface WinDisplayConfig {
@@ -19,7 +20,7 @@ export interface WinDisplayConfig {
  * 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.
+ * scale pop effect — typical of slot games. Uses engine Tween system.
  *
  * @example
  * ```ts
@@ -30,9 +31,12 @@ export interface WinDisplayConfig {
  * ```
  */
 export class WinDisplay extends Container {
+  readonly __uiComponent = true as const;
+
   private _label: Label;
   private _config: Required<Pick<WinDisplayConfig, 'currency' | 'locale' | 'countupDuration' | 'popScale'>>;
-  private _cancelCountup = false;
+  /** Internal target for Tween countup */
+  private _tweenTarget = { value: 0 };
 
   constructor(config: WinDisplayConfig = {}) {
     super();
@@ -67,54 +71,48 @@ export class WinDisplay extends Container {
    */
   async showWin(amount: number): Promise<void> {
     this.visible = true;
-    this._cancelCountup = false;
     this.alpha = 1;
 
-    const duration = this._config.countupDuration;
-    const startTime = Date.now();
+    // Cancel any running animation
+    Tween.killTweensOf(this._tweenTarget);
+    Tween.killTweensOf(this);
 
-    // Scale pop
+    // Setup countup
+    this._tweenTarget.value = 0;
     this.scale.set(0.5);
 
-    return new Promise<void>((resolve) => {
-      const tick = () => {
-        if (this._cancelCountup) {
-          this.displayAmount(amount);
-          resolve();
-          return;
-        }
-
-        const elapsed = Date.now() - startTime;
-        const t = Math.min(elapsed / duration, 1);
-        const eased = Easing.easeOutCubic(t);
-
-        // Countup
-        const current = amount * eased;
-        this.displayAmount(current);
-
-        // Scale animation
-        const scaleT = Math.min(elapsed / 300, 1);
-        const scaleEased = Easing.easeOutBack(scaleT);
-        const targetScale = 1;
-        this.scale.set(0.5 + (targetScale - 0.5) * scaleEased);
-
-        if (t < 1) {
-          requestAnimationFrame(tick);
-        } else {
-          this.displayAmount(amount);
-          this.scale.set(1);
-          resolve();
-        }
-      };
-      requestAnimationFrame(tick);
-    });
+    // 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 {
-    this._cancelCountup = true;
+    Tween.killTweensOf(this._tweenTarget);
+    Tween.killTweensOf(this);
     this.displayAmount(amount);
     this.scale.set(1);
   }
@@ -123,6 +121,8 @@ export class WinDisplay extends Container {
    * Hide the win display.
    */
   hide(): void {
+    Tween.killTweensOf(this._tweenTarget);
+    Tween.killTweensOf(this);
     this.visible = false;
     this._label.text = '';
   }
@@ -130,4 +130,16 @@ export class WinDisplay extends Container {
   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);
+  }
 }