Listen for attack events. TODO: finish anim. handling

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