@energy8platform/game-engine 0.10.11 → 0.12.0

package/src/ui/Layout.ts

@@ -1,5 +1,6 @@
 import { Container } from 'pixi.js';
-import type { LayoutStyles } from '@pixi/layout';
+import { FlexContainer } from './FlexContainer';
+import type { FlexDirection, AlignItems, FlexItemConfig } from './FlexContainer';
 
 // ─── Types ───────────────────────────────────────────────
 
@@ -41,63 +42,17 @@ export interface LayoutConfig {
 
 // ─── Helpers ─────────────────────────────────────────────
 
-const ALIGNMENT_MAP: Record<LayoutAlignment, LayoutStyles['alignItems']> = {
-  start: 'flex-start',
-  center: 'center',
-  end: 'flex-end',
-  stretch: 'stretch',
-};
-
-function normalizePadding(
-  padding: number | [number, number, number, number],
-): [number, number, number, number] {
-  if (typeof padding === 'number') return [padding, padding, padding, padding];
-  return padding;
-}
-
-function directionToFlexStyles(
-  direction: LayoutDirection,
-  maxWidth: number,
-): Partial<LayoutStyles> {
+function directionToFlex(direction: LayoutDirection): { direction: FlexDirection; wrap: boolean } {
   switch (direction) {
-    case 'horizontal':
-      return { flexDirection: 'row', flexWrap: 'nowrap' };
-    case 'vertical':
-      return { flexDirection: 'column', flexWrap: 'nowrap' };
-    case 'grid':
-      return { flexDirection: 'row', flexWrap: 'wrap' };
-    case 'wrap':
-      return {
-        flexDirection: 'row',
-        flexWrap: 'wrap',
-        ...(maxWidth < Infinity ? { maxWidth } : {}),
-      };
+    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 };
   }
 }
 
-function buildLayoutStyles(config: {
-  direction: LayoutDirection;
-  gap: number;
-  alignment: LayoutAlignment;
-  columns: number;
-  padding: [number, number, number, number];
-  maxWidth: number;
-}): LayoutStyles {
-  const [pt, pr, pb, pl] = config.padding;
-
-  return {
-    ...directionToFlexStyles(config.direction, config.maxWidth),
-    gap: config.gap,
-    alignItems: ALIGNMENT_MAP[config.alignment],
-    paddingTop: pt,
-    paddingRight: pr,
-    paddingBottom: pb,
-    paddingLeft: pl,
-  };
-}
-
 /**
- * Responsive layout container powered by `@pixi/layout` (Yoga flexbox engine).
+ * 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.
@@ -124,14 +79,17 @@ function buildLayoutStyles(config: {
  * ```
  */
 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];
+  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();
@@ -144,7 +102,7 @@ export class Layout extends Container {
       columns: config.columns ?? 2,
     };
 
-    this._padding = normalizePadding(config.padding ?? 0);
+    this._padding = config.padding ?? 0;
     this._anchor = config.anchor ?? 'top-left';
     this._maxWidth = config.maxWidth ?? Infinity;
 
@@ -154,16 +112,22 @@ export class Layout extends Container {
           .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);
-    this.addChild(child);
 
-    if (this._layoutConfig.direction === 'grid') {
-      this.applyGridChildWidth(child);
+    const flexConfig = this.buildFlexItemConfig(child);
+    this._flex.addFlexChild(child, flexConfig);
+
+    if (this._layoutConfig.autoLayout) {
+      this.applyLayoutStyles();
     }
 
     return this;
@@ -174,16 +138,14 @@ export class Layout extends Container {
     const idx = this._items.indexOf(child);
     if (idx !== -1) {
       this._items.splice(idx, 1);
-      this.removeChild(child);
+      this._flex.removeFlexChild(child);
     }
     return this;
   }
 
   /** Remove all items */
   clearItems(): this {
-    for (const item of this._items) {
-      this.removeChild(item);
-    }
+    this._flex.clearFlexChildren();
     this._items.length = 0;
     return this;
   }
@@ -209,48 +171,68 @@ export class Layout extends Container {
     const direction = effective.direction ?? this._layoutConfig.direction;
     const gap = effective.gap ?? this._layoutConfig.gap;
     const alignment = effective.alignment ?? this._layoutConfig.alignment;
-    const columns = effective.columns ?? this._layoutConfig.columns;
-    const padding = effective.padding !== undefined
-      ? normalizePadding(effective.padding)
-      : this._padding;
+    const padding = effective.padding ?? this._padding;
     const maxWidth = effective.maxWidth ?? this._maxWidth;
 
-    const styles = buildLayoutStyles({ direction, gap, alignment, columns, padding, maxWidth });
-    this.layout = styles;
+    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) {
-        this.applyGridChildWidth(item);
+        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 applyGridChildWidth(child: Container): void {
+  private buildFlexItemConfig(_child: Container): FlexItemConfig | undefined {
     const effective = this.resolveConfig();
+    const direction = effective.direction ?? this._layoutConfig.direction;
     const columns = effective.columns ?? this._layoutConfig.columns;
-    const gap = effective.gap ?? this._layoutConfig.gap;
 
-    // Account for gaps between columns: total gap space = gap * (columns - 1)
-    // Each column gets: (100% - total_gap) / columns
-    // We use flexBasis + flexGrow to let Yoga handle the math when gap > 0
-    const styles: Record<string, unknown> = gap > 0
-      ? { flexBasis: 0, flexGrow: 1, flexShrink: 1, maxWidth: `${(100 / columns).toFixed(2)}%` }
-      : { width: `${(100 / columns).toFixed(2)}%` };
-
-    if (child._layout) {
-      child._layout.setStyle(styles);
-    } else {
-      child.layout = styles;
+    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 bounds = this.getLocalBounds();
-    const contentW = bounds.width * this.scale.x;
-    const contentH = bounds.height * this.scale.y;
+    const { width: contentW, height: contentH } = this._flex.getContentSize();
     const vw = this._viewportWidth;
     const vh = this._viewportHeight;
 
@@ -273,8 +255,8 @@ export class Layout extends Container {
       anchorY = (vh - contentH) / 2;
     }
 
-    this.x = anchorX - bounds.x * this.scale.x;
-    this.y = anchorY - bounds.y * this.scale.y;
+    this.x = anchorX;
+    this.y = anchorY;
   }
 
   private resolveConfig(): Partial<LayoutConfig> {
@@ -289,4 +271,21 @@ export class Layout extends Container {
     }
     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

@@ -17,7 +17,7 @@ export 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.
+ * Content is automatically centered via position calculations.
  *
  * @example
  * ```ts
@@ -28,6 +28,8 @@ export interface ModalConfig {
  * ```
  */
 export class Modal extends Container {
+  readonly __uiComponent = true as const;
+
   private _overlay: Graphics;
   private _contentContainer: Container;
   private _config: Required<ModalConfig>;
@@ -132,4 +134,12 @@ export class Modal extends Container {
     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;
+  }
 }

package/src/ui/Panel.ts

@@ -1,6 +1,6 @@
-import { Container, NineSliceSprite, Texture } from 'pixi.js';
-import { LayoutContainer } from '@pixi/layout/components';
-import type { LayoutStyles } from '@pixi/layout';
+import { Container, Graphics, NineSliceSprite, Texture } from 'pixi.js';
+import { FlexContainer } from './FlexContainer';
+import type { FlexContainerConfig } from './FlexContainer';
 
 export interface PanelConfig {
   /** Width */
@@ -23,13 +23,15 @@ export interface PanelConfig {
   nineSliceBorders?: [number, number, number, number];
   /** Padding inside the panel */
   padding?: number;
+  /** Flex layout config for content */
+  layout?: Partial<FlexContainerConfig>;
 }
 
 /**
- * Background panel powered by `@pixi/layout` LayoutContainer.
+ * Background panel with optional flexbox content layout.
  *
  * Supports both Graphics-based (color + border) and 9-slice sprite backgrounds.
- * Children added to `content` participate in flexbox layout automatically.
+ * Children added via `addContent()` participate in flex layout automatically.
  *
  * @example
  * ```ts
@@ -44,12 +46,19 @@ export interface PanelConfig {
  * });
  * ```
  */
-export class Panel extends LayoutContainer {
+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,
@@ -58,8 +67,9 @@ export class Panel extends LayoutContainer {
       ...config,
     };
 
-    // If using a 9-slice texture, pass it as a custom background
-    let customBackground: Container | undefined;
+    this._panelConfig = resolvedConfig;
+
+    // Create background
     if (config.nineSliceTexture) {
       const texture =
         typeof config.nineSliceTexture === 'string'
@@ -76,47 +86,109 @@ export class Panel extends LayoutContainer {
       nineSlice.width = resolvedConfig.width;
       nineSlice.height = resolvedConfig.height;
       nineSlice.alpha = resolvedConfig.backgroundAlpha;
-      customBackground = nineSlice;
+      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);
 
-    super(customBackground ? { background: customBackground } : undefined);
-
-    this._panelConfig = resolvedConfig;
-
-    // Apply layout styles
-    const layoutStyles: LayoutStyles = {
+    // 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,
-      padding: resolvedConfig.padding,
-      flexDirection: 'column',
-    };
+    });
+    this.addChild(this._content);
+    this._internalSetup = false;
+  }
 
-    // Graphics-based background via layout styles
-    if (!config.nineSliceTexture) {
-      layoutStyles.backgroundColor = config.backgroundColor ?? 0x1a1a2e;
-      layoutStyles.borderRadius = config.borderRadius ?? 0;
-      if (config.borderColor !== undefined && config.borderWidth) {
-        layoutStyles.borderColor = config.borderColor;
-        layoutStyles.borderWidth = config.borderWidth;
+  /** Access the content flex container — add children here for layout */
+  get content(): FlexContainer {
+    return this._content;
+  }
+
+  /** 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.layout = layoutStyles;
+    this._content.resize(width, height);
+  }
 
-    if (!config.nineSliceTexture) {
-      this.background.alpha = resolvedConfig.backgroundAlpha;
+  /**
+   * 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];
   }
 
-  /** Access the content container (children added here participate in layout) */
-  get content(): Container {
-    return this.overflowContainer;
+  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];
   }
 
-  /** Resize the panel */
-  setSize(width: number, height: number): void {
-    this._panelConfig.width = width;
-    this._panelConfig.height = height;
-    this._layout?.setStyle({ width, height });
+  /** 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,43 +1,63 @@
 import { Container, Graphics } from 'pixi.js';
-import { ProgressBar as PixiProgressBar } from '@pixi/ui';
-import type { ProgressBarOptions } from '@pixi/ui';
+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;
-}
 
-function makeBarGraphics(
-  w: number, h: number, radius: number, color: number,
-): Graphics {
-  return new Graphics().roundRect(0, 0, w, h, radius).fill(color);
+  /** 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 powered by `@pixi/ui` ProgressBar.
+ * Horizontal progress bar with optional custom track/fill views.
  *
- * Provides optional smooth animated fill via per-frame `update()`.
+ * 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 });
- * scene.container.addChild(bar);
- * bar.progress = 0.5; // 50%
+ * 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 {
-  private _bar: PixiProgressBar;
+  readonly __uiComponent = true as const;
+
+  private _track: Container;
+  private _fill: Container;
+  private _fillMask: Graphics;
   private _borderGfx: Graphics;
-  private _config: Required<ProgressBarConfig>;
+  private _config: Required<Pick<ProgressBarConfig, 'width' | 'height' | 'borderRadius' | 'fillColor' | 'trackColor' | 'borderColor' | 'borderWidth' | 'animated' | 'animationSpeed'>>;
   private _progress = 0;
   private _displayedProgress = 0;
 
@@ -58,23 +78,43 @@ export class ProgressBar extends Container {
 
     const { width, height, borderRadius, fillColor, trackColor, borderColor, borderWidth } = this._config;
 
-    const bgGraphics = makeBarGraphics(width, height, borderRadius, trackColor);
-    const fillGraphics = makeBarGraphics(width - borderWidth * 2, height - borderWidth * 2, Math.max(0, borderRadius - 1), fillColor);
-
-    const options: ProgressBarOptions = {
-      bg: bgGraphics,
-      fill: fillGraphics,
-      fillPaddings: {
-        top: borderWidth,
-        right: borderWidth,
-        bottom: borderWidth,
-        left: borderWidth,
-      },
-      progress: 0,
-    };
+    // 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);
 
-    this._bar = new PixiProgressBar(options);
-    this.addChild(this._bar);
+    // 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();
@@ -95,7 +135,7 @@ export class ProgressBar extends Container {
     this._progress = Math.max(0, Math.min(1, value));
     if (!this._config.animated) {
       this._displayedProgress = this._progress;
-      this._bar.progress = this._displayedProgress * 100;
+      this.updateMask();
     }
   }
 
@@ -106,11 +146,25 @@ export class ProgressBar extends Container {
     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._bar.progress = this._displayedProgress * 100;
+    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);
   }
 }