feat(reconnect): add reconnect for player & manager

packages/web/src/stores/game.tsx

@@ -1,44 +0,0 @@
-import { StatusDataMap } from "@rahoot/common/types/game/status"
-import { create } from "zustand"
-
-export type Status<T> = {
-  [K in keyof T]: { name: K; data: T[K] }
-}[keyof T]
-
-export function createStatus<T, K extends keyof T>(
-  name: K,
-  data: T[K],
-): Status<T> {
-  return { name, data }
-}
-
-type GameStore<T> = {
-  status: Status<T>
-  // eslint-disable-next-line no-unused-vars
-  setStatus: <K extends keyof T>(name: K, data: T[K]) => void
-  resetStatus: () => void
-}
-
-export const usePlayerGameStore = create<GameStore<StatusDataMap>>((set) => {
-  const initialStatus = createStatus<StatusDataMap, "WAIT">("WAIT", {
-    text: "Waiting for the players",
-  })
-
-  return {
-    status: initialStatus,
-    setStatus: (name, data) => set({ status: createStatus(name, data) }),
-    resetStatus: () => set({ status: initialStatus }),
-  }
-})
-
-export const useManagerGameStore = create<GameStore<StatusDataMap>>((set) => {
-  const initialStatus = createStatus<StatusDataMap, "SHOW_ROOM">("SHOW_ROOM", {
-    text: "Waiting for the players",
-  })
-
-  return {
-    status: initialStatus,
-    setStatus: (name, data) => set({ status: createStatus(name, data) }),
-    resetStatus: () => set({ status: initialStatus }),
-  }
-})

packages/web/src/stores/manager.tsx

@@ -0,0 +1,35 @@
+/* eslint-disable no-unused-vars */
+import { Player } from "@rahoot/common/types/game"
+import { StatusDataMap } from "@rahoot/common/types/game/status"
+import { createStatus, Status } from "@rahoot/web/utils/createStatus"
+import { create } from "zustand"
+
+type ManagerStore<T> = {
+  gameId: string | null
+  status: Status<T>
+  players: Player[]
+
+  setGameId: (gameId: string | null) => void
+
+  setStatus: <K extends keyof T>(name: K, data: T[K]) => void
+  resetStatus: () => void
+
+  setPlayers: (players: Player[]) => void
+}
+
+const initialStatus = createStatus<StatusDataMap, "SHOW_ROOM">("SHOW_ROOM", {
+  text: "Waiting for the players",
+})
+
+export const useManagerStore = create<ManagerStore<StatusDataMap>>((set) => ({
+  gameId: null,
+  status: initialStatus,
+  players: [],
+
+  setGameId: (gameId) => set({ gameId }),
+
+  setStatus: (name, data) => set({ status: createStatus(name, data) }),
+  resetStatus: () => set({ status: initialStatus }),
+
+  setPlayers: (players) => set({ players }),
+}))

packages/web/src/stores/player.tsx

@@ -1,32 +1,54 @@
 /* eslint-disable no-unused-vars */
+import { StatusDataMap } from "@rahoot/common/types/game/status"
+import { createStatus, Status } from "@rahoot/web/utils/createStatus"
 import { create } from "zustand"
 
 type PlayerState = {
-  gameId?: string
   username?: string
   points?: number
 }
 
-type PlayerStore = {
+type PlayerStore<T> = {
+  gameId: string | null
   player: PlayerState | null
+  status: Status<T>
+
+  setGameId: (gameId: string | null) => void
+
+  setPlayer: (state: PlayerState) => void
   login: (gameId: string) => void
   join: (username: string) => void
   updatePoints: (points: number) => void
   logout: () => void
+
+  setStatus: <K extends keyof T>(name: K, data: T[K]) => void
+  resetStatus: () => void
 }
 
-export const usePlayerStore = create<PlayerStore>((set) => ({
-  player: null,
+const initialStatus = createStatus<StatusDataMap, "WAIT">("WAIT", {
+  text: "Waiting for the players",
+})
 
+export const usePlayerStore = create<PlayerStore<StatusDataMap>>((set) => ({
+  gameId: null,
+  player: null,
+  status: initialStatus,
+  currentQuestion: null,
+
+  setGameId: (gameId) => set({ gameId }),
+
+  setPlayer: (player: PlayerState) => set({ player }),
   login: (username) =>
     set((state) => ({
       player: { ...state.player, username },
     })),
 
-  join: (gameId) =>
+  join: (gameId) => {
     set((state) => ({
-      player: { ...state.player, gameId, points: 0 },
-    })),
+      gameId,
+      player: { ...state.player, points: 0 },
+    }))
+  },
 
   updatePoints: (points) =>
     set((state) => ({
@@ -34,4 +56,7 @@ export const usePlayerStore = create<PlayerStore>((set) => ({
     })),
 
   logout: () => set({ player: null }),
+
+  setStatus: (name, data) => set({ status: createStatus(name, data) }),
+  resetStatus: () => set({ status: initialStatus }),
 }))

packages/web/src/stores/question.tsx

@@ -0,0 +1,14 @@
+/* eslint-disable no-unused-vars */
+import { GameUpdateQuestion } from "@rahoot/common/types/game"
+import { create } from "zustand"
+
+type QuestionStore = {
+  questionStates: GameUpdateQuestion | null
+  setQuestionStates: (state: GameUpdateQuestion) => void
+}
+
+export const useQuestionStore = create<QuestionStore>((set) => ({
+  questionStates: null,
+  setQuestionStates: (state: GameUpdateQuestion) =>
+    set({ questionStates: state }),
+}))