Files
Pac-Man/web/pages/+onPageTransitionEnd.ts
Xevion 3bb3908853 feat(web): add smooth page transitions and WASM loading states
- Implement navigation state tracking with optimistic UI updates
- Add loading spinner and error handling for WASM initialization
- Insert browser yield points during game initialization to prevent freezing
- Redesign leaderboard with tabbed navigation and mock data structure
- Add utility CSS classes for consistent page layouts
2025-12-29 03:33:43 -06:00

46 lines
1.4 KiB
TypeScript

import type { OnPageTransitionEndAsync } from "vike/types";
import { getPacmanWindow } from "@/lib/pacman";
import { setPendingNavigation } from "@/lib/navigation";
export const onPageTransitionEnd: OnPageTransitionEndAsync = async (pageContext) => {
console.log("Page transition end");
setPendingNavigation(null);
document.querySelector("body")?.classList.remove("page-is-transitioning");
// Restart the game loop when returning to the game page
if (pageContext.urlPathname === "/") {
// Defer game restart to allow fade-in animation to complete first
// This prevents the heavy WebGL initialization from blocking the UI
requestAnimationFrame(() => {
setTimeout(() => {
restartGame();
}, 0);
});
}
};
function restartGame() {
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);
}
}
}