Background music and sounds

added background music, click sound for buttons, sound for click on some answer, sound for the rocket and explosion as the tower collapses, sound for the end screen with the winner

src/App.vue

@@ -27,15 +27,35 @@
 
 <script setup lang="ts">
 import DarkMode from "@/components/DarkModeComponent.vue";
-import GameView from "@/views/GameView";
+import GameView from "@/views/GameView.vue";
+import { onMounted, onUnmounted } from "vue";
+
+const backgroundMusic = new Audio("@/assets/music/background_music.mp3");
+
+onMounted(() => {
+  backgroundMusic.play();
+  backgroundMusic.loop = true;
+});
+
+onUnmounted(() => {
+  backgroundMusic.pause();
+  backgroundMusic.currentTime = 0;
+})
 
 function reloadPage() {
+  playClickSound();
   window.location.reload();
 }
 
 function closeGame() {
+  playClickSound();
   window.parent.postMessage("CLOSE ME");
 }
+
+function playClickSound(){
+  const clickSound = new Audio("@/assets/music/click_sound.mp3");
+  clickSound.play();
+}
 </script>
 
 <style scoped>

src/components/GameComponent.vue

@@ -187,6 +187,7 @@ onBeforeUnmount(() => {
  * button function
  */
 function disconnectFromLobby() {
+  playSound("@/assets/music/click_sound.mp3");
   websockets.disconnectFromLobby(handleMessageReceipt);
   emit("setStateToStart");
 }
@@ -198,6 +199,7 @@ function initGame() {
 }
 
 function putVote(answer: string) {
+  playSound("@/assets/music/put_vote_sound.mp3");
   websockets.putVote(
     props.lobby,
     props.team,
@@ -207,6 +209,7 @@ function putVote(answer: string) {
 }
 
 function nextQuestion() {
+  playSound("@/assets/music/click_sound.mp3");
   websockets.nextQuestion(props.lobby, props.team);
 }
 
@@ -261,6 +264,7 @@ function handleUpdateGameMessage(messageBody: MessageWrapper) {
 
 function handleGameFinished() {
   if (teamWon.value !== "") {
+    playSound("@/assets/music/good_result_sound.mp3");
     console.log("finished");
     stopTowerAnimations();
     saveWinnerTeam();
@@ -485,6 +489,11 @@ const confettiConfig = {
     },
   },
 };
+
+function playSound(pathToAudioFile: string){
+  const sound = new Audio(pathToAudioFile);
+  sound.play();
+}
 </script>
 
 <style scoped>

src/components/LobbyComponent.vue

@@ -132,11 +132,13 @@ onBeforeUnmount(() => {
  * @param team
  */
 function joinTeam(team: string) {
+  playClickSound();
   websockets.joinTeam(team, props.lobby);
   emit("setTeam", team);
 }
 
 function changeReady() {
+  playClickSound();
   if (props.team.includes("team")) {
     websockets.changeReady(props.lobby);
   }
@@ -146,6 +148,7 @@ function changeReady() {
  * button function, when player starts game
  */
 function startLobby() {
+  playClickSound();
   console.log("start game");
   websockets.startGame(props.lobby);
 }
@@ -154,6 +157,7 @@ function startLobby() {
  * button function
  */
 function disconnectFromLobby() {
+  playClickSound();
   websockets.disconnectFromLobby(handleMessageReceipt);
   emit("setStateToStart");
 }
@@ -205,6 +209,11 @@ function handleUpdateLobbyMessage(messageWrapper: MessageWrapper) {
     emit("setStateToGame");
   }
 }
+
+function playClickSound(){
+  const clickSound = new Audio("@/assets/music/click_sound.mp3");
+  clickSound.play();
+}
 </script>
 
 <style scoped>

src/components/StartComponent.vue

@@ -112,6 +112,7 @@ function clickLobby(lobbyName: string) {
  * This methods connects and subscribes to the fitting paths if a player wants to join a lobby
  */
 function connectToLobby() {
+  playClickSound();
   websockets.clearDeveloperLobby();
   websockets
     .connect(lobby.value, player.value)
@@ -140,6 +141,11 @@ function subscribeToLobbyList() {
       joinedDevs.value = true;
     });
 }
+
+function playClickSound(){
+  const clickSound = new Audio("@/assets/music/click_sound.mp3");
+  clickSound.play();
+}
 </script>
 
 <style scoped>