Updated the Waiting.jsx state

client/src/pages/Game/states/Waiting/Waiting.jsx

@@ -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>
     );