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/pages/start.tsx

@@ -1,16 +1,18 @@
-import BurgerMenu from "../components/BurgerMenu"
-import Logo from "../components/Logo"
-import OptionButton from "../components/OptionButton"
+import BurgerMenu from "@components/BurgerMenu"
+import Logo from "@components/Logo"
+import OptionButton from "@components/OptionButton"
 import { faEye, faLeftLong } from "@fortawesome/pro-regular-svg-icons"
 import { faPlus, faUserPlus } from "@fortawesome/pro-solid-svg-icons"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
-import useGameState from "@lib/hooks/useGameState"
+import { useGameProps } from "@hooks/useGameProps"
 import { GamePropsSchema } from "@lib/zodSchemas"
 import status from "http-status"
+import { useSession } from "next-auth/react"
 import { useRouter } from "next/router"
 import { useCallback, useEffect, useMemo, useState } from "react"
 import OtpInput from "react-otp-input"
 import { toast } from "react-toastify"
+import { Icons } from "react-toastify"
 
 function isInputOnlyNumbers(input: string) {
   return /^\d+$/.test(input)
@@ -45,8 +47,9 @@ const handleConfirmation = () => {
 
 export default function Start() {
   const [otp, setOtp] = useState("")
-  const { session, setGameProps } = useGameState()
+  const { full } = useGameProps()
   const router = useRouter()
+  const { data: session } = useSession()
 
   const query = useMemo((): { join?: boolean; watch?: boolean } => {
     switch (router.query.q) {
@@ -68,43 +71,58 @@ export default function Start() {
         .then(isAuthenticated)
         .then((game) => GamePropsSchema.parse(game))
 
-      const toastId = !pin ? "erstellt" : "angefragt"
-      const res = await toast.promise(gamePromise, {
-        pending: {
-          render: "Raum wird " + toastId,
-          toastId,
-        },
-        success: {
-          render: "Raum " + (!pin ? "erstellt" : "angefragt") + " 👌",
-          type: "info",
-          theme: "colored",
-          toastId,
-        },
-        error: {
+      const action = !pin ? "erstellt" : "angefragt"
+      const toastId = "pageLoad"
+      toast("Raum wird " + action, {
+        icon: Icons.spinner(),
+        toastId,
+        autoClose: false,
+        hideProgressBar: true,
+        closeButton: false,
+      })
+      const res = await gamePromise.catch(() =>
+        toast.update(toastId, {
           render: "Es ist ein Fehler aufgetreten 🤯",
           type: "error",
+          icon: Icons.error,
           theme: "colored",
-          toastId,
-        },
+          autoClose: 5000,
+          hideProgressBar: false,
+          closeButton: true,
+        })
+      )
+      if (!res) return
+      full(res)
+
+      toast.update(toastId, {
+        render: "Weiterleitung",
       })
 
-      setGameProps(res)
-
-      await toast.promise(router.push("/lobby"), {
-        pending: {
-          render: "Raum wird beigetreten",
-        },
-        success: {
-          render: "Raum begetreten 👌",
-          type: "info",
-        },
-        error: {
-          render: "Es ist ein Fehler aufgetreten 🤯",
-          type: "error",
-        },
-      })
+      router
+        .push("/lobby")
+        .then(() =>
+          toast.update(toastId, {
+            render: "Raum begetreten 👌",
+            type: "info",
+            icon: Icons.success,
+            autoClose: 5000,
+            hideProgressBar: false,
+            closeButton: true,
+          })
+        )
+        .catch(() =>
+          toast.update(toastId, {
+            render: "Es ist ein Fehler aufgetreten 🤯",
+            type: "error",
+            icon: Icons.error,
+            theme: "colored",
+            autoClose: 5000,
+            hideProgressBar: false,
+            closeButton: true,
+          })
+        )
     },
-    [router, setGameProps]
+    [router, full]
   )
 
   useEffect(() => {
@@ -151,7 +169,7 @@ export default function Start() {
               icon={faUserPlus}
               disabled={!session}
             >
-              {query.join && session?.user ? (
+              {query.join && session ? (
                 <OtpInput
                   shouldAutoFocus
                   containerStyle={{ color: "initial" }}
@@ -167,7 +185,7 @@ export default function Start() {
               )}
             </OptionButton>
             <OptionButton icon={faEye}>
-              {query.watch && session?.user ? (
+              {query.watch ? (
                 <OtpInput
                   shouldAutoFocus
                   containerStyle={{ color: "initial" }}