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

src/components/game/character/Character.vue

@@ -175,7 +175,7 @@ onMounted(async () => {
     mapStore.setCharacterLoaded(true)
 
     // #146 : Set camera position to character, need to be improved still
-    scene.cameras.main.startFollow(charSprite.value as Phaser.GameObjects.Sprite)
+    // scene.cameras.main.startFollow(charSprite.value as Phaser.GameObjects.Sprite)
   }
 
   updatePosition(character.positionX, character.positionY, character.rotation)

src/components/gameMaster/mapEditor/Map.vue

@@ -27,28 +27,20 @@ function handlePointer(pointer: Phaser.Input.Pointer) {
   // Check if left mouse button is pressed
   if (!pointer.isDown) return
 
-  // Check if shift is not pressed, this means we are moving the camera
-  if (pointer.event.shiftKey) return
+  // Check if shift is pressed or if we're in move mode, this means we are moving the camera
+  if (pointer.event.shiftKey || mapEditor.tool.value === 'move') return
 
   // Check if draw mode is tile
   switch (mapEditor.drawMode.value) {
     case 'tile':
       mapTiles.value.handlePointer(pointer)
+      break
     case 'object':
       mapObjects.value.handlePointer(pointer)
-    case 'teleport':
+      break
+    case 'event':
       eventTiles.value.handlePointer(pointer)
+      break
   }
 }
-
-onMounted(() => {
-  scene.input.on(Phaser.Input.Events.POINTER_MOVE, handlePointer)
-  scene.input.on(Phaser.Input.Events.POINTER_DOWN, handlePointer)
-})
-
-onUnmounted(() => {
-  scene.input.off(Phaser.Input.Events.POINTER_MOVE, handlePointer)
-  scene.input.off(Phaser.Input.Events.POINTER_DOWN, handlePointer)
-  mapEditor.reset()
-})
 </script>

src/components/utilities/Controls.vue

@@ -3,8 +3,7 @@
 </template>
 
 <script setup lang="ts">
-import { useCameraControls } from '@/composables/useCameraControls'
-import { usePointerHandlers } from '@/composables/usePointerHandlers'
+import { useControlsComposable } from '@/composables/useControlsComposable'
 import { Image, useScene } from 'phavuer'
 import { onBeforeUnmount, ref } from 'vue'
 
@@ -14,45 +13,16 @@ type WayPoint = { visible: boolean; x: number; y: number }
 // Props
 const props = defineProps<{ layer: Phaser.Tilemaps.TilemapLayer }>()
 
-// Constants
-const ZOOM_SETTINGS = {
-  WHEEL_FACTOR: 0.005,
-  KEY_FACTOR: 0.3,
-  MIN: 1,
-  MAX: 3
-} as const
-
 // Setup
 const scene = useScene()
 const waypoint = ref<WayPoint>({ visible: false, x: 0, y: 0 })
-const { camera } = useCameraControls(scene)
-const { setupPointerHandlers, cleanupPointerHandlers } = usePointerHandlers(scene, props.layer, waypoint, camera)
-
-// Handlers
-function handleScrollZoom(pointer: Phaser.Input.Pointer) {
-  if (!(pointer.event instanceof WheelEvent && pointer.event.shiftKey)) return
-
-  const zoomLevel = Phaser.Math.Clamp(camera.zoom - pointer.event.deltaY * ZOOM_SETTINGS.WHEEL_FACTOR, ZOOM_SETTINGS.MIN, ZOOM_SETTINGS.MAX)
-  camera.setZoom(zoomLevel)
-}
-
-function handleKeyComboZoom(event: { keyCodes: number[] }) {
-  const deltaY = event.keyCodes[1] === 38 ? 1 : -1 // 38 is Up, 40 is Down
-  const zoomLevel = Phaser.Math.Clamp(camera.zoom + deltaY * ZOOM_SETTINGS.KEY_FACTOR, ZOOM_SETTINGS.MIN, ZOOM_SETTINGS.MAX)
-  camera.setZoom(zoomLevel)
-}
+const { setupControls, cleanupControls } = useControlsComposable(scene, props.layer, waypoint)
 
 // Event setup
-setupPointerHandlers()
-scene.input.keyboard?.createCombo([16, 38], { resetOnMatch: true }) // Shift + Up
-scene.input.keyboard?.createCombo([16, 40], { resetOnMatch: true }) // Shift + Down
-scene.input.keyboard?.on('keycombomatch', handleKeyComboZoom)
-scene.input.on(Phaser.Input.Events.POINTER_WHEEL, handleScrollZoom)
+setupControls()
 
 // Cleanup
 onBeforeUnmount(() => {
-  cleanupPointerHandlers()
-  scene.input.keyboard?.off('keycombomatch')
-  scene.input.off(Phaser.Input.Events.POINTER_WHEEL, handleScrollZoom)
+  cleanupControls()
 })
 </script>