Added the company capital to the Join.jsx

client/src/pages/Join/Join.jsx

@@ -4,15 +4,28 @@ import Code from "@/pages/Join/states/Code";
 import {socket} from "@/common/utils/socket.js";
 import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
 import {faHourglassHalf} from "@fortawesome/free-solid-svg-icons";
-import Input from "@/pages/Join/states/Input/index.js";
+import Input from "@/pages/Join/states/Input";
+
+const localeOptions = {
+    style: "decimal",
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2,
+    signDisplay: "never"
+}
 
 export const Join = () => {
     const [state, setState] = useState("join");
 
+    const [capital, setCapital] = useState(25000);
+
     const handleEnd = () => {
         setState("end");
     }
 
+    const onCapitalChange = (data) => {
+        setCapital(data.capital);
+    }
+
     const onSubmissionReady = () => {
         setState("input");
     }
@@ -20,15 +33,20 @@ export const Join = () => {
     useEffect(() => {
         socket.on("disconnect", handleEnd);
         socket.on("SUBMISSION_READY", onSubmissionReady);
+        socket.on("CAPITAL", onCapitalChange);
 
         return () => {
             socket.off("disconnect", handleEnd);
             socket.off("SUBMISSION_READY", onSubmissionReady);
+            socket.off("CAPITAL", onCapitalChange);
         }
     }, []);
 
     return (
         <div className="join-page">
+            <div className="glassy capital">
+                <h2>Firmenkapital: {capital.toLocaleString("de-DE", localeOptions)} €</h2>
+            </div>
             {state === "join" && <Code setState={setState}/>}
             {state === "waiting" && <FontAwesomeIcon icon={faHourglassHalf} bounce className="waiting-icon" /> }
             {state === "input" && <Input setState={setState}/>}