refactor: add typescript & pnpm workspace & docker file

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

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

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

@@ -0,0 +1,43 @@
+"use client"
+
+import { QuizzWithId } from "@rahoot/common/types/game"
+import ManagerPassword from "@rahoot/web/components/game/create/ManagerPassword"
+import SelectQuizz from "@rahoot/web/components/game/create/SelectQuizz"
+import { useEvent, useSocket } from "@rahoot/web/contexts/socketProvider"
+import { useManagerGameStore } from "@rahoot/web/stores/game"
+import { useRouter } from "next/navigation"
+import { useState } from "react"
+
+export default function Manager() {
+  const { setStatus } = useManagerGameStore()
+  const router = useRouter()
+  const { socket } = useSocket()
+
+  const [isAuth, setIsAuth] = useState(false)
+  const [quizzList, setQuizzList] = useState<QuizzWithId[]>([])
+
+  useEvent("manager:quizzList", (quizzList) => {
+    setIsAuth(true)
+    setQuizzList(quizzList)
+  })
+
+  useEvent("manager:gameCreated", ({ gameId, inviteCode }) => {
+    setStatus("SHOW_ROOM", { text: "Waiting for the players", inviteCode })
+    router.push(`/game/manager/${gameId}`)
+  })
+
+  const handleAuth = (password: string) => {
+    socket?.emit("manager:auth", password)
+  }
+  const handleCreate = (quizzId: string) => {
+    console.log(quizzId)
+    socket?.emit("game:create", quizzId)
+    console.log("create room")
+  }
+
+  if (!isAuth) {
+    return <ManagerPassword onSubmit={handleAuth} />
+  }
+
+  return <SelectQuizz quizzList={quizzList} onSelect={handleCreate} />
+}

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

@@ -0,0 +1,38 @@
+"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"
+
+export default function Home() {
+  const { isConnected, connect } = useSocket()
+  const { player } = usePlayerStore()
+
+  useEffect(() => {
+    if (!isConnected) {
+      connect()
+    }
+  }, [connect, isConnected])
+
+  useEvent("game:errorMessage", (message) => {
+    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>
+
+      <Image src={logo} className="mb-6 h-32" alt="logo" />
+
+      {!player ? <Room /> : <Username />}
+    </section>
+  )
+}