Lobby disable leave on launch

leaky-ships/components/Lobby/Button.tsx

@@ -10,7 +10,7 @@ function Button({
   latching,
   isLatched,
 }: {
-  type: "red" | "orange" | "green"
+  type: "red" | "orange" | "green" | "gray"
   disabled?: boolean
   onClick: () => void
   children: ReactNode
@@ -26,13 +26,14 @@ function Button({
           ? "border-4 border-dashed"
           : latching
           ? isLatched
-            ? "border-t-4"
-            : "border-b-4"
-          : "border-b-4 active:border-b-0 active:border-t-4",
+            ? "mx-1 my-0.5 border-t-4"
+            : "mx-1 my-0.5 border-b-4"
+          : "mx-1 my-0.5 border-b-4 active:border-b-0 active:border-t-4",
         {
           "border-red-600 bg-red-500": type === "red",
           "border-orange-400 bg-warn": type === "orange",
           "border-green-600 bg-green-500": type === "green",
+          "border-gray-600 bg-gray-500": type === "gray",
         }
       )}
       onClick={onClick}

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("/")

leaky-ships/components/Lobby/Player.tsx

@@ -24,7 +24,6 @@ function HourGlass() {
   }, [])
 
   const icon = useMemo(() => {
-    console.log(count)
     switch (count) {
       case 0:
         return faHourglass3