feat(reconnect): add reconnect for player & manager

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

@@ -4,12 +4,12 @@ import { QuizzWithId } from "@rahoot/common/types/game"
 import ManagerPassword from "@rahoot/web/components/game/create/ManagerPassword"
 import SelectQuizz from "@rahoot/web/components/game/create/SelectQuizz"
 import { useEvent, useSocket } from "@rahoot/web/contexts/socketProvider"
-import { useManagerGameStore } from "@rahoot/web/stores/game"
+import { useManagerStore } from "@rahoot/web/stores/manager"
 import { useRouter } from "next/navigation"
 import { useState } from "react"
 
 export default function Manager() {
-  const { setStatus } = useManagerGameStore()
+  const { setGameId, setStatus } = useManagerStore()
   const router = useRouter()
   const { socket } = useSocket()
 
@@ -22,6 +22,7 @@ export default function Manager() {
   })
 
   useEvent("manager:gameCreated", ({ gameId, inviteCode }) => {
+    setGameId(gameId)
     setStatus("SHOW_ROOM", { text: "Waiting for the players", inviteCode })
     router.push(`/game/manager/${gameId}`)
   })
@@ -32,7 +33,6 @@ export default function Manager() {
   const handleCreate = (quizzId: string) => {
     console.log(quizzId)
     socket?.emit("game:create", quizzId)
-    console.log("create room")
   }
 
   if (!isAuth) {

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) {

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

@@ -11,16 +11,20 @@ import Responses from "@rahoot/web/components/game/states/Responses"
 import Room from "@rahoot/web/components/game/states/Room"
 import Start from "@rahoot/web/components/game/states/Start"
 import { useEvent, useSocket } from "@rahoot/web/contexts/socketProvider"
-import { useManagerGameStore } from "@rahoot/web/stores/game"
+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 } from "next/navigation"
+import { useParams, useRouter } from "next/navigation"
 import { useEffect, useState } from "react"
+import toast from "react-hot-toast"
 
 export default function ManagerGame() {
-  const { socket } = useSocket()
+  const router = useRouter()
+  const { gameId: gameIdParam }: { gameId?: string } = useParams()
+  const { socket, isConnected } = useSocket()
   const [nextText, setNextText] = useState("Start")
-  const { status, setStatus } = useManagerGameStore()
-  const { gameId }: { gameId?: string } = useParams()
+  const { gameId, status, setGameId, setStatus, setPlayers } = useManagerStore()
+  const { setQuestionStates } = useQuestionStore()
 
   useEvent("game:status", ({ name, data }) => {
     if (name in GAME_STATE_COMPONENTS_MANAGER) {
@@ -28,12 +32,41 @@ export default function ManagerGame() {
     }
   })
 
+  useEvent("connect", () => {
+    if (gameIdParam) {
+      socket?.emit("manager:reconnect", { gameId: gameIdParam })
+    }
+  })
+
+  useEvent(
+    "manager:successReconnect",
+    ({ gameId, status, players, currentQuestion }) => {
+      setGameId(gameId)
+      setStatus(status.name, status.data)
+      setPlayers(players)
+      setQuestionStates(currentQuestion)
+    },
+  )
+
+  useEvent("game:reset", () => {
+    router.replace("/manager")
+    toast("Game is not available anymore")
+  })
+
   useEffect(() => {
-    if (status.name === "SHOW_START") {
+    if (status.name === Status.SHOW_START) {
       setNextText("Start")
     }
   }, [status.name])
 
+  if (!isConnected) {
+    return null
+  }
+
+  if (!gameId) {
+    return null
+  }
+
   const handleSkip = () => {
     setNextText("Skip")