noxious/client
6
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Dennis Postma
2025-01-31 22:26:23 +01:00
parent 0f46e3b6d2
commit 7d3946e274
11 changed files with 187 additions and 245 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
src/components/utilities/Controls.vue
View File

@ -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>