Lobby disable leave on launch

leaky-ships/components/Lobby/LobbyFrame.tsx

@@ -11,10 +11,10 @@ import useSocket from "@hooks/useSocket"
 import { socket } from "@lib/socket"
 import { useSession } from "next-auth/react"
 import { useRouter } from "next/router"
-import { Fragment, useEffect, useState } from "react"
+import { Fragment, ReactNode, useEffect, useMemo, useState } from "react"
 
-function WithDots({ children }: { children: string }) {
-  const [dots, setDots] = useState(3)
+function WithDots({ children }: { children: ReactNode }) {
+  const [dots, setDots] = useState(1)
 
   useEffect(() => {
     const interval = setInterval(() => setDots((e) => (e % 3) + 1), 1000)
@@ -37,6 +37,28 @@ function LobbyFrame({ openSettings }: { openSettings: () => void }) {
   const { isConnected } = useSocket()
   const router = useRouter()
   const { data: session } = useSession()
+  const [launchTime, setLaunchTime] = useState(3)
+
+  const launching = useMemo(
+    () => payload?.player1?.isReady && payload?.player2?.isReady,
+    [payload?.player1?.isReady, payload?.player2?.isReady]
+  )
+
+  useEffect(() => {
+    if (!launching || launchTime >= 1) return
+    router.push("/gamefield")
+  }, [launching, launchTime, router])
+
+  useEffect(() => {
+    if (!launching) return setLaunchTime(3)
+    if (launchTime === 0) return
+
+    const timeout = setTimeout(() => {
+      setLaunchTime((e) => e - 1)
+    }, 1000)
+
+    return () => clearTimeout(timeout)
+  }, [launching, launchTime])
 
   useEffect(() => {
     if (payload?.game?.id || !isConnected) return
@@ -48,11 +70,17 @@ function LobbyFrame({ openSettings }: { openSettings: () => void }) {
       <div className="flex items-center justify-between border-b-2 border-slate-900">
         <Icon src="speech_bubble.png">Chat</Icon>
         <h1 className="font-farro text-5xl font-medium">
-          Game-PIN:{" "}
-          {isConnected ? (
-            <span className="underline">{payload?.gamePin ?? "----"}</span>
+          {launching ? (
+            <WithDots>{"Game is starting in " + launchTime}</WithDots>
           ) : (
-            <FontAwesomeIcon icon={faSpinnerThird} spin={true} />
+            <>
+              Game-PIN:{" "}
+              {isConnected ? (
+                <span className="underline">{payload?.gamePin ?? "----"}</span>
+              ) : (
+                <FontAwesomeIcon icon={faSpinnerThird} spin={true} />
+              )}
+            </>
           )}
         </h1>
         <Icon src="gear.png" onClick={openSettings}>
@@ -82,7 +110,8 @@ function LobbyFrame({ openSettings }: { openSettings: () => void }) {
       </div>
       <div className="flex items-center justify-around border-t-2 border-slate-900 p-4">
         <Button
-          type="red"
+          type={launching ? "gray" : "red"}
+          disabled={launching}
           onClick={() => {
             leave(async () => {
               await router.push("/")