@energy8platform/game-engine 0.20.0 → 0.22.0

package/src/ui/Label.ts

@@ -1,124 +0,0 @@
-import { Container, Text, TextStyle } from 'pixi.js';
-
-export interface LabelConfig {
-  text?: string;
-  style?: Partial<TextStyle>;
-  /** Maximum width — text will be scaled down to fit */
-  maxWidth?: number;
-  /** Auto-fit: scale text to fit maxWidth */
-  autoFit?: boolean;
-}
-
-/**
- * Enhanced text label with auto-fit scaling and currency formatting.
- *
- * @example
- * ```ts
- * const label = new Label({
- *   text: 'BALANCE',
- *   style: { fontSize: 24, fill: 0xffd700 },
- *   maxWidth: 200,
- *   autoFit: true,
- * });
- * ```
- */
-export class Label extends Container {
-  readonly __uiComponent = true as const;
-
-  private _text: Text;
-  private _maxWidth: number;
-  private _autoFit: boolean;
-
-  constructor(config: LabelConfig = {}) {
-    super();
-
-    this._maxWidth = config.maxWidth ?? Infinity;
-    this._autoFit = config.autoFit ?? false;
-
-    this._text = new Text({
-      text: config.text ?? '',
-      style: {
-        fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
-        fontSize: 24,
-        fill: 0xffffff,
-        ...config.style,
-      },
-    });
-    this._text.anchor.set(0.5);
-    this.addChild(this._text);
-
-    this.fitText();
-  }
-
-  /** Get/set the displayed text */
-  get text(): string {
-    return this._text.text;
-  }
-
-  set text(value: string) {
-    this._text.text = value;
-    this.fitText();
-  }
-
-  /** Get/set the text style */
-  get style(): TextStyle {
-    return this._text.style as TextStyle;
-  }
-
-  /** Set max width constraint */
-  set maxWidth(value: number) {
-    this._maxWidth = value;
-    this.fitText();
-  }
-
-  /**
-   * Format and display a number as currency.
-   *
-   * @param amount - The numeric amount
-   * @param currency - Currency code (e.g., 'USD', 'EUR')
-   * @param locale - Locale string (default: 'en-US')
-   */
-  setCurrency(amount: number, currency: string, locale = 'en-US'): void {
-    try {
-      this.text = new Intl.NumberFormat(locale, {
-        style: 'currency',
-        currency,
-        minimumFractionDigits: 2,
-        maximumFractionDigits: 2,
-      }).format(amount);
-    } catch {
-      this.text = `${amount.toFixed(2)} ${currency}`;
-    }
-  }
-
-  /**
-   * Format a number with thousands separators.
-   */
-  setNumber(value: number, decimals = 0, locale = 'en-US'): void {
-    this.text = new Intl.NumberFormat(locale, {
-      minimumFractionDigits: decimals,
-      maximumFractionDigits: decimals,
-    }).format(value);
-  }
-
-  /** React reconciler update hook */
-  updateConfig(changed: Record<string, any>): void {
-    if ('text' in changed) this.text = changed.text;
-    if ('maxWidth' in changed) this.maxWidth = changed.maxWidth;
-    if ('autoFit' in changed) { this._autoFit = changed.autoFit; this.fitText(); }
-    if ('style' in changed && typeof changed.style === 'object') {
-      Object.assign(this._text.style, changed.style);
-      this.fitText();
-    }
-  }
-
-  private fitText(): void {
-    if (!this._autoFit || this._maxWidth === Infinity) return;
-
-    this._text.scale.set(1);
-    if (this._text.width > this._maxWidth) {
-      const scale = this._maxWidth / this._text.width;
-      this._text.scale.set(scale);
-    }
-  }
-}

package/src/ui/LabelValue.ts

@@ -1,122 +0,0 @@
-import type { TextStyle } from 'pixi.js';
-import { FlexContainer, type FlexContainerConfig } from './FlexContainer';
-import { Label } from './Label';
-
-export type LabelValueAlign = 'start' | 'center' | 'end';
-
-export interface LabelValueConfig {
-  /** Caption text (top row, typically smaller/muted) */
-  label?: string;
-  /** Value text (bottom row, typically larger/prominent) */
-  value?: string;
-  /** Style for the caption Label */
-  labelStyle?: Partial<TextStyle>;
-  /** Style for the value Label */
-  valueStyle?: Partial<TextStyle>;
-  /** Gap in pixels between caption and value (default: 4) */
-  gap?: number;
-  /** Horizontal alignment of both rows (default: 'center') */
-  align?: LabelValueAlign;
-  /** Maximum width — value will be auto-scaled to fit when exceeded */
-  maxWidth?: number;
-  /** Optional padding (forwarded to the underlying FlexContainer) */
-  padding?: FlexContainerConfig['padding'];
-}
-
-/**
- * Two-row text cell with a muted caption above and a prominent value below —
- * the archetypal casino UI pattern (BALANCE/€500, BET/€1, WIN/€0.00).
- *
- * Extends FlexContainer, so it participates in parent flex layouts directly
- * (you can pass `flexGrow`, `alignSelf`, etc. when it's a child of another
- * FlexContainer) and auto-sizes to its contents when no explicit size is set.
- *
- * @example
- * ```tsx
- * <labelValue
- *   label="BALANCE"
- *   value={`€${balance.toFixed(2)}`}
- *   labelStyle={{ fontSize: 12, fill: 0x888888 }}
- *   valueStyle={{ fontSize: 22, fill: 0xffffff, fontWeight: 'bold' }}
- *   gap={6}
- *   align="center"
- * />
- * ```
- */
-export class LabelValue extends FlexContainer {
-  private readonly _labelEl: Label;
-  private readonly _valueEl: Label;
-  private _valueMaxWidth: number;
-
-  constructor(config: LabelValueConfig = {}) {
-    super({
-      direction: 'column',
-      alignItems: toAlignItems(config.align ?? 'center'),
-      gap: config.gap ?? 4,
-      padding: config.padding,
-    });
-
-    this._valueMaxWidth = config.maxWidth ?? Infinity;
-
-    this._labelEl = new Label({
-      text: config.label ?? '',
-      style: config.labelStyle,
-    });
-    this._valueEl = new Label({
-      text: config.value ?? '',
-      style: config.valueStyle,
-      maxWidth: config.maxWidth,
-      autoFit: config.maxWidth !== undefined,
-    });
-
-    this.addFlexChild(this._labelEl);
-    this.addFlexChild(this._valueEl);
-  }
-
-  /** Get the caption Label (for advanced styling / animation) */
-  get labelElement(): Label {
-    return this._labelEl;
-  }
-
-  /** Get the value Label */
-  get valueElement(): Label {
-    return this._valueEl;
-  }
-
-  /** Update caption text */
-  setLabel(text: string): void {
-    this._labelEl.text = text;
-    this.updateLayout();
-  }
-
-  /** Update value text */
-  setValue(text: string): void {
-    this._valueEl.text = text;
-    this.updateLayout();
-  }
-
-  /** React reconciler update hook */
-  override updateConfig(changed: Record<string, any>): void {
-    if ('label' in changed) this._labelEl.text = changed.label ?? '';
-    if ('value' in changed) this._valueEl.text = changed.value ?? '';
-    if ('labelStyle' in changed && typeof changed.labelStyle === 'object') {
-      Object.assign(this._labelEl.style, changed.labelStyle);
-    }
-    if ('valueStyle' in changed && typeof changed.valueStyle === 'object') {
-      Object.assign(this._valueEl.style, changed.valueStyle);
-    }
-    if ('maxWidth' in changed) {
-      this._valueMaxWidth = changed.maxWidth ?? Infinity;
-      this._valueEl.maxWidth = this._valueMaxWidth;
-    }
-    if ('gap' in changed) this.setGap(changed.gap);
-    if ('align' in changed) this.setAlignItems(toAlignItems(changed.align));
-
-    // Forward remaining FlexContainer props (e.g. padding, width, height)
-    super.updateConfig(changed);
-  }
-}
-
-function toAlignItems(align: LabelValueAlign): 'start' | 'center' | 'end' {
-  return align;
-}

package/src/ui/Layout.ts

@@ -1,291 +0,0 @@
-import { Container } from 'pixi.js';
-import { FlexContainer } from './FlexContainer';
-import type { FlexDirection, AlignItems, FlexItemConfig } from './FlexContainer';
-
-// ─── Types ───────────────────────────────────────────────
-
-export type LayoutDirection = 'horizontal' | 'vertical' | 'grid' | 'wrap';
-export type LayoutAlignment = 'start' | 'center' | 'end' | 'stretch';
-export type LayoutAnchor =
-  | 'top-left' | 'top-center' | 'top-right'
-  | 'center-left' | 'center' | 'center-right'
-  | 'bottom-left' | 'bottom-center' | 'bottom-right';
-
-export interface LayoutConfig {
-  /** Layout direction (default: 'vertical') */
-  direction?: LayoutDirection;
-
-  /** Gap between children in pixels (default: 0) */
-  gap?: number;
-
-  /** Padding inside the layout container [top, right, bottom, left] or a single number */
-  padding?: number | [number, number, number, number];
-
-  /** Alignment of children on the cross axis (default: 'start') */
-  alignment?: LayoutAlignment;
-
-  /** Anchor point determining where the layout is positioned relative to its coordinates */
-  anchor?: LayoutAnchor;
-
-  /** Number of columns (only for 'grid' direction) */
-  columns?: number;
-
-  /** Maximum width for 'wrap' direction before wrapping to next line */
-  maxWidth?: number;
-
-  /** Whether to auto-layout when children change (default: true) */
-  autoLayout?: boolean;
-
-  /** Breakpoints: map of max viewport widths to override configs */
-  breakpoints?: Record<number, Partial<LayoutConfig>>;
-}
-
-// ─── Helpers ─────────────────────────────────────────────
-
-function directionToFlex(direction: LayoutDirection): { direction: FlexDirection; wrap: boolean } {
-  switch (direction) {
-    case 'horizontal': return { direction: 'row', wrap: false };
-    case 'vertical': return { direction: 'column', wrap: false };
-    case 'grid': return { direction: 'row', wrap: true };
-    case 'wrap': return { direction: 'row', wrap: true };
-  }
-}
-
-/**
- * Responsive layout container powered by a lightweight built-in flex layout solver.
- *
- * Supports horizontal, vertical, grid, and wrap layout modes with
- * alignment, padding, gap, and viewport-anchor positioning.
- * Breakpoints allow different layouts for different screen sizes.
- *
- * @example
- * ```ts
- * const toolbar = new Layout({
- *   direction: 'horizontal',
- *   gap: 20,
- *   alignment: 'center',
- *   anchor: 'bottom-center',
- *   padding: 16,
- *   breakpoints: {
- *     768: { direction: 'vertical', gap: 10 },
- *   },
- * });
- *
- * toolbar.addItem(spinButton);
- * toolbar.addItem(betLabel);
- * scene.container.addChild(toolbar);
- *
- * toolbar.updateViewport(width, height);
- * ```
- */
-export class Layout extends Container {
-  readonly __uiComponent = true as const;
-
-  private _layoutConfig: Required<Pick<LayoutConfig, 'direction' | 'gap' | 'alignment' | 'autoLayout' | 'columns'>>;
-  private _padding: number | [number, number, number, number];
-  private _anchor: LayoutAnchor;
-  private _maxWidth: number;
-  private _breakpoints: [number, Partial<LayoutConfig>][];
-  private _items: Container[] = [];
-  private _viewportWidth = 0;
-  private _viewportHeight = 0;
-  private _flex: FlexContainer;
-
-  constructor(config: LayoutConfig = {}) {
-    super();
-
-    this._layoutConfig = {
-      direction: config.direction ?? 'vertical',
-      gap: config.gap ?? 0,
-      alignment: config.alignment ?? 'start',
-      autoLayout: config.autoLayout ?? true,
-      columns: config.columns ?? 2,
-    };
-
-    this._padding = config.padding ?? 0;
-    this._anchor = config.anchor ?? 'top-left';
-    this._maxWidth = config.maxWidth ?? Infinity;
-
-    this._breakpoints = config.breakpoints
-      ? Object.entries(config.breakpoints)
-          .map(([w, cfg]) => [Number(w), cfg] as [number, Partial<LayoutConfig>])
-          .sort((a, b) => a[0] - b[0])
-      : [];
-
-    // Create internal FlexContainer
-    this._flex = new FlexContainer();
-    super.addChild(this._flex);
-
-    this.applyLayoutStyles();
-  }
-
-  /** Add an item to the layout */
-  addItem(child: Container): this {
-    this._items.push(child);
-
-    const flexConfig = this.buildFlexItemConfig(child);
-    this._flex.addFlexChild(child, flexConfig);
-
-    if (this._layoutConfig.autoLayout) {
-      this.applyLayoutStyles();
-    }
-
-    return this;
-  }
-
-  /** Remove an item from the layout */
-  removeItem(child: Container): this {
-    const idx = this._items.indexOf(child);
-    if (idx !== -1) {
-      this._items.splice(idx, 1);
-      this._flex.removeFlexChild(child);
-    }
-    return this;
-  }
-
-  /** Remove all items */
-  clearItems(): this {
-    this._flex.clearFlexChildren();
-    this._items.length = 0;
-    return this;
-  }
-
-  /** Get all layout items */
-  get items(): readonly Container[] {
-    return this._items;
-  }
-
-  /**
-   * Update the viewport size and recalculate layout.
-   * Should be called from `Scene.onResize()`.
-   */
-  updateViewport(width: number, height: number): void {
-    this._viewportWidth = width;
-    this._viewportHeight = height;
-    this.applyLayoutStyles();
-    this.applyAnchor();
-  }
-
-  private applyLayoutStyles(): void {
-    const effective = this.resolveConfig();
-    const direction = effective.direction ?? this._layoutConfig.direction;
-    const gap = effective.gap ?? this._layoutConfig.gap;
-    const alignment = effective.alignment ?? this._layoutConfig.alignment;
-    const padding = effective.padding ?? this._padding;
-    const maxWidth = effective.maxWidth ?? this._maxWidth;
-
-    const { direction: flexDir, wrap } = directionToFlex(direction);
-
-    this._flex.setDirection(flexDir);
-    this._flex.setJustifyContent('start');
-    this._flex.setAlignItems(alignment as AlignItems);
-    this._flex.setGap(gap);
-    this._flex.setPadding(padding);
-
-    // Wrap and maxWidth
-    if (wrap) {
-      (this._flex as any)._config.flexWrap = true;
-      if (direction === 'grid' && maxWidth < Infinity) {
-        (this._flex as any)._maxWidth = maxWidth;
-      } else if (direction === 'grid') {
-        // For grid without explicit maxWidth, we don't constrain wrapping —
-        // each child gets a proportional width via flexConfig
-      }
-      if (maxWidth < Infinity) {
-        (this._flex as any)._maxWidth = maxWidth;
-      }
-    } else {
-      (this._flex as any)._config.flexWrap = false;
-    }
-
-    // Update grid child widths
-    if (direction === 'grid') {
-      for (const item of this._items) {
-        const flexConfig = this.buildFlexItemConfig(item);
-        (item as any)._flexConfig = flexConfig;
-      }
-    }
-
-    // Set explicit size if we have viewport dimensions
-    if (this._viewportWidth > 0 && this._viewportHeight > 0) {
-      this._flex.resize(this._viewportWidth, this._viewportHeight);
-    } else {
-      this._flex.updateLayout();
-    }
-  }
-
-  private buildFlexItemConfig(_child: Container): FlexItemConfig | undefined {
-    const effective = this.resolveConfig();
-    const direction = effective.direction ?? this._layoutConfig.direction;
-    const columns = effective.columns ?? this._layoutConfig.columns;
-
-    if (direction === 'grid' && columns > 0) {
-      // For grid, give each item a proportional width
-      // The actual pixel width will be computed during layout
-      return { flexGrow: 1 };
-    }
-
-    return undefined;
-  }
-
-  private applyAnchor(): void {
-    const anchor = this.resolveConfig().anchor ?? this._anchor;
-    if (this._viewportWidth === 0 || this._viewportHeight === 0) return;
-
-    const { width: contentW, height: contentH } = this._flex.getContentSize();
-    const vw = this._viewportWidth;
-    const vh = this._viewportHeight;
-
-    let anchorX = 0;
-    let anchorY = 0;
-
-    if (anchor.includes('left')) {
-      anchorX = 0;
-    } else if (anchor.includes('right')) {
-      anchorX = vw - contentW;
-    } else {
-      anchorX = (vw - contentW) / 2;
-    }
-
-    if (anchor.startsWith('top')) {
-      anchorY = 0;
-    } else if (anchor.startsWith('bottom')) {
-      anchorY = vh - contentH;
-    } else {
-      anchorY = (vh - contentH) / 2;
-    }
-
-    this.x = anchorX;
-    this.y = anchorY;
-  }
-
-  private resolveConfig(): Partial<LayoutConfig> {
-    if (this._breakpoints.length === 0 || this._viewportWidth === 0) {
-      return {};
-    }
-
-    for (const [maxWidth, overrides] of this._breakpoints) {
-      if (this._viewportWidth <= maxWidth) {
-        return overrides;
-      }
-    }
-    return {};
-  }
-
-  /** React reconciler update hook */
-  updateConfig(changed: Record<string, any>): void {
-    if ('direction' in changed) this._layoutConfig.direction = changed.direction;
-    if ('gap' in changed) this._layoutConfig.gap = changed.gap;
-    if ('alignment' in changed) this._layoutConfig.alignment = changed.alignment;
-    if ('anchor' in changed) this._anchor = changed.anchor;
-    if ('padding' in changed) this._padding = changed.padding;
-    if ('columns' in changed) this._layoutConfig.columns = changed.columns;
-    this.applyLayoutStyles();
-    if (this._viewportWidth > 0) this.applyAnchor();
-  }
-
-  override destroy(options?: boolean | { children?: boolean; texture?: boolean; textureSource?: boolean }): void {
-    this._items.length = 0;
-    super.destroy(options);
-  }
-}

package/src/ui/Modal.ts

@@ -1,170 +0,0 @@
-import { Container, Graphics } from 'pixi.js';
-import { Tween } from '../animation/Tween';
-import { Easing } from '../animation/Easing';
-
-export interface ModalConfig {
-  /** Overlay color */
-  overlayColor?: number;
-  /** Overlay alpha */
-  overlayAlpha?: number;
-  /** Close on overlay tap */
-  closeOnOverlay?: boolean;
-  /** Animation duration */
-  animationDuration?: number;
-}
-
-/**
- * Modal overlay component.
- * Shows content on top of a dark overlay with enter/exit animations.
- *
- * Content is automatically centered via position calculations.
- *
- * @example
- * ```ts
- * const modal = new Modal({ closeOnOverlay: true });
- * modal.content.addChild(settingsPanel);
- * modal.onClose = () => console.log('Closed');
- * await modal.show(1920, 1080);
- * ```
- */
-export class Modal extends Container {
-  readonly __uiComponent = true as const;
-
-  private _overlay!: Graphics;
-  private _contentContainer!: Container;
-  private _config!: Required<ModalConfig>;
-  private _showing = false;
-  private _internalSetup = true;
-
-  /** Called when the modal is closed */
-  public onClose?: () => void;
-
-  constructor(config: ModalConfig = {}) {
-    super();
-
-    this._config = {
-      overlayColor: config.overlayColor ?? 0x000000,
-      overlayAlpha: config.overlayAlpha ?? 0.7,
-      closeOnOverlay: config.closeOnOverlay ?? true,
-      animationDuration: config.animationDuration ?? 300,
-    };
-
-    // Overlay
-    this._overlay = new Graphics();
-    this._overlay.eventMode = 'static';
-    this._overlay.on('pointertap', () => {
-      if (this._config.closeOnOverlay) this.hide();
-    });
-    this.addChild(this._overlay);
-
-    // Content container
-    this._contentContainer = new Container();
-    this.addChild(this._contentContainer);
-
-    this.visible = false;
-    this._internalSetup = false;
-  }
-
-  /** Content container — add your UI here */
-  get content(): Container {
-    return this._contentContainer;
-  }
-
-  /**
-   * Override addChild so external children are routed to _contentContainer.
-   * Enables `<modal><flexContainer>...</flexContainer></modal>` in React JSX.
-   */
-  override addChild<T extends Container>(...children: T[]): T {
-    if (this._internalSetup) {
-      return super.addChild(...children);
-    }
-    for (const child of children) {
-      this._contentContainer.addChild(child);
-    }
-    return children[0];
-  }
-
-  override removeChild<T extends Container>(...children: T[]): T {
-    if (this._internalSetup) {
-      return super.removeChild(...children);
-    }
-    for (const child of children) {
-      this._contentContainer.removeChild(child);
-    }
-    return children[0];
-  }
-
-  /** Whether the modal is currently showing */
-  get isShowing(): boolean {
-    return this._showing;
-  }
-
-  /**
-   * Show the modal with animation.
-   */
-  async show(viewWidth: number, viewHeight: number): Promise<void> {
-    this._showing = true;
-    this.visible = true;
-
-    // Draw overlay to cover full screen
-    this._overlay.clear();
-    this._overlay.rect(0, 0, viewWidth, viewHeight).fill(this._config.overlayColor);
-    this._overlay.alpha = 0;
-
-    // Center content
-    this._contentContainer.x = viewWidth / 2;
-    this._contentContainer.y = viewHeight / 2;
-    this._contentContainer.alpha = 0;
-    this._contentContainer.scale.set(0.8);
-
-    // Animate in
-    await Promise.all([
-      Tween.to(
-        this._overlay,
-        { alpha: this._config.overlayAlpha },
-        this._config.animationDuration,
-        Easing.easeOutCubic,
-      ),
-      Tween.to(
-        this._contentContainer,
-        { alpha: 1, 'scale.x': 1, 'scale.y': 1 },
-        this._config.animationDuration,
-        Easing.easeOutBack,
-      ),
-    ]);
-  }
-
-  /**
-   * Hide the modal with animation.
-   */
-  async hide(): Promise<void> {
-    if (!this._showing) return;
-
-    await Promise.all([
-      Tween.to(
-        this._overlay,
-        { alpha: 0 },
-        this._config.animationDuration * 0.7,
-        Easing.easeInCubic,
-      ),
-      Tween.to(
-        this._contentContainer,
-        { alpha: 0, 'scale.x': 0.8, 'scale.y': 0.8 },
-        this._config.animationDuration * 0.7,
-        Easing.easeInCubic,
-      ),
-    ]);
-
-    this.visible = false;
-    this._showing = false;
-    this.onClose?.();
-  }
-
-  /** React reconciler update hook */
-  updateConfig(changed: Record<string, any>): void {
-    if ('overlayAlpha' in changed) this._config.overlayAlpha = changed.overlayAlpha;
-    if ('closeOnOverlay' in changed) this._config.closeOnOverlay = changed.closeOnOverlay;
-    if ('animationDuration' in changed) this._config.animationDuration = changed.animationDuration;
-    if ('onClose' in changed) this.onClose = changed.onClose;
-  }
-}