diff --git a/src/components/gameMaster/mapEditor/partials/TileList.vue b/src/components/gameMaster/mapEditor/partials/TileList.vue
index 718c163..248a290 100644
--- a/src/components/gameMaster/mapEditor/partials/TileList.vue
+++ b/src/components/gameMaster/mapEditor/partials/TileList.vue
@@ -31,14 +31,14 @@
@click="openGroup(group)"
@load="() => processTile(group.parent)"
:class="{
- 'border-cyan shadow-lg': isActiveTile(group.parent),
- 'border-transparent hover:border-gray-300': !isActiveTile(group.parent)
- }"
+ 'border-cyan shadow-lg': isActiveTile(group.parent),
+ 'border-transparent hover:border-gray-300': !isActiveTile(group.parent)
+ }"
/>
{{ getTileCategory(group.parent) }}
- {{ group.children.length + 1 }}
-
+ {{ group.children.length + 1 }}
+
@@ -56,9 +56,9 @@
:alt="selectedGroup.parent.name"
@click="selectTile(selectedGroup.parent.id)"
:class="{
- 'border-cyan shadow-lg': isActiveTile(selectedGroup.parent),
- 'border-transparent hover:border-gray-300': !isActiveTile(selectedGroup.parent)
- }"
+ 'border-cyan shadow-lg': isActiveTile(selectedGroup.parent),
+ 'border-transparent hover:border-gray-300': !isActiveTile(selectedGroup.parent)
+ }"
/>
{{ getTileCategory(selectedGroup.parent) }}
@@ -69,9 +69,9 @@
:alt="childTile.name"
@click="selectTile(childTile.id)"
:class="{
- 'border-cyan shadow-lg': isActiveTile(childTile),
- 'border-transparent hover:border-gray-300': !isActiveTile(childTile)
- }"
+ 'border-cyan shadow-lg': isActiveTile(childTile),
+ 'border-transparent hover:border-gray-300': !isActiveTile(childTile)
+ }"
/>
{{ getTileCategory(childTile) }}
diff --git a/src/components/screens/MapEditor.vue b/src/components/screens/MapEditor.vue
index 1599663..1c1eaac 100644
--- a/src/components/screens/MapEditor.vue
+++ b/src/components/screens/MapEditor.vue
@@ -19,7 +19,7 @@
/>
-
+
diff --git a/src/composables/controls/useGameControlsComposable.ts b/src/composables/controls/useGameControlsComposable.ts
index fa52197..6fff96f 100644
--- a/src/composables/controls/useGameControlsComposable.ts
+++ b/src/composables/controls/useGameControlsComposable.ts
@@ -28,26 +28,60 @@ 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
+ const pressedKeys = new Set()
+ let moveInterval: number | null = null
+
+ function handleKeyDown(event: KeyboardEvent) {
+ if (!gameStore.character) return
+
+ if (['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'].includes(event.key)) {
+ pressedKeys.add(event.key)
+
+ // Start movement loop if not already running
+ if (!moveInterval) {
+ moveInterval = window.setInterval(moveCharacter, 250) // Adjust timing as needed
+ moveCharacter() // Move immediately on first press
+ }
}
- if (event.key === 'ArrowRight') {
- console.log('ArrowRight')
- gameStore.connection?.emit('map:character:move', { positionX: gameStore.character!.positionX + 1, positionY: 0 })
- return
+ }
+
+ function handleKeyUp(event: KeyboardEvent) {
+ pressedKeys.delete(event.key)
+
+ // If no movement keys are pressed, clear the interval
+ if (pressedKeys.size === 0 && moveInterval) {
+ clearInterval(moveInterval)
+ moveInterval = null
}
- if (event.key === 'ArrowUp') {
- console.log('ArrowUp')
- gameStore.connection?.emit('map:character:move', { positionX: 0, positionY: gameStore.character!.positionY - 1 })
- return
+ }
+
+ function moveCharacter() {
+ if (!gameStore.character) return
+ const { positionX, positionY } = gameStore.character
+
+ if (pressedKeys.has('ArrowLeft')) {
+ gameStore.connection?.emit('map:character:move', {
+ positionX: positionX - 1,
+ positionY: positionY
+ })
}
- if (event.key === 'ArrowDown') {
- console.log('ArrowDown')
- gameStore.connection?.emit('map:character:move', { positionX: 0, positionY: gameStore.character!.positionY + 1 })
- return
+ if (pressedKeys.has('ArrowRight')) {
+ gameStore.connection?.emit('map:character:move', {
+ positionX: positionX + 1,
+ positionY: positionY
+ })
+ }
+ if (pressedKeys.has('ArrowUp')) {
+ gameStore.connection?.emit('map:character:move', {
+ positionX: positionX,
+ positionY: positionY - 1
+ })
+ }
+ if (pressedKeys.has('ArrowDown')) {
+ gameStore.connection?.emit('map:character:move', {
+ positionX: positionX,
+ positionY: positionY + 1
+ })
}
}
@@ -56,7 +90,8 @@ export function useGameControlsComposable(scene: Phaser.Scene, layer: Phaser.Til
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)
+ scene.input.keyboard!.on('keydown', handleKeyDown)
+ scene.input.keyboard!.on('keyup', handleKeyUp)
}
const cleanupControls = () => {
@@ -64,7 +99,8 @@ 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)
+ scene.input.keyboard!.off('keydown', handleKeyDown)
+ scene.input.keyboard!.off('keyup', handleKeyUp)
}
return { setupControls, cleanupControls }