Game settings and better socket performance

- Added game settings
- Reworked GamePropsSchema for only relevant information
-> Prisma schema and zod object
- Imporved toast notifications
- No duplicate socket connections anymore
- Using now Zustand for the gameProps instead of React Context & State

leaky-ships/components/Lobby/LobbyFrame.tsx

@@ -2,32 +2,17 @@ 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 { useGameProps } from "@hooks/useGameProps"
+import useSocket from "@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
-  const { isConnected, hasJoined } = useSocket()
+  const { payload } = useGameProps()
   const [dots, setDots] = useState(3)
+  const { isConnected } = useSocket()
   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
     const interval = setInterval(() => setDots((e) => (e % 3) + 1), 1000)
@@ -41,7 +26,7 @@ function LobbyFrame({ openSettings }: { openSettings: () => void }) {
         <h1 className="font-farro text-5xl font-medium">
           Game-PIN:{" "}
           {isConnected ? (
-            <span className="underline">{payload?.gamePin?.pin ?? "---"}</span>
+            <span className="underline">{payload?.gamePin ?? "----"}</span>
           ) : (
             <FontAwesomeIcon icon={faSpinnerThird} spin={true} />
           )}
@@ -65,7 +50,7 @@ function LobbyFrame({ openSettings }: { openSettings: () => void }) {
           />
         ) : (
           <p className="font-farro w-96 text-center text-4xl font-medium">
-            Warte auf {isConnected && hasJoined ? "Spieler 2" : "Verbindung"}{" "}
+            Warte auf {isConnected ? "Spieler 2" : "Verbindung"}{" "}
             {Array.from(Array(dots), () => ".").join("")}
             {Array.from(Array(3 - dots), (_, i) => (
               <Fragment key={i}>&nbsp;</Fragment>
@@ -74,7 +59,10 @@ function LobbyFrame({ openSettings }: { openSettings: () => void }) {
         )}
       </div>
       <div className="flex items-center justify-center border-t-2 border-slate-900">
-        <button className="font-farro m-4 rounded-xl border-b-4 border-orange-400 bg-warn px-12 py-4 text-5xl font-medium duration-100 active:border-t-4 active:border-b-0">
+        <button
+          className="font-farro m-4 rounded-xl border-b-4 border-orange-400 bg-warn px-12 py-4 text-5xl font-medium duration-100 active:border-t-4 active:border-b-0"
+          onClick={() => router.push("/")}
+        >
           START
         </button>
       </div>