@energy8platform/game-engine 0.1.0

package/dist/ui.esm.js

@@ -0,0 +1,1072 @@
+import { Ticker, Container, Graphics, Texture, Sprite, Text, NineSliceSprite } from 'pixi.js';
+
+/**
+ * Collection of easing functions for use with Tween and Timeline.
+ *
+ * All functions take a progress value t (0..1) and return the eased value.
+ */
+const Easing = {
+    linear: (t) => t,
+    easeInQuad: (t) => t * t,
+    easeOutQuad: (t) => t * (2 - t),
+    easeInOutQuad: (t) => (t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t),
+    easeInCubic: (t) => t * t * t,
+    easeOutCubic: (t) => --t * t * t + 1,
+    easeInOutCubic: (t) => t < 0.5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1,
+    easeInQuart: (t) => t * t * t * t,
+    easeOutQuart: (t) => 1 - --t * t * t * t,
+    easeInOutQuart: (t) => t < 0.5 ? 8 * t * t * t * t : 1 - 8 * --t * t * t * t,
+    easeInSine: (t) => 1 - Math.cos((t * Math.PI) / 2),
+    easeOutSine: (t) => Math.sin((t * Math.PI) / 2),
+    easeInOutSine: (t) => -(Math.cos(Math.PI * t) - 1) / 2,
+    easeInExpo: (t) => (t === 0 ? 0 : Math.pow(2, 10 * t - 10)),
+    easeOutExpo: (t) => (t === 1 ? 1 : 1 - Math.pow(2, -10 * t)),
+    easeInOutExpo: (t) => t === 0
+        ? 0
+        : t === 1
+            ? 1
+            : t < 0.5
+                ? Math.pow(2, 20 * t - 10) / 2
+                : (2 - Math.pow(2, -20 * t + 10)) / 2,
+    easeInBack: (t) => {
+        const c1 = 1.70158;
+        const c3 = c1 + 1;
+        return c3 * t * t * t - c1 * t * t;
+    },
+    easeOutBack: (t) => {
+        const c1 = 1.70158;
+        const c3 = c1 + 1;
+        return 1 + c3 * Math.pow(t - 1, 3) + c1 * Math.pow(t - 1, 2);
+    },
+    easeInOutBack: (t) => {
+        const c1 = 1.70158;
+        const c2 = c1 * 1.525;
+        return t < 0.5
+            ? (Math.pow(2 * t, 2) * ((c2 + 1) * 2 * t - c2)) / 2
+            : (Math.pow(2 * t - 2, 2) * ((c2 + 1) * (t * 2 - 2) + c2) + 2) / 2;
+    },
+    easeOutBounce: (t) => {
+        const n1 = 7.5625;
+        const d1 = 2.75;
+        if (t < 1 / d1)
+            return n1 * t * t;
+        if (t < 2 / d1)
+            return n1 * (t -= 1.5 / d1) * t + 0.75;
+        if (t < 2.5 / d1)
+            return n1 * (t -= 2.25 / d1) * t + 0.9375;
+        return n1 * (t -= 2.625 / d1) * t + 0.984375;
+    },
+    easeInBounce: (t) => 1 - Easing.easeOutBounce(1 - t),
+    easeInOutBounce: (t) => t < 0.5
+        ? (1 - Easing.easeOutBounce(1 - 2 * t)) / 2
+        : (1 + Easing.easeOutBounce(2 * t - 1)) / 2,
+    easeOutElastic: (t) => {
+        const c4 = (2 * Math.PI) / 3;
+        return t === 0
+            ? 0
+            : t === 1
+                ? 1
+                : Math.pow(2, -10 * t) * Math.sin((t * 10 - 0.75) * c4) + 1;
+    },
+    easeInElastic: (t) => {
+        const c4 = (2 * Math.PI) / 3;
+        return t === 0
+            ? 0
+            : t === 1
+                ? 1
+                : -Math.pow(2, 10 * t - 10) * Math.sin((t * 10 - 10.75) * c4);
+    },
+};
+
+/**
+ * Lightweight tween system integrated with PixiJS Ticker.
+ * Zero external dependencies — no GSAP required.
+ *
+ * All tweens return a Promise that resolves on completion.
+ *
+ * @example
+ * ```ts
+ * // Fade in a sprite
+ * await Tween.to(sprite, { alpha: 1, y: 100 }, 500, Easing.easeOutBack);
+ *
+ * // Move and wait
+ * await Tween.to(sprite, { x: 500 }, 300);
+ *
+ * // From a starting value
+ * await Tween.from(sprite, { scale: 0, alpha: 0 }, 400);
+ * ```
+ */
+class Tween {
+    static _tweens = [];
+    static _tickerAdded = false;
+    /**
+     * Animate properties from current values to target values.
+     *
+     * @param target - Object to animate (Sprite, Container, etc.)
+     * @param props - Target property values
+     * @param duration - Duration in milliseconds
+     * @param easing - Easing function (default: easeOutQuad)
+     * @param onUpdate - Progress callback (0..1)
+     */
+    static to(target, props, duration, easing, onUpdate) {
+        return new Promise((resolve) => {
+            // Capture starting values
+            const from = {};
+            for (const key of Object.keys(props)) {
+                from[key] = Tween.getProperty(target, key);
+            }
+            const tween = {
+                target,
+                from,
+                to: { ...props },
+                duration: Math.max(1, duration),
+                easing: easing ?? Easing.easeOutQuad,
+                elapsed: 0,
+                delay: 0,
+                resolve,
+                onUpdate,
+            };
+            Tween._tweens.push(tween);
+            Tween.ensureTicker();
+        });
+    }
+    /**
+     * Animate properties from given values to current values.
+     */
+    static from(target, props, duration, easing, onUpdate) {
+        // Capture current values as "to"
+        const to = {};
+        for (const key of Object.keys(props)) {
+            to[key] = Tween.getProperty(target, key);
+            Tween.setProperty(target, key, props[key]);
+        }
+        return Tween.to(target, to, duration, easing, onUpdate);
+    }
+    /**
+     * Animate from one set of values to another.
+     */
+    static fromTo(target, fromProps, toProps, duration, easing, onUpdate) {
+        // Set starting values
+        for (const key of Object.keys(fromProps)) {
+            Tween.setProperty(target, key, fromProps[key]);
+        }
+        return Tween.to(target, toProps, duration, easing, onUpdate);
+    }
+    /**
+     * Wait for a given duration (useful in timelines).
+     */
+    static delay(ms) {
+        return new Promise((resolve) => setTimeout(resolve, ms));
+    }
+    /**
+     * Kill all tweens on a target.
+     */
+    static killTweensOf(target) {
+        Tween._tweens = Tween._tweens.filter((tw) => {
+            if (tw.target === target) {
+                tw.resolve();
+                return false;
+            }
+            return true;
+        });
+    }
+    /**
+     * Kill all active tweens.
+     */
+    static killAll() {
+        for (const tw of Tween._tweens) {
+            tw.resolve();
+        }
+        Tween._tweens.length = 0;
+    }
+    /** Number of active tweens */
+    static get activeTweens() {
+        return Tween._tweens.length;
+    }
+    // ─── Internal ──────────────────────────────────────────
+    static ensureTicker() {
+        if (Tween._tickerAdded)
+            return;
+        Tween._tickerAdded = true;
+        Ticker.shared.add(Tween.tick);
+    }
+    static tick = (ticker) => {
+        const dt = ticker.deltaMS;
+        const completed = [];
+        for (const tw of Tween._tweens) {
+            tw.elapsed += dt;
+            if (tw.elapsed < tw.delay)
+                continue;
+            const raw = Math.min((tw.elapsed - tw.delay) / tw.duration, 1);
+            const t = tw.easing(raw);
+            // Interpolate each property
+            for (const key of Object.keys(tw.to)) {
+                const start = tw.from[key];
+                const end = tw.to[key];
+                const value = start + (end - start) * t;
+                Tween.setProperty(tw.target, key, value);
+            }
+            tw.onUpdate?.(raw);
+            if (raw >= 1) {
+                completed.push(tw);
+            }
+        }
+        // Remove completed tweens
+        for (const tw of completed) {
+            const idx = Tween._tweens.indexOf(tw);
+            if (idx !== -1)
+                Tween._tweens.splice(idx, 1);
+            tw.resolve();
+        }
+        // Remove ticker when no active tweens
+        if (Tween._tweens.length === 0 && Tween._tickerAdded) {
+            Ticker.shared.remove(Tween.tick);
+            Tween._tickerAdded = false;
+        }
+    };
+    /**
+     * Get a potentially nested property (supports 'scale.x', 'position.y', etc.)
+     */
+    static getProperty(target, key) {
+        const parts = key.split('.');
+        let obj = target;
+        for (let i = 0; i < parts.length - 1; i++) {
+            obj = obj[parts[i]];
+        }
+        return obj[parts[parts.length - 1]] ?? 0;
+    }
+    /**
+     * Set a potentially nested property.
+     */
+    static setProperty(target, key, value) {
+        const parts = key.split('.');
+        let obj = target;
+        for (let i = 0; i < parts.length - 1; i++) {
+            obj = obj[parts[i]];
+        }
+        obj[parts[parts.length - 1]] = value;
+    }
+}
+
+const DEFAULT_COLORS = {
+    normal: 0xffd700,
+    hover: 0xffe44d,
+    pressed: 0xccac00,
+    disabled: 0x666666,
+};
+/**
+ * Interactive button component with state management and animation.
+ *
+ * Supports both texture-based and Graphics-based rendering.
+ *
+ * @example
+ * ```ts
+ * const btn = new Button({
+ *   width: 200, height: 60, borderRadius: 12,
+ *   colors: { normal: 0x22aa22, hover: 0x33cc33 },
+ * });
+ *
+ * btn.onTap = () => console.log('Clicked!');
+ * scene.container.addChild(btn);
+ * ```
+ */
+class Button extends Container {
+    _state = 'normal';
+    _bg;
+    _sprites = {};
+    _config;
+    /** Called when the button is tapped/clicked */
+    onTap;
+    /** Called when the button state changes */
+    onStateChange;
+    constructor(config = {}) {
+        super();
+        this._config = {
+            width: 200,
+            height: 60,
+            borderRadius: 8,
+            pressScale: 0.95,
+            animationDuration: 100,
+            ...config,
+        };
+        // Create Graphics background
+        this._bg = new Graphics();
+        this.addChild(this._bg);
+        // Create texture sprites if provided
+        if (config.textures) {
+            for (const [state, tex] of Object.entries(config.textures)) {
+                const texture = typeof tex === 'string' ? Texture.from(tex) : tex;
+                const sprite = new Sprite(texture);
+                sprite.anchor.set(0.5);
+                sprite.visible = state === 'normal';
+                this._sprites[state] = sprite;
+                this.addChild(sprite);
+            }
+        }
+        // Make interactive
+        this.eventMode = 'static';
+        this.cursor = 'pointer';
+        // Set up hit area for Graphics-based
+        this.pivot.set(this._config.width / 2, this._config.height / 2);
+        // Bind events
+        this.on('pointerover', this.onPointerOver);
+        this.on('pointerout', this.onPointerOut);
+        this.on('pointerdown', this.onPointerDown);
+        this.on('pointerup', this.onPointerUp);
+        this.on('pointertap', this.onPointerTap);
+        // Initial render
+        this.setState('normal');
+        if (config.disabled) {
+            this.disable();
+        }
+    }
+    /** Current button state */
+    get state() {
+        return this._state;
+    }
+    /** Enable the button */
+    enable() {
+        if (this._state === 'disabled') {
+            this.setState('normal');
+            this.eventMode = 'static';
+            this.cursor = 'pointer';
+        }
+    }
+    /** Disable the button */
+    disable() {
+        this.setState('disabled');
+        this.eventMode = 'none';
+        this.cursor = 'default';
+    }
+    /** Whether the button is disabled */
+    get disabled() {
+        return this._state === 'disabled';
+    }
+    setState(state) {
+        if (this._state === state)
+            return;
+        this._state = state;
+        this.render();
+        this.onStateChange?.(state);
+    }
+    render() {
+        const { width, height, borderRadius, colors } = this._config;
+        const colorMap = { ...DEFAULT_COLORS, ...colors };
+        // Update Graphics
+        this._bg.clear();
+        this._bg.roundRect(0, 0, width, height, borderRadius).fill(colorMap[this._state]);
+        // Add highlight for normal/hover
+        if (this._state === 'normal' || this._state === 'hover') {
+            this._bg
+                .roundRect(2, 2, width - 4, height * 0.45, borderRadius)
+                .fill({ color: 0xffffff, alpha: 0.1 });
+        }
+        // Update sprite visibility
+        for (const [state, sprite] of Object.entries(this._sprites)) {
+            if (sprite)
+                sprite.visible = state === this._state;
+        }
+        // Fall back to normal sprite if state sprite doesn't exist
+        if (!this._sprites[this._state] && this._sprites.normal) {
+            this._sprites.normal.visible = true;
+        }
+    }
+    onPointerOver = () => {
+        if (this._state === 'disabled')
+            return;
+        this.setState('hover');
+    };
+    onPointerOut = () => {
+        if (this._state === 'disabled')
+            return;
+        this.setState('normal');
+        Tween.to(this.scale, { x: 1, y: 1 }, this._config.animationDuration);
+    };
+    onPointerDown = () => {
+        if (this._state === 'disabled')
+            return;
+        this.setState('pressed');
+        const s = this._config.pressScale;
+        Tween.to(this.scale, { x: s, y: s }, this._config.animationDuration, Easing.easeOutQuad);
+    };
+    onPointerUp = () => {
+        if (this._state === 'disabled')
+            return;
+        this.setState('hover');
+        Tween.to(this.scale, { x: 1, y: 1 }, this._config.animationDuration, Easing.easeOutBack);
+    };
+    onPointerTap = () => {
+        if (this._state === 'disabled')
+            return;
+        this.onTap?.();
+    };
+}
+
+/**
+ * Horizontal progress bar with optional smooth fill animation.
+ *
+ * @example
+ * ```ts
+ * const bar = new ProgressBar({ width: 300, height: 20, fillColor: 0x22cc22 });
+ * scene.container.addChild(bar);
+ * bar.progress = 0.5; // 50%
+ * ```
+ */
+class ProgressBar extends Container {
+    _track;
+    _fill;
+    _border;
+    _config;
+    _progress = 0;
+    _displayedProgress = 0;
+    constructor(config = {}) {
+        super();
+        this._config = {
+            width: 300,
+            height: 16,
+            borderRadius: 8,
+            fillColor: 0xffd700,
+            trackColor: 0x333333,
+            borderColor: 0x555555,
+            borderWidth: 1,
+            animated: true,
+            animationSpeed: 0.1,
+            ...config,
+        };
+        this._track = new Graphics();
+        this._fill = new Graphics();
+        this._border = new Graphics();
+        this.addChild(this._track, this._fill, this._border);
+        this.drawTrack();
+        this.drawBorder();
+        this.drawFill(0);
+    }
+    /** Get/set progress (0..1) */
+    get progress() {
+        return this._progress;
+    }
+    set progress(value) {
+        this._progress = Math.max(0, Math.min(1, value));
+        if (!this._config.animated) {
+            this._displayedProgress = this._progress;
+            this.drawFill(this._displayedProgress);
+        }
+    }
+    /**
+     * Call each frame if animated is true.
+     */
+    update(dt) {
+        if (!this._config.animated)
+            return;
+        if (Math.abs(this._displayedProgress - this._progress) < 0.001) {
+            this._displayedProgress = this._progress;
+            return;
+        }
+        this._displayedProgress +=
+            (this._progress - this._displayedProgress) * this._config.animationSpeed;
+        this.drawFill(this._displayedProgress);
+    }
+    drawTrack() {
+        const { width, height, borderRadius, trackColor } = this._config;
+        this._track.clear();
+        this._track.roundRect(0, 0, width, height, borderRadius).fill(trackColor);
+    }
+    drawBorder() {
+        const { width, height, borderRadius, borderColor, borderWidth } = this._config;
+        this._border.clear();
+        this._border
+            .roundRect(0, 0, width, height, borderRadius)
+            .stroke({ color: borderColor, width: borderWidth });
+    }
+    drawFill(progress) {
+        const { width, height, borderRadius, fillColor, borderWidth } = this._config;
+        const innerWidth = width - borderWidth * 2;
+        const innerHeight = height - borderWidth * 2;
+        const fillWidth = Math.max(0, innerWidth * progress);
+        this._fill.clear();
+        if (fillWidth > 0) {
+            this._fill.x = borderWidth;
+            this._fill.y = borderWidth;
+            this._fill.roundRect(0, 0, fillWidth, innerHeight, borderRadius - 1).fill(fillColor);
+            // Highlight
+            this._fill
+                .roundRect(0, 0, fillWidth, innerHeight * 0.4, borderRadius - 1)
+                .fill({ color: 0xffffff, alpha: 0.15 });
+        }
+    }
+}
+
+/**
+ * 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,
+ * });
+ * ```
+ */
+class Label extends Container {
+    _text;
+    _maxWidth;
+    _autoFit;
+    constructor(config = {}) {
+        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() {
+        return this._text.text;
+    }
+    set text(value) {
+        this._text.text = value;
+        this.fitText();
+    }
+    /** Get/set the text style */
+    get style() {
+        return this._text.style;
+    }
+    /** Set max width constraint */
+    set maxWidth(value) {
+        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, currency, locale = 'en-US') {
+        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, decimals = 0, locale = 'en-US') {
+        this.text = new Intl.NumberFormat(locale, {
+            minimumFractionDigits: decimals,
+            maximumFractionDigits: decimals,
+        }).format(value);
+    }
+    fitText() {
+        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);
+        }
+    }
+}
+
+/**
+ * Background panel that can use either Graphics or 9-slice sprite.
+ *
+ * @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,
+ * });
+ * ```
+ */
+class Panel extends Container {
+    _bg;
+    _content;
+    _config;
+    constructor(config = {}) {
+        super();
+        this._config = {
+            width: 400,
+            height: 300,
+            padding: 16,
+            backgroundAlpha: 1,
+            ...config,
+        };
+        // 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];
+            this._bg = new NineSliceSprite({
+                texture,
+                leftWidth: left,
+                topHeight: top,
+                rightWidth: right,
+                bottomHeight: bottom,
+            });
+            this._bg.width = this._config.width;
+            this._bg.height = this._config.height;
+        }
+        else {
+            this._bg = new Graphics();
+            this.drawGraphicsBg();
+        }
+        this._bg.alpha = this._config.backgroundAlpha;
+        this.addChild(this._bg);
+        // Content container with padding
+        this._content = new Container();
+        this._content.x = this._config.padding;
+        this._content.y = this._config.padding;
+        this.addChild(this._content);
+    }
+    /** Content container — add children here */
+    get content() {
+        return this._content;
+    }
+    /** Resize the panel */
+    setSize(width, height) {
+        this._config.width = width;
+        this._config.height = height;
+        if (this._bg instanceof Graphics) {
+            this.drawGraphicsBg();
+        }
+        else {
+            this._bg.width = width;
+            this._bg.height = height;
+        }
+    }
+    drawGraphicsBg() {
+        const bg = this._bg;
+        const { width, height, backgroundColor, borderRadius, borderColor, borderWidth, } = this._config;
+        bg.clear();
+        bg.roundRect(0, 0, width, height, borderRadius ?? 0).fill(backgroundColor ?? 0x1a1a2e);
+        if (borderColor !== undefined && borderWidth) {
+            bg.roundRect(0, 0, width, height, borderRadius ?? 0)
+                .stroke({ color: borderColor, width: borderWidth });
+        }
+    }
+}
+
+/**
+ * Reactive balance display component.
+ *
+ * Automatically formats currency and can animate value changes
+ * with a smooth countup/countdown effect.
+ *
+ * @example
+ * ```ts
+ * const balance = new BalanceDisplay({ currency: 'USD', animated: true });
+ * balance.setValue(1000);
+ *
+ * // Wire to SDK
+ * sdk.on('balanceUpdate', ({ balance: val }) => balance.setValue(val));
+ * ```
+ */
+class BalanceDisplay extends Container {
+    _prefixLabel = null;
+    _valueLabel;
+    _config;
+    _currentValue = 0;
+    _displayedValue = 0;
+    _animating = false;
+    constructor(config = {}) {
+        super();
+        this._config = {
+            currency: config.currency ?? 'USD',
+            locale: config.locale ?? 'en-US',
+            animated: config.animated ?? true,
+            animationDuration: config.animationDuration ?? 500,
+        };
+        // Prefix label
+        if (config.prefix) {
+            this._prefixLabel = new Label({
+                text: config.prefix,
+                style: {
+                    fontSize: 16,
+                    fill: 0xaaaaaa,
+                    ...config.style,
+                },
+            });
+            this.addChild(this._prefixLabel);
+        }
+        // Value label
+        this._valueLabel = new Label({
+            text: '0.00',
+            style: {
+                fontSize: 28,
+                fontWeight: 'bold',
+                fill: 0xffffff,
+                ...config.style,
+            },
+            maxWidth: config.maxWidth,
+            autoFit: !!config.maxWidth,
+        });
+        this.addChild(this._valueLabel);
+        this.layoutLabels();
+    }
+    /** Current displayed value */
+    get value() {
+        return this._currentValue;
+    }
+    /**
+     * Set the balance value. If animated, smoothly counts to the new value.
+     */
+    setValue(value) {
+        const oldValue = this._currentValue;
+        this._currentValue = value;
+        if (this._config.animated && oldValue !== value) {
+            this.animateValue(oldValue, value);
+        }
+        else {
+            this._displayedValue = value;
+            this.updateDisplay();
+        }
+    }
+    /**
+     * Set the currency code.
+     */
+    setCurrency(currency) {
+        this._config.currency = currency;
+        this.updateDisplay();
+    }
+    async animateValue(from, to) {
+        this._animating = true;
+        const duration = this._config.animationDuration;
+        const startTime = Date.now();
+        return new Promise((resolve) => {
+            const tick = () => {
+                const elapsed = Date.now() - startTime;
+                const t = Math.min(elapsed / duration, 1);
+                const eased = Easing.easeOutCubic(t);
+                this._displayedValue = from + (to - from) * eased;
+                this.updateDisplay();
+                if (t < 1) {
+                    requestAnimationFrame(tick);
+                }
+                else {
+                    this._displayedValue = to;
+                    this.updateDisplay();
+                    this._animating = false;
+                    resolve();
+                }
+            };
+            requestAnimationFrame(tick);
+        });
+    }
+    updateDisplay() {
+        this._valueLabel.setCurrency(this._displayedValue, this._config.currency, this._config.locale);
+    }
+    layoutLabels() {
+        if (this._prefixLabel) {
+            this._prefixLabel.y = -14;
+            this._valueLabel.y = 14;
+        }
+    }
+}
+
+/**
+ * Win amount display with countup animation.
+ *
+ * Shows a dramatic countup from 0 to the win amount, with optional
+ * scale pop effect — typical of slot games.
+ *
+ * @example
+ * ```ts
+ * const winDisplay = new WinDisplay({ currency: 'USD' });
+ * scene.container.addChild(winDisplay);
+ * await winDisplay.showWin(150.50); // countup animation
+ * winDisplay.hide();
+ * ```
+ */
+class WinDisplay extends Container {
+    _label;
+    _config;
+    _cancelCountup = false;
+    constructor(config = {}) {
+        super();
+        this._config = {
+            currency: config.currency ?? 'USD',
+            locale: config.locale ?? 'en-US',
+            countupDuration: config.countupDuration ?? 1500,
+            popScale: config.popScale ?? 1.2,
+        };
+        this._label = new Label({
+            text: '',
+            style: {
+                fontSize: 48,
+                fontWeight: 'bold',
+                fill: 0xffd700,
+                stroke: { color: 0x000000, width: 3 },
+                ...config.style,
+            },
+        });
+        this.addChild(this._label);
+        this.visible = false;
+    }
+    /**
+     * Show a win with countup animation.
+     *
+     * @param amount - Win amount
+     * @returns Promise that resolves when the animation completes
+     */
+    async showWin(amount) {
+        this.visible = true;
+        this._cancelCountup = false;
+        this.alpha = 1;
+        const duration = this._config.countupDuration;
+        const startTime = Date.now();
+        // Scale pop
+        this.scale.set(0.5);
+        return new Promise((resolve) => {
+            const tick = () => {
+                if (this._cancelCountup) {
+                    this.displayAmount(amount);
+                    resolve();
+                    return;
+                }
+                const elapsed = Date.now() - startTime;
+                const t = Math.min(elapsed / duration, 1);
+                const eased = Easing.easeOutCubic(t);
+                // Countup
+                const current = amount * eased;
+                this.displayAmount(current);
+                // Scale animation
+                const scaleT = Math.min(elapsed / 300, 1);
+                const scaleEased = Easing.easeOutBack(scaleT);
+                const targetScale = 1;
+                this.scale.set(0.5 + (targetScale - 0.5) * scaleEased);
+                if (t < 1) {
+                    requestAnimationFrame(tick);
+                }
+                else {
+                    this.displayAmount(amount);
+                    this.scale.set(1);
+                    resolve();
+                }
+            };
+            requestAnimationFrame(tick);
+        });
+    }
+    /**
+     * Skip the countup animation and show the final amount immediately.
+     */
+    skipCountup(amount) {
+        this._cancelCountup = true;
+        this.displayAmount(amount);
+        this.scale.set(1);
+    }
+    /**
+     * Hide the win display.
+     */
+    hide() {
+        this.visible = false;
+        this._label.text = '';
+    }
+    displayAmount(amount) {
+        this._label.setCurrency(amount, this._config.currency, this._config.locale);
+    }
+}
+
+/**
+ * Modal overlay component.
+ * Shows content on top of a dark overlay with enter/exit animations.
+ *
+ * @example
+ * ```ts
+ * const modal = new Modal({ closeOnOverlay: true });
+ * modal.content.addChild(settingsPanel);
+ * modal.onClose = () => console.log('Closed');
+ * await modal.show(1920, 1080);
+ * ```
+ */
+class Modal extends Container {
+    _overlay;
+    _contentContainer;
+    _config;
+    _showing = false;
+    /** Called when the modal is closed */
+    onClose;
+    constructor(config = {}) {
+        super();
+        this._config = {
+            overlayColor: 0x000000,
+            overlayAlpha: 0.7,
+            closeOnOverlay: true,
+            animationDuration: 300,
+            ...config,
+        };
+        // Overlay
+        this._overlay = new Graphics();
+        this._overlay.eventMode = 'static';
+        this.addChild(this._overlay);
+        if (this._config.closeOnOverlay) {
+            this._overlay.on('pointertap', () => this.hide());
+        }
+        // Content container
+        this._contentContainer = new Container();
+        this.addChild(this._contentContainer);
+        this.visible = false;
+    }
+    /** Content container — add your UI here */
+    get content() {
+        return this._contentContainer;
+    }
+    /** Whether the modal is currently showing */
+    get isShowing() {
+        return this._showing;
+    }
+    /**
+     * Show the modal with animation.
+     */
+    async show(viewWidth, viewHeight) {
+        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() {
+        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?.();
+    }
+}
+
+const TOAST_COLORS = {
+    info: 0x3498db,
+    success: 0x27ae60,
+    warning: 0xf39c12,
+    error: 0xe74c3c,
+};
+/**
+ * Toast notification component for displaying transient messages.
+ *
+ * @example
+ * ```ts
+ * const toast = new Toast();
+ * scene.container.addChild(toast);
+ * await toast.show('Connection lost', 'error', 1920, 1080);
+ * ```
+ */
+class Toast extends Container {
+    _bg;
+    _text;
+    _config;
+    _dismissTimeout = null;
+    constructor(config = {}) {
+        super();
+        this._config = {
+            duration: 3000,
+            bottomOffset: 60,
+            ...config,
+        };
+        this._bg = new Graphics();
+        this.addChild(this._bg);
+        this._text = new Text({
+            text: '',
+            style: {
+                fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+                fontSize: 16,
+                fill: 0xffffff,
+            },
+        });
+        this._text.anchor.set(0.5);
+        this.addChild(this._text);
+        this.visible = false;
+    }
+    /**
+     * Show a toast message.
+     */
+    async show(message, type = 'info', viewWidth, viewHeight) {
+        // Clear previous dismiss
+        if (this._dismissTimeout) {
+            clearTimeout(this._dismissTimeout);
+        }
+        this._text.text = message;
+        const padding = 20;
+        const width = Math.max(200, this._text.width + padding * 2);
+        const height = 44;
+        const radius = 8;
+        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 });
+        // Position
+        if (viewWidth && viewHeight) {
+            this.x = viewWidth / 2;
+            this.y = viewHeight - this._config.bottomOffset;
+        }
+        this.visible = true;
+        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();
+            }, this._config.duration);
+        }
+    }
+    /**
+     * Dismiss the toast.
+     */
+    async dismiss() {
+        if (!this.visible)
+            return;
+        if (this._dismissTimeout) {
+            clearTimeout(this._dismissTimeout);
+            this._dismissTimeout = null;
+        }
+        await Tween.to(this, { alpha: 0, y: this.y + 20 }, 200, Easing.easeInCubic);
+        this.visible = false;
+    }
+}
+
+export { BalanceDisplay, Button, Label, Modal, Panel, ProgressBar, Toast, WinDisplay };
+//# sourceMappingURL=ui.esm.js.map