Some after work from last commit

leaky-ships/components/Lobby/LobbyFrame.tsx

@@ -1,13 +1,32 @@
 import Icon from "./Icon"
 import Player from "./Player"
+import { faSpinnerThird } from "@fortawesome/pro-solid-svg-icons"
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
 import useGameState from "@lib/hooks/useGameState"
 import useSocket from "@lib/hooks/useSocket"
+import { useRouter } from "next/router"
 import { Fragment, useEffect, useState } from "react"
+import { toast } from "react-toastify"
 
 function LobbyFrame({ openSettings }: { openSettings: () => void }) {
   const { payload } = useGameState().gameProps
-  useSocket()
-  const [dots, setDots] = useState(1)
+  const { isConnected, hasJoined } = useSocket()
+  const [dots, setDots] = useState(3)
+  const router = useRouter()
+
+  useEffect(() => {
+    if (isConnected && hasJoined) return
+    const timeout = setTimeout(() => {
+      toast("Es konnte keine Echtzeitverbindung aufgebaute werden.", {
+        toastId: "connection_error",
+        type: "error",
+        autoClose: 10000,
+      })
+      router.push("/start")
+    }, 15000)
+
+    return () => clearTimeout(timeout)
+  }, [])
 
   useEffect(() => {
     if (payload?.player2) return
@@ -21,7 +40,11 @@ function LobbyFrame({ openSettings }: { openSettings: () => void }) {
         <Icon src="speech_bubble.png">Chat</Icon>
         <h1 className="font-farro text-5xl font-medium">
           Game-PIN:{" "}
-          <span className="underline">{payload?.gamePin?.pin ?? "---"}</span>
+          {isConnected ? (
+            <span className="underline">{payload?.gamePin?.pin ?? "---"}</span>
+          ) : (
+            <FontAwesomeIcon icon={faSpinnerThird} spin={true} />
+          )}
         </h1>
         <Icon src="gear.png" onClick={openSettings}>
           Settings
@@ -42,7 +65,8 @@ function LobbyFrame({ openSettings }: { openSettings: () => void }) {
           />
         ) : (
           <p className="font-farro w-96 text-center text-4xl font-medium">
-            Warte auf Spieler 2 {Array.from(Array(dots), () => ".").join("")}
+            Warte auf {isConnected && hasJoined ? "Spieler 2" : "Verbindung"}{" "}
+            {Array.from(Array(dots), () => ".").join("")}
             {Array.from(Array(3 - dots), (_, i) => (
               <Fragment key={i}>&nbsp;</Fragment>
             ))}