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

Implemented logic to walk with arrow keys

Browse Source
This commit is contained in:
Dennis Postma 2025-02-01 01:43:01 +01:00
parent a9de031673
commit 9d95562679
3 changed files with 67 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/components/gameMaster/mapEditor/partials/TileList.vue
View File

@ -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)
}"
/>
<span class="text-xs mt-1">{{ getTileCategory(group.parent) }}</span>
<span v-if="group.children.length > 0" class="absolute top-0 right-0 bg-cyan text-white rounded-full w-5 h-5 flex items-center justify-center text-xs">
{{ group.children.length + 1 }}
</span>
{{ group.children.length + 1 }}
</span>
</div>
</div>
</div>
@ -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)
}"
/>
<span class="text-xs mt-1">{{ getTileCategory(selectedGroup.parent) }}</span>
</div>
@ -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)
}"
/>
<span class="text-xs mt-1">{{ getTileCategory(childTile) }}</span>
</div>

2
src/components/screens/MapEditor.vue
View File

@ -19,7 +19,7 @@
/>
<MapList ref="mapModal" @open-create-map="mapSettingsModal?.open" />
<TileList ref="tileList" />
<ObjectList ref="objectList"/>
<ObjectList ref="objectList" />
<MapSettings ref="mapSettingsModal" />
<TeleportModal ref="teleportModal" />
</div>

74
src/composables/controls/useGameControlsComposable.ts
View File

@ -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<string>()
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 }