Feature/background music and sounds (#33)

Background music, click sound for buttons, error notification sound,
sound for chat notifications and success notification are added

---------

Co-authored-by: eisenmls <[email protected]>

.eslintrc.js

@@ -19,7 +19,7 @@ module.exports = {
     'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
   },
 
-  extends: ['plugin:vue/vue3-essential', 'eslint:recommended', '@vue/typescript/recommended', 'plugin:prettier/recommended'],
+  extends: ['plugin:vue/vue3-essential', 'eslint:recommended', '@vue/typescript/recommended'],
 
   overrides: [
     {

README.md

@@ -100,3 +100,21 @@ To remove the container you can use the following command:
 ```sh
 docker rm bugfinder
 ```
+
+## Audio sources
+
+1.	Background music
+https://pixabay.com/de/music/optimistisch-walking-while-looking-at-the-moon-187621/
+
+2.	Click 
+https://pixabay.com/de/sound-effects/interface-button-154180/
+
+3.	Error notification
+https://pixabay.com/de/sound-effects/error-126627/
+
+4.	Classic notifications from the chat
+https://pixabay.com/de/sound-effects/notifications-sound-127856/
+
+5.	Success notification
+https://pixabay.com/de/sound-effects/short-success-sound-glockenspiel-treasure-video-game-6346/
+

src/App.vue

@@ -1,8 +1,23 @@
 <script setup lang="ts">
-import { ref } from 'vue';
+import { ref, onMounted, onUnmounted } from 'vue';
 import HomeView from '@/views/HomeView.vue';
 import GameView from '@/views/GameView.vue';
 import FinishView from '@/views/FinishView.vue';
+import backgroundMusicSource from '/src/assets/music/background_music.mp3';
+import clickSoundSource from '/src/assets/music/click_sound.mp3';
+
+const backgroundMusic = new Audio(backgroundMusicSource);
+const clickSound = new Audio(clickSoundSource);
+
+onMounted(() => {
+  backgroundMusic.loop = true;
+  backgroundMusic.play();
+});
+
+onUnmounted(() => {
+  backgroundMusic.pause();
+  backgroundMusic.currentTime = 0;
+});
 
 enum views {
   home,
@@ -17,6 +32,17 @@ function changeView(newView: views) {
 function closeGame() {
   window.parent.postMessage('CLOSE ME');
 }
+
+function playClickSound(){
+  clickSound.play();
+}
+
+async function handleCloseGame() {
+  await playClickSound();
+    setTimeout(() => {
+      closeGame();
+    }, 500);
+}
 </script>
 
 <template>
@@ -26,7 +52,7 @@ function closeGame() {
         <span class="navbar-brand mb-0 h1">Bugfinder</span>
       </div>
       <div class="mr-1">
-        <b-button variant="danger" class="nav-buttons close-button" id="close-button" v-on:click="closeGame">
+        <b-button variant="danger" class="nav-buttons close-button" id="close-button" v-on:click="handleCloseGame">
           <em class="bi-x"></em>
         </b-button>
       </div>

src/components/ChatBox.vue

@@ -1,15 +1,33 @@
 <script setup lang="ts">
-import { ChatParticipant } from '@/models/chat';
+import { ChatColor, ChatParticipant } from '@/models/chat';
 import { watch } from 'vue';
 import { chatHistory } from '@/services/chat';
+import notificationSoundSource from '/src/assets/music/notification_sound.mp3';
+import successSoundSource from '/src/assets/music/success_sound.mp3';
+import errorSoundSource from '/src/assets/music/error_sound.mp3';
+
+const notificationSound = new Audio(notificationSoundSource);
+const successSound = new Audio(successSoundSource);
+const errorSound = new Audio(errorSoundSource);
 
 watch(
-  () => chatHistory,
-  () => {
+  () => chatHistory.value,
+  (newChatHistory) => {
     const chatBox = document.getElementById('chat-box');
     if (chatBox) {
       chatBox.lastElementChild?.scrollIntoView();
     }
+    
+    const lastMessage = newChatHistory[newChatHistory.length - 1];
+    if (lastMessage && lastMessage.from === ChatParticipant.OTHER) {
+      if (lastMessage.color === ChatColor.LIGHT || lastMessage.color === ChatColor.PRIMARY) {
+        notificationSound.play();
+      } else if (lastMessage.color === ChatColor.WARNING) {
+        errorSound.play();
+      } else if (lastMessage.color === ChatColor.SUCCESS) {
+        successSound.play();
+      }
+    }
   },
   { deep: true }
 );

src/components/CodeBox.vue

@@ -5,7 +5,9 @@ import { CodeVisualizer } from '@/services/code-visualizer';
 import WordBox from '@/components/WordBox.vue';
 import SelectBugModal from '@/components/SelectBugModal.vue';
 import { ref, watch } from 'vue';
+import clickSoundSource from '/src/assets/music/click_sound.mp3';
 
+const clickSound = new Audio(clickSoundSource);
 const props = defineProps<{
   code: ICode;
   codeFeedback: CodeFeedback;
@@ -27,7 +29,9 @@ const emptyBug = new Bug(-1, ErrorType.UNDEFINED, '');
 const currentEditingBug = ref(emptyBug);
 const showModal = ref(false);
 
+
 function submit() {
+  playClickSound();
   if (!submitted.value) {
     submitted.value = true;
     emit('submitSolution', new Solution(undefined, selectedBugs.value));
@@ -38,6 +42,7 @@ function selectBug(word: IWord) {
   if (submitted.value) {
     return;
   }
+  playClickSound();
   if (selectedBugs.value.find((bug) => bug.wordId == word.id) == null) {
     let wordString = word.wordContent;
     if (wordString == space) {
@@ -79,6 +84,10 @@ function getWordById(wordId: number | string): IWord | undefined {
   return props.code.words.find((word) => word.id == wordId);
 }
 
+function playClickSound(){
+  clickSound.play();
+}
+
 watch(
   () => props.code,
   (newCode) => {

src/views/FinishView.vue

@@ -1,14 +1,28 @@
 <script setup lang="ts">
+import clickSoundSource from '/src/assets/music/click_sound.mp3';
+
+const clickSound = new Audio(clickSoundSource);
 function closeGame() {
   window.parent.postMessage('CLOSE ME');
 }
+
+async function handleCloseGame() {
+  await playClickSound();
+    setTimeout(() => {
+      closeGame();
+    }, 500);
+}
+
+function playClickSound(){
+  clickSound.play();
+}
 </script>
 
 <template>
   <main>
     <div class="text-center position-absolute top-50 start-50 translate-middle">
       <h2>You finished the Game!</h2>
-      <b-button variant="danger" id="close-button" v-on:click="closeGame"> Back to game </b-button>
+      <b-button variant="danger" id="close-button" v-on:click="handleCloseGame"> Back to game </b-button>
     </div>
   </main>
 </template>

src/views/GameView.vue

@@ -6,6 +6,9 @@ import { ICode, ISolution } from '@/models/code';
 import * as chat from '@/services/chat';
 import { CodeFeedback } from '@/services/code-feedback';
 import { Ref, ref } from 'vue';
+import clickSoundSource from '/src/assets/music/click_sound.mp3';
+
+const clickSound = new Audio(clickSoundSource);
 
 const emit = defineEmits<{
   (e: 'endGame'): void;
@@ -28,6 +31,7 @@ const showNextButton = ref(false);
 chat.sendStartMessgae();
 
 async function nextCode() {
+  playClickSound();
   if (await game.hasNextCode()) {
     await chat.sendNextCode();
     await game.nextCode();
@@ -49,6 +53,10 @@ async function submitSolution(selectedBugs: ISolution) {
     showNextButton.value = true;
   }, 2000);
 }
+
+function playClickSound(){
+  clickSound.play();
+}
 </script>
 
 <template>

src/views/HomeView.vue

@@ -1,7 +1,9 @@
 <script setup lang="ts">
 import { BASE_URL } from '@/app';
 import { ref } from 'vue';
+import clickSoundSource from '/src/assets/music/click_sound.mp3';
 
+const clickSound = new Audio(clickSoundSource);
 const emit = defineEmits<{
   (e: 'startGame'): void;
 }>();
@@ -22,6 +24,9 @@ fetch(`${BASE_URL}/configurations/${configurationId}`)
   .catch(() => {
     configuration.value = 'Server not reachable';
   });
+  function playClickSound(){
+    clickSound.play();
+  }
 </script>
 
 <template>
@@ -34,7 +39,7 @@ fetch(`${BASE_URL}/configurations/${configurationId}`)
         <div class="alert alert-danger">{{ configuration }}</div>
       </div>
       <div v-if="typeof configuration === 'object'">
-        <button class="btn btn-primary" @click="emit('startGame')">Start</button>
+        <button class="btn btn-primary" @click="playClickSound(); emit('startGame')">Start</button>
       </div>
     </div>
     <div v-if="configurationId?.length === 0">