Implemented logic to walk with arrow keys

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-cyan shadow-lg': isActiveTile(group.parent),
-                    'border-transparent hover:border-gray-300': !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 }}
+                      {{ group.children.length + 1 }}
-                </span>
+                    </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-cyan shadow-lg': isActiveTile(selectedGroup.parent),
-                  'border-transparent hover:border-gray-300': !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-cyan shadow-lg': isActiveTile(childTile),
-                  'border-transparent hover:border-gray-300': !isActiveTile(childTile)
+                      'border-transparent hover:border-gray-300': !isActiveTile(childTile)
-                }"
+                    }"
                   />
                   <span class="text-xs mt-1">{{ getTileCategory(childTile) }}</span>
                 </div>

src/components/screens/MapEditor.vue

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

src/composables/controls/useGameControlsComposable.ts

@@ -28,26 +28,60 @@ export function useGameControlsComposable(scene: Phaser.Scene, layer: Phaser.Til
     })
   }
 
-  function handleArrowKeys(event: KeyboardEvent) {
+  const pressedKeys = new Set<string>()
-    if (event.key === 'ArrowLeft') {
+  let moveInterval: number | null = null
-      console.log('ArrowLeft')
+
-      gameStore.connection?.emit('map:character:move', { positionX: gameStore.character!.positionX - 1, positionY: 0 })
+  function handleKeyDown(event: KeyboardEvent) {
-      return
+    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 })
+  function handleKeyUp(event: KeyboardEvent) {
-      return
+    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 })
+  function moveCharacter() {
-      return
+    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') {
+    if (pressedKeys.has('ArrowRight')) {
-      console.log('ArrowDown')
+      gameStore.connection?.emit('map:character:move', {
-      gameStore.connection?.emit('map:character:move', { positionX: 0, positionY: gameStore.character!.positionY + 1 })
+        positionX: positionX + 1,
-      return
+        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 }