@energy8platform/game-engine 0.1.0

package/src/debug/DevBridge.ts

@@ -0,0 +1,259 @@
+import type {
+  InitData,
+  GameConfigData,
+  PlayResultData,
+  SessionData,
+} from '@energy8platform/game-sdk';
+
+export interface DevBridgeConfig {
+  /** Mock initial balance */
+  balance?: number;
+  /** Mock currency */
+  currency?: string;
+  /** Game config */
+  gameConfig?: Partial<GameConfigData>;
+  /** Base URL for assets (default: '/assets/') */
+  assetsUrl?: string;
+  /** Active session to resume (null = no active session) */
+  session?: SessionData | null;
+  /** Custom play result handler — return mock result data */
+  onPlay?: (params: { action: string; bet: number; roundId?: string }) => Partial<PlayResultData>;
+  /** Simulated network delay in ms */
+  networkDelay?: number;
+  /** Enable debug logging */
+  debug?: boolean;
+}
+
+const DEFAULT_CONFIG: Required<DevBridgeConfig> = {
+  balance: 10000,
+  currency: 'USD',
+  gameConfig: {
+    id: 'dev-game',
+    type: 'slot',
+    version: '1.0.0',
+    viewport: { width: 1920, height: 1080 },
+    betLevels: [0.1, 0.2, 0.5, 1, 2, 5, 10, 20, 50],
+  },
+  assetsUrl: '/assets/',
+  session: null,
+  onPlay: () => ({}),
+  networkDelay: 200,
+  debug: true,
+};
+
+/**
+ * Mock host bridge for local development.
+ *
+ * Intercepts postMessage communication from the SDK and responds
+ * with mock data, simulating a real casino host environment.
+ *
+ * This allows games to be developed and tested without a real backend.
+ *
+ * @example
+ * ```ts
+ * // In your dev entry point or vite plugin
+ * import { DevBridge } from '@energy8platform/game-engine/debug';
+ *
+ * const devBridge = new DevBridge({
+ *   balance: 5000,
+ *   currency: 'EUR',
+ *   gameConfig: { id: 'my-slot', type: 'slot', betLevels: [0.2, 0.5, 1, 2] },
+ *   onPlay: ({ action, bet }) => ({
+ *     totalWin: Math.random() > 0.5 ? bet * (Math.random() * 20) : 0,
+ *     data: {
+ *       matrix: generateRandomMatrix(5, 3, 10),
+ *       win_lines: [],
+ *     },
+ *   }),
+ * });
+ * devBridge.start();
+ * ```
+ */
+export class DevBridge {
+  private _config: Required<DevBridgeConfig>;
+  private _balance: number;
+  private _roundCounter = 0;
+  private _listening = false;
+  private _handler: ((e: MessageEvent) => void) | null = null;
+
+  constructor(config: DevBridgeConfig = {}) {
+    this._config = { ...DEFAULT_CONFIG, ...config };
+    this._balance = this._config.balance;
+  }
+
+  /** Current mock balance */
+  get balance(): number {
+    return this._balance;
+  }
+
+  /** Start listening for SDK messages */
+  start(): void {
+    if (this._listening) return;
+
+    this._handler = (e: MessageEvent) => {
+      this.handleMessage(e);
+    };
+
+    window.addEventListener('message', this._handler);
+    this._listening = true;
+
+    if (this._config.debug) {
+      console.log('[DevBridge] Started — listening for SDK messages');
+    }
+  }
+
+  /** Stop listening */
+  stop(): void {
+    if (this._handler) {
+      window.removeEventListener('message', this._handler);
+      this._handler = null;
+    }
+    this._listening = false;
+
+    if (this._config.debug) {
+      console.log('[DevBridge] Stopped');
+    }
+  }
+
+  /** Set mock balance */
+  setBalance(balance: number): void {
+    this._balance = balance;
+    // Send balance update
+    this.sendMessage('BALANCE_UPDATE', { balance: this._balance });
+  }
+
+  /** Destroy the dev bridge */
+  destroy(): void {
+    this.stop();
+  }
+
+  // ─── Message Handling ──────────────────────────────────
+
+  private handleMessage(e: MessageEvent): void {
+    const data = e.data;
+
+    // Only process bridge messages
+    if (!data || data.__casino_bridge !== true) return;
+
+    if (this._config.debug) {
+      console.log('[DevBridge] ←', data.type, data.payload);
+    }
+
+    switch (data.type) {
+      case 'GAME_READY':
+        this.handleGameReady(data.id);
+        break;
+      case 'PLAY_REQUEST':
+        this.handlePlayRequest(data.payload, data.id);
+        break;
+      case 'PLAY_RESULT_ACK':
+        this.handlePlayAck(data.payload, data.id);
+        break;
+      case 'GET_BALANCE':
+        this.handleGetBalance(data.id);
+        break;
+      case 'GET_STATE':
+        this.handleGetState(data.id);
+        break;
+      case 'OPEN_DEPOSIT':
+        this.handleOpenDeposit();
+        break;
+      default:
+        if (this._config.debug) {
+          console.log('[DevBridge] Unknown message type:', data.type);
+        }
+    }
+  }
+
+  private handleGameReady(id?: string): void {
+    const initData: InitData = {
+      balance: this._balance,
+      currency: this._config.currency,
+      config: this._config.gameConfig as GameConfigData,
+      session: this._config.session,
+      assetsUrl: this._config.assetsUrl,
+    };
+
+    this.delayedSend('INIT', initData, id);
+  }
+
+  private handlePlayRequest(
+    payload: { action: string; bet: number; roundId?: string },
+    id?: string,
+  ): void {
+    const { action, bet, roundId } = payload;
+
+    // Deduct bet
+    this._balance -= bet;
+    this._roundCounter++;
+
+    // Generate result
+    const customResult = this._config.onPlay({ action, bet, roundId });
+    const totalWin = customResult.totalWin ?? (Math.random() > 0.6 ? bet * (1 + Math.random() * 10) : 0);
+
+    // Credit win
+    this._balance += totalWin;
+
+    const result: PlayResultData = {
+      roundId: roundId ?? `dev-round-${this._roundCounter}`,
+      action,
+      balanceAfter: this._balance,
+      totalWin: Math.round(totalWin * 100) / 100,
+      data: customResult.data ?? {},
+      nextActions: customResult.nextActions ?? ['spin'],
+      session: customResult.session ?? null,
+      creditPending: false,
+    };
+
+    this.delayedSend('PLAY_RESULT', result, id);
+  }
+
+  private handlePlayAck(_payload: unknown, _id?: string): void {
+    if (this._config.debug) {
+      console.log('[DevBridge] Play acknowledged');
+    }
+  }
+
+  private handleGetBalance(id?: string): void {
+    this.delayedSend('BALANCE_RESPONSE', { balance: this._balance }, id);
+  }
+
+  private handleGetState(id?: string): void {
+    this.delayedSend('STATE_RESPONSE', this._config.session, id);
+  }
+
+  private handleOpenDeposit(): void {
+    if (this._config.debug) {
+      console.log('[DevBridge] 💰 Open deposit requested (mock: adding 1000)');
+    }
+    this._balance += 1000;
+    this.sendMessage('BALANCE_UPDATE', { balance: this._balance });
+  }
+
+  // ─── Communication ─────────────────────────────────────
+
+  private delayedSend(type: string, payload: unknown, id?: string): void {
+    const delay = this._config.networkDelay;
+    if (delay > 0) {
+      setTimeout(() => this.sendMessage(type, payload, id), delay);
+    } else {
+      this.sendMessage(type, payload, id);
+    }
+  }
+
+  private sendMessage(type: string, payload: unknown, id?: string): void {
+    const message = {
+      __casino_bridge: true,
+      type,
+      payload,
+      id,
+    };
+
+    if (this._config.debug) {
+      console.log('[DevBridge] →', type, payload);
+    }
+
+    // Post to the same window (SDK listens on window)
+    window.postMessage(message, '*');
+  }
+}

package/src/debug/FPSOverlay.ts

@@ -0,0 +1,102 @@
+import { Container, Text } from 'pixi.js';
+import type { Application, Ticker } from 'pixi.js';
+
+/**
+ * FPS overlay for debugging performance.
+ *
+ * Shows FPS, frame time, and draw call count in the corner of the screen.
+ *
+ * @example
+ * ```ts
+ * const fps = new FPSOverlay(app);
+ * fps.show();
+ * ```
+ */
+export class FPSOverlay {
+  private _app: Application;
+  private _container: Container;
+  private _fpsText: Text;
+  private _visible = false;
+  private _samples: number[] = [];
+  private _maxSamples = 60;
+  private _lastUpdate = 0;
+  private _tickFn: ((ticker: Ticker) => void) | null = null;
+
+  constructor(app: Application) {
+    this._app = app;
+
+    this._container = new Container();
+    this._container.label = 'FPSOverlay';
+    this._container.zIndex = 99999;
+
+    this._fpsText = new Text({
+      text: 'FPS: --',
+      style: {
+        fontFamily: 'monospace',
+        fontSize: 14,
+        fill: 0x00ff00,
+        stroke: { color: 0x000000, width: 2 },
+      },
+    });
+    this._fpsText.x = 8;
+    this._fpsText.y = 8;
+
+    this._container.addChild(this._fpsText);
+  }
+
+  /** Show the FPS overlay */
+  show(): void {
+    if (this._visible) return;
+    this._visible = true;
+
+    this._app.stage.addChild(this._container);
+
+    this._tickFn = (ticker: Ticker) => {
+      this._samples.push(ticker.FPS);
+      if (this._samples.length > this._maxSamples) {
+        this._samples.shift();
+      }
+
+      // Update display every ~500ms
+      const now = Date.now();
+      if (now - this._lastUpdate > 500) {
+        const avg = this._samples.reduce((a, b) => a + b, 0) / this._samples.length;
+        const min = Math.min(...this._samples);
+        this._fpsText.text = [
+          `FPS: ${Math.round(avg)} (min: ${Math.round(min)})`,
+          `Frame: ${ticker.deltaMS.toFixed(1)}ms`,
+        ].join('\n');
+        this._lastUpdate = now;
+      }
+    };
+
+    this._app.ticker.add(this._tickFn);
+  }
+
+  /** Hide the FPS overlay */
+  hide(): void {
+    if (!this._visible) return;
+    this._visible = false;
+
+    this._container.removeFromParent();
+    if (this._tickFn) {
+      this._app.ticker.remove(this._tickFn);
+      this._tickFn = null;
+    }
+  }
+
+  /** Toggle visibility */
+  toggle(): void {
+    if (this._visible) {
+      this.hide();
+    } else {
+      this.show();
+    }
+  }
+
+  /** Destroy the overlay */
+  destroy(): void {
+    this.hide();
+    this._container.destroy({ children: true });
+  }
+}

package/src/debug/index.ts

@@ -0,0 +1,3 @@
+export { DevBridge } from './DevBridge';
+export type { DevBridgeConfig } from './DevBridge';
+export { FPSOverlay } from './FPSOverlay';

package/src/index.ts

@@ -0,0 +1,71 @@
+// ─── Core ────────────────────────────────────────────────
+export { GameApplication } from './core/GameApplication';
+export { SceneManager } from './core/SceneManager';
+export { Scene } from './core/Scene';
+export { EventEmitter } from './core/EventEmitter';
+
+// ─── Types ───────────────────────────────────────────────
+export {
+  ScaleMode,
+  Orientation,
+  TransitionType,
+} from './types';
+export type {
+  GameApplicationConfig,
+  LoadingScreenConfig,
+  AssetManifest,
+  AssetBundle,
+  AssetEntry,
+  AudioConfig,
+  IScene,
+  SceneConstructor,
+  TransitionConfig,
+  GameEngineEvents,
+  EasingFunction,
+  TweenOptions,
+  // Re-exported SDK types
+  InitData,
+  GameConfigData,
+  SessionData,
+  PlayParams,
+  PlayResultData,
+} from './types';
+
+// ─── Assets ──────────────────────────────────────────────
+export { AssetManager } from './assets/AssetManager';
+
+// ─── Audio ───────────────────────────────────────────────
+export { AudioManager } from './audio/AudioManager';
+
+// ─── Viewport ────────────────────────────────────────────
+export { ViewportManager } from './viewport/ViewportManager';
+
+// ─── State Machine ───────────────────────────────────────
+export { StateMachine } from './state/StateMachine';
+
+// ─── Animation ───────────────────────────────────────────
+export { Tween } from './animation/Tween';
+export { Timeline } from './animation/Timeline';
+export { Easing } from './animation/Easing';
+export { SpineHelper } from './animation/SpineHelper';
+
+// ─── Input ───────────────────────────────────────────────
+export { InputManager } from './input/InputManager';
+
+// ─── UI ──────────────────────────────────────────────────
+export { Button } from './ui/Button';
+export { ProgressBar } from './ui/ProgressBar';
+export { Label } from './ui/Label';
+export { Panel } from './ui/Panel';
+export { BalanceDisplay } from './ui/BalanceDisplay';
+export { WinDisplay } from './ui/WinDisplay';
+export { Modal } from './ui/Modal';
+export { Toast } from './ui/Toast';
+
+// ─── Loading ─────────────────────────────────────────────
+export { LoadingScene } from './loading/LoadingScene';
+
+// ─── Debug ───────────────────────────────────────────────
+export { DevBridge } from './debug/DevBridge';
+export type { DevBridgeConfig } from './debug/DevBridge';
+export { FPSOverlay } from './debug/FPSOverlay';

package/src/input/InputManager.ts

@@ -0,0 +1,171 @@
+import { EventEmitter } from '../core/EventEmitter';
+
+interface InputEvents {
+  tap: { x: number; y: number };
+  press: { x: number; y: number };
+  release: { x: number; y: number };
+  move: { x: number; y: number };
+  swipe: { direction: 'up' | 'down' | 'left' | 'right'; velocity: number };
+  keydown: { key: string; code: string };
+  keyup: { key: string; code: string };
+}
+
+/**
+ * Unified input manager for touch, mouse, and keyboard.
+ *
+ * Features:
+ * - Unified pointer events (works with touch + mouse)
+ * - Swipe gesture detection
+ * - Keyboard input with isKeyDown state
+ * - Input locking (block input during animations)
+ *
+ * @example
+ * ```ts
+ * const input = new InputManager(app.canvas);
+ *
+ * input.on('tap', ({ x, y }) => console.log('Tapped at', x, y));
+ * input.on('swipe', ({ direction }) => console.log('Swiped', direction));
+ * input.on('keydown', ({ key }) => {
+ *   if (key === ' ') spin();
+ * });
+ *
+ * // Block input during animations
+ * input.lock();
+ * await playAnimation();
+ * input.unlock();
+ * ```
+ */
+export class InputManager extends EventEmitter<InputEvents> {
+  private _canvas: HTMLCanvasElement;
+  private _locked = false;
+  private _keysDown = new Set<string>();
+  private _destroyed = false;
+
+  // Gesture tracking
+  private _pointerStart: { x: number; y: number; time: number } | null = null;
+  private _swipeThreshold = 50; // minimum distance in px
+  private _swipeMaxTime = 300; // max ms for swipe gesture
+
+  constructor(canvas: HTMLCanvasElement) {
+    super();
+    this._canvas = canvas;
+    this.setupPointerEvents();
+    this.setupKeyboardEvents();
+  }
+
+  /** Whether input is currently locked */
+  get locked(): boolean {
+    return this._locked;
+  }
+
+  /** Lock all input (e.g., during animations) */
+  lock(): void {
+    this._locked = true;
+  }
+
+  /** Unlock input */
+  unlock(): void {
+    this._locked = false;
+  }
+
+  /** Check if a key is currently pressed */
+  isKeyDown(key: string): boolean {
+    return this._keysDown.has(key.toLowerCase());
+  }
+
+  /** Destroy the input manager */
+  destroy(): void {
+    this._destroyed = true;
+    this._canvas.removeEventListener('pointerdown', this.onPointerDown);
+    this._canvas.removeEventListener('pointerup', this.onPointerUp);
+    this._canvas.removeEventListener('pointermove', this.onPointerMove);
+    document.removeEventListener('keydown', this.onKeyDown);
+    document.removeEventListener('keyup', this.onKeyUp);
+    this._keysDown.clear();
+    this.removeAllListeners();
+  }
+
+  // ─── Private: Pointer ──────────────────────────────────
+
+  private setupPointerEvents(): void {
+    this._canvas.addEventListener('pointerdown', this.onPointerDown);
+    this._canvas.addEventListener('pointerup', this.onPointerUp);
+    this._canvas.addEventListener('pointermove', this.onPointerMove);
+  }
+
+  private onPointerDown = (e: PointerEvent): void => {
+    if (this._locked || this._destroyed) return;
+
+    const pos = this.getCanvasPosition(e);
+    this._pointerStart = { ...pos, time: Date.now() };
+    this.emit('press', pos);
+  };
+
+  private onPointerUp = (e: PointerEvent): void => {
+    if (this._locked || this._destroyed) return;
+
+    const pos = this.getCanvasPosition(e);
+    this.emit('release', pos);
+
+    // Check for tap vs swipe
+    if (this._pointerStart) {
+      const dx = pos.x - this._pointerStart.x;
+      const dy = pos.y - this._pointerStart.y;
+      const dist = Math.sqrt(dx * dx + dy * dy);
+      const elapsed = Date.now() - this._pointerStart.time;
+
+      if (dist > this._swipeThreshold && elapsed < this._swipeMaxTime) {
+        // Swipe detected
+        const absDx = Math.abs(dx);
+        const absDy = Math.abs(dy);
+        let direction: 'up' | 'down' | 'left' | 'right';
+
+        if (absDx > absDy) {
+          direction = dx > 0 ? 'right' : 'left';
+        } else {
+          direction = dy > 0 ? 'down' : 'up';
+        }
+
+        this.emit('swipe', { direction, velocity: dist / elapsed });
+      } else if (dist < 10) {
+        // Tap (minimal movement)
+        this.emit('tap', pos);
+      }
+    }
+
+    this._pointerStart = null;
+  };
+
+  private onPointerMove = (e: PointerEvent): void => {
+    if (this._locked || this._destroyed) return;
+    this.emit('move', this.getCanvasPosition(e));
+  };
+
+  private getCanvasPosition(e: PointerEvent): { x: number; y: number } {
+    const rect = this._canvas.getBoundingClientRect();
+    return {
+      x: e.clientX - rect.left,
+      y: e.clientY - rect.top,
+    };
+  }
+
+  // ─── Private: Keyboard ─────────────────────────────────
+
+  private setupKeyboardEvents(): void {
+    document.addEventListener('keydown', this.onKeyDown);
+    document.addEventListener('keyup', this.onKeyUp);
+  }
+
+  private onKeyDown = (e: KeyboardEvent): void => {
+    if (this._locked || this._destroyed) return;
+    this._keysDown.add(e.key.toLowerCase());
+    this.emit('keydown', { key: e.key, code: e.code });
+  };
+
+  private onKeyUp = (e: KeyboardEvent): void => {
+    if (this._destroyed) return;
+    this._keysDown.delete(e.key.toLowerCase());
+    if (this._locked) return;
+    this.emit('keyup', { key: e.key, code: e.code });
+  };
+}

package/src/input/index.ts

@@ -0,0 +1 @@
+export { InputManager } from './InputManager';