1
0

Updated the Waiting.jsx state

This commit is contained in:
Mathias Wagner 2023-11-20 21:18:40 +01:00
parent f5a7b95631
commit 7dac8edb2a
Signed by: Mathias
GPG Key ID: B8DC354B0A1F5B44

View File

@ -13,9 +13,10 @@ export const Waiting = ({setState}) => {
const {groups, handleRound} = useContext(GroupContext);
if (groups.length === 1) return <Navigate to="/end"/>;
if (groups.length <= 1) return <Navigate to="/end"/>;
const [readyGroups, setReadyGroups] = useState([]);
const [firstHint, setFirstHint] = useState(true);
const {musicEnabled} = useContext(MusicContext);
useEffect(() => {
@ -24,10 +25,15 @@ export const Waiting = ({setState}) => {
setReadyGroups(groups => [...groups, submission.id]);
});
const interval = setInterval(() => {
setFirstHint(current => !current);
}, 15000);
socket.emit("SUBMISSION_READY");
return () => {
socket.off("RECEIVED");
clearInterval(interval);
}
}, []);
@ -63,14 +69,31 @@ export const Waiting = ({setState}) => {
<h2>Warten auf {getFriendlyNames()}</h2>
</div>
<div className="glassy info-area">
<h2>Die Nachfrage</h2>
<p>Die Nachfrage berechnet sich aus dem <b>Durchschnittspreis.</b></p>
<p>Bei weniger als <span>1800</span> liegt die Nachfrage bei <span>50</span>.</p>
<div className="info-area-content">
{firstHint && <>
<h2>Deine Firma</h2>
<p>Wie auch im echten Leben fallen deiner Firma <b>Produktionskosten</b> an.</p>
<p>Ist er über <span>1800</span> liegt die Nachfrage bei <span>40</span>.</p>
<p>Hier fallen pro Runde Fixkosten von <span>4000</span> an.</p>
<p>Bei mehr als <span>2200</span> liegt die Nachfrage bei <span>30</span>.</p>
<p>Jede Kuchenkiste kostet dich zusätzlich <span>1000</span> in der Produktion.</p>
<p>Verkaufe also niemals <span>zu günstig</span>, sonst machst du Verluste.</p>
</>}
{!firstHint && <>
<h2>Die Nachfrage</h2>
<p>Die Nachfrage berechnet sich aus dem <b>Durchschnittspreis.</b></p>
<p>Bei weniger als <span>1800</span> liegt die Nachfrage bei <span>50</span>.</p>
<p>Ist er über <span>1800</span> liegt die Nachfrage bei <span>40</span>.</p>
<p>Bei mehr als <span>2200</span> liegt die Nachfrage bei <span>30</span>.</p>
</>}
</div>
<div className="progress-bar" />
</div>
</div>
);