From 6383320e8c9ab884006d8af89d5e25621bafa43e Mon Sep 17 00:00:00 2001
From: Dennis Postma <dennis@directonline.io>
Date: Thu, 6 Feb 2025 21:20:49 +0100
Subject: [PATCH] #209 : Improved logic for button presses

---
 src/App.vue                           | 13 ++++++++-----
 src/components/screens/Characters.vue |  6 +++---
 src/components/screens/Game.vue       |  2 +-
 src/components/utilities/Modal.vue    |  6 +++---
 4 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index d2b4a03..5ab00d8 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -16,11 +16,10 @@ import MapEditor from '@/components/screens/MapEditor.vue'
 import BackgroundImageLoader from '@/components/utilities/BackgroundImageLoader.vue'
 import Debug from '@/components/utilities/Debug.vue'
 import Notifications from '@/components/utilities/Notifications.vue'
+import { useGameComposable } from '@/composables/useGameComposable'
 import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
 import { useGameStore } from '@/stores/gameStore'
-import { useMapEditorStore } from '@/stores/mapEditorStore'
-import { computed, ref, useTemplateRef, watch } from 'vue'
-import { useGameComposable } from '@/composables/useGameComposable'
+import { computed, watch } from 'vue'
 
 const gameStore = useGameStore()
 
@@ -45,9 +44,13 @@ watch(
 )
 
 // #209: Play sound when a button is pressed
-// @TODO: Not all button-like elements will actually be a button, so we need to find a better way to do this
 addEventListener('click', (event) => {
-  if (!(event.target instanceof HTMLButtonElement)) return
+  const classList = ['btn-cyan', 'btn-red', 'btn-indigo', 'btn-empty', 'btn-sound']
+  const target = event.target as HTMLElement
+  // console.log(target) // Uncomment to log the clicked element
+  if (!classList.some((className) => target.classList.contains(className))) {
+    return // Only play sound if the clicked element is a button
+  }
   playSound('/assets/sounds/button-click.wav')
 })
 
diff --git a/src/components/screens/Characters.vue b/src/components/screens/Characters.vue
index 8f921da..f05c81e 100644
--- a/src/components/screens/Characters.vue
+++ b/src/components/screens/Characters.vue
@@ -18,11 +18,11 @@
             <div class="absolute right-[calc(100%_+_16px)] -top-px flex gap-2 flex-col">
               <div v-for="character in characters" :key="character.id" class="character relative rounded default-border w-12 h-12 bg-[url('/assets/ui-texture.png')] after:absolute after:w-full after:h-px after:bg-gray-500" :class="{ active: selectedCharacterId === character.id }">
                 <img src="/assets/placeholders/head.png" class="w-9 h-9 object-contain center-element" alt="Player head" />
-                <input class="h-full w-full absolute m-0 z-10 hover:cursor-pointer focus-visible:outline-offset-0" type="radio" name="character" :value="character.id" v-model="selectedCharacterId" />
+                <input class="h-full w-full absolute m-0 z-10 hover:cursor-pointer focus-visible:outline-offset-0 btn-sound" type="radio" name="character" :value="character.id" v-model="selectedCharacterId" />
               </div>
               <div class="character relative rounded default-border w-12 h-12 bg-[url('/assets/ui-texture.png')]" :class="{ active: characters.length == 0 }" v-if="characters.length < 4">
-                <button class="p-0 h-full w-full flex flex-col justify-between focus-visible:outline-offset-0" @click="isCreateNewCharacterModalOpen = true">
-                  <img class="w-6 h-6 object-contain center-element" draggable="false" src="/assets/icons/plus-icon.svg" />
+                <button class="p-0 h-full w-full flex flex-col justify-between focus-visible:outline-offset-0 btn-sound" @click="isCreateNewCharacterModalOpen = true">
+                  <img class="w-6 h-6 object-contain center-element btn-sound" draggable="false" src="/assets/icons/plus-icon.svg" />
                 </button>
               </div>
             </div>
diff --git a/src/components/screens/Game.vue b/src/components/screens/Game.vue
index 95183a8..64020f0 100644
--- a/src/components/screens/Game.vue
+++ b/src/components/screens/Game.vue
@@ -27,9 +27,9 @@ 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 { useGameStore } from '@/stores/gameStore'
 import { Game, Scene } from 'phavuer'
-import { useGameComposable } from '@/composables/useGameComposable'
 
 const gameStore = useGameStore()
 const { playSound } = useGameComposable()
diff --git a/src/components/utilities/Modal.vue b/src/components/utilities/Modal.vue
index d561a3a..aecb665 100644
--- a/src/components/utilities/Modal.vue
+++ b/src/components/utilities/Modal.vue
@@ -14,11 +14,11 @@
           <slot name="modalHeader" />
         </div>
         <div class="flex gap-2.5">
-          <button v-if="canFullScreen" @click="toggleFullScreen" class="w-5 h-5 m-0 p-0 relative hover:scale-110 transition-transform duration-300 ease-in-out">
+          <button v-if="canFullScreen" @click="toggleFullScreen" class="w-5 h-5 m-0 p-0 relative hover:scale-110 transition-transform duration-300 ease-in-out btn-sound">
             <img :alt="isFullScreen ? 'exit full-screen' : 'full-screen'" :src="isFullScreen ? '/assets/icons/modal/minimize.svg' : '/assets/icons/modal/increase-size-option.svg'" class="w-3.5 h-3.5 invert" draggable="false" />
           </button>
-          <button v-if="closable" @click="closeModal" class="w-3.5 h-3.5 m-0 p-0 relative hover:rotate-180 transition-transform duration-300 ease-in-out">
-            <img alt="close" src="/assets/icons/modal/close-button-white.svg" class="w-full h-full" draggable="false" />
+          <button v-if="closable" @click="closeModal" class="w-3.5 h-3.5 m-0 p-0 relative hover:rotate-180 transition-transform duration-300 ease-in-out btn-sound">
+            <img alt="close" src="/assets/icons/modal/close-button-white.svg" class="w-full h-full btn-sound" draggable="false" />
           </button>
         </div>
       </div>