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

---
 .../pages/Game/states/Calculate/Calculate.jsx | 19 ++++++++++++++-----
 1 file changed, 14 insertions(+), 5 deletions(-)

diff --git a/client/src/pages/Game/states/Calculate/Calculate.jsx b/client/src/pages/Game/states/Calculate/Calculate.jsx
index 35d5370..9c29ae3 100644
--- a/client/src/pages/Game/states/Calculate/Calculate.jsx
+++ b/client/src/pages/Game/states/Calculate/Calculate.jsx
@@ -3,6 +3,10 @@ import {GroupContext} from "@/common/contexts/GroupContext.jsx";
 import {useContext, useEffect, useState} from "react";
 import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
 import {faShoppingCart} from "@fortawesome/free-solid-svg-icons";
+import InterfaceSound from "@/common/sounds/interface.mp3";
+import Sound from "react-sound";
+import {MusicContext} from "@/common/contexts/MusicContext.jsx";
+import BeginSound from "@/common/sounds/begin.mp3";
 
 const localeOptions = {
     style: "decimal",
@@ -16,6 +20,8 @@ export const Calculate = ({setState}) => {
 
     const [animatedGroups, setAnimatedGroups] = useState([]);
 
+    const {musicEnabled} = useContext(MusicContext);
+
     const [nachfrage, setNachfrage] = useState(0);
 
     const animateNext = () => {
@@ -29,12 +35,9 @@ export const Calculate = ({setState}) => {
 
         setAnimatedGroups(old => [...old, {...current, profit, name: getGroupById(current.id).name}]);
 
-        console.log(current.id, getGroupById(current.id).capital, profit);
-
         updateCapital(current.id, getGroupById(current.id).capital + profit);
     }
 
-
     useEffect(() => {
         if (round.length === 0) {
             endRound();
@@ -51,7 +54,7 @@ export const Calculate = ({setState}) => {
 
     useEffect(() => {
         let avg = 0;
-        round.forEach(r => avg += r.amount);
+        round.forEach(r => avg += r.price);
         avg /= round.length;
 
         setNachfrage(avg < 1800 ? 50 : avg > 2200 ? 30 : 40);
@@ -60,11 +63,17 @@ export const Calculate = ({setState}) => {
 
     return (
         <div className="calculate-state">
+
             <div className="calculate-container">
-                {animatedGroups.length === 0 && <h2 className="hint">Die Kuchen werden verkauft...</h2>}
+                {animatedGroups.length === 0 && <>
+                    <Sound url={BeginSound} playStatus={Sound.status.PLAYING} volume={musicEnabled ? 60 : 0} loop={false}/>
+                    <h2 className="hint">Die Kuchen werden verkauft...</h2>
+                </>}
                 {animatedGroups.map((r, i) => {
                     return (
                         <div key={i} className="glassy round">
+                            {animatedGroups.length - 1 === i && musicEnabled &&
+                                <Sound url={InterfaceSound} playStatus={Sound.status.PLAYING} volume={50} loop={false}/>}
                             <div className="round-item">
                                 <p>Unternehmen</p>
                                 <h2>{r.name}</h2>