Feature/background music and sounds (#45)

* 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

* Update README.md

added audio sources to README

* Fixed music and sounds

.eslintrc.js

@@ -7,20 +7,13 @@ module.exports = {
     "plugin:vue/vue3-essential",
     "eslint:recommended",
     "@vue/typescript/recommended",
-    "plugin:prettier/recommended",
   ],
   parserOptions: {
     ecmaVersion: 2020,
   },
   rules: {
     "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
     "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
-    "prettier/prettier": [
-      "error",
-      {
-        endOfLine: "auto",
-      },
-    ],
   },
   overrides: [
     {

README.md

@@ -39,4 +39,38 @@ You can remove the container with:
 docker compose down
 ```
 
+
+To monitor the container you can use the following command:
+```sh
+docker ps -a -f name=towercrush
+```
+To stop the container you can use the following command:
+```sh
+docker stop towercrush
+```
+To remove the container you can use the following command:
+```sh
+docker rm towercrush
+```
+
+## Audio sources
+
+1.	Background music
+https://pixabay.com/de/music/elektronisch-going-on-foot-133469/
+
+2.	Click
+https://pixabay.com/de/sound-effects/interface-button-154180/
+
+3.	Good result
+https://pixabay.com/de/sound-effects/goodresult-82807/
+
+4.	Put vote sound
+https://pixabay.com/de/sound-effects/button-198922/
+
+5.	Rocket whistle
+https://zvukogram.com/zvuk/41741/
+
+6.	Explosion sound
+https://zvukogram.com/zvuk/41741/
+
 > End of additions

src/App.vue

@@ -10,11 +10,11 @@
         <b-button
           class="nav-buttons"
           id="restart-button"
-          v-on:click="reloadPage"
+          v-on:click="handleReloadPage"
         >
           Restart
         </b-button>
-        <b-button class="nav-buttons" id="close-button" v-on:click="closeGame">
+        <b-button class="nav-buttons" id="close-button" v-on:click="handleCloseGame">
           Close
         </b-button>
       </nav>
@@ -27,7 +27,23 @@
 
 <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";
+import backgroundMusicSource from '/src/assets/music/background_music.mp3';
+import clickSoundSource from '/src/assets/music/click_sound.mp3';
+
+const clickSound = new Audio(clickSoundSource);
+const backgroundMusic = new Audio(backgroundMusicSource);
+
+onMounted(() => {
+  backgroundMusic.play();
+  backgroundMusic.loop = true;
+});
+
+onUnmounted(() => {
+  backgroundMusic.pause();
+  backgroundMusic.currentTime = 0;
+})
 
 function reloadPage() {
   window.location.reload();
@@ -36,6 +52,24 @@ function reloadPage() {
 function closeGame() {
   window.parent.postMessage("CLOSE ME");
 }
+
+function playClickSound(){
+  clickSound.play();
+}
+
+async function handleCloseGame() {
+  await playClickSound();
+    setTimeout(() => {
+      closeGame();
+    }, 500);
+}
+
+async function handleReloadPage() {
+  await playClickSound();
+    setTimeout(() => {
+      reloadPage();
+    }, 500);
+}
 </script>
 
 <style scoped>

src/components/GameComponent.vue

@@ -130,6 +130,9 @@ import {
 import * as websockets from "@/ts/websockets";
 import { postOverworldResultDTO } from "@/ts/minigame-rest-client";
 import { loadFull } from "tsparticles";
+import clickSoundSource from '/src/assets/music/click_sound.mp3';
+import putVoteSoundSource from '/src/assets/music/put_vote_sound.mp3';
+import goodResultSoundSource from '/src/assets/music/good_result_sound.mp3';
 
 async function particlesInit(engine: any) {
   await loadFull(engine);
@@ -187,6 +190,7 @@ onBeforeUnmount(() => {
  * button function
  */
 function disconnectFromLobby() {
+  playSound(clickSoundSource);
   websockets.disconnectFromLobby(handleMessageReceipt);
   emit("setStateToStart");
 }
@@ -198,6 +202,7 @@ function initGame() {
 }
 
 function putVote(answer: string) {
+  playSound(putVoteSoundSource);
   websockets.putVote(
     props.lobby,
     props.team,
@@ -207,6 +212,7 @@ function putVote(answer: string) {
 }
 
 function nextQuestion() {
+  playSound(clickSoundSource);
   websockets.nextQuestion(props.lobby, props.team);
 }
 
@@ -261,6 +267,7 @@ function handleUpdateGameMessage(messageBody: MessageWrapper) {
 
 function handleGameFinished() {
   if (teamWon.value !== "") {
+    playSound(goodResultSoundSource);
     console.log("finished");
     stopTowerAnimations();
     saveWinnerTeam();
@@ -485,6 +492,11 @@ const confettiConfig = {
     },
   },
 };
+
+function playSound(pathToAudioFile: string){
+  const sound = new Audio(pathToAudioFile);
+  sound.play();
+}
 </script>
 
 <style scoped>

src/components/LobbyComponent.vue

@@ -89,6 +89,9 @@
 import { defineEmits, defineProps, onBeforeUnmount, onMounted, ref } from "vue";
 import { MessageWrapper, Purpose, UpdateLobbyMessage } from "@/ts/models";
 import * as websockets from "@/ts/websockets";
+import clickSoundSource from '/src/assets/music/click_sound.mp3';
+
+const clickSound = new Audio(clickSoundSource);
 
 const messages = ref<Array<string>>([]);
 
@@ -132,11 +135,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 +151,7 @@ function changeReady() {
  * button function, when player starts game
  */
 function startLobby() {
+  playClickSound();
   console.log("start game");
   websockets.startGame(props.lobby);
 }
@@ -154,6 +160,7 @@ function startLobby() {
  * button function
  */
 function disconnectFromLobby() {
+  playClickSound();
   websockets.disconnectFromLobby(handleMessageReceipt);
   emit("setStateToStart");
 }
@@ -205,6 +212,10 @@ function handleUpdateLobbyMessage(messageWrapper: MessageWrapper) {
     emit("setStateToGame");
   }
 }
+
+function playClickSound(){
+  clickSound.play();
+}
 </script>
 
 <style scoped>

src/components/StartComponent.vue

@@ -45,6 +45,9 @@
 import { defineEmits, onBeforeUnmount, onMounted, ref } from "vue";
 import * as websockets from "@/ts/websockets";
 import { DeveloperMessage, MessageWrapper, Purpose } from "@/ts/models";
+import clickSoundSource from '/src/assets/music/click_sound.mp3';
+
+const clickSound = new Audio(clickSoundSource);
 const lobbies = ref();
 
 /**
@@ -112,6 +115,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 +144,10 @@ function subscribeToLobbyList() {
       joinedDevs.value = true;
     });
 }
+
+function playClickSound(){
+  clickSound.play();
+}
 </script>
 
 <style scoped>