​

F103 — Game Loading Screen

​

Business Rule

1. Appear immediately on page load (before any game content is visible)
2. Show a progress bar that advances in real time as assets load
3. Dismiss automatically and cleanly when the game is ready to play
4. Never leave the player looking at a blank or partially-rendered screen

​

Technical Design

​

v4 — JS / Phaser 2

• BootState loads the loading background image and bar sprites
• PreloadState calls this.load.setPreloadSprite(preloadBar) — Phaser auto-clips the bar width as assets load
• Transitions to GameRun when load.onLoadComplete fires

​

v5 — UMA / GDK

• Shown immediately on page load
• XHR intercept: wraps window.XMLHttpRequest to count in-flight vs completed requests; maps completion ratio to 30–88% of the bar
• Slow drip: auto-increments toward 30% during synchronous JS script loading phase (no XHR trackable)
• Completion hook: patches GDKLoader.showGameFrame() to fill bar to 100% then fade out (0.5 s opacity transition)
• Original XMLHttpRequest restored after dismissal

<!-- Overlay structure (game.html) -->
<div id="hl-loading">
  <div class="hl-inner">
    <img src="gdk/2.1.2/gdkBrand/extraLogo.png" class="hl-logo">
    <div class="hl-track"><div class="hl-fill" id="hl-fill"></div></div>
    <div class="hl-label" id="hl-label">Loading…</div>
  </div>
</div>

​

v6 — Phaser 3 / TypeScript

• PreloadScene.preload() creates a full-screen dark rectangle, logo text, track rectangle, and fill rectangle
• this.load.on('progress', value => fill.setScale(value, 1)) drives the bar in real time
• PreloadScene.create() transitions to GameScene — the loading graphics are destroyed automatically

// PreloadScene.ts (abridged)
this.load.on('progress', (value: number) => {
  fill.scaleX = value;
  label.setText(`Loading… ${Math.round(value * 100)}%`);
});
this.load.on('complete', () => { /* GameScene starts via create() */ });

​

v7 — Horse Race / HTML+CSS

• Overlay shown from page load
• hedgeem:ready is dispatched by src/main.ts when the engine is initialised and the first game state is ready
• On event: bar fills to 100%, overlay fades out (0.4 s)
• No asset XHR tracking needed — v7 has no significant async asset loads

​

v8 — Casino / HTML+CSS

​

Acceptance Criteria

​

Version Parity