Refactor GamePointer to use canvas for event listeners and update coo…

…rdinate handling (#15)

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

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,45 +111,45 @@ 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) {
           event.preventDefault();
         }
 
         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);
       },

src/services/game-loop-service.ts

@@ -72,7 +72,6 @@ export class GameLoopService {
   }
 
   private addEventListeners(): void {
-    this.gamePointer.addEventListeners();
     this.gameKeyboard.addEventListeners();
   }