refocus canvas on lambda factory clsoe

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>
   );
 };

src/engine/TheAbstractionEngine.ts

@@ -94,19 +94,19 @@ export class TheAbstractionEngine {
   }
 
   private addWindowEventListenersToInputSystem(input: Input) {
-    window.addEventListener("keydown", (e) => {
+    this.ctx.canvas.addEventListener("keydown", (e) => {
       if (!e.repeat) {
         input.keyPressed(e.key.toLowerCase());
       }
     });
 
-    window.addEventListener("keyup", (e) =>
+    this.ctx.canvas.addEventListener("keyup", (e) =>
       input.keyReleased(e.key.toLowerCase()),
     );
 
-    window.addEventListener("blur", () => input.clearKeys());
+    this.ctx.canvas.addEventListener("blur", () => input.clearKeys());
 
-    window.addEventListener("mousemove", (e) => {
+    this.ctx.canvas.addEventListener("mousemove", (e) => {
       const canvas = this.ctx.canvas;
       const rect = canvas.getBoundingClientRect();
 

src/engine/config/constants.ts

@@ -10,15 +10,19 @@ export enum Action {
 export namespace KeyConstants {
   export const KeyActions: Record<string, Action> = {
     a: Action.MOVE_LEFT,
+    h: Action.MOVE_LEFT,
     arrowleft: Action.MOVE_LEFT,
 
     d: Action.MOVE_RIGHT,
+    l: Action.MOVE_RIGHT,
     arrowright: Action.MOVE_RIGHT,
 
     w: Action.MOVE_UP,
+    k: Action.MOVE_UP,
     arrowup: Action.MOVE_UP,
 
     s: Action.MOVE_DOWN,
+    j: Action.MOVE_DOWN,
     arrowdown: Action.MOVE_DOWN,
 
     " ": Action.INTERACT,
@@ -56,4 +60,5 @@ export namespace Miscellaneous {
   export const GRID_CELL_HEIGHT = Math.floor(HEIGHT / GRID_ROWS);
 
   export const MODAL_ID = "modal";
+  export const CANVAS_ID = "canvas";
 }

src/engine/entities/LambdaFactory.ts

@@ -1,4 +1,10 @@
-import { IMAGES, SPRITE_SPECS, SpriteSpec, Sprites } from "../config";
+import {
+  IMAGES,
+  Miscellaneous,
+  SPRITE_SPECS,
+  SpriteSpec,
+  Sprites,
+} from "../config";
 import { Entity, EntityNames } from ".";
 import {
   BoundingBox,
@@ -94,16 +100,45 @@ export class LambdaFactory extends Entity {
     }
 
     let modalOpen = false;
-    const interaction = () => {
+    const close = () => {
-      if (modalOpen) {
       modalOpen = false;
       closeModal();
+
+      const spawner = this.getComponent<LambdaSpawn>(
+        ComponentNames.LambdaSpawn,
+      );
+      spawner.code = (
+        document.getElementById("code") as HTMLTextAreaElement
+      ).value;
+      this.addComponent(spawner);
+
+      document.getElementById(Miscellaneous.CANVAS_ID)!.focus();
+      return;
+    };
+
+    const interaction = () => {
+      if (modalOpen) {
+        close();
         return;
       }
+
       modalOpen = true;
-      openModal(this.code);
+      openModal(this.codeEditor(this.code));
+
+      document.getElementById("close-modal")!.addEventListener("click", close);
     };
 
     this.addComponent(new Interactable(interaction));
   }
+
+  private codeEditor(code: string) {
+    return `
+      <div>
+        <textarea id="code" autofocus="autofocus" rows="10" cols="50">
+        ${code}
+        </textarea>
+        <button id="close-modal">Close</button>
+      </div>
+   `;
+  }
 }

src/engine/systems/Collision.ts

@@ -1,7 +1,7 @@
 import { System, SystemNames } from ".";
 import { Game } from "..";
 import { Entity, EntityNames } from "../entities";
-import { BoundingBox, Colliding, ComponentNames, Grid } from "../components";
+import { BoundingBox, ComponentNames, Grid } from "../components";
 
 const collisionMap: Record<string, Set<string>> = {
   [EntityNames.Key]: new Set([EntityNames.LockedDoor]),