From 3c4a3fe9ec330d89c8cd6370aeb691d93d62edf0 Mon Sep 17 00:00:00 2001
From: Mathias Wagner <germannewsmaker@gmail.com>
Date: Sun, 19 Nov 2023 01:34:02 +0100
Subject: [PATCH] Added the company capital to the Join.jsx
---
client/src/pages/Join/Join.jsx | 20 +++++++++++++++++++-
1 file changed, 19 insertions(+), 1 deletion(-)
diff --git a/client/src/pages/Join/Join.jsx b/client/src/pages/Join/Join.jsx
index ee7f4ac..4f237e1 100644
--- a/client/src/pages/Join/Join.jsx
+++ b/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}/>}