From a9de031673a9c623a8cd2d67d11dc3b82d437873 Mon Sep 17 00:00:00 2001
From: Dennis Postma <dennis@directonline.io>
Date: Sat, 1 Feb 2025 01:31:28 +0100
Subject: [PATCH] poc
---
src/components/game/map/Map.vue | 6 +++++
.../controls/useGameControlsComposable.ts | 25 +++++++++++++++++++
2 files changed, 31 insertions(+)
diff --git a/src/components/game/map/Map.vue b/src/components/game/map/Map.vue
index a9a6df7..fb95343 100644
--- a/src/components/game/map/Map.vue
+++ b/src/components/game/map/Map.vue
@@ -34,6 +34,12 @@ gameStore.connection?.on('map:character:leave', (characterId: UUID) => {
gameStore.connection?.on('map:character:move', (data: { characterId: UUID; positionX: number; positionY: number; rotation: number; isMoving: boolean }) => {
mapStore.updateCharacterPosition(data)
+ // @TODO: Replace with universal class, composable or store
+ if (data.characterId === gameStore.character?.id) {
+ gameStore.character!.positionX = data.positionX
+ gameStore.character!.positionY = data.positionY
+ gameStore.character!.rotation = data.rotation
+ }
})
onUnmounted(() => {
diff --git a/src/composables/controls/useGameControlsComposable.ts b/src/composables/controls/useGameControlsComposable.ts
index a79297d..fa52197 100644
--- a/src/composables/controls/useGameControlsComposable.ts
+++ b/src/composables/controls/useGameControlsComposable.ts
@@ -28,11 +28,35 @@ export function useGameControlsComposable(scene: Phaser.Scene, layer: Phaser.Til
})
}
+ function handleArrowKeys(event: KeyboardEvent) {
+ if (event.key === 'ArrowLeft') {
+ console.log('ArrowLeft')
+ gameStore.connection?.emit('map:character:move', { positionX: gameStore.character!.positionX - 1, positionY: 0 })
+ return
+ }
+ if (event.key === 'ArrowRight') {
+ console.log('ArrowRight')
+ gameStore.connection?.emit('map:character:move', { positionX: gameStore.character!.positionX + 1, positionY: 0 })
+ return
+ }
+ if (event.key === 'ArrowUp') {
+ console.log('ArrowUp')
+ gameStore.connection?.emit('map:character:move', { positionX: 0, positionY: gameStore.character!.positionY - 1 })
+ return
+ }
+ if (event.key === 'ArrowDown') {
+ console.log('ArrowDown')
+ gameStore.connection?.emit('map:character:move', { positionX: 0, positionY: gameStore.character!.positionY + 1 })
+ return
+ }
+ }
+
const setupControls = () => {
scene.input.on(Phaser.Input.Events.POINTER_DOWN, handlePointerDown)
scene.input.on(Phaser.Input.Events.POINTER_MOVE, handlePointerMove)
scene.input.on(Phaser.Input.Events.POINTER_UP, handlePointerUp)
scene.input.on(Phaser.Input.Events.POINTER_WHEEL, baseHandlers.handleZoom)
+ scene.input.keyboard!.on(Phaser.Input.Keyboard.Events.KEY_DOWN, handleArrowKeys)
}
const cleanupControls = () => {
@@ -40,6 +64,7 @@ export function useGameControlsComposable(scene: Phaser.Scene, layer: Phaser.Til
scene.input.off(Phaser.Input.Events.POINTER_MOVE, handlePointerMove)
scene.input.off(Phaser.Input.Events.POINTER_UP, handlePointerUp)
scene.input.off(Phaser.Input.Events.POINTER_WHEEL, baseHandlers.handleZoom)
+ scene.input.keyboard!.off(Phaser.Input.Keyboard.Events.KEY_DOWN, handleArrowKeys)
}
return { setupControls, cleanupControls }