Add DoomCanvas component

Author: Selvio

src/assets/Cardano.wad renamed to public/Cardano.wad

@@ -8,7 +8,7 @@ import GameContextProvider from "./context/GameContextProvider";
 const queryClient = new QueryClient();
 
 export default function App() {
-  const [isGameStarted, setIsGameStarted] = useState(false);
+  const [isGameStarted, setIsGameStarted] = useState(true);
 
   return (
     <QueryClientProvider client={queryClient}>

src/assets/default.cfg renamed to public/default.cfg

@@ -0,0 +1,64 @@
+import React, { useEffect, useRef } from "react";
+import { EmscriptenModule } from "../../types";
+
+const DoomCanvas: React.FC = () => {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+
+    if (!canvas) {
+      console.error("Canvas element not found.");
+      return;
+    }
+
+    const handleContextLost = (e: Event) => {
+      alert("WebGL context lost. You will need to reload the page.");
+      e.preventDefault();
+    };
+
+    canvas.addEventListener("webglcontextlost", handleContextLost, false);
+
+    // Setup configuration for doom-wasm
+    const Module: EmscriptenModule = {
+      noInitialRun: true,
+      preRun: function () {
+        const files = [
+          "doom1.wad",
+          "freedoom2.wad",
+          "default.cfg",
+          "Cardano.wad",
+        ];
+        files.forEach((file) => {
+          Module.FS!.createPreloadedFile("/", file, file, true, true);
+        });
+      },
+      printErr: console.error,
+      postRun: () => {},
+      canvas: canvas,
+      print: (text: string) => {
+        console.log("stdout:", text);
+      },
+      setStatus: (text: string) => {
+        console.log("setStatus:", text);
+      },
+    };
+
+    // Attach Module to the window object to make it globally accessible
+    window.Module = Module;
+
+    // Dynamically load websockets-doom.js
+    const script = document.createElement("script");
+    script.src = "/websockets-doom.js";
+    document.body.appendChild(script);
+
+    return () => {
+      canvas.removeEventListener("webglcontextlost", handleContextLost);
+      document.body.removeChild(script);
+    };
+  }, []);
+
+  return <canvas id="canvas" ref={canvasRef} className="w-full h-full" />;
+};
+
+export default DoomCanvas;

src/assets/doom1.wad renamed to public/doom1.wad

@@ -0,0 +1 @@
+export { default } from "./DoomCanvas";

src/assets/freedoom2.wad renamed to public/freedoom2.wad

@@ -1,4 +1,5 @@
 import Card from "../Card";
+import DoomCanvas from "../DoomCanvas";
 import GlobalTotals from "../GlobalTotals";
 import GlobalTPS from "../GlobalTPS";
 import HydraHeadLiveTxs from "../HydraHeadLiveTxs";
@@ -30,7 +31,9 @@ const GameView = () => {
           />
           <HydraHeadLiveTxs />
         </div>
-        <Card className="h-[40rem]">dsad</Card>
+        <Card className="h-[40rem]">
+          <DoomCanvas />
+        </Card>
         <div className="w-80 flex flex-col gap-4">
           <GlobalTPS size="sm" titleAlign="left" />
           <Card className="text-white py-3 px-4 text-sm leading-3">