feat(reconnect): add reconnect for player & manager

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

@@ -8,24 +8,36 @@ import Question from "@rahoot/web/components/game/states/Question"
 import Result from "@rahoot/web/components/game/states/Result"
 import Start from "@rahoot/web/components/game/states/Start"
 import Wait from "@rahoot/web/components/game/states/Wait"
-import { useEvent } from "@rahoot/web/contexts/socketProvider"
-import { usePlayerGameStore } from "@rahoot/web/stores/game"
+import { useEvent, useSocket } from "@rahoot/web/contexts/socketProvider"
 import { usePlayerStore } from "@rahoot/web/stores/player"
+import { useQuestionStore } from "@rahoot/web/stores/question"
 import { GAME_STATE_COMPONENTS } from "@rahoot/web/utils/constants"
-import { useRouter } from "next/navigation"
-import { useEffect } from "react"
+import { useParams, useRouter } from "next/navigation"
 import toast from "react-hot-toast"
 
 export default function Game() {
   const router = useRouter()
-  const { player, logout } = usePlayerStore()
-  const { status, setStatus, resetStatus } = usePlayerGameStore()
+  const { socket, isConnected } = useSocket()
+  const { gameId: gameIdParam }: { gameId?: string } = useParams()
+  const { status, setPlayer, logout, setGameId, setStatus, resetStatus } =
+    usePlayerStore()
+  const { setQuestionStates } = useQuestionStore()
 
-  useEffect(() => {
-    if (!player) {
-      router.replace("/")
+  useEvent("connect", () => {
+    if (gameIdParam) {
+      socket?.emit("player:reconnect", { gameId: gameIdParam })
     }
-  }, [player, router])
+  })
+
+  useEvent(
+    "player:successReconnect",
+    ({ gameId, status, player, currentQuestion }) => {
+      setGameId(gameId)
+      setStatus(status.name, status.data)
+      setPlayer(player)
+      setQuestionStates(currentQuestion)
+    },
+  )
 
   useEvent("game:status", ({ name, data }) => {
     if (name in GAME_STATE_COMPONENTS) {
@@ -35,11 +47,19 @@ export default function Game() {
 
   useEvent("game:reset", () => {
     router.replace("/")
-    logout()
     resetStatus()
+    logout()
     toast("The game has been reset by the host")
   })
 
+  if (!isConnected) {
+    return null
+  }
+
+  if (!gameIdParam) {
+    return null
+  }
+
   let component = null
 
   switch (status.name) {