feat: improve reconnect, add ESLint configuration for common and socket

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

@@ -1,6 +1,9 @@
 "use client"
 
+import logo from "@rahoot/web/assets/logo.svg"
+import Loader from "@rahoot/web/components/Loader"
 import { useSocket } from "@rahoot/web/contexts/socketProvider"
+import Image from "next/image"
 import { PropsWithChildren, useEffect } from "react"
 
 const AuthLayout = ({ children }: PropsWithChildren) => {
@@ -11,7 +14,34 @@ const AuthLayout = ({ children }: PropsWithChildren) => {
     }
   }, [connect, isConnected])
 
-  return children
+  if (!isConnected) {
+    return (
+      <section className="relative flex min-h-screen flex-col items-center justify-center">
+        <div className="absolute h-full w-full overflow-hidden">
+          <div className="bg-primary/15 absolute -top-[15vmin] -left-[15vmin] min-h-[75vmin] min-w-[75vmin] rounded-full"></div>
+          <div className="bg-primary/15 absolute -right-[15vmin] -bottom-[15vmin] min-h-[75vmin] min-w-[75vmin] rotate-45"></div>
+        </div>
+
+        <Image src={logo} className="mb-6 h-32" alt="logo" />
+        <Loader className="h-23" />
+        <h2 className="mt-2 text-center text-2xl font-bold text-white drop-shadow-lg md:text-3xl">
+          Loading...
+        </h2>
+      </section>
+    )
+  }
+
+  return (
+    <section className="relative flex min-h-screen flex-col items-center justify-center">
+      <div className="absolute h-full w-full overflow-hidden">
+        <div className="bg-primary/15 absolute -top-[15vmin] -left-[15vmin] min-h-[75vmin] min-w-[75vmin] rounded-full"></div>
+        <div className="bg-primary/15 absolute -right-[15vmin] -bottom-[15vmin] min-h-[75vmin] min-w-[75vmin] rotate-45"></div>
+      </div>
+
+      <Image src={logo} className="mb-6 h-32" alt="logo" />
+      {children}
+    </section>
+  )
 }
 
 export default AuthLayout

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

@@ -31,7 +31,6 @@ export default function Manager() {
     socket?.emit("manager:auth", password)
   }
   const handleCreate = (quizzId: string) => {
-    console.log(quizzId)
     socket?.emit("game:create", quizzId)
   }
 

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

@@ -1,11 +1,9 @@
 "use client"
 
-import logo from "@rahoot/web/assets/logo.svg"
 import Room from "@rahoot/web/components/game/join/Room"
 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 Image from "next/image"
 import { useEffect } from "react"
 import toast from "react-hot-toast"
 
@@ -23,16 +21,9 @@ export default function Home() {
     toast.error(message)
   })
 
-  return (
-    <section className="relative flex min-h-screen flex-col items-center justify-center">
-      <div className="absolute h-full w-full overflow-hidden">
-        <div className="bg-primary/15 absolute -top-[15vmin] -left-[15vmin] min-h-[75vmin] min-w-[75vmin] rounded-full"></div>
-        <div className="bg-primary/15 absolute -right-[15vmin] -bottom-[15vmin] min-h-[75vmin] min-w-[75vmin] rotate-45"></div>
-      </div>
+  if (player) {
+    return <Username />
+  }
 
-      <Image src={logo} className="mb-6 h-32" alt="logo" />
-
-      {!player ? <Room /> : <Username />}
-    </section>
-  )
+  return <Room />
 }

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

@@ -1,6 +1,6 @@
 "use client"
 
-import { Status } from "@rahoot/common/types/game/status"
+import { STATUS } from "@rahoot/common/types/game/status"
 import GameWrapper from "@rahoot/web/components/game/GameWrapper"
 import Answers from "@rahoot/web/components/game/states/Answers"
 import Prepared from "@rahoot/web/components/game/states/Prepared"
@@ -17,10 +17,9 @@ import toast from "react-hot-toast"
 
 export default function Game() {
   const router = useRouter()
-  const { socket, isConnected } = useSocket()
+  const { socket } = useSocket()
   const { gameId: gameIdParam }: { gameId?: string } = useParams()
-  const { status, setPlayer, logout, setGameId, setStatus, resetStatus } =
-    usePlayerStore()
+  const { status, setPlayer, setGameId, setStatus, reset } = usePlayerStore()
   const { setQuestionStates } = useQuestionStore()
 
   useEvent("connect", () => {
@@ -45,16 +44,16 @@ export default function Game() {
     }
   })
 
-  useEvent("game:reset", () => {
+  useEvent("game:kick", () => {
     router.replace("/")
-    resetStatus()
-    logout()
-    toast("The game has been reset by the host")
+    reset()
   })
 
-  if (!isConnected) {
-    return null
-  }
+  useEvent("game:reset", () => {
+    router.replace("/")
+    reset()
+    toast("The game has been reset by the host")
+  })
 
   if (!gameIdParam) {
     return null
@@ -63,36 +62,36 @@ export default function Game() {
   let component = null
 
   switch (status.name) {
-    case Status.WAIT:
+    case STATUS.WAIT:
       component = <Wait data={status.data} />
 
       break
 
-    case Status.SHOW_START:
+    case STATUS.SHOW_START:
       component = <Start data={status.data} />
 
       break
 
-    case Status.SHOW_PREPARED:
+    case STATUS.SHOW_PREPARED:
       component = <Prepared data={status.data} />
 
       break
 
-    case Status.SHOW_QUESTION:
+    case STATUS.SHOW_QUESTION:
       component = <Question data={status.data} />
 
       break
 
-    case Status.SHOW_RESULT:
+    case STATUS.SHOW_RESULT:
       component = <Result data={status.data} />
 
       break
 
-    case Status.SELECT_ANSWER:
+    case STATUS.SELECT_ANSWER:
       component = <Answers data={status.data} />
 
       break
   }
 
-  return <GameWrapper>{component}</GameWrapper>
+  return <GameWrapper statusName={status.name}>{component}</GameWrapper>
 }

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

@@ -1,6 +1,6 @@
 "use client"
 
-import { Status } from "@rahoot/common/types/game/status"
+import { STATUS } from "@rahoot/common/types/game/status"
 import GameWrapper from "@rahoot/web/components/game/GameWrapper"
 import Answers from "@rahoot/web/components/game/states/Answers"
 import Leaderboard from "@rahoot/web/components/game/states/Leaderboard"
@@ -15,15 +15,14 @@ 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, useRouter } from "next/navigation"
-import { useEffect, useState } from "react"
 import toast from "react-hot-toast"
 
 export default function ManagerGame() {
   const router = useRouter()
   const { gameId: gameIdParam }: { gameId?: string } = useParams()
-  const { socket, isConnected } = useSocket()
-  const [nextText, setNextText] = useState("Start")
-  const { gameId, status, setGameId, setStatus, setPlayers } = useManagerStore()
+  const { socket } = useSocket()
+  const { gameId, status, setGameId, setStatus, setPlayers, reset } =
+    useManagerStore()
   const { setQuestionStates } = useQuestionStore()
 
   useEvent("game:status", ({ name, data }) => {
@@ -41,6 +40,7 @@ export default function ManagerGame() {
   useEvent(
     "manager:successReconnect",
     ({ gameId, status, players, currentQuestion }) => {
+      console.log("manager:successReconnect", gameId)
       setGameId(gameId)
       setStatus(status.name, status.data)
       setPlayers(players)
@@ -50,43 +50,32 @@ export default function ManagerGame() {
 
   useEvent("game:reset", () => {
     router.replace("/manager")
+    reset()
     toast("Game is not available anymore")
   })
 
-  useEffect(() => {
-    if (status.name === Status.SHOW_START) {
-      setNextText("Start")
-    }
-  }, [status.name])
-
-  if (!isConnected) {
-    return null
-  }
-
-  if (!gameId) {
-    return null
-  }
-
   const handleSkip = () => {
-    setNextText("Skip")
+    if (!gameId) {
+      return
+    }
 
     switch (status.name) {
-      case Status.SHOW_ROOM:
+      case STATUS.SHOW_ROOM:
         socket?.emit("manager:startGame", { gameId })
 
         break
 
-      case Status.SELECT_ANSWER:
+      case STATUS.SELECT_ANSWER:
         socket?.emit("manager:abortQuiz", { gameId })
 
         break
 
-      case Status.SHOW_RESPONSES:
+      case STATUS.SHOW_RESPONSES:
         socket?.emit("manager:showLeaderboard", { gameId })
 
         break
 
-      case Status.SHOW_LEADERBOARD:
+      case STATUS.SHOW_LEADERBOARD:
         socket?.emit("manager:nextQuestion", { gameId })
 
         break
@@ -96,49 +85,49 @@ export default function ManagerGame() {
   let component = null
 
   switch (status.name) {
-    case Status.SHOW_ROOM:
+    case STATUS.SHOW_ROOM:
       component = <Room data={status.data} />
 
       break
 
-    case Status.SHOW_START:
+    case STATUS.SHOW_START:
       component = <Start data={status.data} />
 
       break
 
-    case Status.SHOW_PREPARED:
+    case STATUS.SHOW_PREPARED:
       component = <Prepared data={status.data} />
 
       break
 
-    case Status.SHOW_QUESTION:
+    case STATUS.SHOW_QUESTION:
       component = <Question data={status.data} />
 
       break
 
-    case Status.SELECT_ANSWER:
+    case STATUS.SELECT_ANSWER:
       component = <Answers data={status.data} />
 
       break
 
-    case Status.SHOW_RESPONSES:
+    case STATUS.SHOW_RESPONSES:
       component = <Responses data={status.data} />
 
       break
 
-    case Status.SHOW_LEADERBOARD:
+    case STATUS.SHOW_LEADERBOARD:
       component = <Leaderboard data={status.data} />
 
       break
 
-    case Status.FINISHED:
+    case STATUS.FINISHED:
       component = <Podium data={status.data} />
 
       break
   }
 
   return (
-    <GameWrapper textNext={nextText} onNext={handleSkip} manager>
+    <GameWrapper statusName={status.name} onNext={handleSkip} manager>
       {component}
     </GameWrapper>
   )

packages/web/src/app/globals.css

@@ -5,6 +5,11 @@
   --color-secondary: #1a140b;
 }
 
+button:not(:disabled),
+[role="button"]:not(:disabled) {
+  cursor: pointer;
+}
+
 .btn-shadow {
   box-shadow: rgba(0, 0, 0, 0.25) 0px -4px inset;
 }

packages/web/src/components/Loader.tsx

@@ -1,6 +1,12 @@
 import loader from "@rahoot/web/assets/loader.svg"
 import Image from "next/image"
 
-export default function Loader() {
-  return <Image alt="loader" src={loader} />
+type Props = {
+  className?: string
 }
+
+const Loader = ({ className }: Props) => (
+  <Image className={className} alt="loader" src={loader} />
+)
+
+export default Loader

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

@@ -1,41 +1,32 @@
 "use client"
 
+import { Status } from "@rahoot/common/types/game/status"
 import background from "@rahoot/web/assets/background.webp"
 import Button from "@rahoot/web/components/Button"
 import { useEvent, useSocket } from "@rahoot/web/contexts/socketProvider"
 import { usePlayerStore } from "@rahoot/web/stores/player"
 import { useQuestionStore } from "@rahoot/web/stores/question"
+import { MANAGER_SKIP_BTN } from "@rahoot/web/utils/constants"
 import Image from "next/image"
-import { useRouter } from "next/navigation"
-import { PropsWithChildren, useEffect } from "react"
+import { PropsWithChildren } from "react"
+import Loader from "../Loader"
 
 type Props = PropsWithChildren & {
-  textNext?: string
+  statusName: Status
   onNext?: () => void
   manager?: boolean
 }
 
 export default function GameWrapper({
   children,
-  textNext,
+  statusName,
   onNext,
   manager,
 }: Props) {
-  const { isConnected, connect } = useSocket()
-  const { player, logout } = usePlayerStore()
+  const { isConnected } = useSocket()
+  const { player } = usePlayerStore()
   const { questionStates, setQuestionStates } = useQuestionStore()
-  const router = useRouter()
-
-  useEffect(() => {
-    if (!isConnected) {
-      connect()
-    }
-  }, [connect, isConnected])
-
-  useEvent("game:kick", () => {
-    logout()
-    router.replace("/")
-  })
+  const next = MANAGER_SKIP_BTN[statusName] || null
 
   useEvent("game:updateQuestion", ({ current, total }) => {
     setQuestionStates({
@@ -54,32 +45,41 @@ export default function GameWrapper({
         />
       </div>
 
-      <div className="flex w-full justify-between p-4">
-        {questionStates && (
-          <div className="shadow-inset flex items-center rounded-md bg-white p-2 px-4 text-lg font-bold text-black">
-            {`${questionStates.current} / ${questionStates.total}`}
-          </div>
-        )}
-
-        {manager && (
-          <Button
-            className="self-end bg-white px-4 !text-black"
-            onClick={onNext}
-          >
-            {textNext}
-          </Button>
-        )}
-      </div>
-
-      {children}
-
-      {!manager && (
-        <div className="z-50 flex items-center justify-between bg-white px-4 py-2 text-lg font-bold text-white">
-          <p className="text-gray-800">{player?.username}</p>
-          <div className="rounded-sm bg-gray-800 px-3 py-1 text-lg">
-            {player?.points}
-          </div>
+      {!isConnected && !statusName ? (
+        <div className="flex h-full w-full flex-1 flex-col items-center justify-center">
+          <Loader />
+          <h1 className="text-4xl font-bold text-white">Connecting...</h1>
         </div>
+      ) : (
+        <>
+          <div className="flex w-full justify-between p-4">
+            {questionStates && (
+              <div className="shadow-inset flex items-center rounded-md bg-white p-2 px-4 text-lg font-bold text-black">
+                {`${questionStates.current} / ${questionStates.total}`}
+              </div>
+            )}
+
+            {manager && next && (
+              <Button
+                className="self-end bg-white px-4 !text-black"
+                onClick={onNext}
+              >
+                {next}
+              </Button>
+            )}
+          </div>
+
+          {children}
+
+          {!manager && (
+            <div className="z-50 flex items-center justify-between bg-white px-4 py-2 text-lg font-bold text-white">
+              <p className="text-gray-800">{player?.username}</p>
+              <div className="rounded-sm bg-gray-800 px-3 py-1 text-lg">
+                {player?.points}
+              </div>
+            </div>
+          )}
+        </>
       )}
     </section>
   )

packages/web/src/components/game/create/ManagerPassword.tsx

@@ -1,15 +1,12 @@
-import logo from "@rahoot/web/assets/logo.svg"
 import Button from "@rahoot/web/components/Button"
 import Form from "@rahoot/web/components/Form"
 import Input from "@rahoot/web/components/Input"
 import { useEvent } from "@rahoot/web/contexts/socketProvider"
-import Image from "next/image"
 import { KeyboardEvent, useState } from "react"
 import toast from "react-hot-toast"
 
 type Props = {
-  // eslint-disable-next-line no-unused-vars
-  onSubmit: (password: string) => void
+  onSubmit: (_password: string) => void
 }
 
 export default function ManagerPassword({ onSubmit }: Props) {
@@ -30,23 +27,14 @@ export default function ManagerPassword({ onSubmit }: Props) {
   })
 
   return (
-    <section className="relative flex min-h-screen flex-col items-center justify-center">
-      <div className="absolute h-full w-full overflow-hidden">
-        <div className="bg-primary/15 absolute -top-[15vmin] -left-[15vmin] min-h-[75vmin] min-w-[75vmin] rounded-full"></div>
-        <div className="bg-primary/15 absolute -right-[15vmin] -bottom-[15vmin] min-h-[75vmin] min-w-[75vmin] rotate-45"></div>
-      </div>
-
-      <Image src={logo} className="mb-6 h-32" alt="logo" />
-
-      <Form>
-        <Input
-          type="password"
-          onChange={(e) => setPassword(e.target.value)}
-          onKeyDown={handleKeyDown}
-          placeholder="Manager password"
-        />
-        <Button onClick={handleSubmit}>Submit</Button>
-      </Form>
-    </section>
+    <Form>
+      <Input
+        type="password"
+        onChange={(e) => setPassword(e.target.value)}
+        onKeyDown={handleKeyDown}
+        placeholder="Manager password"
+      />
+      <Button onClick={handleSubmit}>Submit</Button>
+    </Form>
   )
 }

packages/web/src/components/game/create/SelectQuizz.tsx

@@ -1,8 +1,6 @@
 import { Quizz } from "@rahoot/common/types/game"
-import logo from "@rahoot/web/assets/logo.svg"
 import Button from "@rahoot/web/components/Button"
 import clsx from "clsx"
-import Image from "next/image"
 import { useState } from "react"
 import toast from "react-hot-toast"
 
@@ -10,8 +8,7 @@ type QuizzWithId = Quizz & { id: string }
 
 type Props = {
   quizzList: QuizzWithId[]
-  // eslint-disable-next-line no-unused-vars
-  onSelect: (id: string) => void
+  onSelect: (_id: string) => void
 }
 
 export default function SelectQuizz({ quizzList, onSelect }: Props) {
@@ -36,44 +33,32 @@ export default function SelectQuizz({ quizzList, onSelect }: Props) {
   }
 
   return (
-    <section className="relative flex min-h-screen flex-col items-center justify-center">
-      <div className="absolute h-full w-full overflow-hidden">
-        <div className="bg-primary/15 absolute -top-[15vmin] -left-[15vmin] min-h-[75vmin] min-w-[75vmin] rounded-full"></div>
-        <div className="bg-primary/15 absolute -right-[15vmin] -bottom-[15vmin] min-h-[75vmin] min-w-[75vmin] rotate-45"></div>
-      </div>
+    <div className="z-10 flex w-full max-w-md flex-col gap-4 rounded-md bg-white p-4 shadow-sm">
+      <div className="flex flex-col items-center justify-center">
+        <h1 className="mb-2 text-2xl font-bold">Select a quizz</h1>
+        <div className="w-full space-y-2">
+          {quizzList.map((quizz) => (
+            <button
+              key={quizz.id}
+              className={clsx(
+                "flex w-full items-center justify-between rounded-md p-3 outline outline-gray-300",
+              )}
+              onClick={handleSelect(quizz.id)}
+            >
+              {quizz.subject}
 
-      <Image src={logo} className="mb-6 h-32" alt="logo" />
-
-      <div className="z-10 flex w-full max-w-md flex-col gap-4 rounded-md bg-white p-4 shadow-sm">
-        <div className="flex flex-col items-center justify-center">
-          <h1 className="mb-2 text-2xl font-bold">Select a quizz</h1>
-          <div className="w-full space-y-2">
-            {quizzList.map((quizz) => (
-              <button
-                key={quizz.id}
+              <div
                 className={clsx(
-                  "flex w-full items-center justify-between rounded-md p-3 outline outline-gray-300",
-                  {
-                    "border-primary outline-primary outline-2":
-                      selected === quizz.id,
-                  },
+                  "h-5 w-5 rounded outline outline-offset-3 outline-gray-300",
+                  selected === quizz.id &&
+                    "bg-primary border-primary/80 shadow-inset",
                 )}
-                onClick={handleSelect(quizz.id)}
-              >
-                {quizz.subject}
-
-                <div
-                  className={clsx(
-                    "h-4 w-4 rounded-sm outline-2 outline-gray-300",
-                    selected === quizz.id && "bg-primary outline-primary/50",
-                  )}
-                ></div>
-              </button>
-            ))}
-          </div>
+              ></div>
+            </button>
+          ))}
         </div>
-        <Button onClick={handleSubmit}>Submit</Button>
       </div>
-    </section>
+      <Button onClick={handleSubmit}>Submit</Button>
+    </div>
   )
 }

packages/web/src/components/icons/Pentagon.tsx

@@ -17,9 +17,9 @@ export default function Pentagon({ className, fill, stroke }: Props) {
       viewBox="-40.96 -40.96 593.93 593.93"
       transform="rotate(180)"
       stroke={fill}
-      stroke-width="0.005120100000000001"
+      strokeWidth="0.005120100000000001"
     >
-      <g stroke-width="0" />
+      <g strokeWidth="0" />
 
       <g
         strokeLinecap="round"

packages/web/src/stores/manager.tsx

@@ -1,4 +1,3 @@
-/* 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"
@@ -9,22 +8,26 @@ type ManagerStore<T> = {
   status: Status<T>
   players: Player[]
 
-  setGameId: (gameId: string | null) => void
-
-  setStatus: <K extends keyof T>(name: K, data: T[K]) => void
+  setGameId: (_gameId: string | null) => void
+  setStatus: <K extends keyof T>(_name: K, _data: T[K]) => void
   resetStatus: () => void
+  setPlayers: (_players: Player[]) => void
 
-  setPlayers: (players: Player[]) => void
+  reset: () => void
 }
 
 const initialStatus = createStatus<StatusDataMap, "SHOW_ROOM">("SHOW_ROOM", {
   text: "Waiting for the players",
 })
 
-export const useManagerStore = create<ManagerStore<StatusDataMap>>((set) => ({
+const initialState = {
   gameId: null,
   status: initialStatus,
   players: [],
+}
+
+export const useManagerStore = create<ManagerStore<StatusDataMap>>((set) => ({
+  ...initialState,
 
   setGameId: (gameId) => set({ gameId }),
 
@@ -32,4 +35,6 @@ export const useManagerStore = create<ManagerStore<StatusDataMap>>((set) => ({
   resetStatus: () => set({ status: initialStatus }),
 
   setPlayers: (players) => set({ players }),
+
+  reset: () => set(initialState),
 }))

packages/web/src/stores/player.tsx

@@ -1,4 +1,3 @@
-/* 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"
@@ -13,27 +12,30 @@ type PlayerStore<T> = {
   player: PlayerState | null
   status: Status<T>
 
-  setGameId: (gameId: string | null) => void
+  setGameId: (_gameId: string | null) => void
 
-  setPlayer: (state: PlayerState) => void
-  login: (gameId: string) => void
-  join: (username: string) => void
-  updatePoints: (points: number) => void
-  logout: () => void
+  setPlayer: (_state: PlayerState) => void
+  login: (_gameId: string) => void
+  join: (_username: string) => void
+  updatePoints: (_points: number) => void
 
-  setStatus: <K extends keyof T>(name: K, data: T[K]) => void
-  resetStatus: () => void
+  setStatus: <K extends keyof T>(_name: K, _data: T[K]) => void
+
+  reset: () => void
 }
 
 const initialStatus = createStatus<StatusDataMap, "WAIT">("WAIT", {
   text: "Waiting for the players",
 })
 
-export const usePlayerStore = create<PlayerStore<StatusDataMap>>((set) => ({
+const initialState = {
   gameId: null,
   player: null,
   status: initialStatus,
-  currentQuestion: null,
+}
+
+export const usePlayerStore = create<PlayerStore<StatusDataMap>>((set) => ({
+  ...initialState,
 
   setGameId: (gameId) => set({ gameId }),
 
@@ -55,8 +57,7 @@ export const usePlayerStore = create<PlayerStore<StatusDataMap>>((set) => ({
       player: { ...state.player, points },
     })),
 
-  logout: () => set({ player: null }),
-
   setStatus: (name, data) => set({ status: createStatus(name, data) }),
-  resetStatus: () => set({ status: initialStatus }),
+
+  reset: () => set(initialState),
 }))

packages/web/src/stores/question.tsx

@@ -1,10 +1,9 @@
-/* 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
+  setQuestionStates: (_state: GameUpdateQuestion) => void
 }
 
 export const useQuestionStore = create<QuestionStore>((set) => ({

packages/web/src/utils/constants.ts

@@ -9,7 +9,7 @@ import Room from "@rahoot/web/components/game/states/Room"
 import Start from "@rahoot/web/components/game/states/Start"
 import Wait from "@rahoot/web/components/game/states/Wait"
 
-import { Status } from "@rahoot/common/types/game/status"
+import { STATUS } from "@rahoot/common/types/game/status"
 import Circle from "@rahoot/web/components/icons/Circle"
 import Rhombus from "@rahoot/web/components/icons/Rhombus"
 import Square from "@rahoot/web/components/icons/Square"
@@ -26,7 +26,7 @@ export const ANSWERS_ICONS = [Triangle, Rhombus, Circle, Square]
 
 export const GAME_STATES = {
   status: {
-    name: Status.WAIT,
+    name: STATUS.WAIT,
     data: { text: "Waiting for the players" },
   },
   question: {
@@ -36,20 +36,20 @@ export const GAME_STATES = {
 }
 
 export const GAME_STATE_COMPONENTS = {
-  [Status.SELECT_ANSWER]: Answers,
-  [Status.SHOW_QUESTION]: Question,
-  [Status.WAIT]: Wait,
-  [Status.SHOW_START]: Start,
-  [Status.SHOW_RESULT]: Result,
-  [Status.SHOW_PREPARED]: Prepared,
+  [STATUS.SELECT_ANSWER]: Answers,
+  [STATUS.SHOW_QUESTION]: Question,
+  [STATUS.WAIT]: Wait,
+  [STATUS.SHOW_START]: Start,
+  [STATUS.SHOW_RESULT]: Result,
+  [STATUS.SHOW_PREPARED]: Prepared,
 }
 
 export const GAME_STATE_COMPONENTS_MANAGER = {
   ...GAME_STATE_COMPONENTS,
-  [Status.SHOW_ROOM]: Room,
-  [Status.SHOW_RESPONSES]: Responses,
-  [Status.SHOW_LEADERBOARD]: Leaderboard,
-  [Status.FINISHED]: Podium,
+  [STATUS.SHOW_ROOM]: Room,
+  [STATUS.SHOW_RESPONSES]: Responses,
+  [STATUS.SHOW_LEADERBOARD]: Leaderboard,
+  [STATUS.FINISHED]: Podium,
 }
 
 export const SFX_ANSWERS_MUSIC = "/sounds/answersMusic.mp3"
@@ -61,3 +61,16 @@ export const SFX_PODIUM_THREE = "/sounds/three.mp3"
 export const SFX_PODIUM_SECOND = "/sounds/second.mp3"
 export const SFX_PODIUM_FIRST = "/sounds/first.mp3"
 export const SFX_SNEAR_ROOL = "/sounds/snearRoll.mp3"
+
+export const MANAGER_SKIP_BTN = {
+  [STATUS.SHOW_ROOM]: "Start Game",
+  [STATUS.SHOW_START]: null,
+  [STATUS.SHOW_PREPARED]: null,
+  [STATUS.SHOW_QUESTION]: null,
+  [STATUS.SELECT_ANSWER]: "Skip",
+  [STATUS.SHOW_RESULT]: null,
+  [STATUS.SHOW_RESPONSES]: "Next",
+  [STATUS.SHOW_LEADERBOARD]: "Next",
+  [STATUS.FINISHED]: null,
+  [STATUS.WAIT]: null,
+}