Files
Pac-Man/web/pages/+onPageTransitionStart.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

23 lines
890 B
TypeScript

import type { OnPageTransitionStartAsync } from "vike/types";
import { getPacmanWindow } from "@/lib/pacman";
import { setPendingNavigation } from "@/lib/navigation";
// Must match --transition-duration in layouts/tailwind.css
const TRANSITION_DURATION = 200;
export const onPageTransitionStart: OnPageTransitionStartAsync = async (pageContext) => {
console.log("Page transition start");
setPendingNavigation(pageContext.urlPathname);
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();
}
// Wait for fade-out animation to complete before page content changes
await new Promise((resolve) => setTimeout(resolve, TRANSITION_DURATION));
};