Authorize join lobby

src/assets/ok.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid"
+    style="shape-rendering: auto; display: block;" width="50" height="50">
+    <circle stroke-linecap="round" fill="none" stroke="#16a34a"
+        stroke-width="8" r="32" cy="50" cx="50" data-idx="2">
+    </circle>
+</svg>

src/pages/Index.tsx

@@ -66,7 +66,7 @@ export function Index() {
                     <p>Validating user id...</p>
                 </Show>
                 <Show when={userInfo() !== null && validated()}>
-                    <LobbyConnection />
+                    <LobbyConnection user_id={userInfo()!.UserId} />
                 </Show>
             </div>
             <hr />
@@ -162,7 +162,7 @@ function UserRegistration(props: {setUserInfo: (u: UserInfo) => void}) {
     );
 }
 
-function LobbyConnection() {
+function LobbyConnection(props: {user_id: string}) {
     const [loading, setLoading] = createSignal(false);
     const [error, setError] = createSignal("");
     const navigate = useNavigate();
@@ -175,7 +175,9 @@ function LobbyConnection() {
         setLoading(true);
 
         try {
-            const res = await backend.post<{LobbyId: string}>("/lobby/new");
+            const res = await backend.post<{LobbyId: string}>("/lobby/new", {
+                UserId: props.user_id,
+            });
             console.log(res.data);
             // Redirect to the lobby component using the received lobby id
             navigate(`/lobby/${res.data.LobbyId}`);

src/pages/Lobby.tsx

@@ -3,7 +3,7 @@ import LoadingIcon from "../assets/loading.svg";
 import ErrorIcon from "../assets/error.svg";
 import ConnectedIcon from "../assets/ok.svg";
 import { userIdKey } from "./Index";
-import { useNavigate } from "@solidjs/router";
+import { useNavigate, useParams } from "@solidjs/router";
 
 enum LobbyStatus {
     Connecting,
@@ -23,6 +23,7 @@ const connectionRetryInterval = 5000;
 export function Lobby() {
     const [status, setStatus] = createSignal(LobbyStatus.Disconnected);
     const navigate = useNavigate();
+    const params = useParams();
 
     let ws: WebSocket|null = null;
 
@@ -41,6 +42,7 @@ export function Lobby() {
         setStatus(LobbyStatus.Authenticating);
 
         // The first message must be authenticating with the server
+        // TODO
 
         const userId = localStorage.getItem(userIdKey);
         if (userId === null) {
@@ -52,9 +54,10 @@ export function Lobby() {
 
         // Send an auth message to the server
         // The server will respond with either "authenticated" or "unauthenticated"
+        // The message sent is <userid>,<lobbyid>
         ws!.send(JSON.stringify({
             action: "auth",
-            value: userId,
+            value: `${userId},${params.id}`,
         }));
     };