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

@@ -4,8 +4,8 @@ import { backend, set_auth_token, UserInfo } from "../utils";
 import { Card } from "../components/Card";
 import { AxiosError } from "axios";
 
-const userIdKey = "UserId";
-const usernameKey = "Username";
+export const userIdKey = "UserId";
+export const usernameKey = "Username";
 
 export function Index() {
     const [userInfo, setUserInfo] = createSignal<UserInfo | null>(null);
@@ -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

@@ -1,39 +1,102 @@
-import { Show, createSignal, onMount } from "solid-js";
+import { Show, createSignal, onCleanup, onMount } from "solid-js";
 import LoadingIcon from "../assets/loading.svg";
 import ErrorIcon from "../assets/error.svg";
+import ConnectedIcon from "../assets/ok.svg";
+import { userIdKey } from "./Index";
+import { useNavigate, useParams } from "@solidjs/router";
 
 enum LobbyStatus {
     Connecting,
     Connected,
     Disconnected,
+    Authenticating,
     Error,
 }
 
+type LobbyMsg = {
+    action: string,
+    value: string,
+}
+
+const connectionRetryInterval = 5000;
+
 export function Lobby() {
-    const [status, setStatus] = createSignal(LobbyStatus.Connecting);
+    const [status, setStatus] = createSignal(LobbyStatus.Disconnected);
+    const navigate = useNavigate();
+    const params = useParams();
+
     let ws: WebSocket|null = null;
 
-    const lobbyConnect = async() => {
+    const lobbyConnect = () => {
+        setStatus(LobbyStatus.Connecting);
         ws = new WebSocket(`${import.meta.env.VITE_WS_URL}/lobby/connect`);
 
-        ws.addEventListener("open", () => {
-            console.log("Connection open!");
-            setStatus(LobbyStatus.Connected);
-        });
+        ws.addEventListener("open", onWsOpen);
+        ws.addEventListener("message", onWsMessage);
+        ws.addEventListener("error", onWsError);
+        ws.addEventListener("close", onWsClose);
+    };
 
-        ws.addEventListener("message", (ev) => {
-            console.log("message from ws!");
-            console.log(ev);
-        });
+    const onWsOpen = () => {
+        console.log("Connection open. Authenticating...");
+        setStatus(LobbyStatus.Authenticating);
 
-        ws.addEventListener("error", (ev) => {
-            console.error(ev);
-            setStatus(LobbyStatus.Error);
-        });
+        // The first message must be authenticating with the server
+        // TODO
 
-        ws.addEventListener("close", () => {
-            console.log("connection closed");
-        });
+        const userId = localStorage.getItem(userIdKey);
+        if (userId === null) {
+            // Redirect to home page
+            ws?.close(1000);
+            navigate("/");
+            return;
+        }
+
+        // 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},${params.id}`,
+        }));
+    };
+
+    const onWsMessage = (ev: MessageEvent) => {
+        const data = JSON.parse(ev.data) as LobbyMsg;
+
+        switch (data.action) {
+            case "auth": {
+                if (data.value === "authenticated") {
+                    setStatus(LobbyStatus.Connected);
+                } else if (data.value === "unauthenticated") {
+                    ws?.close(1000);
+                    navigate("/");
+                }
+                break;
+            }
+        }
+    };
+
+    const onWsError = (ev: Event) => {
+        console.error("error in connection");
+        console.error(ev);
+        setStatus(LobbyStatus.Error);
+    };
+
+    const onWsClose = (ev: CloseEvent) => {
+        if (ev.code === 1000) {
+            // The connection was normally closed
+            return;
+        }
+
+        // If the previous state is "Error", we don't set
+        // the state to Disconnected
+        if (status() !== LobbyStatus.Error) {
+            setStatus(LobbyStatus.Disconnected);
+        }
+
+        console.log(`connection closed. reconnecting in ${connectionRetryInterval}ms`);
+        setTimeout(lobbyConnect, connectionRetryInterval);
     };
 
     const send = () => {
@@ -47,6 +110,10 @@ export function Lobby() {
     };
 
     onMount(lobbyConnect);
+    onCleanup(() => {
+        console.log("lobby cleanup");
+        ws?.close(1000);
+    });
 
     return (
         <div class="w-[40rem] mx-auto bg-c-bg-2 my-4 p-4 rounded shadow-md">
@@ -54,12 +121,24 @@ export function Lobby() {
                 Lobby
             </h1>
 
+            <Show when={status() === LobbyStatus.Disconnected}>
+                <p>
+                    <img class="inline-block h-6 animate-spin" src={LoadingIcon} alt="..." />
+                    Disconected. Attempting reconnection in {connectionRetryInterval / 1000} seconds.
+                </p>
+            </Show>
             <Show when={status() === LobbyStatus.Connecting}>
                 <p>
                     <img class="inline-block h-6 animate-spin" src={LoadingIcon} alt="..." />
                     Connecting to the lobby
                 </p>
             </Show>
+            <Show when={status() === LobbyStatus.Authenticating}>
+                <p>
+                    <img class="inline-block h-6 animate-spin" src={LoadingIcon} alt="..." />
+                    Authenticating with the server
+                </p>
+            </Show>
 
             <Show when={status() === LobbyStatus.Error}>
                 <p>
@@ -69,6 +148,11 @@ export function Lobby() {
             </Show>
 
             <Show when={status() === LobbyStatus.Connected}>
+                <p>
+                    <img class="inline-block h-6" src={ConnectedIcon} alt="..." />
+                    Connected
+                </p>
+
                 <button class="bg-cyan-500 p-2 rounded text-white" onClick={send}>Send message</button>
             </Show>