#96 - Renamed and refactored pointer handler composables in favor of arrow key movement.

src/composables/controls/useBaseControlsComposable.ts

@@ -0,0 +1,69 @@
+import config from '@/application/config'
+import { getTile, tileToWorldXY } from '@/composables/mapComposable'
+import { useGameStore } from '@/stores/gameStore'
+import { ref, type Ref } from 'vue'
+
+export function useBaseControlsComposable(scene: Phaser.Scene, layer: Phaser.Tilemaps.TilemapLayer, waypoint: Ref<{ visible: boolean; x: number; y: number }>, camera: Phaser.Cameras.Scene2D.Camera) {
+  const gameStore = useGameStore()
+  const pointerStartPosition = ref({ x: 0, y: 0 })
+  const dragThreshold = 5 // pixels
+
+  function updateWaypoint(worldX: number, worldY: number) {
+    const pointerTile = getTile(layer, worldX, worldY)
+    if (!pointerTile) {
+      waypoint.value.visible = false
+      return
+    }
+    const worldPoint = tileToWorldXY(layer, pointerTile.x, pointerTile.y)
+    if (!worldPoint.worldPositionX || !worldPoint.worldPositionX) return
+
+    waypoint.value = {
+      visible: true,
+      x: worldPoint.worldPositionX,
+      y: worldPoint.worldPositionY + config.tile_size.height + 15
+    }
+  }
+
+  function handleDragMap(pointer: Phaser.Input.Pointer) {
+    if (!gameStore.game.isPlayerDraggingCamera) return
+
+    const deltaX = pointer.x - pointerStartPosition.value.x
+    const deltaY = pointer.y - pointerStartPosition.value.y
+
+    if (Math.abs(deltaX) <= dragThreshold && Math.abs(deltaY) <= dragThreshold) return
+
+    const scrollX = camera.scrollX - (deltaX / camera.zoom)
+    const scrollY = camera.scrollY - (deltaY / camera.zoom)
+
+    camera.setScroll(scrollX, scrollY)
+    pointerStartPosition.value = { x: pointer.x, y: pointer.y }
+  }
+
+  function startDragging(pointer: Phaser.Input.Pointer) {
+    pointerStartPosition.value = { x: pointer.x, y: pointer.y }
+    gameStore.setPlayerDraggingCamera(true)
+  }
+
+  function stopDragging() {
+    gameStore.setPlayerDraggingCamera(false)
+  }
+
+  function handleZoom(pointer: Phaser.Input.Pointer) {
+    if (pointer.event instanceof WheelEvent && pointer.event.shiftKey) {
+      const deltaY = pointer.event.deltaY
+      const zoomLevel = camera.zoom - deltaY * 0.005
+      if (zoomLevel > 0 && zoomLevel < 3) {
+        camera.setZoom(zoomLevel)
+      }
+    }
+  }
+
+  return {
+    updateWaypoint,
+    handleDragMap,
+    startDragging,
+    stopDragging,
+    handleZoom,
+    pointerStartPosition
+  }
+}