feat: improve reconnect, add ESLint configuration for common and socket

packages/web/src/app/(auth)/layout.tsx

@@ -1,6 +1,9 @@
 "use client"
 
+import logo from "@rahoot/web/assets/logo.svg"
+import Loader from "@rahoot/web/components/Loader"
 import { useSocket } from "@rahoot/web/contexts/socketProvider"
+import Image from "next/image"
 import { PropsWithChildren, useEffect } from "react"
 
 const AuthLayout = ({ children }: PropsWithChildren) => {
@@ -11,7 +14,34 @@ const AuthLayout = ({ children }: PropsWithChildren) => {
     }
   }, [connect, isConnected])
 
-  return children
+  if (!isConnected) {
+    return (
+      <section className="relative flex min-h-screen flex-col items-center justify-center">
+        <div className="absolute h-full w-full overflow-hidden">
+          <div className="bg-primary/15 absolute -top-[15vmin] -left-[15vmin] min-h-[75vmin] min-w-[75vmin] rounded-full"></div>
+          <div className="bg-primary/15 absolute -right-[15vmin] -bottom-[15vmin] min-h-[75vmin] min-w-[75vmin] rotate-45"></div>
+        </div>
+
+        <Image src={logo} className="mb-6 h-32" alt="logo" />
+        <Loader className="h-23" />
+        <h2 className="mt-2 text-center text-2xl font-bold text-white drop-shadow-lg md:text-3xl">
+          Loading...
+        </h2>
+      </section>
+    )
+  }
+
+  return (
+    <section className="relative flex min-h-screen flex-col items-center justify-center">
+      <div className="absolute h-full w-full overflow-hidden">
+        <div className="bg-primary/15 absolute -top-[15vmin] -left-[15vmin] min-h-[75vmin] min-w-[75vmin] rounded-full"></div>
+        <div className="bg-primary/15 absolute -right-[15vmin] -bottom-[15vmin] min-h-[75vmin] min-w-[75vmin] rotate-45"></div>
+      </div>
+
+      <Image src={logo} className="mb-6 h-32" alt="logo" />
+      {children}
+    </section>
+  )
 }
 
 export default AuthLayout

packages/web/src/app/(auth)/manager/page.tsx

@@ -31,7 +31,6 @@ export default function Manager() {
     socket?.emit("manager:auth", password)
   }
   const handleCreate = (quizzId: string) => {
-    console.log(quizzId)
     socket?.emit("game:create", quizzId)
   }
 

packages/web/src/app/(auth)/page.tsx

@@ -1,11 +1,9 @@
 "use client"
 
-import logo from "@rahoot/web/assets/logo.svg"
 import Room from "@rahoot/web/components/game/join/Room"
 import Username from "@rahoot/web/components/game/join/Username"
 import { useEvent, useSocket } from "@rahoot/web/contexts/socketProvider"
 import { usePlayerStore } from "@rahoot/web/stores/player"
-import Image from "next/image"
 import { useEffect } from "react"
 import toast from "react-hot-toast"
 
@@ -23,16 +21,9 @@ export default function Home() {
     toast.error(message)
   })
 
-  return (
-    <section className="relative flex min-h-screen flex-col items-center justify-center">
-      <div className="absolute h-full w-full overflow-hidden">
-        <div className="bg-primary/15 absolute -top-[15vmin] -left-[15vmin] min-h-[75vmin] min-w-[75vmin] rounded-full"></div>
-        <div className="bg-primary/15 absolute -right-[15vmin] -bottom-[15vmin] min-h-[75vmin] min-w-[75vmin] rotate-45"></div>
-      </div>
+  if (player) {
+    return <Username />
+  }
 
-      <Image src={logo} className="mb-6 h-32" alt="logo" />
-
-      {!player ? <Room /> : <Username />}
-    </section>
-  )
+  return <Room />
 }

packages/web/src/app/game/[gameId]/page.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { Status } from "@rahoot/common/types/game/status"
+import { STATUS } from "@rahoot/common/types/game/status"
 import GameWrapper from "@rahoot/web/components/game/GameWrapper"
 import Answers from "@rahoot/web/components/game/states/Answers"
 import Prepared from "@rahoot/web/components/game/states/Prepared"
@@ -17,10 +17,9 @@ import toast from "react-hot-toast"
 
 export default function Game() {
   const router = useRouter()
-  const { socket, isConnected } = useSocket()
+  const { socket } = useSocket()
   const { gameId: gameIdParam }: { gameId?: string } = useParams()
-  const { status, setPlayer, logout, setGameId, setStatus, resetStatus } =
-    usePlayerStore()
+  const { status, setPlayer, setGameId, setStatus, reset } = usePlayerStore()
   const { setQuestionStates } = useQuestionStore()
 
   useEvent("connect", () => {
@@ -45,16 +44,16 @@ export default function Game() {
     }
   })
 
-  useEvent("game:reset", () => {
+  useEvent("game:kick", () => {
     router.replace("/")
-    resetStatus()
-    logout()
-    toast("The game has been reset by the host")
+    reset()
   })
 
-  if (!isConnected) {
-    return null
-  }
+  useEvent("game:reset", () => {
+    router.replace("/")
+    reset()
+    toast("The game has been reset by the host")
+  })
 
   if (!gameIdParam) {
     return null
@@ -63,36 +62,36 @@ export default function Game() {
   let component = null
 
   switch (status.name) {
-    case Status.WAIT:
+    case STATUS.WAIT:
       component = <Wait data={status.data} />
 
       break
 
-    case Status.SHOW_START:
+    case STATUS.SHOW_START:
       component = <Start data={status.data} />
 
       break
 
-    case Status.SHOW_PREPARED:
+    case STATUS.SHOW_PREPARED:
       component = <Prepared data={status.data} />
 
       break
 
-    case Status.SHOW_QUESTION:
+    case STATUS.SHOW_QUESTION:
       component = <Question data={status.data} />
 
       break
 
-    case Status.SHOW_RESULT:
+    case STATUS.SHOW_RESULT:
       component = <Result data={status.data} />
 
       break
 
-    case Status.SELECT_ANSWER:
+    case STATUS.SELECT_ANSWER:
       component = <Answers data={status.data} />
 
       break
   }
 
-  return <GameWrapper>{component}</GameWrapper>
+  return <GameWrapper statusName={status.name}>{component}</GameWrapper>
 }

packages/web/src/app/game/manager/[gameId]/page.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { Status } from "@rahoot/common/types/game/status"
+import { STATUS } from "@rahoot/common/types/game/status"
 import GameWrapper from "@rahoot/web/components/game/GameWrapper"
 import Answers from "@rahoot/web/components/game/states/Answers"
 import Leaderboard from "@rahoot/web/components/game/states/Leaderboard"
@@ -15,15 +15,14 @@ import { useManagerStore } from "@rahoot/web/stores/manager"
 import { useQuestionStore } from "@rahoot/web/stores/question"
 import { GAME_STATE_COMPONENTS_MANAGER } from "@rahoot/web/utils/constants"
 import { useParams, useRouter } from "next/navigation"
-import { useEffect, useState } from "react"
 import toast from "react-hot-toast"
 
 export default function ManagerGame() {
   const router = useRouter()
   const { gameId: gameIdParam }: { gameId?: string } = useParams()
-  const { socket, isConnected } = useSocket()
-  const [nextText, setNextText] = useState("Start")
-  const { gameId, status, setGameId, setStatus, setPlayers } = useManagerStore()
+  const { socket } = useSocket()
+  const { gameId, status, setGameId, setStatus, setPlayers, reset } =
+    useManagerStore()
   const { setQuestionStates } = useQuestionStore()
 
   useEvent("game:status", ({ name, data }) => {
@@ -41,6 +40,7 @@ export default function ManagerGame() {
   useEvent(
     "manager:successReconnect",
     ({ gameId, status, players, currentQuestion }) => {
+      console.log("manager:successReconnect", gameId)
       setGameId(gameId)
       setStatus(status.name, status.data)
       setPlayers(players)
@@ -50,43 +50,32 @@ export default function ManagerGame() {
 
   useEvent("game:reset", () => {
     router.replace("/manager")
+    reset()
     toast("Game is not available anymore")
   })
 
-  useEffect(() => {
-    if (status.name === Status.SHOW_START) {
-      setNextText("Start")
-    }
-  }, [status.name])
-
-  if (!isConnected) {
-    return null
-  }
-
-  if (!gameId) {
-    return null
-  }
-
   const handleSkip = () => {
-    setNextText("Skip")
+    if (!gameId) {
+      return
+    }
 
     switch (status.name) {
-      case Status.SHOW_ROOM:
+      case STATUS.SHOW_ROOM:
         socket?.emit("manager:startGame", { gameId })
 
         break
 
-      case Status.SELECT_ANSWER:
+      case STATUS.SELECT_ANSWER:
         socket?.emit("manager:abortQuiz", { gameId })
 
         break
 
-      case Status.SHOW_RESPONSES:
+      case STATUS.SHOW_RESPONSES:
         socket?.emit("manager:showLeaderboard", { gameId })
 
         break
 
-      case Status.SHOW_LEADERBOARD:
+      case STATUS.SHOW_LEADERBOARD:
         socket?.emit("manager:nextQuestion", { gameId })
 
         break
@@ -96,49 +85,49 @@ export default function ManagerGame() {
   let component = null
 
   switch (status.name) {
-    case Status.SHOW_ROOM:
+    case STATUS.SHOW_ROOM:
       component = <Room data={status.data} />
 
       break
 
-    case Status.SHOW_START:
+    case STATUS.SHOW_START:
       component = <Start data={status.data} />
 
       break
 
-    case Status.SHOW_PREPARED:
+    case STATUS.SHOW_PREPARED:
       component = <Prepared data={status.data} />
 
       break
 
-    case Status.SHOW_QUESTION:
+    case STATUS.SHOW_QUESTION:
       component = <Question data={status.data} />
 
       break
 
-    case Status.SELECT_ANSWER:
+    case STATUS.SELECT_ANSWER:
       component = <Answers data={status.data} />
 
       break
 
-    case Status.SHOW_RESPONSES:
+    case STATUS.SHOW_RESPONSES:
       component = <Responses data={status.data} />
 
       break
 
-    case Status.SHOW_LEADERBOARD:
+    case STATUS.SHOW_LEADERBOARD:
       component = <Leaderboard data={status.data} />
 
       break
 
-    case Status.FINISHED:
+    case STATUS.FINISHED:
       component = <Podium data={status.data} />
 
       break
   }
 
   return (
-    <GameWrapper textNext={nextText} onNext={handleSkip} manager>
+    <GameWrapper statusName={status.name} onNext={handleSkip} manager>
       {component}
     </GameWrapper>
   )

packages/web/src/app/globals.css

@@ -5,6 +5,11 @@
   --color-secondary: #1a140b;
 }
 
+button:not(:disabled),
+[role="button"]:not(:disabled) {
+  cursor: pointer;
+}
+
 .btn-shadow {
   box-shadow: rgba(0, 0, 0, 0.25) 0px -4px inset;
 }