#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
+  }
+}

src/composables/controls/useGameControlsComposable.ts

@@ -0,0 +1,46 @@
+import { getTile } from '@/composables/mapComposable'
+import { useGameStore } from '@/stores/gameStore'
+import { useBaseControlsComposable } from './useBaseControlsComposable'
+import type { Ref } from 'vue'
+
+export function useGameControlsComposable(scene: Phaser.Scene, layer: Phaser.Tilemaps.TilemapLayer, waypoint: Ref<{ visible: boolean; x: number; y: number }>, camera: Phaser.Cameras.Scene2D.Camera) {
+  const gameStore = useGameStore()
+  const baseHandlers = useBaseControlsComposable(scene, layer, waypoint, camera)
+
+  function handlePointerDown(pointer: Phaser.Input.Pointer) {
+    baseHandlers.startDragging(pointer)
+  }
+
+  function handlePointerMove(pointer: Phaser.Input.Pointer) {
+    baseHandlers.updateWaypoint(pointer.worldX, pointer.worldY)
+    baseHandlers.handleDragMap(pointer)
+  }
+
+  function handlePointerUp(pointer: Phaser.Input.Pointer) {
+    baseHandlers.stopDragging()
+
+    const pointerTile = getTile(layer, pointer.worldX, pointer.worldY)
+    if (!pointerTile) return
+
+    gameStore.connection?.emit('map:character:move', {
+      positionX: pointerTile.x,
+      positionY: pointerTile.y
+    })
+  }
+
+  const setupControls = () => {
+    scene.input.on(Phaser.Input.Events.POINTER_DOWN, handlePointerDown)
+    scene.input.on(Phaser.Input.Events.POINTER_MOVE, handlePointerMove)
+    scene.input.on(Phaser.Input.Events.POINTER_UP, handlePointerUp)
+    scene.input.on(Phaser.Input.Events.POINTER_WHEEL, baseHandlers.handleZoom)
+  }
+
+  const cleanupControls = () => {
+    scene.input.off(Phaser.Input.Events.POINTER_DOWN, handlePointerDown)
+    scene.input.off(Phaser.Input.Events.POINTER_MOVE, handlePointerMove)
+    scene.input.off(Phaser.Input.Events.POINTER_UP, handlePointerUp)
+    scene.input.off(Phaser.Input.Events.POINTER_WHEEL, baseHandlers.handleZoom)
+  }
+
+  return { setupControls, cleanupControls }
+}

src/composables/controls/useMapEditorControlsComposable.ts

@@ -0,0 +1,42 @@
+import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
+import { useBaseControlsComposable } from './useBaseControlsComposable'
+import { computed, type Ref } from 'vue'
+
+export function useMapEditorControlsComposable(scene: Phaser.Scene, layer: Phaser.Tilemaps.TilemapLayer, waypoint: Ref<{ visible: boolean; x: number; y: number }>, camera: Phaser.Cameras.Scene2D.Camera) {
+  const mapEditor = useMapEditorComposable()
+  const baseHandlers = useBaseControlsComposable(scene, layer, waypoint, camera)
+  const isMoveTool = computed(() => mapEditor.tool.value === 'move')
+
+  function handlePointerDown(pointer: Phaser.Input.Pointer) {
+    if (isMoveTool.value || pointer.event.shiftKey) {
+      baseHandlers.startDragging(pointer)
+    }
+  }
+
+  function handlePointerMove(pointer: Phaser.Input.Pointer) {
+    if (isMoveTool.value || pointer.event.shiftKey) {
+      baseHandlers.handleDragMap(pointer)
+    }
+    baseHandlers.updateWaypoint(pointer.worldX, pointer.worldY)
+  }
+
+  function handlePointerUp(pointer: Phaser.Input.Pointer) {
+    baseHandlers.stopDragging()
+  }
+
+  const setupControls = () => {
+    scene.input.on(Phaser.Input.Events.POINTER_DOWN, handlePointerDown)
+    scene.input.on(Phaser.Input.Events.POINTER_MOVE, handlePointerMove)
+    scene.input.on(Phaser.Input.Events.POINTER_UP, handlePointerUp)
+    scene.input.on(Phaser.Input.Events.POINTER_WHEEL, baseHandlers.handleZoom)
+  }
+
+  const cleanupControls = () => {
+    scene.input.off(Phaser.Input.Events.POINTER_DOWN, handlePointerDown)
+    scene.input.off(Phaser.Input.Events.POINTER_MOVE, handlePointerMove)
+    scene.input.off(Phaser.Input.Events.POINTER_UP, handlePointerUp)
+    scene.input.off(Phaser.Input.Events.POINTER_WHEEL, baseHandlers.handleZoom)
+  }
+
+  return { setupControls, cleanupControls }
+}