From 226609432ef3e4fa8b1ec57e249dd5cdd66833b2 Mon Sep 17 00:00:00 2001
From: Mathias Wagner <germannewsmaker@gmail.com>
Date: Sun, 19 Nov 2023 15:13:28 +0100
Subject: [PATCH] Integrated music in the Waiting.jsx

---
 client/src/pages/Game/states/Waiting/Waiting.jsx | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/client/src/pages/Game/states/Waiting/Waiting.jsx b/client/src/pages/Game/states/Waiting/Waiting.jsx
index 71b1167..bc611f1 100644
--- a/client/src/pages/Game/states/Waiting/Waiting.jsx
+++ b/client/src/pages/Game/states/Waiting/Waiting.jsx
@@ -5,6 +5,9 @@ import {GroupContext} from "@/common/contexts/GroupContext.jsx";
 import {useContext, useEffect, useState} from "react";
 import {socket} from "@/common/utils/socket.js";
 import {Navigate} from "react-router";
+import Sound from "react-sound";
+import BackgroundMusic from "@/common/sounds/background.mp3";
+import {MusicContext} from "@/common/contexts/MusicContext.jsx";
 
 export const Waiting = ({setState}) => {
 
@@ -13,6 +16,7 @@ export const Waiting = ({setState}) => {
     if (groups.length === 1) return <Navigate to="/end"/>;
 
     const [readyGroups, setReadyGroups] = useState([]);
+    const {musicEnabled} = useContext(MusicContext);
 
     useEffect(() => {
         socket.on("RECEIVED", (submission) => {
@@ -37,6 +41,11 @@ export const Waiting = ({setState}) => {
         let notReady = groups.filter(group => !readyGroups.includes(group.id));
         let names = notReady.map(group => group.name);
 
+        if (names.length === 0) {
+            setState("calculate");
+            return;
+        }
+
         if (names.length === 1) return <span>{names[0]}</span>;
 
         let last = names.pop();
@@ -46,6 +55,9 @@ export const Waiting = ({setState}) => {
 
     return (
         <div className="waiting-state">
+            <Sound url={BackgroundMusic} playStatus={Sound.status.PLAYING}
+                     volume={musicEnabled ? 50 : 0} loop={true}/>
+
             <div className="waiting-area">
                 <FontAwesomeIcon icon={faHourglassHalf} bounce/>
                 <h2>Warten auf {getFriendlyNames()}</h2>