diff --git a/client/src/pages/Game/states/Waiting/Waiting.jsx b/client/src/pages/Game/states/Waiting/Waiting.jsx new file mode 100644 index 0000000..2d8a985 --- /dev/null +++ b/client/src/pages/Game/states/Waiting/Waiting.jsx @@ -0,0 +1,63 @@ +import "./styles.sass"; +import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"; +import {faHourglassHalf} from "@fortawesome/free-solid-svg-icons"; +import {GroupContext} from "@/common/contexts/GroupContext.jsx"; +import {useContext, useEffect, useState} from "react"; +import {socket} from "@/common/utils/socket.js"; +import {Navigate} from "react-router"; + +export const Waiting = ({setState}) => { + + const {groups, handleRound} = useContext(GroupContext); + + if (groups.length === 1) return ; + + const [readyGroups, setReadyGroups] = useState([]); + + useEffect(() => { + socket.on("RECEIVED", (submission) => { + handleRound(submission); + setReadyGroups(groups => [...groups, submission.id]); + }); + + return () => { + socket.off("RECEIVED"); + } + }, []); + + useEffect(() => { + if (readyGroups.length === groups.length) { + setState("calculate"); + } + }, [readyGroups]); + + const getFriendlyNames = () => { + let notReady = groups.filter(group => !readyGroups.includes(group.id)); + let names = notReady.map(group => group.name); + + if (names.length === 1) return {names[0]}; + + let last = names.pop(); + + return <>{names.join(", ")} und {last}; + } + + return ( +
+
+ +

Warten auf {getFriendlyNames()}

+
+
+

Die Nachfrage

+

Die Nachfrage berechnet sich aus dem Durchschnittspreis.

+ +

Bei weniger als 1800€ liegt die Nachfrage bei 50.

+ +

Ist er über 1800€ liegt die Nachfrage bei 40.

+ +

Bei mehr als 2200€ liegt die Nachfrage bei 30.

+
+
+ ); +} \ No newline at end of file