1 files changed, 21 insertions, 1 deletions
diff --git a/src/components/GameCanvas.tsx b/src/components/GameCanvas.tsx
index ea93c64..5cb40a6 100644
--- a/src/components/GameCanvas.tsx
+++ b/src/components/GameCanvas.tsx
@@ -1,4 +1,5 @@
-import { useRef } from "react";
+import { useState, useEffect, useRef } from "react";
+import { TheAbstractionEngine, Game } from "../engine";
 
 export interface GameCanvasProps {
   width: number;
@@ -7,6 +8,25 @@ export interface GameCanvasProps {
 
 export const GameCanvas = ({ width, height }: GameCanvasProps) => {
   const canvasRef = useRef<HTMLCanvasElement>(null);
+  const [_game, setGame] = useState<TheAbstractionEngine>();
+
+  useEffect(() => {
+    if (canvasRef.current) {
+      const canvas = canvasRef.current;
+      const ctx = canvas.getContext("2d");
+      if (ctx) {
+        const game = new Game();
+        const theAbstractionEngine = new TheAbstractionEngine(game, ctx);
+
+        theAbstractionEngine.init().then(() => {
+          theAbstractionEngine.play();
+          setGame(theAbstractionEngine);
+        });
+
+        return () => theAbstractionEngine.stop();
+      }
+    }
+  }, [canvasRef]);
 
   return (
     <div className="centered-game">