Listen for attack events. TODO: finish anim. handling

src/application/types.ts

@@ -183,6 +183,7 @@ export type Character = {
 export type MapCharacter = {
   character: Character
   isMoving: boolean
+  isAttacking?: boolean
 }
 
 export type CharacterItem = {

src/components/game/character/Character.vue

@@ -110,6 +110,7 @@ const currentDirection = computed(() => {
 })
 
 const currentAction = computed(() => {
+  if (props.mapCharacter.isAttacking) return 'attack'
   return props.mapCharacter.isMoving ? 'walk' : 'idle'
 })
 
@@ -138,7 +139,9 @@ const handlePositionUpdate = (newValues: any, oldValues: any) => {
     updatePosition(newValues.positionX, newValues.positionY, direction)
   }
 
-  if (newValues.isMoving !== oldValues?.isMoving || newValues.rotation !== oldValues?.rotation) {
+  if (newValues.isMoving !== oldValues?.isMoving ||
+    newValues.rotation !== oldValues?.rotation ||
+    newValues.attack !== oldValues?.attack) {
     updateSprite()
   }
 }
@@ -148,7 +151,8 @@ watch(
     positionX: props.mapCharacter.character.positionX,
     positionY: props.mapCharacter.character.positionY,
     isMoving: props.mapCharacter.isMoving,
-    rotation: props.mapCharacter.character.rotation
+    rotation: props.mapCharacter.character.rotation,
+    isAttacking: props.mapCharacter.isAttacking
   }),
   handlePositionUpdate
 )

src/components/game/map/Map.vue

@@ -32,6 +32,10 @@ gameStore.connection?.on('map:character:leave', (characterId: UUID) => {
   mapStore.removeCharacter(characterId)
 })
 
+gameStore.connection?.on('map:character:attack', (characterId: UUID) => {
+  mapStore.updateCharacterProperty(characterId, 'isAttacking', true)
+})
+
 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

src/composables/controls/useGameControlsComposable.ts

@@ -34,6 +34,8 @@ export function useGameControlsComposable(scene: Phaser.Scene, layer: Phaser.Til
   function handleKeyDown(event: KeyboardEvent) {
     if (!gameStore.character) return
 
+    // console.log(event.key)
+
     if (['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'].includes(event.key)) {
       pressedKeys.add(event.key)
 
@@ -43,6 +45,11 @@ export function useGameControlsComposable(scene: Phaser.Scene, layer: Phaser.Til
         moveCharacter() // Move immediately on first press
       }
     }
+
+    // Attack on CTRL
+    if (event.key === 'Control') {
+      gameStore.connection?.emit('map:character:attack')
+    }
   }
 
   function handleKeyUp(event: KeyboardEvent) {

src/stores/mapStore.ts

@@ -31,6 +31,17 @@ export const useMapStore = defineStore('map', {
       const index = this.characters.findIndex((char) => char.character.id === updatedCharacter.character.id)
       if (index !== -1) this.characters[index] = updatedCharacter
     },
+    // Property is mapCharacter key
+    updateCharacterProperty<K extends keyof MapCharacter>(
+      characterId: UUID,
+      property: K,
+      value: MapCharacter[K]
+    ) {
+      const character = this.characters.find((char) => char.character.id === characterId)
+      if (character) {
+        character[property] = value
+      }
+    },
     removeCharacter(characterId: UUID) {
       this.characters = this.characters.filter((char) => char.character.id !== characterId)
     },