From a2abf8ea1555778dbb6462502883946c83ca2a5f Mon Sep 17 00:00:00 2001
From: Mathias Wagner <germannewsmaker@gmail.com>
Date: Tue, 21 Nov 2023 08:27:45 +0100
Subject: [PATCH] Added help to the Join.jsx

---
 client/src/pages/Join/Join.jsx | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/client/src/pages/Join/Join.jsx b/client/src/pages/Join/Join.jsx
index e9447a2..a88f607 100644
--- a/client/src/pages/Join/Join.jsx
+++ b/client/src/pages/Join/Join.jsx
@@ -17,6 +17,8 @@ export const Join = () => {
     const [state, setState] = useState("join");
 
     const [capital, setCapital] = useState(25000);
+    const [maxWin, setMaxWin] = useState(0);
+    const [cost, setCost] = useState(0);
 
     const handleEnd = () => {
         setState("end");
@@ -44,12 +46,15 @@ export const Join = () => {
 
     return (
         <div className="join-page">
-            <div className="glassy capital">
+            {cost !== 0 && <div className="glassy capital">
                 <h2>Firmenkapital: {capital.toLocaleString("de-DE", localeOptions)} €</h2>
-            </div>
+                <h3>Produktionskosten: <span className="in-red">- {cost.toLocaleString("de-DE", localeOptions)} €</span></h3>
+                {maxWin > 0 && <h3>Potenzieller Gewinn: <span className="in-green">+ {maxWin.toLocaleString("de-DE", localeOptions)} €</span></h3>}
+                {maxWin < 0 && <h3>Potenzieller Gewinn: <span className="in-red">- {maxWin.toLocaleString("de-DE", localeOptions)} €</span></h3>}
+            </div>}
             {state === "join" && <Code setState={setState}/>}
-            {state === "waiting" && <FontAwesomeIcon icon={faHourglassHalf} bounce className="waiting-icon" /> }
-            {state === "input" && <Input setState={setState} capital={capital}/>}
+            {state === "waiting" && <FontAwesomeIcon icon={faHourglassHalf} bounce className="waiting-icon" style={{marginTop: "1rem"}} /> }
+            {state === "input" && <Input setState={setState} capital={capital} setWin={setMaxWin} setCost={setCost}/>}
             {state === "end" && <div className="game-end">
                 <h1>Ende</h1>
                 <p>Das Spiel ist vorbei!</p>