@energy8platform/game-engine 0.19.0 → 0.20.0

package/dist/index.d.ts

@@ -2149,20 +2149,20 @@ declare class ScrollContainer extends Container {
 }
 
 /**
- * Built-in loading screen using the Energy8 SVG logo with animated loader bar.
- *
- * Renders as an HTML overlay on top of the canvas for crisp SVG quality.
- * The loader bar fill width is driven by asset loading progress.
+ * Built-in loading screen.
+ *
+ * It does NOT render its own overlay — the CSS preloader created at boot
+ * (`createPlatformSession`/`GameApplication.start`) stays on screen, and this
+ * scene merely drives it: asset-load progress → `setCSSPreloaderProgress`,
+ * tap-to-start → `waitCSSPreloaderTap`, then fades it out via
+ * `removeCSSPreloader` before entering the game. One continuous overlay from
+ * boot to gameplay — no second logo, no mid-load flash.
  */
 declare class LoadingScene extends Scene {
     private _engine;
     private _targetScene;
     private _targetData?;
     private _config;
-    private _overlay;
-    private _loaderRect;
-    private _percentEl;
-    private _tapToStartEl;
     private _displayedProgress;
     private _targetProgress;
     private _loadingComplete;
@@ -2171,15 +2171,14 @@ declare class LoadingScene extends Scene {
     onUpdate(dt: number): void;
     onResize(_width: number, _height: number): void;
     onDestroy(): void;
-    private createOverlay;
-    private removeOverlay;
     private updateLoaderBar;
     /**
      * Smoothly animate the displayed progress from its current value to `target`
      * over `durationMs` using an easeOutCubic curve.
      */
     private animateProgressTo;
-    private showTapToStart;
+    /** The DOM element hosting the canvas + preloader overlay. */
+    private hostElement;
     private transitionToGame;
 }
 

package/dist/index.esm.js

@@ -1,6 +1,6 @@
 import { Ticker, Assets, Container, Text, Application, AnimatedSprite, Texture, Sprite, Graphics, NineSliceSprite } from 'pixi.js';
 import { createPlatformSession } from '@energy8platform/platform-core';
-import { LOADER_BAR_MAX_WIDTH, buildLogoSVG, createCSSPreloader, removeCSSPreloader } from '@energy8platform/platform-core/loading';
+import { waitCSSPreloaderTap, removeCSSPreloader, setCSSPreloaderProgress, createCSSPreloader } from '@energy8platform/platform-core/loading';
 export { BridgeDestroyedError, BridgeNotReadyError, SDKError, TimeoutError } from '@energy8platform/game-sdk';
 export { DevBridge } from '@energy8platform/platform-core/dev-bridge';
 
@@ -1516,34 +1516,20 @@ class Scene {
 }
 
 /**
- * Build the loading scene variant of the logo SVG.
- * Uses unique IDs (prefixed with 'ls') to avoid collisions with CSSPreloader.
- */
-function buildLoadingLogoSVG() {
-    return buildLogoSVG({
-        idPrefix: 'ls',
-        svgStyle: 'width:100%;height:auto;',
-        clipRectId: 'ge-loader-rect',
-        textId: 'ge-loader-pct',
-        textContent: '0%',
-    });
-}
-/**
- * Built-in loading screen using the Energy8 SVG logo with animated loader bar.
+ * Built-in loading screen.
  *
- * Renders as an HTML overlay on top of the canvas for crisp SVG quality.
- * The loader bar fill width is driven by asset loading progress.
+ * It does NOT render its own overlay — the CSS preloader created at boot
+ * (`createPlatformSession`/`GameApplication.start`) stays on screen, and this
+ * scene merely drives it: asset-load progress → `setCSSPreloaderProgress`,
+ * tap-to-start → `waitCSSPreloaderTap`, then fades it out via
+ * `removeCSSPreloader` before entering the game. One continuous overlay from
+ * boot to gameplay — no second logo, no mid-load flash.
  */
 class LoadingScene extends Scene {
     _engine;
     _targetScene;
     _targetData;
     _config;
-    // HTML overlay
-    _overlay = null;
-    _loaderRect = null;
-    _percentEl = null;
-    _tapToStartEl = null;
     // State
     _displayedProgress = 0;
     _targetProgress = 0;
@@ -1556,8 +1542,6 @@ class LoadingScene extends Scene {
         this._targetData = targetData;
         this._config = engine.config.loading ?? {};
         this._startTime = Date.now();
-        // Create the HTML overlay with the SVG logo
-        this.createOverlay();
         // Initialize asset manager
         await this._engine.assets.init();
         // Initialize audio manager
@@ -1603,110 +1587,29 @@ class LoadingScene extends Scene {
         // Final snap to 100%
         this._displayedProgress = 1;
         this.updateLoaderBar(1);
-        // Show "Tap to Start" or transition directly
-        if (this._config.tapToStart !== false) {
-            await this.showTapToStart();
-        }
-        else {
-            await this.transitionToGame();
-        }
+        // Wait for the player's tap — resolves immediately when tapToStart is
+        // false (the preloader honours that flag) — then enter the game.
+        await waitCSSPreloaderTap();
+        await this.transitionToGame();
     }
     onUpdate(dt) {
-        // Smooth progress bar fill via HTML (during active loading)
+        // Smooth progress bar fill (during active loading)
         if (!this._loadingComplete && this._displayedProgress < this._targetProgress) {
             this._displayedProgress = Math.min(this._displayedProgress + dt * 1.5, this._targetProgress);
             this.updateLoaderBar(this._displayedProgress);
         }
     }
     onResize(_width, _height) {
-        // Overlay is CSS-based, auto-resizes
+        // The preloader overlay is CSS-based and auto-resizes.
     }
     onDestroy() {
-        this.removeOverlay();
-    }
-    // ─── HTML Overlay ──────────────────────────────────────
-    createOverlay() {
-        const bgColor = typeof this._config.backgroundColor === 'string'
-            ? this._config.backgroundColor
-            : typeof this._config.backgroundColor === 'number'
-                ? `#${this._config.backgroundColor.toString(16).padStart(6, '0')}`
-                : '#0a0a1a';
-        const bgGradient = this._config.backgroundGradient ??
-            `linear-gradient(135deg, ${bgColor} 0%, #1a1a3e 100%)`;
-        this._overlay = document.createElement('div');
-        this._overlay.id = '__ge-loading-overlay__';
-        this._overlay.innerHTML = `
-      <div class="ge-loading-content">
-        ${buildLoadingLogoSVG()}
-      </div>
-    `;
-        const style = document.createElement('style');
-        style.id = '__ge-loading-style__';
-        style.textContent = `
-      #__ge-loading-overlay__ {
-        position: absolute;
-        top: 0; left: 0;
-        width: 100%; height: 100%;
-        background: ${bgGradient};
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        z-index: 9999;
-        transition: opacity 0.5s ease-out;
-        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-      }
-      #__ge-loading-overlay__.ge-fade-out {
-        opacity: 0;
-        pointer-events: none;
-      }
-      .ge-loading-content {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        width: 75%;
-        max-width: 650px;
-      }
-      .ge-loading-content svg {
-        filter: drop-shadow(0 0 40px rgba(121, 57, 194, 0.5));
-        cursor: default;
-      }
-
-      .ge-svg-pulse {
-        animation: ge-tap-pulse 1.2s ease-in-out infinite;
-      }
-      @keyframes ge-tap-pulse {
-        0%, 100% { opacity: 0.5; }
-        50% { opacity: 1; }
-      }
-    `;
-        // Get the container that holds the canvas
-        const container = this._engine.app?.canvas?.parentElement;
-        if (container) {
-            container.style.position = container.style.position || 'relative';
-            container.appendChild(style);
-            container.appendChild(this._overlay);
-        }
-        // Cache the SVG loader rect for progress updates
-        this._loaderRect = this._overlay.querySelector('#ge-loader-rect');
-        this._percentEl = this._overlay.querySelector('#ge-loader-pct');
-    }
-    removeOverlay() {
-        this._overlay?.remove();
-        document.getElementById('__ge-loading-style__')?.remove();
-        this._overlay = null;
-        this._loaderRect = null;
-        this._percentEl = null;
-        this._tapToStartEl = null;
+        // Defensive: ensure the preloader is gone even if we never transitioned
+        // (e.g. the scene was popped externally). Idempotent.
+        void removeCSSPreloader(this.hostElement());
     }
     // ─── Progress ──────────────────────────────────────────
     updateLoaderBar(progress) {
-        if (this._loaderRect) {
-            this._loaderRect.setAttribute('width', String(LOADER_BAR_MAX_WIDTH * progress));
-        }
-        if (this._percentEl) {
-            const pct = Math.round(progress * 100);
-            this._percentEl.textContent = `${pct}%`;
-        }
+        setCSSPreloaderProgress(Math.max(0, Math.min(1, progress)));
     }
     /**
      * Smoothly animate the displayed progress from its current value to `target`
@@ -1736,49 +1639,20 @@ class LoadingScene extends Scene {
             requestAnimationFrame(tick);
         });
     }
-    // ─── Tap to Start ─────────────────────────────────────
-    async showTapToStart() {
-        const tapText = this._config.tapToStartText ?? 'TAP TO START';
-        // Reuse the same SVG text element — replace percentage with tap text
-        if (this._percentEl) {
-            const el = this._percentEl;
-            el.textContent = tapText;
-            el.setAttribute('fill', '#ffffff');
-            el.classList.add('ge-svg-pulse');
-            this._tapToStartEl = el;
-        }
-        // Make overlay clickable
-        if (this._overlay) {
-            this._overlay.style.cursor = 'pointer';
-        }
-        // Wait for tap
-        return new Promise((resolve) => {
-            const handler = async () => {
-                this._overlay?.removeEventListener('click', handler);
-                await this.transitionToGame();
-                resolve();
-            };
-            // Listen on the full overlay for easier mobile tap
-            this._overlay?.addEventListener('click', handler);
-        });
-    }
     // ─── Transition ────────────────────────────────────────
+    /** The DOM element hosting the canvas + preloader overlay. */
+    hostElement() {
+        return this._engine?.app?.canvas?.parentElement ?? document.body;
+    }
     async transitionToGame() {
-        // Fade out the HTML overlay
-        if (this._overlay) {
-            this._overlay.classList.add('ge-fade-out');
-            await new Promise((resolve) => {
-                this._overlay.addEventListener('transitionend', () => resolve(), { once: true });
-                // Safety timeout
-                setTimeout(resolve, 600);
-            });
-        }
-        // Remove overlay
-        this.removeOverlay();
+        // Fade out and remove the shared CSS preloader (resolves after the fade).
+        await removeCSSPreloader(this.hostElement());
         // Navigate to the target scene, always passing the engine reference
         await this._engine.scenes.goto(this._targetScene, {
             engine: this._engine,
-            ...(this._targetData && typeof this._targetData === 'object' ? this._targetData : { data: this._targetData }),
+            ...(this._targetData && typeof this._targetData === 'object'
+                ? this._targetData
+                : { data: this._targetData }),
         });
     }
 }
@@ -2005,17 +1879,20 @@ class GameApplication extends EventEmitter {
             // 6. Initialize sub-systems
             this.initSubSystems();
             this.emit('initialized');
-            // 7. Remove CSS preloader, show Canvas loading screen
-            removeCSSPreloader(this._container);
-            // 8. Load assets with loading screen
+            // 7. Load assets. The CSS preloader stays on screen — LoadingScene drives
+            //    its progress/tap and removes it before entering the game, so there's
+            //    a single continuous overlay from boot to gameplay (no logo flash).
             await this.loadAssets(firstScene, sceneData);
             this.emit('loaded');
-            // 9. Start the game loop
+            // 8. Start the game loop
             this._running = true;
             this.emit('started');
         }
         catch (err) {
             console.error('[GameEngine] Failed to start:', err);
+            // Tear down the preloader so a failure doesn't strand the brand frame.
+            if (this._container)
+                removeCSSPreloader(this._container);
             this.emit('error', err instanceof Error ? err : new Error(String(err)));
             throw err;
         }