201 server host reassignment

src/client/api.ts

@@ -64,6 +64,7 @@ export function useSocket(
                 onMessage(message);
             }
         },
+        share: true,
     });
 
     // handle how a message is sent

src/client/game/game.tsx

@@ -25,6 +25,7 @@ import { ChessEngine } from "../../common/chess-engine";
 import type { Move } from "../../common/game-types";
 import { NonIdealState, Spinner } from "@blueprintjs/core";
 import { AcceptDrawDialog, OfferDrawDialog } from "./draw-dialog";
+import { Sidebar } from "../setup/sidebar";
 import { bgColor } from "../check-dark-mode";
 import "../colors.css";
 
@@ -166,17 +167,20 @@ export function Game(): JSX.Element {
                 aiDifficulty={data.aiDifficulty}
                 setRotation={setRotation}
             />
-            <div id="body-container" className={bgColor()}>
-                <ChessboardWrapper
-                    side={side}
-                    chess={chess}
-                    onMove={handleMove}
-                    rotation={rotation ? rotation : 0}
-                />
-                {gameEndDialog}
-                {gameOfferDialog}
-                {gameAcceptDialog}
-                <Outlet />
+            <Sidebar top={50} />
+            <div className="main-dialog">
+                <div id="body-container" className={bgColor()}>
+                    <ChessboardWrapper
+                        side={side}
+                        chess={chess}
+                        onMove={handleMove}
+                        rotation={rotation ? rotation : 0}
+                    />
+                    {gameEndDialog}
+                    {gameOfferDialog}
+                    {gameAcceptDialog}
+                    <Outlet />
+                </div>
             </div>
         </>
     );

src/client/index.scss

@@ -27,3 +27,65 @@
     position: absolute;
     // border: 3px solid blue;
 }
+
+.sidebar {
+    //w3 schools for the win
+    width: 20%;
+    height: 100%;
+    position: fixed; /* Fixed Sidebar (stay in place on scroll) */
+    z-index: 1; /* Stay on top */
+    top: 0; /* Stay at the top */
+    left: 0;
+    overflow-x: hidden; /* Disable horizontal scroll */
+    padding-top: 20px;
+}
+
+.main-dialog {
+    margin-left: 20%;
+    position: fixed;
+    width: 80%;
+    height: 100%;
+    padding-top: 50px;
+}
+
+.flex-container {
+    display: flex;
+    flex-direction: column;
+    padding: 5px;
+    background-color: #eee;
+}
+
+.button-container {
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+    margin-bottom: 5px;
+    margin-top: auto;
+}
+
+@media (max-width: 500px) {
+    .flex-container {
+        flex-direction: row;
+    }
+
+    .button-container {
+        margin-right: 5px;
+        margin-left: auto;
+        margin-bottom: auto;
+        margin-top: 0px;
+    }
+
+    .sidebar {
+        width: 100%;
+        height: 20%;
+        bottom: 0;
+        top: auto;
+        padding-top: 10px !important;
+    }
+
+    .main-dialog {
+        width: 100%;
+        margin-left: auto;
+        padding-top: 0px;
+    }
+}

src/client/setup/lobby.tsx

@@ -4,6 +4,7 @@ import { useNavigate, Navigate } from "react-router-dom";
 import { GameStartedMessage } from "../../common/message/game-message";
 import { useSocket, useEffectQuery, get } from "../api";
 import { ClientType } from "../../common/client-types";
+import { ThemeButtons } from "./setup";
 
 /**
  * check for an active game and waits for one or forwards to setup
@@ -41,10 +42,27 @@ export function Lobby() {
     } else {
         return (
             <SetupBase>
-                <NonIdealState
-                    title="Waiting For Game to Start"
-                    icon={<Spinner intent="primary" />}
-                />
+                <>
+                    <NonIdealState
+                        title={
+                            data.clientType === ClientType.CLIENT ?
+                                "Waiting For Host to Start"
+                            :   "Waiting in line"
+                        }
+                        icon={<Spinner intent="primary" />}
+                    />
+                    <div
+                        style={{
+                            alignItems: "center",
+                            display: "flex",
+                            flex: "1 0 auto",
+                            flexDirection: "column",
+                            justifyContent: "space-around",
+                        }}
+                    >
+                        <ThemeButtons />
+                    </div>
+                </>
             </SetupBase>
         );
     }

src/client/setup/setup-base.tsx

@@ -4,6 +4,7 @@ import { ChessboardWrapper } from "../chessboard/chessboard-wrapper";
 import type { PropsWithChildren, ReactNode } from "react";
 import { ChessEngine } from "../../common/chess-engine";
 import { Side } from "../../common/game-types";
+import { Sidebar } from "./sidebar";
 import { bgColor } from "../check-dark-mode";
 import "../colors.css";
 
@@ -20,27 +21,32 @@ interface SetupBaseProps extends PropsWithChildren {
 export function SetupBase(props: SetupBaseProps): JSX.Element {
     return (
         <>
-            <Outlet />
-            <ChessboardWrapper
-                chess={new ChessEngine()}
-                side={Side.WHITE}
-                onMove={() => {}}
-                rotation={0}
-            />
-            <Dialog
-                style={{
-                    backgroundColor: "transparent",
-                    boxShadow: "none",
-                }}
-                isOpen
-                canEscapeKeyClose={false}
-                canOutsideClickClose={false}
-            >
-                <div className={bgColor() + " " + "roundedBorder"}>
-                    <DialogBody>{props.children}</DialogBody>
-                    <DialogFooter minimal actions={props.actions} />
-                </div>
-            </Dialog>
+            <div className="main-dialog">
+                <Outlet />
+                <ChessboardWrapper
+                    chess={new ChessEngine()}
+                    side={Side.WHITE}
+                    onMove={() => {}}
+                    rotation={0}
+                />
+                <Dialog
+                    style={{
+                        backgroundColor: "transparent",
+                        boxShadow: "none",
+                    }}
+                    isOpen
+                    canEscapeKeyClose={false}
+                    canOutsideClickClose={false}
+                    usePortal={false}
+                    enforceFocus={false}
+                >
+                    <div className={bgColor() + " " + "roundedBorder"}>
+                        <DialogBody>{props.children}</DialogBody>
+                        <DialogFooter minimal actions={props.actions} />
+                    </div>
+                </Dialog>
+            </div>
+            <Sidebar />
         </>
     );
 }

src/client/setup/setup.tsx

@@ -132,20 +132,7 @@ function SetupMain(props: SetupMainProps) {
                 onClick={() => props.onPageChange(SetupType.PUZZLE)}
                 className={buttonColor()}
             />
-            <h3 className={textColor()}>Display Settings:</h3>
-            <ButtonGroup variant="outlined">
-                {allSettings.map((item, idx) => (
-                    <Button
-                        key={item[0]}
-                        textClassName={textColor()}
-                        //changed for better visibility
-                        icon={item[1]}
-                        text={item[0]}
-                        active={getUserSetting() === idx}
-                        onClick={() => setUserSetting(idx)}
-                    />
-                ))}
-            </ButtonGroup>
+            <ThemeButtons />
         </>
     );
 
@@ -163,8 +150,31 @@ function SetupMain(props: SetupMainProps) {
                 }}
             >
                 <H3 className={textColor()}>Welcome to Chess Bot!</H3>
+
                 {actions}
             </div>
         </>
     );
 }
+
+export function ThemeButtons(props): JSX.Element {
+    props;
+    return (
+        <>
+            <h3 className={textColor()}>Display Settings:</h3>
+            <ButtonGroup variant="outlined">
+                {allSettings.map((item, idx) => (
+                    <Button
+                        key={item[0]}
+                        textClassName={textColor()}
+                        //changed for better visibility
+                        icon={item[1]}
+                        text={item[0]}
+                        active={getUserSetting() === idx}
+                        onClick={() => setUserSetting(idx)}
+                    />
+                ))}
+            </ButtonGroup>
+        </>
+    );
+}

src/client/setup/sidebar.tsx

@@ -0,0 +1,106 @@
+import { Button, NonIdealState } from "@blueprintjs/core";
+import type { Dispatch } from "react";
+import { useState } from "react";
+import type { MessageHandler } from "../../common/message/message";
+import { JoinQueue, UpdateQueue } from "../../common/message/game-message";
+import { get, useEffectQuery, useSocket } from "../api";
+import {
+    bgColor,
+    buttonColor,
+    textBoxColor,
+    textColor,
+} from "../check-dark-mode";
+
+function getMessageHandler(setQueue: Dispatch<string[]>): MessageHandler {
+    return (message) => {
+        if (message instanceof UpdateQueue) {
+            setQueue(message.queue.slice());
+        }
+    };
+}
+
+interface sidebarProps {
+    top?: number | undefined;
+}
+
+/**
+ * Creates a sidebar to hold the queue elements
+ * @returns sidebar container
+ */
+export function Sidebar(props: sidebarProps): JSX.Element {
+    const [queue, setQueue] = useState<string[]>([]);
+    const [name, setName] = useState<string>(
+        "player " + Math.floor(Math.random() * 10000),
+    );
+
+    const sendMessage = useSocket(getMessageHandler(setQueue));
+    const { isPending, data, isError } = useEffectQuery(
+        "get-queue",
+        async () => {
+            return get("/get-queue").then((newQueue) => {
+                setQueue(newQueue);
+                return newQueue;
+            });
+        },
+        true,
+    );
+
+    const names = useEffectQuery(
+        "get-name",
+        async () => {
+            return get("/get-name").then((name) => {
+                if (name.message) setName(name.message);
+                return name;
+            });
+        },
+        true,
+    );
+
+    if (names.isError) {
+        console.log(names.isError);
+    }
+    //ts wanted me to do something with my data
+    data;
+    if (isPending || names.isPending) {
+        return <NonIdealState />;
+    } else if (isError) {
+        console.log(isError);
+    }
+
+    return (
+        <div
+            className={"sidebar flex-container " + bgColor()}
+            style={{ paddingTop: props.top }}
+        >
+            <h3 className={textColor()}>Player Queue</h3>
+            <ul style={{ listStyle: "decimal" }}>
+                {queue.map(function (data) {
+                    return (
+                        <li className={textColor()} key={data}>
+                            {data}
+                        </li>
+                    );
+                })}
+            </ul>
+            <div className={"button-container"}>
+                <label className={textColor()}>Name:</label>
+                <input
+                    className={textBoxColor() + " " + textColor()}
+                    value={name}
+                    maxLength={30}
+                    onChange={(e) => setName(e.target.value)}
+                />
+                <Button
+                    type="submit"
+                    style={{ textAlign: "start" }}
+                    onClick={async () => {
+                        sendMessage(new JoinQueue(name));
+                    }}
+                    className={buttonColor()}
+                >
+                    Join queue
+                </Button>
+            </div>
+        </div>
+    );
+}