fix points and username after restoring session

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

@@ -13,13 +13,15 @@ import { usePlayerStore } from "@rahoot/web/stores/player"
 import { useQuestionStore } from "@rahoot/web/stores/question"
 import { GAME_STATE_COMPONENTS } from "@rahoot/web/utils/constants"
 import { useParams, useRouter } from "next/navigation"
+import { useEffect } from "react"
 import toast from "react-hot-toast"
 
 const Game = () => {
   const router = useRouter()
   const { socket } = useSocket()
   const { gameId: gameIdParam }: { gameId?: string } = useParams()
-  const { status, setPlayer, setGameId, setStatus, reset } = usePlayerStore()
+  const { status, player, setPlayer, setGameId, setStatus, reset } =
+    usePlayerStore()
   const { setQuestionStates } = useQuestionStore()
 
   useEvent("connect", () => {
@@ -57,10 +59,29 @@ const Game = () => {
     try {
       localStorage.removeItem("last_game_id")
       localStorage.removeItem("last_username")
+      localStorage.removeItem("last_points")
     } catch {}
     toast.error(message)
   })
 
+  // Hydrate username/points for footer immediately after refresh
+  useEffect(() => {
+    if (player?.username) return
+    try {
+      const name = localStorage.getItem("last_username")
+      const ptsRaw = localStorage.getItem("last_points")
+      const pts = ptsRaw ? Number(ptsRaw) : undefined
+      if (name || typeof pts === "number") {
+        setPlayer({
+          username: name || undefined,
+          points: pts,
+        })
+      }
+    } catch {
+      // ignore
+    }
+  }, [player?.username, setPlayer])
+
   if (!gameIdParam) {
     return null
   }

packages/web/src/stores/player.tsx

@@ -35,11 +35,24 @@ export const usePlayerStore = create<PlayerStore<StatusDataMap>>((set) => ({
 
   setGameId: (gameId) => set({ gameId }),
 
-  setPlayer: (player: PlayerState) => set({ player }),
+  setPlayer: (player: PlayerState) => {
+    try {
+      if (player.username) localStorage.setItem("last_username", player.username)
+      if (typeof player.points === "number") {
+        localStorage.setItem("last_points", String(player.points))
+      }
+    } catch {}
+    set({ player })
+  },
   login: (username) =>
-    set((state) => ({
+    set((state) => {
+      try {
+        localStorage.setItem("last_username", username)
+      } catch {}
+      return {
         player: { ...state.player, username },
-    })),
+      }
+    }),
 
   join: (gameId) => {
     set((state) => ({
@@ -48,12 +61,22 @@ export const usePlayerStore = create<PlayerStore<StatusDataMap>>((set) => ({
     }))
   },
 
-  updatePoints: (points) =>
+  updatePoints: (points) => {
+    try {
+      localStorage.setItem("last_points", String(points))
+    } catch {}
     set((state) => ({
       player: { ...state.player, points },
-    })),
+    }))
+  },
 
   setStatus: (name, data) => set({ status: createStatus(name, data) }),
 
-  reset: () => set(initialState),
+  reset: () => {
+    try {
+      localStorage.removeItem("last_username")
+      localStorage.removeItem("last_points")
+    } catch {}
+    set(initialState)
+  },
 }))