From 73b351b5941b9d11fedf7dbf6c21e90e43f5d4b3 Mon Sep 17 00:00:00 2001
From: Miguel Ripoll <3296866+MiguelRipoll23@users.noreply.github.com>
Date: Sat, 7 Dec 2024 12:01:27 +0100
Subject: [PATCH] Refactor GamePointer to use canvas for event listeners and
 update coordinate handling (#15)

---
 src/models/game-controller.ts     |  2 +-
 src/models/game-pointer.ts        | 30 +++++++++++++++++-------------
 src/services/game-loop-service.ts |  1 -
 3 files changed, 18 insertions(+), 15 deletions(-)

diff --git a/src/models/game-controller.ts b/src/models/game-controller.ts
index eb36cb0..6e2e36a 100644
--- a/src/models/game-controller.ts
+++ b/src/models/game-controller.ts
@@ -36,7 +36,7 @@ export class GameController {
   ) {
     this.gameState = new GameState();
     this.gameFrame = new GameFrame();
-    this.gamePointer = new GamePointer();
+    this.gamePointer = new GamePointer(this.canvas);
     this.gameKeyboard = new GameKeyboard();
 
     this.transitionService = new ScreenTransitionService(this.gameFrame);
diff --git a/src/models/game-pointer.ts b/src/models/game-pointer.ts
index 4c13db1..f5507cf 100644
--- a/src/models/game-pointer.ts
+++ b/src/models/game-pointer.ts
@@ -13,6 +13,10 @@ export class GamePointer {
 
   private preventDefault: boolean = true;
 
+  constructor(private readonly canvas: HTMLCanvasElement) {
+    this.addEventListeners();
+  }
+
   public getX(): number {
     return this.x;
   }
@@ -87,7 +91,7 @@ export class GamePointer {
   }
 
   public addEventListeners(): void {
-    window.addEventListener(
+    this.canvas.addEventListener(
       "touchstart",
       (event) => {
         if (this.preventDefault) {
@@ -97,7 +101,7 @@ export class GamePointer {
       { passive: false }
     );
 
-    window.addEventListener(
+    this.canvas.addEventListener(
       "touchmove",
       (event) => {
         if (this.preventDefault) {
@@ -107,20 +111,20 @@ export class GamePointer {
       { passive: false }
     );
 
-    window.addEventListener(
+    this.canvas.addEventListener(
       "pointermove",
       (event) => {
         if (this.preventDefault) {
           event.preventDefault();
         }
 
-        this.setX(event.clientX);
-        this.setY(event.clientY);
+        this.setX(event.offsetX);
+        this.setY(event.offsetY);
       },
       { passive: false }
     );
 
-    window.addEventListener(
+    this.canvas.addEventListener(
       "pointerdown",
       (event) => {
         if (this.preventDefault) {
@@ -128,24 +132,24 @@ export class GamePointer {
         }
 
         this.setType(event.pointerType as PointerType);
-        this.setX(event.clientX);
-        this.setY(event.clientY);
-        this.setInitialX(event.clientX);
-        this.setInitialY(event.clientY);
+        this.setX(event.offsetX);
+        this.setY(event.offsetY);
+        this.setInitialX(event.offsetX);
+        this.setInitialY(event.offsetY);
         this.setPressing(true);
       },
       { passive: false }
     );
 
-    window.addEventListener(
+    this.canvas.addEventListener(
       "pointerup",
       (event) => {
         if (this.preventDefault) {
           event.preventDefault();
         }
 
-        this.setX(event.clientX);
-        this.setY(event.clientY);
+        this.setX(event.offsetX);
+        this.setY(event.offsetY);
         this.setPressing(false);
         this.setPressed(true);
       },
diff --git a/src/services/game-loop-service.ts b/src/services/game-loop-service.ts
index 7a572cd..d8164b9 100644
--- a/src/services/game-loop-service.ts
+++ b/src/services/game-loop-service.ts
@@ -72,7 +72,6 @@ export class GameLoopService {
   }
 
   private addEventListeners(): void {
-    this.gamePointer.addEventListeners();
     this.gameKeyboard.addEventListeners();
   }