feat(web): implement game lifecycle management for SPA navigation

Add stop_game and restart_game FFI functions to properly pause/resume the game loop during page transitions, preventing resource leaks and audio issues when navigating between pages

web/lib/pacman.ts

@@ -0,0 +1,16 @@
+export interface PacmanModule {
+  canvas: HTMLCanvasElement;
+  _start_game?: () => void;
+  _stop_game?: () => void;
+  _restart_game?: () => void;
+  locateFile: (path: string) => string;
+  preRun: unknown[];
+}
+
+export interface PacmanWindow extends Window {
+  Module?: PacmanModule;
+  pacmanReady?: () => void;
+  SDL_CANVAS_ID?: string;
+}
+
+export const getPacmanWindow = (): PacmanWindow => window as unknown as PacmanWindow;

web/pages/+onPageTransitionEnd.ts

@@ -1,6 +1,35 @@
 import type { OnPageTransitionEndAsync } from "vike/types";
+import { getPacmanWindow } from "@/lib/pacman";
 
-export const onPageTransitionEnd: OnPageTransitionEndAsync = async () => {
+export const onPageTransitionEnd: OnPageTransitionEndAsync = async (
+  pageContext
+) => {
   console.log("Page transition end");
   document.querySelector("body")?.classList.remove("page-is-transitioning");
+
+  // Restart the game loop when returning to the game page
+  if (pageContext.urlPathname === "/") {
+    const win = getPacmanWindow();
+    const module = win.Module;
+
+    if (module?._restart_game) {
+      const canvas = document.getElementById("canvas") as HTMLCanvasElement | null;
+      if (!canvas) {
+        console.error("Canvas element not found during game restart");
+        return;
+      }
+
+      // Update canvas reference BEFORE restart - App::new() will read from Module.canvas
+      module.canvas = canvas;
+      // SDL2's Emscripten backend reads this for canvas lookup
+      win.SDL_CANVAS_ID = "#canvas";
+
+      try {
+        console.log("Restarting game with fresh App instance");
+        module._restart_game();
+      } catch (error) {
+        console.error("Failed to restart game:", error);
+      }
+    }
+  }
 };

web/pages/+onPageTransitionStart.ts

@@ -1,6 +1,14 @@
 import type { OnPageTransitionStartAsync } from "vike/types";
+import { getPacmanWindow } from "@/lib/pacman";
 
 export const onPageTransitionStart: OnPageTransitionStartAsync = async () => {
   console.log("Page transition start");
   document.querySelector("body")?.classList.add("page-is-transitioning");
+
+  // Stop the game loop when navigating away from the game page
+  const win = getPacmanWindow();
+  if (win.Module?._stop_game) {
+    console.log("Stopping game loop for page transition");
+    win.Module._stop_game();
+  }
 };

web/pages/index/+Page.tsx

@@ -1,44 +1,58 @@
 import { useCallback, useEffect, useState } from "react";
+import { getPacmanWindow } from "@/lib/pacman";
 
 export default function Page() {
   const [gameReady, setGameReady] = useState(false);
   const [gameStarted, setGameStarted] = useState(false);
 
   useEffect(() => {
-    // Set up callback for when WASM signals it's ready
-    (window as any).pacmanReady = () => {
+    const win = getPacmanWindow();
+    
+    // Always set up the ready callback (restart_game will call it too)
+    win.pacmanReady = () => {
       setGameReady(true);
     };
 
-    if (!(window as any).Module) {
-      const canvas = document.getElementById("canvas");
+    const module = win.Module;
 
-      (window as any).Module = {
-        canvas: canvas,
-        locateFile: (path: string) => {
-          return path.startsWith("/") ? path : `/${path}`;
-        },
-        preRun: [],
-      };
-
-      const script = document.createElement("script");
-      script.src = "/pacman.js";
-      script.async = false;
-      document.body.appendChild(script);
-
-      return () => {
-        script.remove();
-        delete (window as any).pacmanReady;
-      };
+    // If Module already exists (returning after navigation),
+    // the onPageTransitionEnd hook handles calling restart_game
+    if (module?._restart_game) {
+      setGameStarted(false);
+      // Don't delete pacmanReady here - restart_game needs it
+      return;
     }
+
+    // First time initialization
+    const canvas = document.getElementById("canvas") as HTMLCanvasElement | null;
+    if (!canvas) {
+      console.error("Canvas element not found");
+      return;
+    }
+
+    win.Module = {
+      canvas,
+      locateFile: (path: string) => {
+        return path.startsWith("/") ? path : `/${path}`;
+      },
+      preRun: [],
+    };
+
+    const script = document.createElement("script");
+    script.src = "/pacman.js";
+    script.async = false;
+    document.body.appendChild(script);
+
+    return () => {
+      delete win.pacmanReady;
+    };
   }, []);
 
   const handleInteraction = useCallback(() => {
     if (gameReady && !gameStarted) {
-      // Call the exported Rust function to start the game
-      const module = (window as any).Module;
-      if (module && module._start_game) {
-        module._start_game();
+      const win = getPacmanWindow();
+      if (win.Module?._start_game) {
+        win.Module._start_game();
         setGameStarted(true);
       }
     }

web/vite.config.ts

@@ -2,9 +2,15 @@ import tailwindcss from "@tailwindcss/vite";
 import react from "@vitejs/plugin-react";
 import vike from "vike/plugin";
 import { defineConfig } from "vite";
+import path from "path";
 
 export default defineConfig({
   plugins: [vike(), react(), tailwindcss()],
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "."),
+    },
+  },
   build: {
     target: "es2022",
   },