Moved map character network event logic into characters component, added playAnimation function to characterComposable, finished attack animation

src/components/game/character/Character.vue

@@ -28,7 +28,7 @@ const gameStore = useGameStore()
 const mapStore = useMapStore()
 const scene = useScene()
 
-const { characterContainer, characterSprite, currentPositionX, currentPositionY, isometricDepth, isFlippedX, updatePosition, calcDirection, updateSprite, initializeSprite, cleanup } = useCharacterSpriteComposable(scene, props.tileMap, props.mapCharacter)
+const { characterContainer, characterSprite, currentPositionX, currentPositionY, isometricDepth, isFlippedX, updatePosition, playAnimation, calcDirection, updateSprite, initializeSprite, cleanup } = useCharacterSpriteComposable(scene, props.tileMap, props.mapCharacter)
 
 const handlePositionUpdate = (newValues: any, oldValues: any) => {
   if (!newValues) return
@@ -51,7 +51,16 @@ watch(
     rotation: props.mapCharacter.character.rotation,
     isAttacking: props.mapCharacter.isAttacking
   }),
-  handlePositionUpdate
+  (oldValues, newValues) => {
+    handlePositionUpdate(oldValues, newValues)
+
+    if (props.mapCharacter.isAttacking) {
+      // Play attack animation
+      playAnimation('attack')
+      // Disable attack immediately after playing the animation
+      mapStore.updateCharacterProperty(props.mapCharacter.character.id, 'isAttacking', false)
+    }
+  }
 )
 
 onMounted(async () => {

src/components/game/map/Characters.vue

@@ -3,12 +3,44 @@
 </template>
 
 <script setup lang="ts">
+import type { MapCharacter, UUID } from '@/application/types'
 import Character from '@/components/game/character/Character.vue'
+import { useGameStore } from '@/stores/gameStore'
 import { useMapStore } from '@/stores/mapStore'
+import { onUnmounted } from 'vue'
 
+const gameStore = useGameStore()
 const mapStore = useMapStore()
 
 const props = defineProps<{
   tileMap: Phaser.Tilemaps.Tilemap
 }>()
+
+gameStore.connection?.on('map:character:join', async (data: MapCharacter) => {
+  mapStore.addCharacter(data)
+})
+
+gameStore.connection?.on('map:character:leave', (characterId: UUID) => {
+  mapStore.removeCharacter(characterId)
+})
+
+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
+  if (data.characterId === gameStore.character?.id) {
+    gameStore.character!.positionX = data.positionX
+    gameStore.character!.positionY = data.positionY
+    gameStore.character!.rotation = data.rotation
+  }
+})
+
+gameStore.connection?.on('map:character:attack', (characterId: UUID) => {
+  mapStore.updateCharacterProperty(characterId, 'isAttacking', true)
+})
+
+onUnmounted(() => {
+  gameStore.connection?.off('map:character:join')
+  gameStore.connection?.off('map:character:leave')
+  gameStore.connection?.off('map:character:move')
+})
 </script>

src/components/game/map/Map.vue

@@ -5,7 +5,7 @@
 </template>
 
 <script setup lang="ts">
-import type { MapCharacter, mapLoadData, UUID } from '@/application/types'
+import type { mapLoadData } from '@/application/types'
 import { unduplicateArray } from '@/application/utilities'
 import Characters from '@/components/game/map/Characters.vue'
 import MapTiles from '@/components/game/map/MapTiles.vue'
@@ -33,28 +33,6 @@ gameStore.connection?.on('map:character:teleport', async (data: mapLoadData) =>
   mapStore.setCharacters(data.characters)
 })
 
-gameStore.connection?.on('map:character:join', async (data: MapCharacter) => {
-  mapStore.addCharacter(data)
-})
-
-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
-  if (data.characterId === gameStore.character?.id) {
-    gameStore.character!.positionX = data.positionX
-    gameStore.character!.positionY = data.positionY
-    gameStore.character!.rotation = data.rotation
-  }
-})
-
 async function initialize() {
   if (!mapStore.mapId) return
 
@@ -87,8 +65,5 @@ onUnmounted(() => {
   }
 
   gameStore.connection?.off('map:character:teleport')
-  gameStore.connection?.off('map:character:join')
-  gameStore.connection?.off('map:character:leave')
-  gameStore.connection?.off('map:character:move')
 })
 </script>