@energy8platform/game-engine 0.20.0 → 0.22.0

package/src/ui/Panel.ts

@@ -1,204 +0,0 @@
-import { Container, Graphics, NineSliceSprite, Texture } from 'pixi.js';
-import { FlexContainer } from './FlexContainer';
-import type { FlexContainerConfig } from './FlexContainer';
-
-export interface PanelConfig {
-  /** Width */
-  width?: number;
-  /** Height */
-  height?: number;
-  /** Background color (for Graphics-based panel) */
-  backgroundColor?: number;
-  /** Background alpha */
-  backgroundAlpha?: number;
-  /** Corner radius */
-  borderRadius?: number;
-  /** Border color */
-  borderColor?: number;
-  /** Border width */
-  borderWidth?: number;
-  /** 9-slice texture (if provided, uses NineSliceSprite instead of Graphics) */
-  nineSliceTexture?: string | Texture;
-  /** 9-slice borders [left, top, right, bottom] */
-  nineSliceBorders?: [number, number, number, number];
-  /** Padding inside the panel */
-  padding?: number;
-  /** Flex layout config for content */
-  layout?: Partial<FlexContainerConfig>;
-}
-
-/**
- * Background panel with optional flexbox content layout.
- *
- * Supports both Graphics-based (color + border) and 9-slice sprite backgrounds.
- * Children added via `addContent()` participate in flex layout automatically.
- *
- * @example
- * ```ts
- * // Simple colored panel
- * const panel = new Panel({ width: 400, height: 300, backgroundColor: 0x222222, borderRadius: 12 });
- *
- * // 9-slice panel (texture-based)
- * const panel = new Panel({
- *   nineSliceTexture: 'panel-bg',
- *   nineSliceBorders: [20, 20, 20, 20],
- *   width: 400, height: 300,
- * });
- * ```
- */
-export class Panel extends Container {
-  readonly __uiComponent = true as const;
-
-  private _bg: Container;
-  private _content: FlexContainer;
-  private _internalSetup = true;
-  private _panelConfig: Required<
-    Pick<PanelConfig, 'width' | 'height' | 'padding' | 'backgroundAlpha'>
-  > & PanelConfig;
-
-  constructor(config: PanelConfig = {}) {
-    super();
-
-    const resolvedConfig = {
-      width: config.width ?? 400,
-      height: config.height ?? 300,
-      padding: config.padding ?? 16,
-      backgroundAlpha: config.backgroundAlpha ?? 1,
-      ...config,
-    };
-
-    this._panelConfig = resolvedConfig;
-
-    // Create background
-    if (config.nineSliceTexture) {
-      const texture =
-        typeof config.nineSliceTexture === 'string'
-          ? Texture.from(config.nineSliceTexture)
-          : config.nineSliceTexture;
-      const [left, top, right, bottom] = config.nineSliceBorders ?? [10, 10, 10, 10];
-      const nineSlice = new NineSliceSprite({
-        texture,
-        leftWidth: left,
-        topHeight: top,
-        rightWidth: right,
-        bottomHeight: bottom,
-      });
-      nineSlice.width = resolvedConfig.width;
-      nineSlice.height = resolvedConfig.height;
-      nineSlice.alpha = resolvedConfig.backgroundAlpha;
-      this._bg = nineSlice;
-    } else {
-      const g = new Graphics();
-      const bgColor = config.backgroundColor ?? 0x1a1a2e;
-      const radius = config.borderRadius ?? 0;
-      g.roundRect(0, 0, resolvedConfig.width, resolvedConfig.height, radius).fill(bgColor);
-      if (config.borderColor !== undefined && config.borderWidth) {
-        g.roundRect(0, 0, resolvedConfig.width, resolvedConfig.height, radius)
-          .stroke({ color: config.borderColor, width: config.borderWidth });
-      }
-      g.alpha = resolvedConfig.backgroundAlpha;
-      this._bg = g;
-    }
-    this.addChild(this._bg);
-
-    // Create content flex container
-    this._content = new FlexContainer({
-      ...config.layout,
-      direction: config.layout?.direction ?? 'column',
-      justifyContent: config.layout?.justifyContent ?? 'start',
-      alignItems: config.layout?.alignItems ?? 'start',
-      gap: config.layout?.gap ?? 0,
-      padding: resolvedConfig.padding,
-      width: resolvedConfig.width,
-      height: resolvedConfig.height,
-    });
-    this.addChild(this._content);
-    this._internalSetup = false;
-  }
-
-  /** Access the content flex container — add children here for layout */
-  get content(): FlexContainer {
-    return this._content;
-  }
-
-  /** Suspend content layout recalculation. Call resumeLayout() to flush. */
-  suspendLayout(): void {
-    this._content.suspendLayout();
-  }
-
-  /** Resume content layout and flush if dirty. */
-  resumeLayout(): void {
-    this._content.resumeLayout();
-  }
-
-  /** Convenience: add a child to the content layout */
-  addContent(child: Container): this {
-    this._content.addFlexChild(child);
-    this._content.updateLayout();
-    return this;
-  }
-
-  /** Resize the panel */
-  setSize(width: number, height: number): void {
-    this._panelConfig.width = width;
-    this._panelConfig.height = height;
-
-    // Resize background
-    if (this._bg instanceof NineSliceSprite) {
-      this._bg.width = width;
-      this._bg.height = height;
-    } else if (this._bg instanceof Graphics) {
-      const radius = this._panelConfig.borderRadius ?? 0;
-      const bgColor = this._panelConfig.backgroundColor ?? 0x1a1a2e;
-      this._bg.clear();
-      (this._bg as Graphics).roundRect(0, 0, width, height, radius).fill(bgColor);
-      if (this._panelConfig.borderColor !== undefined && this._panelConfig.borderWidth) {
-        (this._bg as Graphics).roundRect(0, 0, width, height, radius)
-          .stroke({ color: this._panelConfig.borderColor, width: this._panelConfig.borderWidth });
-      }
-      this._bg.alpha = this._panelConfig.backgroundAlpha;
-    }
-
-    this._content.resize(width, height);
-  }
-
-  /**
-   * Override addChild so external children are routed to content FlexContainer.
-   * Enables `<panel><label /><button /></panel>` in React JSX.
-   */
-  override addChild<T extends Container>(...children: T[]): T {
-    if (this._internalSetup) {
-      return super.addChild(...children);
-    }
-    for (const child of children) {
-      this._content.addFlexChild(child as any);
-    }
-    this._content.updateLayout();
-    return children[0];
-  }
-
-  override removeChild<T extends Container>(...children: T[]): T {
-    if (this._internalSetup) {
-      return super.removeChild(...children);
-    }
-    for (const child of children) {
-      this._content.removeFlexChild(child as any);
-    }
-    return children[0];
-  }
-
-  /** React reconciler update hook */
-  updateConfig(changed: Record<string, any>): void {
-    if ('width' in changed || 'height' in changed) {
-      this.setSize(changed.width ?? this._panelConfig.width, changed.height ?? this._panelConfig.height);
-    }
-    if ('backgroundAlpha' in changed) {
-      this._panelConfig.backgroundAlpha = changed.backgroundAlpha;
-      this._bg.alpha = changed.backgroundAlpha;
-    }
-  }
-
-  override destroy(options?: boolean | { children?: boolean; texture?: boolean; textureSource?: boolean }): void {
-    super.destroy(options);
-  }
-}

package/src/ui/ProgressBar.ts

@@ -1,170 +0,0 @@
-import { Container, Graphics } from 'pixi.js';
-import { resolveView } from './view';
-import type { ViewInput } from './view';
-
-export interface ProgressBarConfig {
-  /** Width of the bar */
-  width?: number;
-  /** Height of the bar */
-  height?: number;
-  /** Corner radius (for Graphics-based bar) */
-  borderRadius?: number;
-  /** Fill color (for Graphics-based bar, ignored when fillView provided) */
-  fillColor?: number;
-  /** Track background color (for Graphics-based bar, ignored when trackView provided) */
-  trackColor?: number;
-  /** Border color */
-  borderColor?: number;
-  /** Border width */
-  borderWidth?: number;
-  /** Animated fill (smoothly interpolate) */
-  animated?: boolean;
-  /** Animation speed (0..1 per frame, default: 0.1) */
-  animationSpeed?: number;
-
-  /** Custom track background (string texture name, Texture, or Container) */
-  trackView?: ViewInput;
-  /** Custom fill bar (string texture name, Texture, or Container) */
-  fillView?: ViewInput;
-}
-
-/**
- * Horizontal progress bar with optional custom track/fill views.
- *
- * Supports asset-based skinning: provide `trackView` and/or `fillView`
- * as texture names, Textures, or any Container (NineSliceSprite, custom artwork, etc).
- * Falls back to colored Graphics when no custom views are provided.
- *
- * @example
- * ```ts
- * // Graphics-based (quick prototyping)
- * const bar = new ProgressBar({ width: 300, height: 20, fillColor: 0x22cc22 });
- * bar.progress = 0.5;
- *
- * // Asset-based (production art)
- * const bar = new ProgressBar({
- *   width: 300, height: 20,
- *   trackView: 'bar-track',
- *   fillView: new NineSliceSprite({ texture: 'bar-fill', ... }),
- * });
- * bar.progress = 0.75;
- * ```
- */
-export class ProgressBar extends Container {
-  readonly __uiComponent = true as const;
-
-  private _track: Container;
-  private _fill: Container;
-  private _fillMask: Graphics;
-  private _borderGfx: Graphics;
-  private _config: Required<Pick<ProgressBarConfig, 'width' | 'height' | 'borderRadius' | 'fillColor' | 'trackColor' | 'borderColor' | 'borderWidth' | 'animated' | 'animationSpeed'>>;
-  private _progress = 0;
-  private _displayedProgress = 0;
-
-  constructor(config: ProgressBarConfig = {}) {
-    super();
-
-    this._config = {
-      width: config.width ?? 300,
-      height: config.height ?? 16,
-      borderRadius: config.borderRadius ?? 8,
-      fillColor: config.fillColor ?? 0xffd700,
-      trackColor: config.trackColor ?? 0x333333,
-      borderColor: config.borderColor ?? 0x555555,
-      borderWidth: config.borderWidth ?? 1,
-      animated: config.animated ?? true,
-      animationSpeed: config.animationSpeed ?? 0.1,
-    };
-
-    const { width, height, borderRadius, fillColor, trackColor, borderColor, borderWidth } = this._config;
-
-    // Track background — custom view or Graphics
-    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 bar — custom view or Graphics
-    const customFill = resolveView(config.fillView);
-    if (customFill) {
-      customFill.x = borderWidth;
-      customFill.y = borderWidth;
-      customFill.width = width - borderWidth * 2;
-      customFill.height = height - borderWidth * 2;
-      this._fill = customFill;
-    } else {
-      const g = new Graphics();
-      g.roundRect(
-        borderWidth, borderWidth,
-        width - borderWidth * 2, height - borderWidth * 2,
-        Math.max(0, borderRadius - 1),
-      ).fill(fillColor);
-      this._fill = g;
-    }
-    this.addChild(this._fill);
-
-    // Mask for the fill (controls visible width)
-    this._fillMask = new Graphics();
-    this._fillMask.rect(0, 0, 0, height).fill(0xffffff);
-    this.addChild(this._fillMask);
-    this._fill.mask = this._fillMask;
-
-    // Border overlay
-    this._borderGfx = new Graphics();
-    if (borderColor !== undefined && borderWidth > 0) {
-      this._borderGfx
-        .roundRect(0, 0, width, height, borderRadius)
-        .stroke({ color: borderColor, width: borderWidth });
-    }
-    this.addChild(this._borderGfx);
-  }
-
-  /** Get/set progress (0..1) */
-  get progress(): number {
-    return this._progress;
-  }
-
-  set progress(value: number) {
-    this._progress = Math.max(0, Math.min(1, value));
-    if (!this._config.animated) {
-      this._displayedProgress = this._progress;
-      this.updateMask();
-    }
-  }
-
-  /**
-   * Call each frame if animated is true.
-   */
-  update(_dt: number): void {
-    if (!this._config.animated) return;
-    if (Math.abs(this._displayedProgress - this._progress) < 0.001) {
-      this._displayedProgress = this._progress;
-      this.updateMask();
-      return;
-    }
-
-    this._displayedProgress +=
-      (this._progress - this._displayedProgress) * this._config.animationSpeed;
-    this.updateMask();
-  }
-
-  /** React reconciler update hook */
-  updateConfig(changed: Record<string, any>): void {
-    if ('progress' in changed) this.progress = changed.progress;
-    if ('animated' in changed) this._config.animated = changed.animated;
-    if ('animationSpeed' in changed) this._config.animationSpeed = changed.animationSpeed;
-  }
-
-  private updateMask(): void {
-    const w = this._config.width * this._displayedProgress;
-    this._fillMask.clear();
-    this._fillMask.rect(0, 0, w, this._config.height).fill(0xffffff);
-  }
-}