Cache audio

src/components/game/character/Character.vue

@@ -13,7 +13,7 @@ import CharacterHair from '@/components/game/character/partials/CharacterHair.vu
 import ChatBubble from '@/components/game/character/partials/ChatBubble.vue'
 import HealthBar from '@/components/game/character/partials/HealthBar.vue'
 import { useCharacterSpriteComposable } from '@/composables/useCharacterSpriteComposable'
-import { useGameComposable } from '@/composables/useGameComposable'
+import { useSoundComposable } from '@/composables/useSoundComposable'
 import { useGameStore } from '@/stores/gameStore'
 import { useMapStore } from '@/stores/mapStore'
 import { Container, Sprite, useScene } from 'phavuer'
@@ -29,7 +29,7 @@ const mapStore = useMapStore()
 const scene = useScene()
 
 const { characterContainer, characterSprite, currentPositionX, currentPositionY, isometricDepth, isFlippedX, updatePosition, playAnimation, calcDirection, updateSprite, initializeSprite, cleanup } = useCharacterSpriteComposable(scene, props.tileMap, props.mapCharacter)
-const { playSound, stopSound } = useGameComposable()
+const { playSound, stopSound } = useSoundComposable()
 
 const handlePositionUpdate = (newValues: any, oldValues: any) => {
   if (!newValues) return
@@ -43,6 +43,30 @@ const handlePositionUpdate = (newValues: any, oldValues: any) => {
   }
 }
 
+watch(
+  () => props.mapCharacter.isMoving,
+  (newValue) => {
+    if (newValue) {
+      playSound('/assets/sounds/walk.wav', false, true)
+    } else {
+      stopSound('/assets/sounds/walk.wav')
+    }
+  }
+)
+
+watch(
+  () => props.mapCharacter.isAttacking,
+  (newValue) => {
+    if (newValue) {
+      playAnimation('attack')
+      playSound('/assets/sounds/attack.wav', false, true)
+    } else {
+      stopSound('/assets/sounds/attack.wav')
+    }
+    mapStore.updateCharacterProperty(props.mapCharacter.character.id, 'isAttacking', false)
+  }
+)
+
 watch(
   () => ({
     positionX: props.mapCharacter.character.positionX,
@@ -53,25 +77,6 @@ watch(
   }),
   (oldValues, newValues) => {
     handlePositionUpdate(oldValues, newValues)
-    if (props.mapCharacter.isAttacking) {
-      // Play attack animation
-      playAnimation('attack')
-      // Play hit sound
-      playSound('/assets/sounds/hit.wav')
-      // Disable attack immediately after playing the animation
-      mapStore.updateCharacterProperty(props.mapCharacter.character.id, 'isAttacking', false)
-    }
-  }
-)
-
-watch(
-  () => props.mapCharacter.isMoving,
-  (newValue) => {
-    if (newValue) {
-      playSound('/assets/sounds/walk.wav', true, true)
-    } else {
-      stopSound('/assets/sounds/walk.wav')
-    }
   }
 )
 

src/components/screens/Characters.vue

@@ -124,12 +124,12 @@
 import config from '@/application/config'
 import { type CharacterHair, type Character as CharacterT, type Map } from '@/application/types'
 import Modal from '@/components/utilities/Modal.vue'
-import { useGameComposable } from '@/composables/useGameComposable'
+import { useSoundComposable } from '@/composables/useSoundComposable'
 import { CharacterHairStorage } from '@/storage/storages'
 import { useGameStore } from '@/stores/gameStore'
 import { onBeforeUnmount, onMounted, ref, watch } from 'vue'
 
-const { playSound } = useGameComposable()
+const { playSound } = useSoundComposable()
 const gameStore = useGameStore()
 const isLoading = ref<boolean>(true)
 const characters = ref<CharacterT[]>([])

src/components/screens/Game.vue

@@ -27,13 +27,13 @@ import Hotkeys from '@/components/game/gui/Hotkeys.vue'
 import Hud from '@/components/game/gui/Hud.vue'
 import Menu from '@/components/game/gui/Menu.vue'
 import Map from '@/components/game/map/Map.vue'
-import { useGameComposable } from '@/composables/useGameComposable'
+import { useSoundComposable } from '@/composables/useSoundComposable'
 import { useGameStore } from '@/stores/gameStore'
 import { Game, Scene } from 'phavuer'
 import { onMounted } from 'vue'
 
 const gameStore = useGameStore()
-const { playSound, stopSound } = useGameComposable()
+const { playSound, stopSound } = useSoundComposable()
 
 const gameConfig = {
   name: config.name,