adding more persistence for the client to be able to rejoin the session on clientId

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

@@ -5,11 +5,13 @@ 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 { useEffect } from "react"
+import { useRouter } from "next/navigation"
 import toast from "react-hot-toast"
 
 const Home = () => {
-  const { isConnected, connect } = useSocket()
+  const { isConnected, connect, socket } = useSocket()
   const { player } = usePlayerStore()
+  const router = useRouter()
 
   useEffect(() => {
     if (!isConnected) {
@@ -17,6 +19,19 @@ const Home = () => {
     }
   }, [connect, isConnected])
 
+  useEffect(() => {
+    if (!isConnected) return
+    try {
+      const storedGameId = localStorage.getItem("last_game_id")
+      if (storedGameId) {
+        socket?.emit("player:reconnect", { gameId: storedGameId })
+        router.replace(`/game/${storedGameId}`)
+      }
+    } catch {
+      // ignore
+    }
+  }, [isConnected, socket, router])
+
   useEvent("game:errorMessage", (message) => {
     toast.error(message)
   })

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

@@ -35,6 +35,12 @@ const Game = () => {
       setStatus(status.name, status.data)
       setPlayer(player)
       setQuestionStates(currentQuestion)
+      try {
+        localStorage.setItem("last_game_id", gameId)
+        if (player?.username) {
+          localStorage.setItem("last_username", player.username)
+        }
+      } catch {}
     },
   )
 
@@ -48,6 +54,10 @@ const Game = () => {
     router.replace("/")
     reset()
     setQuestionStates(null)
+    try {
+      localStorage.removeItem("last_game_id")
+      localStorage.removeItem("last_username")
+    } catch {}
     toast.error(message)
   })
 

packages/web/src/components/game/join/Username.tsx

@@ -33,6 +33,10 @@ const Username = () => {
   useEvent("game:successJoin", (gameId) => {
     setStatus(STATUS.WAIT, { text: "Waiting for the players" })
     login(username)
+    try {
+      localStorage.setItem("last_game_id", gameId)
+      localStorage.setItem("last_username", username)
+    } catch {}
 
     router.replace(`/game/${gameId}`)
   })