From 80a9e2b95c4c3f62dd0af95e647ce2b18b456f25 Mon Sep 17 00:00:00 2001
From: tiennm99 <tiennm99@outlook.com>
Date: Wed, 11 Mar 2026 02:56:33 +0000
Subject: [PATCH] feat(02-03): add debounced canvas resize handler
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add resizeTimeout field for debounce timer
- Add handleResize() method with 150ms debounce
- Add window resize event listener
- Recalculate canvas size on resize
- Trigger renderer.render() after resize

Implements Task 3 of plan 02-03


🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/game/Game.ts | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/src/game/Game.ts b/src/game/Game.ts
index a812925..e6e455d 100644
--- a/src/game/Game.ts
+++ b/src/game/Game.ts
@@ -18,6 +18,7 @@ export class Game {
   readonly events: TypedEventEmitter<GameEvents>;
   readonly gridManager: GridManager;
   readonly renderer: Renderer;
+  private resizeTimeout: number | undefined;
 
   constructor() {
     // Get canvas element
@@ -125,6 +126,7 @@ export class Game {
   public setupInputListeners(): void {
     this.canvas.addEventListener('click', this.handleClick);
     this.canvas.addEventListener('touchstart', this.handleTouch, { passive: true });
+    window.addEventListener('resize', this.handleResize);
   }
 
   /**
@@ -175,4 +177,16 @@ export class Game {
       this.gridManager.selectTile(tile);
     }
   }
+
+  /**
+   * Handle window resize events with debouncing
+   * Recalculates canvas size and re-renders after debounce delay
+   */
+  private handleResize = (): void => {
+    clearTimeout(this.resizeTimeout);
+    this.resizeTimeout = window.setTimeout(() => {
+      this.setupCanvas();
+      this.renderer.render();
+    }, 150); // 150ms debounce per RESEARCH.md
+  };
 }