feat(game): enhance game reconnection logic and improve reset messages

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

@@ -49,10 +49,11 @@ const Game = () => {
     reset()
   })
 
-  useEvent("game:reset", () => {
+  useEvent("game:reset", (message) => {
     router.replace("/")
     reset()
-    toast("The game has been reset by the host")
+    setQuestionStates(null)
+    toast.error(message)
   })
 
   if (!gameIdParam) {
@@ -61,7 +62,7 @@ const Game = () => {
 
   let component = null
 
-  switch (status.name) {
+  switch (status?.name) {
     case STATUS.WAIT:
       component = <Wait data={status.data} />
 
@@ -93,7 +94,7 @@ const Game = () => {
       break
   }
 
-  return <GameWrapper statusName={status.name}>{component}</GameWrapper>
+  return <GameWrapper statusName={status?.name}>{component}</GameWrapper>
 }
 
 export default Game

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

@@ -47,10 +47,11 @@ const ManagerGame = () => {
     },
   )
 
-  useEvent("game:reset", () => {
+  useEvent("game:reset", (message) => {
     router.replace("/manager")
     reset()
-    toast("Game is not available anymore")
+    setQuestionStates(null)
+    toast.error(message)
   })
 
   const handleSkip = () => {
@@ -58,7 +59,7 @@ const ManagerGame = () => {
       return
     }
 
-    switch (status.name) {
+    switch (status?.name) {
       case STATUS.SHOW_ROOM:
         socket?.emit("manager:startGame", { gameId })
 
@@ -83,7 +84,7 @@ const ManagerGame = () => {
 
   let component = null
 
-  switch (status.name) {
+  switch (status?.name) {
     case STATUS.SHOW_ROOM:
       component = <Room data={status.data} />
 
@@ -126,7 +127,7 @@ const ManagerGame = () => {
   }
 
   return (
-    <GameWrapper statusName={status.name} onNext={handleSkip} manager>
+    <GameWrapper statusName={status?.name} onNext={handleSkip} manager>
       {component}
     </GameWrapper>
   )

packages/web/src/components/game/GameWrapper.tsx

@@ -12,7 +12,7 @@ import Image from "next/image"
 import { PropsWithChildren } from "react"
 
 type Props = PropsWithChildren & {
-  statusName: Status
+  statusName: Status | undefined
   onNext?: () => void
   manager?: boolean
 }
@@ -21,7 +21,7 @@ const GameWrapper = ({ children, statusName, onNext, manager }: Props) => {
   const { isConnected } = useSocket()
   const { player } = usePlayerStore()
   const { questionStates, setQuestionStates } = useQuestionStore()
-  const next = MANAGER_SKIP_BTN[statusName] || null
+  const next = statusName ? MANAGER_SKIP_BTN[statusName] : null
 
   useEvent("game:updateQuestion", ({ current, total }) => {
     setQuestionStates({

packages/web/src/stores/manager.tsx

@@ -5,7 +5,7 @@ import { create } from "zustand"
 
 type ManagerStore<T> = {
   gameId: string | null
-  status: Status<T>
+  status: Status<T> | null
   players: Player[]
 
   setGameId: (_gameId: string | null) => void
@@ -16,13 +16,9 @@ type ManagerStore<T> = {
   reset: () => void
 }
 
-const initialStatus = createStatus<StatusDataMap, "SHOW_ROOM">("SHOW_ROOM", {
-  text: "Waiting for the players",
-})
-
 const initialState = {
   gameId: null,
-  status: initialStatus,
+  status: null,
   players: [],
 }
 
@@ -32,7 +28,7 @@ export const useManagerStore = create<ManagerStore<StatusDataMap>>((set) => ({
   setGameId: (gameId) => set({ gameId }),
 
   setStatus: (name, data) => set({ status: createStatus(name, data) }),
-  resetStatus: () => set({ status: initialStatus }),
+  resetStatus: () => set({ status: null }),
 
   setPlayers: (players) => set({ players }),
 

packages/web/src/stores/player.tsx

@@ -10,7 +10,7 @@ type PlayerState = {
 type PlayerStore<T> = {
   gameId: string | null
   player: PlayerState | null
-  status: Status<T>
+  status: Status<T> | null
 
   setGameId: (_gameId: string | null) => void
 
@@ -24,14 +24,10 @@ type PlayerStore<T> = {
   reset: () => void
 }
 
-const initialStatus = createStatus<StatusDataMap, "WAIT">("WAIT", {
-  text: "Waiting for the players",
-})
-
 const initialState = {
   gameId: null,
   player: null,
-  status: initialStatus,
+  status: null,
 }
 
 export const usePlayerStore = create<PlayerStore<StatusDataMap>>((set) => ({

packages/web/src/stores/question.tsx

@@ -3,11 +3,10 @@ import { create } from "zustand"
 
 type QuestionStore = {
   questionStates: GameUpdateQuestion | null
-  setQuestionStates: (_state: GameUpdateQuestion) => void
+  setQuestionStates: (_state: GameUpdateQuestion | null) => void
 }
 
 export const useQuestionStore = create<QuestionStore>((set) => ({
   questionStates: null,
-  setQuestionStates: (state: GameUpdateQuestion) =>
-    set({ questionStates: state }),
+  setQuestionStates: (state) => set({ questionStates: state }),
 }))