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

src/components/utilities/Controls.vue

@@ -4,23 +4,17 @@
 
 <script setup lang="ts">
 import { Image, useScene } from 'phavuer'
-import { onBeforeUnmount, ref, watch } from 'vue'
-import { storeToRefs } from 'pinia'
-import config from '@/config'
-import { getTile, tileToWorldXY } from '@/services/zone'
+import { onBeforeUnmount, ref } from 'vue'
 import { useZoneEditorStore } from '@/stores/zoneEditor'
-import { useGameStore } from '@/stores/game'
+import { usePointerHandlers } from '@/composables/usePointerHandlers'
+import { useCameraControls } from '@/composables/useCameraControls'
 
 interface Props {
   layer: Phaser.Tilemaps.TilemapLayer
 }
 
 const props = defineProps<Props>()
-
 const scene = useScene()
-const zoneEditorStore = useZoneEditorStore()
-const gameStore = useGameStore()
-const { tool } = storeToRefs(zoneEditorStore)
 
 const waypoint = ref({
   visible: false,
@@ -28,132 +22,9 @@ const waypoint = ref({
   y: 0
 })
 
-const cam = ref(scene.cameras.main)
-const isDragging = ref(false)
-let pointerDownTimer: number | null = null
-let pointerUpTimer: number | null = null
+const { camera, isDragging } = useCameraControls(scene)
+const { setupPointerHandlers, cleanupPointerHandlers } = usePointerHandlers(scene, props.layer, waypoint, camera, isDragging)
 
-const DRAG_DELAY = 150
-const MOVE_RESET_DELAY = 100
-const CAMERA_SPEED = 4 // Adjust this value to change arrow key movement speed
-
-function updateWaypoint(pointer: Phaser.Input.Pointer) {
-  const { x: px, y: py } = scene.cameras.main.getWorldPoint(pointer.x, pointer.y)
-  const pointerTile = getTile(px, py, props.layer)
-
-  if (!pointerTile) {
-    waypoint.value.visible = false
-    return
-  }
-
-  const worldPoint = tileToWorldXY(props.layer, pointerTile.x, pointerTile.y)
-  waypoint.value = {
-    visible: true,
-    x: worldPoint.position_x,
-    y: worldPoint.position_y + config.tile_size.y + 15
-  }
-}
-
-function dragZone(pointer: Phaser.Input.Pointer) {
-  if (!isDragging.value) return
-  const { x, y, prevPosition } = pointer
-  cam.value.scrollX -= (x - prevPosition.x) / cam.value.zoom
-  cam.value.scrollY -= (y - prevPosition.y) / cam.value.zoom
-}
-
-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)
-    cam.value = scene.cameras.main
-  }
-}
-
-function onPointerDown(pointer: Phaser.Input.Pointer) {
-  if (pointer.event instanceof MouseEvent && (pointer.event.altKey || tool.value === 'move')) {
-    pointerDownTimer = setTimeout(() => {
-      isDragging.value = true
-      gameStore.setMovingCamera(true)
-      scene.input.on(Phaser.Input.Events.POINTER_MOVE, dragZone)
-    }, DRAG_DELAY)
-  }
-}
-
-function onPointerUp() {
-  if (pointerDownTimer) {
-    clearTimeout(pointerDownTimer)
-    pointerDownTimer = null
-  }
-  isDragging.value = false
-  scene.input.off(Phaser.Input.Events.POINTER_MOVE, dragZone)
-
-  if (pointerUpTimer) {
-    clearTimeout(pointerUpTimer)
-  }
-
-  pointerUpTimer = setTimeout(() => {
-    gameStore.setMovingCamera(false)
-  }, MOVE_RESET_DELAY)
-}
-
-function handleKeyboardInput() {
-  const cursors = scene.input.keyboard?.createCursorKeys()
-
-  if (!cursors) return
-
-  if (cursors.left.isDown) {
-    cam.value.scrollX -= CAMERA_SPEED
-  }
-  if (cursors.right.isDown) {
-    cam.value.scrollX += CAMERA_SPEED
-  }
-  if (cursors.up.isDown) {
-    cam.value.scrollY -= CAMERA_SPEED
-  }
-  if (cursors.down.isDown) {
-    cam.value.scrollY += CAMERA_SPEED
-  }
-
-  if (cursors.left.isDown || cursors.right.isDown || cursors.up.isDown || cursors.down.isDown) {
-    gameStore.setMovingCamera(true)
-  } else {
-    gameStore.setMovingCamera(false)
-  }
-}
-
-function setupEventListeners() {
-  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_DOWN, onPointerDown)
-  scene.input.on(Phaser.Input.Events.POINTER_UP, onPointerUp)
-  scene.events.on(Phaser.Scenes.Events.UPDATE, handleKeyboardInput)
-}
-
-function cleanupEventListeners() {
-  scene.input.off(Phaser.Input.Events.POINTER_MOVE, updateWaypoint)
-  scene.input.off(Phaser.Input.Events.POINTER_MOVE, dragZone)
-  scene.input.off(Phaser.Input.Events.POINTER_DOWN, onPointerDown)
-  scene.input.off(Phaser.Input.Events.POINTER_UP, onPointerUp)
-  scene.input.off(Phaser.Input.Events.POINTER_WHEEL, handleZoom)
-  scene.events.off(Phaser.Scenes.Events.UPDATE, handleKeyboardInput)
-
-  if (pointerDownTimer) {
-    clearTimeout(pointerDownTimer)
-    pointerDownTimer = null
-  }
-  if (pointerUpTimer) {
-    clearTimeout(pointerUpTimer)
-    pointerUpTimer = null
-  }
-}
-
-watch(tool, (newTool) => {
-  if (newTool === 'move') {
-    scene.input.on(Phaser.Input.Events.POINTER_MOVE, dragZone)
-  } else {
-    scene.input.off(Phaser.Input.Events.POINTER_MOVE, dragZone)
-  }
-})
-
-setupEventListeners()
-onBeforeUnmount(cleanupEventListeners)
+setupPointerHandlers()
+onBeforeUnmount(cleanupPointerHandlers)
 </script>

src/components/utilities/Modal.vue

@@ -1,6 +1,6 @@
 <template>
   <Teleport to="body">
-    <div v-if="isModalOpenRef" class="fixed bg-gray-300/80 border-solid border-2 border-cyan-200 z-50 flex flex-col rounded-lg backdrop-blur-sm shadow-lg" :style="modalStyle">
+    <div v-if="isModalOpenRef" class="fixed bg-gray-300/80 border-solid border-2 border-cyan-200 z-50 flex flex-col backdrop-blur-sm shadow-lg" :style="modalStyle">
       <div @mousedown="startDrag" class="cursor-move p-2.5 flex justify-between items-center border-solid border-0 border-b border-cyan-200">
         <slot name="modalHeader" />
         <div class="flex gap-2.5">
@@ -76,6 +76,7 @@ let startHeight = 0
 let preFullScreenState = { x: 0, y: 0, width: 0, height: 0 }
 
 const modalStyle = computed(() => ({
+  borderRadius: isFullScreen.value ? '0' : '10px',
   top: isFullScreen.value ? '0' : `${y.value}px`,
   left: isFullScreen.value ? '0' : `${x.value}px`,
   width: isFullScreen.value ? '100vw' : `${width.value}px`,

src/components/utilities/zoneEditor/partials/Toolbar.vue

@@ -161,7 +161,7 @@ onBeforeUnmount(() => {
 function initKeyShortcuts(event: KeyboardEvent) {
   if (!zoneEditorStore.zone) return
 
-  // prevent if focussed on input
+  // prevent if focussed on composables
   if (document.activeElement?.tagName === 'INPUT') return
 
   if (event.key === 'm') {

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