@energy8platform/game-engine 0.10.10 → 0.11.0

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);
+  }
 }

package/src/ui/index.ts

@@ -1,7 +1,10 @@
-// ─── @pixi/layout setup (must be imported before creating containers) ────
-import '@pixi/layout';
+// ─── View helpers ─────────────────────────────────────────
+export { resolveView } from './view';
+export type { ViewInput } from './view';
 
 // ─── Engine UI Components ─────────────────────────────────
+export { FlexContainer } from './FlexContainer';
+export type { FlexContainerConfig, FlexDirection, JustifyContent, AlignItems, FlexItemConfig } from './FlexContainer';
 export { Button } from './Button';
 export type { ButtonConfig, ButtonState } from './Button';
 export { ProgressBar } from './ProgressBar';
@@ -22,12 +25,3 @@ export { Layout } from './Layout';
 export type { LayoutConfig, LayoutDirection, LayoutAlignment, LayoutAnchor } from './Layout';
 export { ScrollContainer } from './ScrollContainer';
 export type { ScrollContainerConfig, ScrollDirection } from './ScrollContainer';
-
-// ─── Direct access to @pixi/ui and @pixi/layout ──────────
-// These packages are optional peer dependencies.
-// For any classes or types not wrapped by the engine (e.g. Slider, CheckBox,
-// Input, Select, RadioGroup, List, etc.), import directly:
-//
-//   import { Slider, CheckBox } from '@pixi/ui';
-//   import { LayoutContainer } from '@pixi/layout/components';
-//

package/src/ui/view.ts

@@ -0,0 +1,28 @@
+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;
+}

package/src/vite/index.ts

@@ -214,7 +214,7 @@ function luaPlugin(configPath: string): Plugin {
  * Define a Vite configuration tailored for Energy8 casino games.
  *
  * Merges sensible defaults for iGaming projects:
- * - Build target: ESNext (required for yoga-layout WASM top-level await)
+ * - Build target: ESNext
  * - Asset inlining threshold: 8KB
  * - Source maps for dev, none for prod
  * - Optional DevBridge auto-injection in dev mode
@@ -272,11 +272,6 @@ export function defineGameConfig(config: GameConfig = {}): UserConfig {
     resolve: {
       dedupe: [
         'pixi.js',
-        '@pixi/layout',
-        '@pixi/layout/components',
-        '@pixi/ui',
-        'yoga-layout',
-        'yoga-layout/load',
         'react',
         'react-dom',
         'react-reconciler',
@@ -287,15 +282,10 @@ export function defineGameConfig(config: GameConfig = {}): UserConfig {
     optimizeDeps: {
       include: [
         'pixi.js',
-        '@pixi/layout',
-        '@pixi/layout/components',
-        '@pixi/ui',
-        'yoga-layout/load',
         'react',
         'react-dom',
       ],
       exclude: [
-        'yoga-layout',
         'fengari',
       ],
       esbuildOptions: {