idk

src/composables/useGamePointerHandlers.ts

@@ -0,0 +1,57 @@
+import { type Ref } from 'vue'
+import { getTile, tileToWorldXY } from '@/services/zone'
+import { useGameStore } from '@/stores/game'
+import config from '@/config'
+
+export function useGamePointerHandlers(scene: Phaser.Scene, layer: Phaser.Tilemaps.TilemapLayer, waypoint: Ref<{ visible: boolean; x: number; y: number }>, camera: Ref<Phaser.Cameras.Scene2D.Camera>) {
+  const gameStore = useGameStore()
+
+  function updateWaypoint(pointer: Phaser.Input.Pointer) {
+    const { x: px, y: py } = camera.value.getWorldPoint(pointer.x, pointer.y)
+    const pointerTile = getTile(px, py, layer)
+
+    waypoint.value.visible = !!pointerTile
+    if (pointerTile) {
+      const worldPoint = tileToWorldXY(layer, pointerTile.x, pointerTile.y)
+      waypoint.value.x = worldPoint.positionX
+      waypoint.value.y = worldPoint.positionY + config.tile_size.y + 15
+    }
+  }
+
+  function handlePointerMove(pointer: Phaser.Input.Pointer) {
+    updateWaypoint(pointer)
+  }
+
+  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) {
+      gameStore.connection?.emit('character:move', {
+        positionX: pointerTile.x,
+        positionY: pointerTile.y
+      })
+    }
+  }
+
+  function handleZoom({ event, deltaY }: Phaser.Input.Pointer) {
+    if (event instanceof WheelEvent && event.shiftKey) {
+      scene.scale.setZoom(scene.scale.zoom - deltaY * 0.01)
+      camera.value = scene.cameras.main
+    }
+  }
+
+  const setupPointerHandlers = () => {
+    scene.input.on(Phaser.Input.Events.POINTER_UP, clickTile)
+    scene.input.on(Phaser.Input.Events.POINTER_MOVE, handlePointerMove)
+    scene.input.on(Phaser.Input.Events.POINTER_WHEEL, handleZoom)
+  }
+
+  const cleanupPointerHandlers = () => {
+    scene.input.off(Phaser.Input.Events.POINTER_UP, clickTile)
+    scene.input.off(Phaser.Input.Events.POINTER_MOVE, handlePointerMove)
+    scene.input.off(Phaser.Input.Events.POINTER_WHEEL, handleZoom)
+  }
+
+  return { setupPointerHandlers, cleanupPointerHandlers }
+}

src/composables/usePointerHandlers.ts

@@ -1,88 +1,30 @@
-import config from '@/config'
-import { computed, type Ref, watch } from 'vue'
-import { getTile, tileToWorldXY } from '@/services/zone'
-import { useGameStore } from '@/stores/game'
+import { computed, type Ref } from 'vue'
 import { useZoneEditorStore } from '@/stores/zoneEditor'
+import { useGamePointerHandlers } from '@/composables/useGamePointerHandlers'
+import { useZoneEditorPointerHandlers } from '@/composables/useZoneEditorPointerHandlers'
 
 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()
+  const isZoneEditorActive = computed(() => zoneEditorStore.active)
 
-  function updateWaypoint(pointer: Phaser.Input.Pointer) {
-    const { x: px, y: py } = camera.value.getWorldPoint(pointer.x, pointer.y)
-    const pointerTile = getTile(px, py, layer)
+  const gameHandlers = useGamePointerHandlers(scene, layer, waypoint, camera)
+  const zoneEditorHandlers = useZoneEditorPointerHandlers(scene, layer, waypoint, camera, isDragging)
 
-    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)
+  const setupPointerHandlers = () => {
+    if (isZoneEditorActive.value) {
+      zoneEditorHandlers.setupPointerHandlers()
     } 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
+      gameHandlers.setupPointerHandlers()
     }
   }
 
-  function setupPointerHandlers() {
-    scene.input.on(Phaser.Input.Events.POINTER_MOVE, updateWaypoint)
-    scene.input.on(Phaser.Input.Events.POINTER_WHEEL, handleZoom)
-    scene.input.on(Phaser.Input.Events.POINTER_MOVE, dragZone)
-
-    // These are for in-game only, not for in the zone editor
-    if (!zoneEditorStore.active) {
-      scene.input.on(Phaser.Input.Events.POINTER_UP, clickTile)
+  const cleanupPointerHandlers = () => {
+    if (isZoneEditorActive.value) {
+      zoneEditorHandlers.cleanupPointerHandlers()
+    } else {
+      gameHandlers.cleanupPointerHandlers()
     }
   }
 
-  function cleanupPointerHandlers() {
-    scene.input.off(Phaser.Input.Events.POINTER_MOVE, updateWaypoint)
-    scene.input.off(Phaser.Input.Events.POINTER_WHEEL, handleZoom)
-    scene.input.off(Phaser.Input.Events.POINTER_MOVE, dragZone)
-
-    // 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
-  }
+  return { setupPointerHandlers, cleanupPointerHandlers }
 }

src/composables/useZoneEditorPointerHandlers.ts

@@ -0,0 +1,55 @@
+import { computed, type Ref, ref } from 'vue'
+import { getTile, tileToWorldXY } from '@/services/zone'
+import { useZoneEditorStore } from '@/stores/zoneEditor'
+import config from '@/config'
+
+export function useZoneEditorPointerHandlers(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 zoneEditorStore = useZoneEditorStore()
+  const isMoveTool = computed(() => zoneEditorStore.tool === 'move')
+
+  function updateWaypoint(pointer: Phaser.Input.Pointer) {
+    const { x: px, y: py } = camera.value.getWorldPoint(pointer.x, pointer.y)
+    const pointerTile = getTile(px, py, layer)
+
+    waypoint.value.visible = !!pointerTile
+    if (pointerTile) {
+      const worldPoint = tileToWorldXY(layer, pointerTile.x, pointerTile.y)
+      waypoint.value.x = worldPoint.positionX
+      waypoint.value.y = worldPoint.positionY + config.tile_size.y + 15
+    }
+  }
+
+  function dragZone(pointer: Phaser.Input.Pointer) {
+    if (isDragging.value) {
+      const { x, y, prevPosition } = pointer
+      const { scrollX, scrollY, zoom } = camera.value
+      camera.value.setScroll(scrollX - (x - prevPosition.x) / zoom, scrollY - (y - prevPosition.y) / zoom)
+    }
+  }
+
+  function handlePointerMove(pointer: Phaser.Input.Pointer) {
+    if (isMoveTool.value || pointer.event.shiftKey) {
+      dragZone(pointer)
+    }
+    updateWaypoint(pointer)
+  }
+
+  function handleZoom({ event, deltaY }: Phaser.Input.Pointer) {
+    if (event instanceof WheelEvent && event.shiftKey) {
+      scene.scale.setZoom(scene.scale.zoom - deltaY * 0.01)
+      camera.value = scene.cameras.main
+    }
+  }
+
+  const setupPointerHandlers = () => {
+    scene.input.on(Phaser.Input.Events.POINTER_MOVE, handlePointerMove)
+    scene.input.on(Phaser.Input.Events.POINTER_WHEEL, handleZoom)
+  }
+
+  const cleanupPointerHandlers = () => {
+    scene.input.off(Phaser.Input.Events.POINTER_MOVE, handlePointerMove)
+    scene.input.off(Phaser.Input.Events.POINTER_WHEEL, handleZoom)
+  }
+
+  return { setupPointerHandlers, cleanupPointerHandlers }
+}