📝 update CHANGELOG for Issue #5 mouse handling

- Scroll wheel now zooms toward the mouse cursor instead of screen center
- Middle mouse button held: pan camera by dragging
- Both actions respect current zoom level

CHANGELOG.md

@@ -20,6 +20,8 @@ Format follows [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 - Villagers are now called **Nisse** throughout the UI (panel, controls hint, stockpile display, context menu, spawn message)
 
 ### Added
+- Scroll wheel now zooms toward the mouse cursor position instead of the screen center
+- Middle mouse button held: pan the camera by dragging
 - Right-click context menu: suppresses browser default, shows Build and Nisse actions in the game world
 - Initial project setup: Phaser 3 + TypeScript + Vite
 - Core scenes: `BootScene`, `GameScene`, `UIScene`

src/systems/CameraSystem.ts

@@ -23,6 +23,9 @@ export class CameraSystem {
   }
   private saveTimer = 0
   private readonly SAVE_TICK = 2000
+  private middlePanActive = false
+  private lastPanX = 0
+  private lastPanY = 0
 
   constructor(scene: Phaser.Scene, adapter: LocalAdapter) {
     this.scene = scene
@@ -49,10 +52,48 @@ export class CameraSystem {
       d:     kb.addKey(Phaser.Input.Keyboard.KeyCodes.D),
     }
 
-    // Scroll wheel zoom
-    this.scene.input.on('wheel', (_ptr: Phaser.Input.Pointer, _objs: unknown, _dx: number, dy: number) => {
-      const zoom = Phaser.Math.Clamp(cam.zoom - Math.sign(dy) * ZOOM_STEP, MIN_ZOOM, MAX_ZOOM)
-      cam.setZoom(zoom)
+    // Scroll wheel zoom — zoom toward mouse pointer position
+    this.scene.input.on('wheel', (ptr: Phaser.Input.Pointer, _objs: unknown, _dx: number, dy: number) => {
+      const oldZoom = cam.zoom
+      const newZoom = Phaser.Math.Clamp(oldZoom - Math.sign(dy) * ZOOM_STEP, MIN_ZOOM, MAX_ZOOM)
+      if (newZoom === oldZoom) return
+
+      // World point under mouse before zoom
+      const worldX = cam.scrollX + ptr.x / oldZoom
+      const worldY = cam.scrollY + ptr.y / oldZoom
+
+      cam.setZoom(newZoom)
+
+      // Adjust scroll so the same world point stays under the mouse
+      cam.scrollX = worldX - ptr.x / newZoom
+      cam.scrollY = worldY - ptr.y / newZoom
+    })
+
+    // Middle-click pan: start on button down
+    this.scene.input.on('pointerdown', (ptr: Phaser.Input.Pointer) => {
+      if (ptr.middleButtonDown()) {
+        this.middlePanActive = true
+        this.lastPanX = ptr.x
+        this.lastPanY = ptr.y
+      }
+    })
+
+    // Middle-click pan: move camera while held
+    this.scene.input.on('pointermove', (ptr: Phaser.Input.Pointer) => {
+      if (!this.middlePanActive) return
+      const dx = (ptr.x - this.lastPanX) / cam.zoom
+      const dy = (ptr.y - this.lastPanY) / cam.zoom
+      cam.scrollX -= dx
+      cam.scrollY -= dy
+      this.lastPanX = ptr.x
+      this.lastPanY = ptr.y
+    })
+
+    // Middle-click pan: stop on button release
+    this.scene.input.on('pointerup', (ptr: Phaser.Input.Pointer) => {
+      if (this.middlePanActive && !ptr.middleButtonDown()) {
+        this.middlePanActive = false
+      }
     })
   }