refactor: add typescript & pnpm workspace & docker file

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

@@ -0,0 +1,78 @@
+"use client"
+
+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"
+import Question from "@rahoot/web/components/game/states/Question"
+import Result from "@rahoot/web/components/game/states/Result"
+import Start from "@rahoot/web/components/game/states/Start"
+import Wait from "@rahoot/web/components/game/states/Wait"
+import { useEvent } from "@rahoot/web/contexts/socketProvider"
+import { usePlayerGameStore } from "@rahoot/web/stores/game"
+import { usePlayerStore } from "@rahoot/web/stores/player"
+import { GAME_STATE_COMPONENTS } from "@rahoot/web/utils/constants"
+import { useRouter } from "next/navigation"
+import { useEffect } from "react"
+import toast from "react-hot-toast"
+
+export default function Game() {
+  const router = useRouter()
+  const { player, logout } = usePlayerStore()
+  const { status, setStatus, resetStatus } = usePlayerGameStore()
+
+  useEffect(() => {
+    if (!player) {
+      router.replace("/")
+    }
+  }, [player, router])
+
+  useEvent("game:status", ({ name, data }) => {
+    if (name in GAME_STATE_COMPONENTS) {
+      setStatus(name, data)
+    }
+  })
+
+  useEvent("game:reset", () => {
+    router.replace("/")
+    logout()
+    resetStatus()
+    toast("The game has been reset by the host")
+  })
+
+  let component = null
+
+  switch (status.name) {
+    case Status.WAIT:
+      component = <Wait data={status.data} />
+
+      break
+
+    case Status.SHOW_START:
+      component = <Start data={status.data} />
+
+      break
+
+    case Status.SHOW_PREPARED:
+      component = <Prepared data={status.data} />
+
+      break
+
+    case Status.SHOW_QUESTION:
+      component = <Question data={status.data} />
+
+      break
+
+    case Status.SHOW_RESULT:
+      component = <Result data={status.data} />
+
+      break
+
+    case Status.SELECT_ANSWER:
+      component = <Answers data={status.data} />
+
+      break
+  }
+
+  return <GameWrapper>{component}</GameWrapper>
+}

packages/web/src/app/game/layout.tsx

@@ -0,0 +1,17 @@
+"use client"
+
+import { useSocket } from "@rahoot/web/contexts/socketProvider"
+import { PropsWithChildren, useEffect } from "react"
+
+const GameLayout = ({ children }: PropsWithChildren) => {
+  const { isConnected, connect } = useSocket()
+  useEffect(() => {
+    if (!isConnected) {
+      connect()
+    }
+  }, [connect, isConnected])
+
+  return children
+}
+
+export default GameLayout

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

@@ -0,0 +1,112 @@
+"use client"
+
+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"
+import Podium from "@rahoot/web/components/game/states/Podium"
+import Prepared from "@rahoot/web/components/game/states/Prepared"
+import Question from "@rahoot/web/components/game/states/Question"
+import Responses from "@rahoot/web/components/game/states/Responses"
+import Room from "@rahoot/web/components/game/states/Room"
+import Start from "@rahoot/web/components/game/states/Start"
+import { useEvent, useSocket } from "@rahoot/web/contexts/socketProvider"
+import { useManagerGameStore } from "@rahoot/web/stores/game"
+import { GAME_STATE_COMPONENTS_MANAGER } from "@rahoot/web/utils/constants"
+import { useParams } from "next/navigation"
+import { useEffect, useState } from "react"
+
+export default function ManagerGame() {
+  const { socket } = useSocket()
+  const [nextText, setNextText] = useState("Start")
+  const { status, setStatus } = useManagerGameStore()
+  const { gameId }: { gameId?: string } = useParams()
+
+  useEvent("game:status", ({ name, data }) => {
+    if (name in GAME_STATE_COMPONENTS_MANAGER) {
+      setStatus(name, data)
+    }
+  })
+
+  useEffect(() => {
+    if (status.name === "SHOW_START") {
+      setNextText("Start")
+    }
+  }, [status.name])
+
+  const handleSkip = () => {
+    setNextText("Skip")
+
+    switch (status.name) {
+      case Status.SHOW_ROOM:
+        socket?.emit("manager:startGame", { gameId })
+
+        break
+
+      case Status.SELECT_ANSWER:
+        socket?.emit("manager:abortQuiz", { gameId })
+
+        break
+
+      case Status.SHOW_RESPONSES:
+        socket?.emit("manager:showLeaderboard", { gameId })
+
+        break
+
+      case Status.SHOW_LEADERBOARD:
+        socket?.emit("manager:nextQuestion", { gameId })
+
+        break
+    }
+  }
+
+  let component = null
+
+  switch (status.name) {
+    case Status.SHOW_ROOM:
+      component = <Room data={status.data} />
+
+      break
+
+    case Status.SHOW_START:
+      component = <Start data={status.data} />
+
+      break
+
+    case Status.SHOW_PREPARED:
+      component = <Prepared data={status.data} />
+
+      break
+
+    case Status.SHOW_QUESTION:
+      component = <Question data={status.data} />
+
+      break
+
+    case Status.SELECT_ANSWER:
+      component = <Answers data={status.data} />
+
+      break
+
+    case Status.SHOW_RESPONSES:
+      component = <Responses data={status.data} />
+
+      break
+
+    case Status.SHOW_LEADERBOARD:
+      component = <Leaderboard data={status.data} />
+
+      break
+
+    case Status.FINISHED:
+      component = <Podium data={status.data} />
+
+      break
+  }
+
+  return (
+    <GameWrapper textNext={nextText} onNext={handleSkip} manager>
+      {component}
+    </GameWrapper>
+  )
+}