eyes follow cursor

1 files changed, 36 insertions, 2 deletions

diff --git a/src/engine/TheAbstractionEngine.ts b/src/engine/TheAbstractionEngine.ts
index e720293..76ca7e9 100644
--- a/src/engine/TheAbstractionEngine.ts
+++ b/src/engine/TheAbstractionEngine.ts
@@ -1,7 +1,7 @@
 import { Game } from ".";
 import { loadAssets } from "./config";
 import { Player } from "./entities";
-import { Render } from "./systems";
+import { FacingDirection, Input, Render } from "./systems";
 
 export class TheAbstractionEngine {
   private game: Game;
@@ -17,7 +17,14 @@ export class TheAbstractionEngine {
   public async init() {
     await loadAssets();
 
-    [new Render(this.ctx)].forEach((system) => this.game.addSystem(system));
+    const inputSystem = new Input();
+    this.addWindowEventListenersToInputSystem(inputSystem);
+
+    const facingDirectionSystem = new FacingDirection(inputSystem);
+
+    [new Render(this.ctx), inputSystem, facingDirectionSystem].forEach(
+      (system) => this.game.addSystem(system),
+    );
 
     const player = new Player();
     this.game.addEntity(player);
@@ -39,4 +46,31 @@ export class TheAbstractionEngine {
       this.animationFrameId = null;
     }
   }
+
+  private addWindowEventListenersToInputSystem(input: Input) {
+    window.addEventListener("keydown", (e) => {
+      if (!e.repeat) {
+        input.keyPressed(e.key.toLowerCase());
+      }
+    });
+
+    window.addEventListener("keyup", (e) =>
+      input.keyReleased(e.key.toLowerCase()),
+    );
+
+    window.addEventListener("blur", () => input.clearKeys());
+
+    window.addEventListener("mousemove", (e) => {
+      const canvas = this.ctx.canvas;
+      const rect = canvas.getBoundingClientRect();
+
+      const scaleX = canvas.width / rect.width;
+      const scaleY = canvas.height / rect.height;
+
+      const x = (e.clientX - rect.left) * scaleX;
+      const y = (e.clientY - rect.top) * scaleY;
+
+      input.setMousePosition({ x, y });
+    });
+  }
 }