Merge remote-tracking branch 'origin/main' into feature/map-refactor

# Conflicts:
#	src/components/gameMaster/mapEditor/Map.vue
#	src/components/gameMaster/mapEditor/partials/MapObjectList.vue
#	src/components/gameMaster/mapEditor/partials/TileList.vue
#	src/components/screens/MapEditor.vue
#	src/composables/pointerHandlers/useMapEditorPointerHandlers.ts

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>

src/components/utilities/Modal.vue

@@ -17,7 +17,7 @@
           <button v-if="canFullScreen" @click="toggleFullScreen" class="w-5 h-5 m-0 p-0 relative hover:scale-110 transition-transform duration-300 ease-in-out">
             <img :alt="isFullScreen ? 'exit full-screen' : 'full-screen'" :src="isFullScreen ? '/assets/icons/modal/minimize.svg' : '/assets/icons/modal/increase-size-option.svg'" class="w-3.5 h-3.5 invert" draggable="false" />
           </button>
-          <button v-if="closable" @click="isModalOpenRef = false" class="w-3.5 h-3.5 m-0 p-0 relative hover:rotate-180 transition-transform duration-300 ease-in-out">
+          <button v-if="closable" @click="closeModal" class="w-3.5 h-3.5 m-0 p-0 relative hover:rotate-180 transition-transform duration-300 ease-in-out">
             <img alt="close" src="/assets/icons/modal/close-button-white.svg" class="w-full h-full" draggable="false" />
           </button>
         </div>
@@ -81,7 +81,6 @@ const props = withDefaults(defineProps<ModalProps>(), {
 const emit = defineEmits<{
   'modal:open': []
   'modal:close': []
-  'character:create': []
 }>()
 
 defineExpose({
@@ -158,6 +157,11 @@ function drag(event: MouseEvent) {
   y.value = dragState.initialY + (event.clientY - dragState.startY)
 }
 
+function closeModal() {
+  isModalOpenRef.value = false
+  emit('modal:close')
+}
+
 function toggleFullScreen() {
   if (isFullScreen.value) {
     Object.assign({ x, y, width, height }, preFullScreenState)