Added more SFX logic

src/components/game/character/Character.vue

@@ -8,7 +8,6 @@
 </template>
 
 <script lang="ts" setup>
-import { Direction } from '@/application/enums'
 import { type MapCharacter } from '@/application/types'
 import CharacterHair from '@/components/game/character/partials/CharacterHair.vue'
 import ChatBubble from '@/components/game/character/partials/ChatBubble.vue'
@@ -30,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 } = useGameComposable()
+const { playSound, stopSound } = useGameComposable()
 
 const handlePositionUpdate = (newValues: any, oldValues: any) => {
   if (!newValues) return
@@ -54,7 +53,6 @@ watch(
   }),
   (oldValues, newValues) => {
     handlePositionUpdate(oldValues, newValues)
-
     if (props.mapCharacter.isAttacking) {
       // Play attack animation
       playAnimation('attack')
@@ -66,6 +64,17 @@ watch(
   }
 )
 
+watch(
+  () => props.mapCharacter.isMoving,
+  (newValue) => {
+    if (newValue) {
+      playSound('/assets/sounds/walk.mp3', true, true)
+    } else {
+      stopSound('/assets/sounds/walk.mp3')
+    }
+  }
+)
+
 onMounted(async () => {
   await initializeSprite()
 

src/components/screens/Characters.vue

@@ -124,10 +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 { CharacterHairStorage } from '@/storage/storages'
 import { useGameStore } from '@/stores/gameStore'
 import { onBeforeUnmount, onMounted, ref, watch } from 'vue'
 
+const { playSound } = useGameComposable()
 const gameStore = useGameStore()
 const isLoading = ref<boolean>(true)
 const characters = ref<CharacterT[]>([])
@@ -179,6 +181,7 @@ watch(selectedCharacterId, (characterId) => {
 })
 
 onMounted(async () => {
+  playSound('/assets/music/intro.mp3')
   const characterHairStorage = new CharacterHairStorage()
   characterHairs.value = await characterHairStorage.getAll()
 })

src/composables/useGameComposable.ts

@@ -1,10 +1,40 @@
 export function useGameComposable() {
-  const playSound = (sound: string) => {
+  const activeSounds: { [key: string]: HTMLAudioElement } = {}
+
+  const playSound = (sound: string, loop: boolean = false, ignoreIfPlaying: boolean = false) => {
+    // If sound is already playing and we want to ignore
+    if (ignoreIfPlaying && activeSounds[sound] && !activeSounds[sound].paused) {
+      return
+    }
+
+    // Stop previous instance of this sound if it exists
+    if (activeSounds[sound]) {
+      activeSounds[sound].pause()
+      activeSounds[sound].currentTime = 0
+    }
+
     const audio = new Audio(sound)
+    audio.loop = loop
+
+    // Store reference to track playing state
+    activeSounds[sound] = audio
+
+    audio.addEventListener('ended', () => {
+      delete activeSounds[sound]
+    })
+
     audio.play().catch(console.error)
   }
 
+  const stopSound = (sound: string) => {
+    if (!activeSounds[sound]) return
+    activeSounds[sound].pause()
+    activeSounds[sound].currentTime = 0
+    delete activeSounds[sound]
+  }
+
   return {
-    playSound
+    playSound,
+    stopSound
   }
 }