refocus canvas on lambda factory clsoe

1 files changed, 10 insertions, 1 deletions

diff --git a/src/components/GameCanvas.tsx b/src/components/GameCanvas.tsx
index 0ea7180..09351e3 100644
--- a/src/components/GameCanvas.tsx
+++ b/src/components/GameCanvas.tsx
@@ -1,5 +1,6 @@
 import { useState, useEffect, useRef } from "react";
 import { TheAbstractionEngine, Game } from "../engine";
+import { Miscellaneous } from "../engine/config";
 
 export interface GameCanvasProps {
   width: number;
@@ -21,6 +22,8 @@ export const GameCanvas = ({ width, height }: GameCanvasProps) => {
         theAbstractionEngine.init().then(() => {
           theAbstractionEngine.play();
           setGame(theAbstractionEngine);
+
+          canvas.focus();
         });
 
         return () => theAbstractionEngine.stop();
@@ -30,7 +33,13 @@ export const GameCanvas = ({ width, height }: GameCanvasProps) => {
 
   return (
     <div className="centered-game">
-      <canvas ref={canvasRef} width={width} height={height}></canvas>
+      <canvas
+        id={Miscellaneous.CANVAS_ID}
+        tabIndex={1}
+        ref={canvasRef}
+        width={width}
+        height={height}
+      ></canvas>
     </div>
   );
 };