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 }