1 files changed, 23 insertions, 10 deletions
diff --git a/src/components/GameCanvas.tsx b/src/components/GameCanvas.tsx
index 09351e3..b6c585d 100644
--- a/src/components/GameCanvas.tsx
+++ b/src/components/GameCanvas.tsx
@@ -1,6 +1,7 @@
 import { useState, useEffect, useRef } from "react";
 import { TheAbstractionEngine, Game } from "../engine";
 import { Miscellaneous } from "../engine/config";
+import { Title } from "./Title";
 
 export interface GameCanvasProps {
   width: number;
@@ -10,6 +11,8 @@ export interface GameCanvasProps {
 export const GameCanvas = ({ width, height }: GameCanvasProps) => {
   const canvasRef = useRef<HTMLCanvasElement>(null);
   const [game, setGame] = useState<TheAbstractionEngine>();
+  const [ready, setReady] = useState(false);
+  const [loading, setLoading] = useState(true);
 
   useEffect(() => {
     if (canvasRef.current && !game) {
@@ -21,25 +24,35 @@ export const GameCanvas = ({ width, height }: GameCanvasProps) => {
 
         theAbstractionEngine.init().then(() => {
           theAbstractionEngine.play();
-          setGame(theAbstractionEngine);
-
           canvas.focus();
+
+          setGame(theAbstractionEngine);
+          setLoading(false);
         });
 
         return () => theAbstractionEngine.stop();
       }
     }
-  }, [canvasRef]);
+  }, [canvasRef, ready]);
+
+  if (ready) {
+    return (
+      <div className="centered-game">
+        <canvas
+          id={Miscellaneous.CANVAS_ID}
+          tabIndex={1}
+          ref={canvasRef}
+          width={loading ? 50 : width}
+          height={loading ? 50 : height}
+        ></canvas>
+        {loading && <span className="loading">Loading...</span>}
+      </div>
+    );
+  }
 
   return (
     <div className="centered-game">
-      <canvas
-        id={Miscellaneous.CANVAS_ID}
-        tabIndex={1}
-        ref={canvasRef}
-        width={width}
-        height={height}
-      ></canvas>
+      <Title setReady={setReady} />
     </div>
   );
 };