@energy8platform/game-engine 0.3.0 → 0.5.0

package/src/ui/ScrollContainer.ts

@@ -1,4 +1,6 @@
-import { Container, Graphics } from 'pixi.js';
+import { Container, type ColorSource } from 'pixi.js';
+import { ScrollBox as PixiScrollBox } from '@pixi/ui';
+import type { ScrollBoxOptions } from '@pixi/ui';
 
 // ─── Types ───────────────────────────────────────────────
 
@@ -14,42 +16,39 @@ export interface ScrollContainerConfig {
   /** 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;
+  /** Background color (undefined = transparent) */
+  backgroundColor?: ColorSource;
 
-  /** Elasticity factor for overscroll bounce (0 = none, 1 = infinite, default: 0.3) */
-  elasticity?: number;
+  /** Border radius for the mask (default: 0) */
+  borderRadius?: number;
 
-  /** Inertia deceleration factor (0 = instant stop, 1 = infinite drift, default: 0.92) */
-  inertia?: number;
+  /** Gap between items (default: 0) */
+  elementsMargin?: number;
 
-  /** Snap to items of fixed height/width (0 = no snap) */
-  snapSize?: number;
+  /** Padding */
+  padding?: number;
 
-  /** Background color (undefined = transparent) */
-  backgroundColor?: number;
+  /** Disable dynamic rendering (render all items even when offscreen) */
+  disableDynamicRendering?: boolean;
 
-  /** Background alpha (default: 1) */
-  backgroundAlpha?: number;
+  /** Disable easing/inertia */
+  disableEasing?: boolean;
 
-  /** Border radius for the mask (default: 0) */
-  borderRadius?: number;
+  /** Global scroll — scroll even when mouse is not over the component */
+  globalScroll?: boolean;
 }
 
+const DIRECTION_MAP: Record<ScrollDirection, 'vertical' | 'horizontal' | 'bidirectional'> = {
+  vertical: 'vertical',
+  horizontal: 'horizontal',
+  both: 'bidirectional',
+};
+
 /**
- * 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
@@ -57,501 +56,71 @@ export 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);
  * ```
  */
-export class ScrollContainer extends Container {
-  private _config: Required<
-    Pick<ScrollContainerConfig, 'width' | 'height' | 'direction' | 'showScrollbar' |
-      'scrollbarWidth' | 'scrollbarColor' | 'scrollbarAlpha' | 'elasticity' | 'inertia' |
-      'snapSize' | 'borderRadius'>
-  >;
-
-  private _viewport: Container;
-  private _content: Container | null = null;
-  private _mask: Graphics;
-  private _bg: Graphics;
-  private _scrollbarV: Graphics | null = null;
-  private _scrollbarH: Graphics | null = null;
-  private _scrollbarFadeTimeout: number | null = null;
-
-  // Scroll state
-  private _scrollX = 0;
-  private _scrollY = 0;
-  private _velocityX = 0;
-  private _velocityY = 0;
-  private _isDragging = false;
-  private _dragStart = { x: 0, y: 0 };
-  private _scrollStart = { x: 0, y: 0 };
-  private _lastDragPos = { x: 0, y: 0 };
-  private _lastDragTime = 0;
-  private _isAnimating = false;
-  private _animationFrame: number | null = null;
+export class ScrollContainer extends PixiScrollBox {
+  private _scrollConfig: ScrollContainerConfig;
 
   constructor(config: ScrollContainerConfig) {
-    super();
-
-    this._config = {
+    const options: ScrollBoxOptions = {
       width: config.width,
       height: config.height,
-      direction: config.direction ?? 'vertical',
-      showScrollbar: config.showScrollbar ?? true,
-      scrollbarWidth: config.scrollbarWidth ?? 6,
-      scrollbarColor: config.scrollbarColor ?? 0xffffff,
-      scrollbarAlpha: config.scrollbarAlpha ?? 0.4,
-      elasticity: config.elasticity ?? 0.3,
-      inertia: config.inertia ?? 0.92,
-      snapSize: config.snapSize ?? 0,
-      borderRadius: config.borderRadius ?? 0,
+      type: DIRECTION_MAP[config.direction ?? 'vertical'],
+      radius: config.borderRadius ?? 0,
+      elementsMargin: config.elementsMargin ?? 0,
+      padding: config.padding ?? 0,
+      disableDynamicRendering: config.disableDynamicRendering ?? false,
+      disableEasing: config.disableEasing ?? false,
+      globalScroll: config.globalScroll ?? true,
     };
 
-    // Background
-    this._bg = new Graphics();
     if (config.backgroundColor !== undefined) {
-      this._bg.roundRect(0, 0, config.width, config.height, this._config.borderRadius)
-        .fill({ color: config.backgroundColor, alpha: config.backgroundAlpha ?? 1 });
+      options.background = config.backgroundColor;
     }
-    this.addChild(this._bg);
 
-    // Viewport (masked area)
-    this._viewport = new Container();
-    this.addChild(this._viewport);
+    super(options);
 
-    // Mask
-    this._mask = new Graphics();
-    this._mask.roundRect(0, 0, config.width, config.height, this._config.borderRadius)
-      .fill(0xffffff);
-    this.addChild(this._mask);
-    this._viewport.mask = this._mask;
-
-    // Scrollbars
-    if (this._config.showScrollbar) {
-      if (this._config.direction !== 'horizontal') {
-        this._scrollbarV = new Graphics();
-        this._scrollbarV.alpha = 0;
-        this.addChild(this._scrollbarV);
-      }
-      if (this._config.direction !== 'vertical') {
-        this._scrollbarH = new Graphics();
-        this._scrollbarH.alpha = 0;
-        this.addChild(this._scrollbarH);
-      }
-    }
-
-    // Interaction
-    this.eventMode = 'static';
-    this.cursor = 'grab';
-    this.hitArea = { contains: (x: number, y: number) =>
-      x >= 0 && x <= config.width && y >= 0 && y <= config.height };
-
-    this.on('pointerdown', this.onPointerDown);
-    this.on('pointermove', this.onPointerMove);
-    this.on('pointerup', this.onPointerUp);
-    this.on('pointerupoutside', this.onPointerUp);
-    this.on('wheel', this.onWheel);
+    this._scrollConfig = config;
   }
 
   /** Set scrollable content. Replaces any existing content. */
   setContent(content: Container): void {
-    if (this._content) {
-      this._viewport.removeChild(this._content);
+    // Remove existing items
+    const existing = this.items;
+    if (existing.length > 0) {
+      for (let i = existing.length - 1; i >= 0; i--) {
+        this.removeItem(i);
+      }
     }
-    this._content = content;
-    this._viewport.addChild(content);
-    this._scrollX = 0;
-    this._scrollY = 0;
-    this.applyScroll();
-  }
 
-  /** Get the content container */
-  get content(): Container | null {
-    return this._content;
-  }
-
-  /** Scroll to a specific position (in content coordinates) */
-  scrollTo(x: number, y: number, animate = true): void {
-    if (!animate) {
-      this._scrollX = x;
-      this._scrollY = y;
-      this.clampScroll();
-      this.applyScroll();
-      return;
+    // Add all children from the content container
+    const children = [...content.children] as Container[];
+    if (children.length > 0) {
+      this.addItems(children);
     }
+  }
 
-    this.animateScrollTo(x, y);
+  /** Add a single item */
+  addItem(...items: Container[]): Container {
+    this.addItems(items);
+    return items[0];
   }
 
   /** Scroll to make a specific item/child visible */
   scrollToItem(index: number): void {
-    if (this._config.snapSize > 0) {
-      const pos = index * this._config.snapSize;
-      if (this._config.direction === 'horizontal') {
-        this.scrollTo(pos, this._scrollY);
-      } else {
-        this.scrollTo(this._scrollX, pos);
-      }
-    }
+    this.scrollTo(index);
   }
 
   /** Current scroll position */
   get scrollPosition(): { x: number; y: number } {
-    return { x: this._scrollX, y: this._scrollY };
-  }
-
-  /** Resize the scroll viewport */
-  resize(width: number, height: number): void {
-    this._config.width = width;
-    this._config.height = height;
-
-    // Redraw mask and background
-    this._mask.clear();
-    this._mask.roundRect(0, 0, width, height, this._config.borderRadius).fill(0xffffff);
-
-    this._bg.clear();
-
-    this.hitArea = { contains: (x: number, y: number) =>
-      x >= 0 && x <= width && y >= 0 && y <= height };
-
-    this.clampScroll();
-    this.applyScroll();
-  }
-
-  /** Destroy and clean up */
-  override destroy(options?: any): void {
-    this.stopAnimation();
-    if (this._scrollbarFadeTimeout !== null) {
-      clearTimeout(this._scrollbarFadeTimeout);
-    }
-    this.off('pointerdown', this.onPointerDown);
-    this.off('pointermove', this.onPointerMove);
-    this.off('pointerup', this.onPointerUp);
-    this.off('pointerupoutside', this.onPointerUp);
-    this.off('wheel', this.onWheel);
-    super.destroy(options);
-  }
-
-  // ─── Scroll mechanics ─────────────────────────────────
-
-  private get contentWidth(): number {
-    if (!this._content) return 0;
-    const bounds = this._content.getBounds();
-    return bounds.width;
-  }
-
-  private get contentHeight(): number {
-    if (!this._content) return 0;
-    const bounds = this._content.getBounds();
-    return bounds.height;
-  }
-
-  private get maxScrollX(): number {
-    return Math.max(0, this.contentWidth - this._config.width);
-  }
-
-  private get maxScrollY(): number {
-    return Math.max(0, this.contentHeight - this._config.height);
-  }
-
-  private canScrollX(): boolean {
-    return this._config.direction === 'horizontal' || this._config.direction === 'both';
-  }
-
-  private canScrollY(): boolean {
-    return this._config.direction === 'vertical' || this._config.direction === 'both';
-  }
-
-  private clampScroll(): void {
-    if (this.canScrollX()) {
-      this._scrollX = Math.max(0, Math.min(this._scrollX, this.maxScrollX));
-    } else {
-      this._scrollX = 0;
-    }
-    if (this.canScrollY()) {
-      this._scrollY = Math.max(0, Math.min(this._scrollY, this.maxScrollY));
-    } else {
-      this._scrollY = 0;
-    }
-  }
-
-  private applyScroll(): void {
-    if (!this._content) return;
-    this._content.x = -this._scrollX;
-    this._content.y = -this._scrollY;
-    this.updateScrollbars();
-  }
-
-  // ─── Input handlers ────────────────────────────────────
-
-  private onPointerDown = (e: any): void => {
-    this._isDragging = true;
-    this._isAnimating = false;
-    this.stopAnimation();
-    this.cursor = 'grabbing';
-
-    const local = e.getLocalPosition(this);
-    this._dragStart = { x: local.x, y: local.y };
-    this._scrollStart = { x: this._scrollX, y: this._scrollY };
-    this._lastDragPos = { x: local.x, y: local.y };
-    this._lastDragTime = Date.now();
-    this._velocityX = 0;
-    this._velocityY = 0;
-
-    this.showScrollbars();
-  };
-
-  private onPointerMove = (e: any): void => {
-    if (!this._isDragging) return;
-
-    const local = e.getLocalPosition(this);
-    const dx = local.x - this._dragStart.x;
-    const dy = local.y - this._dragStart.y;
-    const now = Date.now();
-    const dt = Math.max(1, now - this._lastDragTime);
-
-    // Calculate velocity for inertia
-    this._velocityX = (local.x - this._lastDragPos.x) / dt * 16; // normalize to ~60fps
-    this._velocityY = (local.y - this._lastDragPos.y) / dt * 16;
-
-    this._lastDragPos = { x: local.x, y: local.y };
-    this._lastDragTime = now;
-
-    // Apply scroll with elasticity for overscroll
-    let newX = this._scrollStart.x - dx;
-    let newY = this._scrollStart.y - dy;
-
-    const elasticity = this._config.elasticity;
-    if (this.canScrollX()) {
-      if (newX < 0) newX *= elasticity;
-      else if (newX > this.maxScrollX) newX = this.maxScrollX + (newX - this.maxScrollX) * elasticity;
-      this._scrollX = newX;
-    }
-    if (this.canScrollY()) {
-      if (newY < 0) newY *= elasticity;
-      else if (newY > this.maxScrollY) newY = this.maxScrollY + (newY - this.maxScrollY) * elasticity;
-      this._scrollY = newY;
-    }
-
-    this.applyScroll();
-  };
-
-  private onPointerUp = (): void => {
-    if (!this._isDragging) return;
-    this._isDragging = false;
-    this.cursor = 'grab';
-
-    // Start inertia
-    if (Math.abs(this._velocityX) > 0.5 || Math.abs(this._velocityY) > 0.5) {
-      this.startInertia();
-    } else {
-      this.snapAndBounce();
-    }
-  };
-
-  private onWheel = (e: any): void => {
-    e.preventDefault?.();
-    const delta = e.deltaY ?? 0;
-    const deltaX = e.deltaX ?? 0;
-
-    if (this.canScrollY()) {
-      this._scrollY += delta * 0.5;
-    }
-    if (this.canScrollX()) {
-      this._scrollX += deltaX * 0.5;
-    }
-
-    this.clampScroll();
-    this.applyScroll();
-    this.showScrollbars();
-    this.scheduleScrollbarFade();
-  };
-
-  // ─── Inertia & snap ───────────────────────────────────
-
-  private startInertia(): void {
-    this._isAnimating = true;
-
-    const tick = () => {
-      if (!this._isAnimating) return;
-
-      this._velocityX *= this._config.inertia;
-      this._velocityY *= this._config.inertia;
-
-      if (this.canScrollX()) this._scrollX -= this._velocityX;
-      if (this.canScrollY()) this._scrollY -= this._velocityY;
-
-      // Bounce back if overscrolled
-      let bounced = false;
-      if (this.canScrollX()) {
-        if (this._scrollX < 0) { this._scrollX *= 0.8; bounced = true; }
-        else if (this._scrollX > this.maxScrollX) {
-          this._scrollX = this.maxScrollX + (this._scrollX - this.maxScrollX) * 0.8;
-          bounced = true;
-        }
-      }
-      if (this.canScrollY()) {
-        if (this._scrollY < 0) { this._scrollY *= 0.8; bounced = true; }
-        else if (this._scrollY > this.maxScrollY) {
-          this._scrollY = this.maxScrollY + (this._scrollY - this.maxScrollY) * 0.8;
-          bounced = true;
-        }
-      }
-
-      this.applyScroll();
-
-      const speed = Math.abs(this._velocityX) + Math.abs(this._velocityY);
-      if (speed < 0.1 && !bounced) {
-        this._isAnimating = false;
-        this.snapAndBounce();
-        return;
-      }
-
-      this._animationFrame = requestAnimationFrame(tick);
-    };
-
-    this._animationFrame = requestAnimationFrame(tick);
-  }
-
-  private snapAndBounce(): void {
-    // Clamp first
-    let targetX = Math.max(0, Math.min(this._scrollX, this.maxScrollX));
-    let targetY = Math.max(0, Math.min(this._scrollY, this.maxScrollY));
-
-    // Snap
-    if (this._config.snapSize > 0) {
-      if (this.canScrollY()) {
-        targetY = Math.round(targetY / this._config.snapSize) * this._config.snapSize;
-        targetY = Math.max(0, Math.min(targetY, this.maxScrollY));
-      }
-      if (this.canScrollX()) {
-        targetX = Math.round(targetX / this._config.snapSize) * this._config.snapSize;
-        targetX = Math.max(0, Math.min(targetX, this.maxScrollX));
-      }
-    }
-
-    if (Math.abs(targetX - this._scrollX) < 0.5 && Math.abs(targetY - this._scrollY) < 0.5) {
-      this._scrollX = targetX;
-      this._scrollY = targetY;
-      this.applyScroll();
-      this.scheduleScrollbarFade();
-      return;
-    }
-
-    this.animateScrollTo(targetX, targetY);
-  }
-
-  private animateScrollTo(targetX: number, targetY: number): void {
-    this._isAnimating = true;
-    const startX = this._scrollX;
-    const startY = this._scrollY;
-    const startTime = Date.now();
-    const duration = 300;
-
-    const tick = () => {
-      if (!this._isAnimating) return;
-
-      const elapsed = Date.now() - startTime;
-      const t = Math.min(elapsed / duration, 1);
-      // easeOutCubic
-      const eased = 1 - Math.pow(1 - t, 3);
-
-      this._scrollX = startX + (targetX - startX) * eased;
-      this._scrollY = startY + (targetY - startY) * eased;
-      this.applyScroll();
-
-      if (t < 1) {
-        this._animationFrame = requestAnimationFrame(tick);
-      } else {
-        this._isAnimating = false;
-        this.scheduleScrollbarFade();
-      }
-    };
-
-    this._animationFrame = requestAnimationFrame(tick);
-  }
-
-  private stopAnimation(): void {
-    this._isAnimating = false;
-    if (this._animationFrame !== null) {
-      cancelAnimationFrame(this._animationFrame);
-      this._animationFrame = null;
-    }
-  }
-
-  // ─── Scrollbars ────────────────────────────────────────
-
-  private updateScrollbars(): void {
-    const { width, height, scrollbarWidth, scrollbarColor, scrollbarAlpha } = this._config;
-
-    if (this._scrollbarV && this.canScrollY() && this.contentHeight > height) {
-      const ratio = height / this.contentHeight;
-      const barH = Math.max(20, height * ratio);
-      const barY = (this._scrollY / this.maxScrollY) * (height - barH);
-
-      this._scrollbarV.clear();
-      this._scrollbarV.roundRect(
-        width - scrollbarWidth - 2,
-        Math.max(0, barY),
-        scrollbarWidth,
-        barH,
-        scrollbarWidth / 2,
-      ).fill({ color: scrollbarColor, alpha: scrollbarAlpha });
-    }
-
-    if (this._scrollbarH && this.canScrollX() && this.contentWidth > width) {
-      const ratio = width / this.contentWidth;
-      const barW = Math.max(20, width * ratio);
-      const barX = (this._scrollX / this.maxScrollX) * (width - barW);
-
-      this._scrollbarH.clear();
-      this._scrollbarH.roundRect(
-        Math.max(0, barX),
-        height - scrollbarWidth - 2,
-        barW,
-        scrollbarWidth,
-        scrollbarWidth / 2,
-      ).fill({ color: scrollbarColor, alpha: scrollbarAlpha });
-    }
-  }
-
-  private showScrollbars(): void {
-    if (this._scrollbarV) this._scrollbarV.alpha = 1;
-    if (this._scrollbarH) this._scrollbarH.alpha = 1;
-  }
-
-  private scheduleScrollbarFade(): void {
-    if (this._scrollbarFadeTimeout !== null) {
-      clearTimeout(this._scrollbarFadeTimeout);
-    }
-    this._scrollbarFadeTimeout = window.setTimeout(() => {
-      this.fadeScrollbars();
-    }, 1000);
-  }
-
-  private fadeScrollbars(): void {
-    const duration = 300;
-    const startTime = Date.now();
-    const startAlphaV = this._scrollbarV?.alpha ?? 0;
-    const startAlphaH = this._scrollbarH?.alpha ?? 0;
-
-    const tick = () => {
-      const t = Math.min((Date.now() - startTime) / duration, 1);
-      if (this._scrollbarV) this._scrollbarV.alpha = startAlphaV * (1 - t);
-      if (this._scrollbarH) this._scrollbarH.alpha = startAlphaH * (1 - t);
-      if (t < 1) requestAnimationFrame(tick);
-    };
-    requestAnimationFrame(tick);
+    return { x: this.scrollX, y: this.scrollY };
   }
 }

package/src/ui/Toast.ts

@@ -38,9 +38,8 @@ export class Toast extends Container {
     super();
 
     this._config = {
-      duration: 3000,
-      bottomOffset: 60,
-      ...config,
+      duration: config.duration ?? 3000,
+      bottomOffset: config.bottomOffset ?? 60,
     };
 
     this._bg = new Graphics();
@@ -69,7 +68,6 @@ export class Toast extends Container {
     viewWidth?: number,
     viewHeight?: number,
   ): Promise<void> {
-    // Clear previous dismiss
     if (this._dismissTimeout) {
       clearTimeout(this._dismissTimeout);
     }
@@ -81,10 +79,10 @@ export class Toast extends Container {
     const height = 44;
     const radius = 8;
 
+    // Draw the background
     this._bg.clear();
-    this._bg.roundRect(-width / 2, -height / 2, width, height, radius).fill(TOAST_COLORS[type]);
-    this._bg.roundRect(-width / 2, -height / 2, width, height, radius)
-      .fill({ color: 0x000000, alpha: 0.2 });
+    this._bg.roundRect(-width / 2, -height / 2, width, height, radius);
+    this._bg.fill(TOAST_COLORS[type]);
 
     // Position
     if (viewWidth && viewHeight) {
@@ -96,10 +94,8 @@ export class Toast extends Container {
     this.alpha = 0;
     this.y += 20;
 
-    // Animate in
     await Tween.to(this, { alpha: 1, y: this.y - 20 }, 300, Easing.easeOutCubic);
 
-    // Auto-dismiss
     if (this._config.duration > 0) {
       this._dismissTimeout = setTimeout(() => {
         this.dismiss();

package/src/ui/index.ts

@@ -1,3 +1,7 @@
+// ─── @pixi/layout setup (must be imported before creating containers) ────
+import '@pixi/layout';
+
+// ─── Engine UI Components ─────────────────────────────────
 export { Button } from './Button';
 export type { ButtonConfig, ButtonState } from './Button';
 export { ProgressBar } from './ProgressBar';
@@ -18,3 +22,12 @@ 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';
+//