mirror of
https://github.com/Xevion/Pac-Man.git
synced 2025-12-06 03:15:48 -06:00
c306e992c4
The render dirty flag was being reset instead of accumulated, causing the game to become stuck and unplayable in web builds. Changed from assignment to bitwise OR to preserve all dirty state updates. Also adds game layout component and updates Justfile to build frontend.
41 lines
1.0 KiB
TypeScript
41 lines
1.0 KiB
TypeScript
import { useEffect } from "react";
|
|
|
|
export default function Page() {
|
|
useEffect(() => {
|
|
if (!(window as any).Module) {
|
|
const canvas = document.getElementById("canvas");
|
|
|
|
(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();
|
|
};
|
|
}
|
|
}, []);
|
|
|
|
return (
|
|
<div className="mt-4 flex justify-center h-[calc(100vh-120px)]">
|
|
<div
|
|
className="block border-1 border-yellow-400/50 aspect-[5/6] h-[min(calc(100vh-120px),_calc(95vw_*_6/5))] w-auto"
|
|
style={{
|
|
boxShadow:
|
|
"0 0 12px rgba(250, 204, 21, 0.35), 0 0 2px rgba(255, 255, 255, 0.25)",
|
|
}}
|
|
>
|
|
<canvas id="canvas" className="w-full h-full" />
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|