Initial clean state

packages/web/src/components/game/join/Username.tsx

@@ -0,0 +1,56 @@
+"use client"
+
+import { STATUS } from "@rahoot/common/types/game/status"
+import Button from "@rahoot/web/components/Button"
+import Form from "@rahoot/web/components/Form"
+import Input from "@rahoot/web/components/Input"
+import { useEvent, useSocket } from "@rahoot/web/contexts/socketProvider"
+import { usePlayerStore } from "@rahoot/web/stores/player"
+
+import { useRouter } from "next/navigation"
+import { KeyboardEvent, useState } from "react"
+
+const Username = () => {
+  const { socket } = useSocket()
+  const { gameId, login, setStatus } = usePlayerStore()
+  const router = useRouter()
+  const [username, setUsername] = useState("")
+
+  const handleLogin = () => {
+    if (!gameId) {
+      return
+    }
+
+    socket?.emit("player:login", { gameId, data: { username } })
+  }
+
+  const handleKeyDown = (event: KeyboardEvent) => {
+    if (event.key === "Enter") {
+      handleLogin()
+    }
+  }
+
+  useEvent("game:successJoin", (gameId) => {
+    setStatus(STATUS.WAIT, { text: "Waiting for the players" })
+    login(username)
+    try {
+      localStorage.setItem("last_game_id", gameId)
+      localStorage.setItem("last_username", username)
+    } catch {}
+
+    router.replace(`/game/${gameId}`)
+  })
+
+  return (
+    <Form>
+      <Input
+        onChange={(e) => setUsername(e.target.value)}
+        onKeyDown={handleKeyDown}
+        placeholder="Username here"
+      />
+      <Button onClick={handleLogin}>Submit</Button>
+    </Form>
+  )
+}
+
+export default Username