0.3.0-0-pre.5

Web/game-snake-poc/frontend/ts/game.ts

@@ -1,7 +1,9 @@
 // file: Web/game-snake-poc/frontend/ts/game.ts
-// version: 2
+// version: 3
 
 import init, { SnakeWasmGame } from "@snake-wasm";
+import { webDebug, webInfo } from "./logging";
+import { BrowserRuntimeProvenance, type SnakeInputSource } from "./provenance";
 
 const FRAME_MILLIS = 16;
 const MAX_FRAME_ELAPSED_MILLIS = 250;
@@ -9,7 +11,12 @@ const MAX_FRAME_ELAPSED_MILLIS = 250;
 export type SnakeDirection = "left" | "right" | "up" | "down";
 
 export interface SnakeWebSession {
-    queueDirection(direction: SnakeDirection): void;
+    queueDirection(direction: SnakeDirection, source: SnakeInputSource): void;
+    pause(): void;
+    resume(): void;
+    renderNow(): void;
+    refreshDeviceClass(): void;
+    dispose(): void;
 }
 
 function color(red: number, green: number, blue: number): string {
@@ -71,18 +78,42 @@ export async function startGame(
     canvas: HTMLCanvasElement,
     score: HTMLOutputElement,
     length: HTMLOutputElement,
+    provenanceOutput: HTMLOutputElement,
 ): Promise<SnakeWebSession> {
     await init();
+    webInfo("snake-web-runtime", "wasm_initialized");
     const context = canvas.getContext("2d");
     if (context === null) {
         throw new Error("Le contexte Canvas 2D est indisponible.");
     }
     const renderingContext: CanvasRenderingContext2D = context;
     const game = new SnakeWasmGame();
+    const provenance = new BrowserRuntimeProvenance(game, provenanceOutput);
     let previous = performance.now();
     let accumulator = 0;
+    let animationFrame: number | null = null;
+    let running = false;
+    let disposed = false;
+
+    function renderNow(): void {
+        if (disposed) {
+            return;
+        }
+        render(game, canvas, renderingContext, score, length);
+    }
+
+    function schedule(): void {
+        if (!running || disposed || animationFrame !== null) {
+            return;
+        }
+        animationFrame = window.requestAnimationFrame(frame);
+    }
 
     function frame(now: number): void {
+        animationFrame = null;
+        if (!running || disposed) {
+            return;
+        }
         const elapsed = Math.min(Math.max(0, now - previous), MAX_FRAME_ELAPSED_MILLIS);
         previous = now;
         accumulator += elapsed;
@@ -90,15 +121,59 @@ export async function startGame(
             game.tick();
             accumulator -= FRAME_MILLIS;
         }
-        render(game, canvas, renderingContext, score, length);
-        window.requestAnimationFrame(frame);
+        renderNow();
+        schedule();
     }
 
-    render(game, canvas, renderingContext, score, length);
-    window.requestAnimationFrame(frame);
+    function pause(): void {
+        if (!running || disposed) {
+            return;
+        }
+        running = false;
+        accumulator = 0;
+        if (animationFrame !== null) {
+            window.cancelAnimationFrame(animationFrame);
+            animationFrame = null;
+        }
+        webDebug("snake-web-runtime", "runtime_paused");
+    }
+
+    function resume(): void {
+        if (running || disposed) {
+            return;
+        }
+        previous = performance.now();
+        accumulator = 0;
+        running = true;
+        schedule();
+        webDebug("snake-web-runtime", "runtime_resumed");
+    }
+
+    renderNow();
+    resume();
     return {
-        queueDirection(direction: SnakeDirection): void {
+        queueDirection(direction: SnakeDirection, source: SnakeInputSource): void {
+            if (disposed) {
+                return;
+            }
+            provenance.recordInput(source);
             queueDirection(game, direction);
         },
+        pause,
+        resume,
+        renderNow,
+        refreshDeviceClass(): void {
+            if (!disposed) {
+                provenance.refreshDeviceClass();
+            }
+        },
+        dispose(): void {
+            if (disposed) {
+                return;
+            }
+            pause();
+            disposed = true;
+            game.free();
+        },
     };
 }