npm update, modal bug fix, separated logics for easier maintainability, modal fe bugfix

src/composables/useCameraControls.ts

@@ -0,0 +1,46 @@
+import { ref } from 'vue'
+import { useGameStore } from '@/stores/game'
+
+export function useCameraControls(scene: Phaser.Scene): any {
+  const gameStore = useGameStore()
+  const camera = ref(scene.cameras.main)
+  const isDragging = ref(false)
+  let pointerDownTimer: number | null = null
+  let pointerUpTimer: number | null = null
+
+  const DRAG_DELAY = 150
+  const MOVE_RESET_DELAY = 100
+
+  function onPointerDown(pointer: Phaser.Input.Pointer) {
+    if (pointer.event instanceof MouseEvent || pointer.event.altKey) {
+      pointerDownTimer = setTimeout(() => {
+        isDragging.value = true
+        gameStore.setMovingCamera(true)
+      }, DRAG_DELAY)
+    }
+  }
+
+  function onPointerUp() {
+    if (pointerDownTimer) {
+      clearTimeout(pointerDownTimer)
+      pointerDownTimer = null
+    }
+    isDragging.value = false
+
+    if (pointerUpTimer) {
+      clearTimeout(pointerUpTimer)
+    }
+
+    pointerUpTimer = setTimeout(() => {
+      gameStore.setMovingCamera(false)
+    }, MOVE_RESET_DELAY)
+  }
+
+  scene.input.on(Phaser.Input.Events.POINTER_DOWN, onPointerDown)
+  scene.input.on(Phaser.Input.Events.POINTER_UP, onPointerUp)
+
+  return {
+    camera,
+    isDragging
+  }
+}

src/composables/usePointerHandlers.ts

@@ -0,0 +1,92 @@
+import config from '@/config'
+import { computed, ref, type Ref, watch } from 'vue'
+import { getTile, tileToWorldXY } from '@/services/zone'
+import { useGameStore } from '@/stores/game'
+import { useZoneEditorStore } from '@/stores/zoneEditor'
+
+export function usePointerHandlers(
+  scene: Phaser.Scene,
+  layer: Phaser.Tilemaps.TilemapLayer,
+  waypoint: Ref<{ visible: boolean; x: number; y: number }>,
+  camera: Ref<Phaser.Cameras.Scene2D.Camera>,
+  isDragging: Ref<boolean>
+) {
+  const gameStore = useGameStore()
+  const zoneEditorStore = useZoneEditorStore()
+
+  function updateWaypoint(pointer: Phaser.Input.Pointer) {
+    const { x: px, y: py } = camera.value.getWorldPoint(pointer.x, pointer.y)
+    const pointerTile = getTile(px, py, layer)
+
+    if (!pointerTile) {
+      waypoint.value.visible = false
+      return
+    }
+
+    const worldPoint = tileToWorldXY(layer, pointerTile.x, pointerTile.y)
+    waypoint.value = {
+      visible: true,
+      x: worldPoint.position_x,
+      y: worldPoint.position_y + config.tile_size.y + 15
+    }
+  }
+
+  const isMoveTool = computed(() => zoneEditorStore.tool === 'move')
+
+  watch(isMoveTool, (newValue) => {
+    if (newValue) {
+      scene.input.on(Phaser.Input.Events.POINTER_MOVE, dragZone)
+    } else {
+      scene.input.off(Phaser.Input.Events.POINTER_MOVE, dragZone)
+    }
+  })
+
+  function dragZone(pointer: Phaser.Input.Pointer) {
+    if (!isDragging.value) return
+    const { x, y, prevPosition } = pointer
+    camera.value.scrollX -= (x - prevPosition.x) / camera.value.zoom
+    camera.value.scrollY -= (y - prevPosition.y) / camera.value.zoom
+  }
+
+  function clickTile(pointer: Phaser.Input.Pointer) {
+    const { x: px, y: py } = camera.value.getWorldPoint(pointer.x, pointer.y)
+    const pointerTile = getTile(px, py, layer)
+
+    if (!pointerTile) {
+      return
+    }
+    gameStore.connection?.emit('character:move', { position_x: pointerTile.x, position_y: pointerTile.y })
+  }
+
+  function handleZoom(pointer: Phaser.Input.Pointer, _: unknown, __: unknown, deltaY: number) {
+    if (pointer.event instanceof WheelEvent && pointer.event.altKey) {
+      scene.scale.setZoom(scene.scale.zoom - deltaY * 0.01)
+      camera.value = scene.cameras.main
+    }
+  }
+
+  function setupPointerHandlers() {
+    scene.input.on(Phaser.Input.Events.POINTER_MOVE, updateWaypoint)
+    scene.input.on(Phaser.Input.Events.POINTER_WHEEL, handleZoom)
+
+    // These are for in-game only, not for in the zone editor
+    if (!zoneEditorStore.active) {
+      scene.input.on(Phaser.Input.Events.POINTER_UP, clickTile)
+    }
+  }
+
+  function cleanupPointerHandlers() {
+    scene.input.off(Phaser.Input.Events.POINTER_MOVE, updateWaypoint)
+    scene.input.off(Phaser.Input.Events.POINTER_WHEEL, handleZoom)
+
+    // These are for in-game only, not for in the zone editor
+    if (!zoneEditorStore.active) {
+      scene.input.off(Phaser.Input.Events.POINTER_UP, clickTile)
+    }
+  }
+
+  return {
+    setupPointerHandlers,
+    cleanupPointerHandlers
+  }
+}