@energy8platform/game-engine 0.3.0 → 0.4.0

package/dist/index.d.ts

@@ -1,6 +1,11 @@
-import { Container, ApplicationOptions, Application, Texture, AnimatedSprite, Spritesheet, TextStyle } from 'pixi.js';
+import { Container, ApplicationOptions, Application, Texture, AnimatedSprite, Spritesheet, TextStyle, ColorSource } from 'pixi.js';
 import { CasinoGameSDK, InitData, GameConfigData, SessionData, PlayResultData } from '@energy8platform/game-sdk';
 export { GameConfigData, InitData, PlayParams, PlayResultData, SessionData } from '@energy8platform/game-sdk';
+export { LayoutStyles } from '@pixi/layout';
+import { FancyButton, ScrollBox } from '@pixi/ui';
+export { ButtonContainer, FancyButton, ScrollBox } from '@pixi/ui';
+import { LayoutContainer } from '@pixi/layout/components';
+export { LayoutContainer } from '@pixi/layout/components';
 
 declare enum ScaleMode {
     /** Fit inside container, maintain aspect ratio (letterbox/pillarbox) */
@@ -1250,7 +1255,7 @@ declare class SpriteAnimation {
     static getTexturesByPrefix(sheet: Spritesheet, prefix: string): Texture[];
 }
 
-type ButtonState = 'normal' | 'hover' | 'pressed' | 'disabled';
+type ButtonState = 'default' | 'hover' | 'pressed' | 'disabled';
 interface ButtonConfig {
     /** Default texture/sprite for each state (optional — uses Graphics if not provided) */
     textures?: Partial<Record<ButtonState, string | Texture>>;
@@ -1268,48 +1273,38 @@ interface ButtonConfig {
     animationDuration?: number;
     /** Start disabled */
     disabled?: boolean;
+    /** Button text */
+    text?: string;
+    /** Button text style */
+    textStyle?: Record<string, unknown>;
 }
 /**
- * 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);
  * ```
  */
-declare class Button extends Container {
-    private _state;
-    private _bg;
-    private _sprites;
-    private _config;
-    /** Called when the button is tapped/clicked */
-    onTap?: () => void;
-    /** Called when the button state changes */
-    onStateChange?: (state: ButtonState) => void;
+declare class Button extends FancyButton {
+    private _buttonConfig;
     constructor(config?: ButtonConfig);
-    /** Current button state */
-    get state(): ButtonState;
     /** Enable the button */
     enable(): void;
     /** Disable the button */
     disable(): void;
     /** Whether the button is disabled */
     get disabled(): boolean;
-    private setState;
-    private render;
-    private onPointerOver;
-    private onPointerOut;
-    private onPointerDown;
-    private onPointerUp;
-    private onPointerTap;
 }
 
 interface ProgressBarConfig {
@@ -1326,7 +1321,9 @@ interface ProgressBarConfig {
     animationSpeed?: number;
 }
 /**
- * Horizontal progress bar with optional smooth fill animation.
+ * Horizontal progress bar powered by `@pixi/ui` ProgressBar.
+ *
+ * Provides optional smooth animated fill via per-frame `update()`.
  *
  * @example
  * ```ts
@@ -1336,9 +1333,8 @@ interface ProgressBarConfig {
  * ```
  */
 declare class ProgressBar extends Container {
-    private _track;
-    private _fill;
-    private _border;
+    private _bar;
+    private _borderGfx;
     private _config;
     private _progress;
     private _displayedProgress;
@@ -1349,10 +1345,7 @@ declare class ProgressBar extends Container {
     /**
      * Call each frame if animated is true.
      */
-    update(dt: number): void;
-    private drawTrack;
-    private drawBorder;
-    private drawFill;
+    update(_dt: number): void;
 }
 
 interface LabelConfig {
@@ -1426,7 +1419,10 @@ interface PanelConfig {
     padding?: number;
 }
 /**
- * Background panel that can use either Graphics or 9-slice sprite.
+ * Background panel powered by `@pixi/layout` LayoutContainer.
+ *
+ * Supports both Graphics-based (color + border) and 9-slice sprite backgrounds.
+ * Children added to `content` participate in flexbox layout automatically.
  *
  * @example
  * ```ts
@@ -1441,16 +1437,13 @@ interface PanelConfig {
  * });
  * ```
  */
-declare class Panel extends Container {
-    private _bg;
-    private _content;
-    private _config;
+declare class Panel extends LayoutContainer {
+    private _panelConfig;
     constructor(config?: PanelConfig);
-    /** Content container — add children here */
+    /** Access the content container (children added here participate in layout) */
     get content(): Container;
     /** Resize the panel */
     setSize(width: number, height: number): void;
-    private drawGraphicsBg;
 }
 
 interface BalanceDisplayConfig {
@@ -1571,6 +1564,8 @@ interface ModalConfig {
  * Modal overlay component.
  * Shows content on top of a dark overlay with enter/exit animations.
  *
+ * The content container uses `@pixi/layout` for automatic centering.
+ *
  * @example
  * ```ts
  * const modal = new Modal({ closeOnOverlay: true });
@@ -1611,6 +1606,8 @@ interface ToastConfig {
 /**
  * Toast notification component for displaying transient messages.
  *
+ * Uses `@pixi/layout` LayoutContainer for auto-sized background.
+ *
  * @example
  * ```ts
  * const toast = new Toast();
@@ -1658,7 +1655,7 @@ interface LayoutConfig {
     breakpoints?: Record<number, Partial<LayoutConfig>>;
 }
 /**
- * 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.
@@ -1681,17 +1678,15 @@ interface LayoutConfig {
  * toolbar.addItem(betLabel);
  * scene.container.addChild(toolbar);
  *
- * // On resize, update layout position relative to viewport
  * toolbar.updateViewport(width, height);
  * ```
  */
 declare class Layout extends Container {
-    private _config;
+    private _layoutConfig;
     private _padding;
     private _anchor;
     private _maxWidth;
     private _breakpoints;
-    private _content;
     private _items;
     private _viewportWidth;
     private _viewportHeight;
@@ -1709,17 +1704,10 @@ declare class Layout extends Container {
      * Should be called from `Scene.onResize()`.
      */
     updateViewport(width: number, height: number): void;
-    /**
-     * Recalculate layout positions of all children.
-     */
-    layout(): void;
-    private layoutLinear;
-    private layoutGrid;
-    private layoutWrap;
+    private applyLayoutStyles;
+    private applyGridChildWidth;
     private applyAnchor;
     private resolveConfig;
-    private getItemSize;
-    private static normalizePadding;
 }
 
 type ScrollDirection = 'vertical' | 'horizontal' | 'both';
@@ -1730,32 +1718,26 @@ interface ScrollContainerConfig {
     height: number;
     /** Scroll direction (default: 'vertical') */
     direction?: ScrollDirection;
-    /** Show scrollbar(s) (default: true) */
-    showScrollbar?: boolean;
-    /** Scrollbar width in pixels (default: 6) */
-    scrollbarWidth?: number;
-    /** Scrollbar color (default: 0xffffff) */
-    scrollbarColor?: number;
-    /** Scrollbar opacity (default: 0.4) */
-    scrollbarAlpha?: number;
-    /** Elasticity factor for overscroll bounce (0 = none, 1 = infinite, default: 0.3) */
-    elasticity?: number;
-    /** Inertia deceleration factor (0 = instant stop, 1 = infinite drift, default: 0.92) */
-    inertia?: number;
-    /** Snap to items of fixed height/width (0 = no snap) */
-    snapSize?: number;
     /** Background color (undefined = transparent) */
-    backgroundColor?: number;
-    /** Background alpha (default: 1) */
-    backgroundAlpha?: number;
+    backgroundColor?: ColorSource;
     /** Border radius for the mask (default: 0) */
     borderRadius?: number;
+    /** Gap between items (default: 0) */
+    elementsMargin?: number;
+    /** Padding */
+    padding?: number;
+    /** Disable dynamic rendering (render all items even when offscreen) */
+    disableDynamicRendering?: boolean;
+    /** Disable easing/inertia */
+    disableEasing?: boolean;
+    /** Global scroll — scroll even when mouse is not over the component */
+    globalScroll?: boolean;
 }
 /**
- * Scrollable container with touch/drag, mouse wheel, inertia, and optional scrollbar.
+ * Scrollable container powered by `@pixi/ui` ScrollBox.
  *
- * Perfect for paytables, settings panels, bet history, and any scrollable content
- * that doesn't fit on screen.
+ * Provides touch/drag scrolling, mouse wheel support, inertia, and
+ * dynamic rendering optimization for off-screen items.
  *
  * @example
  * ```ts
@@ -1763,49 +1745,23 @@ interface ScrollContainerConfig {
  *   width: 600,
  *   height: 400,
  *   direction: 'vertical',
- *   showScrollbar: true,
- *   elasticity: 0.3,
+ *   elementsMargin: 8,
  * });
  *
- * // Add content taller than 400px
- * const list = new Container();
  * for (let i = 0; i < 50; i++) {
- *   const row = createRow(i);
- *   row.y = i * 40;
- *   list.addChild(row);
+ *   scroll.addItem(createRow(i));
  * }
- * scroll.setContent(list);
  *
  * scene.container.addChild(scroll);
  * ```
  */
-declare class ScrollContainer extends Container {
-    private _config;
-    private _viewport;
-    private _content;
-    private _mask;
-    private _bg;
-    private _scrollbarV;
-    private _scrollbarH;
-    private _scrollbarFadeTimeout;
-    private _scrollX;
-    private _scrollY;
-    private _velocityX;
-    private _velocityY;
-    private _isDragging;
-    private _dragStart;
-    private _scrollStart;
-    private _lastDragPos;
-    private _lastDragTime;
-    private _isAnimating;
-    private _animationFrame;
+declare class ScrollContainer extends ScrollBox {
+    private _scrollConfig;
     constructor(config: ScrollContainerConfig);
     /** Set scrollable content. Replaces any existing content. */
     setContent(content: Container): void;
-    /** Get the content container */
-    get content(): Container | null;
-    /** Scroll to a specific position (in content coordinates) */
-    scrollTo(x: number, y: number, animate?: boolean): void;
+    /** Add a single item */
+    addItem(...items: Container[]): Container;
     /** Scroll to make a specific item/child visible */
     scrollToItem(index: number): void;
     /** Current scroll position */
@@ -1813,30 +1769,6 @@ declare class ScrollContainer extends Container {
         x: number;
         y: number;
     };
-    /** Resize the scroll viewport */
-    resize(width: number, height: number): void;
-    /** Destroy and clean up */
-    destroy(options?: any): void;
-    private get contentWidth();
-    private get contentHeight();
-    private get maxScrollX();
-    private get maxScrollY();
-    private canScrollX;
-    private canScrollY;
-    private clampScroll;
-    private applyScroll;
-    private onPointerDown;
-    private onPointerMove;
-    private onPointerUp;
-    private onWheel;
-    private startInertia;
-    private snapAndBounce;
-    private animateScrollTo;
-    private stopAnimation;
-    private updateScrollbars;
-    private showScrollbars;
-    private scheduleScrollbarFade;
-    private fadeScrollbars;
 }
 
 /**
@@ -1951,4 +1883,4 @@ declare class DevBridge {
 }
 
 export { AssetManager, AudioManager, BalanceDisplay, Button, DevBridge, Easing, EventEmitter, FPSOverlay, GameApplication, InputManager, Label, Layout, LoadingScene, Modal, Orientation, Panel, ProgressBar, ScaleMode, Scene, SceneManager, ScrollContainer, SpineHelper, SpriteAnimation, StateMachine, Timeline, Toast, TransitionType, Tween, ViewportManager, WinDisplay };
-export type { AssetBundle, AssetEntry, AssetManifest, AudioConfig, DevBridgeConfig, EasingFunction, GameApplicationConfig, GameEngineEvents, IScene, LayoutAlignment, LayoutAnchor, LayoutConfig, LayoutDirection, LoadingScreenConfig, SceneConstructor, ScrollContainerConfig, ScrollDirection, SpriteAnimationConfig, TransitionConfig, TweenOptions };
+export type { AssetBundle, AssetEntry, AssetManifest, AudioConfig, BalanceDisplayConfig, ButtonConfig, ButtonState, DevBridgeConfig, EasingFunction, GameApplicationConfig, GameEngineEvents, IScene, LabelConfig, LayoutAlignment, LayoutAnchor, LayoutConfig, LayoutDirection, LoadingScreenConfig, ModalConfig, PanelConfig, ProgressBarConfig, SceneConstructor, ScrollContainerConfig, ScrollDirection, SpriteAnimationConfig, ToastConfig, ToastType, TransitionConfig, TweenOptions, WinDisplayConfig };