60 lines
1.8 KiB
JavaScript
60 lines
1.8 KiB
JavaScript
import "./styles.sass";
|
|
import {useEffect, useState} from "react";
|
|
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";
|
|
|
|
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");
|
|
}
|
|
|
|
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} capital={capital}/>}
|
|
{state === "end" && <div className="game-end">
|
|
<h1>Ende</h1>
|
|
<p>Das Spiel ist vorbei!</p>
|
|
</div>}
|
|
|
|
</div>
|
|
);
|
|
} |