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

src/composables/useCharacterSpriteComposable.ts

@@ -59,6 +59,26 @@ export function useCharacterSpriteComposable(scene: Phaser.Scene, tilemap: Phase
     })
   }
 
+  const playAnimation = (animation: string, loop = false) => {
+    if (!characterSprite.value || !characterSpriteId.value) return
+
+    const fullAnimationName = `${characterSpriteId.value}-${animation}_${currentDirection.value}`
+
+    // Remove any existing animation complete listeners
+    characterSprite.value.off(Phaser.Animations.Events.ANIMATION_COMPLETE)
+
+    // Add new listener
+    characterSprite.value.on(Phaser.Animations.Events.ANIMATION_COMPLETE, () => {
+      characterSprite.value!.setFrame(0)
+      characterSprite.value!.setTexture(charTexture.value)
+    })
+
+    characterSprite.value.anims.play({
+      key: fullAnimationName,
+      repeat: loop ? -1 : 0
+    })
+  }
+
   const calcDirection = (oldPositionX: number, oldPositionY: number, newPositionX: number, newPositionY: number): Direction => {
     if (newPositionY < oldPositionY || newPositionX < oldPositionX) return Direction.NEGATIVE
     if (newPositionX > oldPositionX || newPositionY > oldPositionY) return Direction.POSITIVE
@@ -125,6 +145,7 @@ export function useCharacterSpriteComposable(scene: Phaser.Scene, tilemap: Phase
     isometricDepth,
     isFlippedX,
     updatePosition,
+    playAnimation,
     calcDirection,
     updateSprite,
     initializeSprite,