Queue names

Allow users to choose their name that shows up in queue To do: make ui look good
Comet-Robotics · Nov 22, 2024 · ad509f1 · ad509f1
1 parent 636c577
commit ad509f1
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 2 deletions.
diff --git a/src/client/setup/setup-base.tsx b/src/client/setup/setup-base.tsx
@@ -26,6 +26,7 @@ export function SetupBase(props: SetupBaseProps): JSX.Element {
                     canEscapeKeyClose={false}
                     canOutsideClickClose={false}
                     usePortal={false}
+                    enforceFocus={false}
                 >
                     <DialogBody>{props.children}</DialogBody>
                     <DialogFooter minimal actions={props.actions} />

diff --git a/src/client/setup/sidebar.tsx b/src/client/setup/sidebar.tsx
@@ -19,6 +19,9 @@ function getMessageHandler(setQueue: Dispatch<string[]>): MessageHandler {
  */
 export function Sidebar(): JSX.Element {
     const [queue, setQueue] = useState<string[]>([]);
+    const [name, setName] = useState<string>(
+        "player " + Math.floor(Math.random() * 2000),
+    );
 
     const sendMessage = useSocket(getMessageHandler(setQueue));
 
@@ -56,11 +59,26 @@ export function Sidebar(): JSX.Element {
                     return <li key={data}>{data}</li>;
                 })}
             </ul>
+            <label
+                style={{
+                    position: "absolute",
+                    bottom: "40px",
+                    margin: "5px",
+                }}
+            >
+                Name:
+                <input
+                    style={{ width: "90%" }}
+                    value={name}
+                    onChange={(e) => setName(e.target.value)}
+                />
+            </label>
             <Button
                 minimal
+                type="submit"
                 style={{ position: "absolute", bottom: "10px" }}
                 onClick={async () => {
-                    sendMessage(new JoinQueue("yay" + Math.random() * 100));
+                    sendMessage(new JoinQueue(name));
                 }}
             >
                 Join queue

diff --git a/src/server/api/api.ts b/src/server/api/api.ts
@@ -129,7 +129,7 @@ export const websocketHandler: WebsocketRequestHandler = (ws, req) => {
                 socketManager.sendToAll(new UpdateQueue([...names.values()]));
                 socketManager.sendToAll(new GameStartedMessage());
             }
-        }, 2000);
+        }, 5000);
     });
 
     ws.on("message", (data) => {