From e87356b27a59e7c8e09a2cffec5132fc7783913b Mon Sep 17 00:00:00 2001
From: Mathias Wagner <germannewsmaker@gmail.com>
Date: Mon, 20 Nov 2023 21:17:52 +0100
Subject: [PATCH] Updated the Calculate.jsx

---
 .../pages/Game/states/Calculate/Calculate.jsx | 117 +++++++++++-------
 1 file changed, 75 insertions(+), 42 deletions(-)

diff --git a/client/src/pages/Game/states/Calculate/Calculate.jsx b/client/src/pages/Game/states/Calculate/Calculate.jsx
index 9c29ae3..e11ef8a 100644
--- a/client/src/pages/Game/states/Calculate/Calculate.jsx
+++ b/client/src/pages/Game/states/Calculate/Calculate.jsx
@@ -2,11 +2,12 @@ import "./styles.sass";
 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 {faForward, 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";
+import Button from "@/common/components/Button";
 
 const localeOptions = {
     style: "decimal",
@@ -23,6 +24,7 @@ export const Calculate = ({setState}) => {
     const {musicEnabled} = useContext(MusicContext);
 
     const [nachfrage, setNachfrage] = useState(0);
+    const [showNewCapital, setShowNewCapital] = useState(false);
 
     const animateNext = () => {
         const current = round.shift();
@@ -33,7 +35,8 @@ export const Calculate = ({setState}) => {
 
         let profit = sold * current.price - (current.amount * 1000 + 4000);
 
-        setAnimatedGroups(old => [...old, {...current, profit, name: getGroupById(current.id).name}]);
+        setAnimatedGroups(old => [...old, {...current, profit, name: getGroupById(current.id).name, sold,
+            newCapital: getGroupById(current.id).capital + profit}]);
 
         updateCapital(current.id, getGroupById(current.id).capital + profit);
     }
@@ -41,7 +44,6 @@ export const Calculate = ({setState}) => {
     useEffect(() => {
         if (round.length === 0) {
             endRound();
-            setTimeout(() => setState("waiting"), 8000);
             return;
         }
 
@@ -52,10 +54,25 @@ export const Calculate = ({setState}) => {
         return () => clearTimeout(timeout);
     }, [animatedGroups]);
 
+    useEffect(() => {
+        if (animatedGroups.length === 0) return;
+
+        const timeout = setTimeout(() => {
+            setShowNewCapital(true);
+        }, 3000);
+
+        return () => clearTimeout(timeout);
+    }, [round]);
+
     useEffect(() => {
         let avg = 0;
-        round.forEach(r => avg += r.price);
-        avg /= round.length;
+        let amount = 0;
+        round.forEach(r => {
+            avg += r.price * r.amount;
+            amount += parseInt(r.amount);
+        });
+
+        avg /= amount;
 
         setNachfrage(avg < 1800 ? 50 : avg > 2200 ? 30 : 40);
         setAnimatedGroups([]);
@@ -64,49 +81,65 @@ export const Calculate = ({setState}) => {
     return (
         <div className="calculate-state">
 
-            <div className="calculate-container">
-                {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>
-                            </div>
+            <div className="calculate-state-inner">
+                <div className="calculate-container">
+                    {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>
+                                </div>
 
-                            <div className="round-item">
-                                <p>Absatzpreis</p>
-                                <h2>{r.price?.toLocaleString("de-DE", localeOptions)} €</h2>
-                            </div>
+                                <div className="round-item">
+                                    <p>Absatzpreis</p>
+                                    <h2>{r.price?.toLocaleString("de-DE", localeOptions)} €</h2>
+                                </div>
 
-                            <div className="round-item">
-                                <p>Menge</p>
-                                <h2>{r.amount} Kisten</h2>
-                            </div>
+                                <div className="round-item">
+                                    <p>Menge</p>
+                                    <h2>{r.amount} Kisten</h2>
+                                </div>
 
-                            <div className="round-item">
-                                <p>Gewinn/Verlust</p>
-                                {r.profit > 0 && <h2 className="round-green">+ {r.profit?.toLocaleString("de-DE", localeOptions)} €</h2>}
-                                {r.profit < 0 && <h2 className="round-red">- {r.profit?.toLocaleString("de-DE", localeOptions)} €</h2>}
-                                {r.profit === 0 && <h2>0 €</h2>}
+                                <div className="round-item">
+                                    <p>Verkauft</p>
+                                    <h2>{r.sold} Kisten</h2>
+                                </div>
+
+                                {!showNewCapital && <div className="round-item">
+                                    <p>Gewinn/Verlust</p>
+                                    {r.profit > 0 && <h2 className="round-green">+ {r.profit?.toLocaleString("de-DE", localeOptions)} €</h2>}
+                                    {r.profit < 0 && <h2 className="round-red">- {r.profit?.toLocaleString("de-DE", localeOptions)} €</h2>}
+                                    {r.profit === 0 && <h2>0 €</h2>}
+                                </div>}
+
+                                {showNewCapital && <div className="round-item">
+                                    <p>Kapital
+                                        {r.profit > 0 && <span className="round-green"> + {r.profit?.toLocaleString("de-DE", localeOptions)} €</span>}
+                                        {r.profit < 0 && <span className="round-red"> - {r.profit?.toLocaleString("de-DE", localeOptions)} €</span>}
+                                        {r.profit === 0 && <span> (Unverändert)</span>}
+                                    </p>
+                                    <h2>{r.newCapital?.toLocaleString("de-DE", localeOptions)} €</h2>
+                                </div>}
                             </div>
-                        </div>
-                    )
-                })}
-            </div>
-            <div className="glassy customer" style={{marginTop: (6.2 * animatedGroups.length) + "rem"}}>
-                <FontAwesomeIcon icon={faShoppingCart} />
-                <div className="customer-item">
-                    <p>Nachfrage</p>
-                    <h2 className="round-green">{nachfrage}</h2>
+                        )
+                    })}
+                    {showNewCapital && <Button text="Nächste Runde" onClick={() => setState("waiting")} icon={faForward}/>}
+                </div>
+                <div className="glassy customer" style={{marginTop: (6.2 * animatedGroups.length) + "rem"}}>
+                    <FontAwesomeIcon icon={faShoppingCart} />
+                    <div className="customer-item">
+                        <p>Nachfrage</p>
+                        <h2 className="round-green">{nachfrage}</h2>
+                    </div>
                 </div>
             </div>
-
         </div>
     );
 }
\ No newline at end of file