Update Manager/Color/Logo

src/pages/manager.jsx

@@ -1,3 +1,4 @@
+import Button from "@/components/Button"
 import GameWrapper from "@/components/game/GameWrapper"
 import Answers from "@/components/game/states/Answers"
 import Leaderboard from "@/components/game/states/Leaderboard"
@@ -24,6 +25,7 @@ export default function Manager() {
 
   const [nextText, setNextText] = useState("Start")
   const [state, setState] = useState({
+    created: false,
     status: {
       name: "SHOW_START",
       data: { text: "Waiting for the players" },
@@ -45,6 +47,24 @@ export default function Manager() {
     })
   })
 
+  socket.on("manager:inviteCode", (inviteCode) => {
+    setState({
+      ...state,
+      created: true,
+      status: {
+        ...state.status,
+        data: {
+          ...state.status.data,
+          inviteCode: inviteCode,
+        },
+      },
+    })
+  })
+
+  const handleCreate = () => {
+    socket.emit("manager:createRoom")
+  }
+
   const handleSkip = () => {
     setNextText("Skip")
 
@@ -64,11 +84,19 @@ export default function Manager() {
   }
 
   return (
-    <GameWrapper textNext={nextText} onNext={handleSkip} manager>
-      {gameStateComponent[state.status.name] &&
-        createElement(gameStateComponent[state.status.name], {
-          data: state.status.data,
-        })}
-    </GameWrapper>
+    <>
+      {!state.created ? (
+        <div>
+          <Button onClick={handleCreate}>Create Room</Button>
+        </div>
+      ) : (
+        <GameWrapper textNext={nextText} onNext={handleSkip} manager>
+          {gameStateComponent[state.status.name] &&
+            createElement(gameStateComponent[state.status.name], {
+              data: state.status.data,
+            })}
+        </GameWrapper>
+      )}
+    </>
   )
 }