Lobby urls! Server will server index.html and act as a SPA.

src/client/HostLobbyModal.ts

@@ -559,7 +559,9 @@ export class HostLobbyModal extends LitElement {
   private async copyToClipboard() {
     try {
       //TODO: Convert id to url and copy
-      await navigator.clipboard.writeText(this.lobbyId);
+      await navigator.clipboard.writeText(
+        `${location.origin}/join/${this.lobbyId}`,
+      );
       this.copySuccess = true;
       setTimeout(() => {
         this.copySuccess = false;

src/client/JoinPrivateLobbyModal.ts

@@ -228,7 +228,12 @@ export class JoinPrivateLobbyModal extends LitElement {
           <span class="close" @click=${this.closeAndLeave}>&times;</span>
           <div class="title">Join Private Lobby</div>
           <div class="lobby-id-box">
-            <input type="text" id="lobbyIdInput" placeholder="Enter Lobby ID" />
+            <input
+              type="text"
+              id="lobbyIdInput"
+              placeholder="Enter Lobby ID"
+              @keyup=${this.handleChange}
+            />
             <button
               @click=${this.pasteFromClipboard}
               class="lobby-id-paste-button"
@@ -280,8 +285,13 @@ export class JoinPrivateLobbyModal extends LitElement {
     `;
   }
 
-  public open() {
+  public open(id: string = "") {
     this.isModalOpen = true;
+
+    if (id) {
+      this.setLobbyId(id);
+      this.joinLobby();
+    }
   }
 
   public close() {
@@ -306,18 +316,37 @@ export class JoinPrivateLobbyModal extends LitElement {
     );
   }
 
+  private setLobbyId(id: string) {
+    if (id.startsWith("http")) {
+      this.lobbyIdInput.value = id.split("join/")[1];
+    } else {
+      this.lobbyIdInput.value = id;
+    }
+  }
+
+  private handleChange(e: Event) {
+    const value = (e.target as HTMLInputElement).value.trim();
+    this.setLobbyId(value);
+  }
+
   private async pasteFromClipboard() {
     try {
-      // TODO: This can be either a link or a id, check if it's a link
       const clipText = await navigator.clipboard.readText();
-      this.lobbyIdInput.value = clipText;
+
+      let lobbyId: string;
+      if (clipText.startsWith("http")) {
+        lobbyId = clipText.split("join/")[1];
+      } else {
+        lobbyId = clipText;
+      }
+
+      this.lobbyIdInput.value = lobbyId;
     } catch (err) {
       consolex.error("Failed to read clipboard contents: ", err);
     }
   }
 
   private joinLobby() {
-    // TODO: This can be either a link or a id, check if it's a link
     const lobbyId = this.lobbyIdInput.value;
     consolex.log(`Joining lobby with ID: ${lobbyId}`);
     this.message = "Checking lobby..."; // Set initial message

src/client/Main.ts

@@ -14,7 +14,7 @@ import { generateCryptoRandomUUID } from "./Utils";
 import { consolex } from "../core/Consolex";
 import "./components/FlagInput";
 import { FlagInput } from "./components/FlagInput";
-import page from 'page';
+import page from "page";
 
 class Client {
   private gameStop: () => void;
@@ -86,13 +86,15 @@ class Client {
         }
       });
 
-		page('/join/:id', (ctx) => {
-			// TODO: Implement logic for joining a lobby
-			const id = ctx.params.id;
-			consolex.log('join', id);
-		});
+    page("/join/:lobbyId", (ctx) => {
+      const lobbyId = ctx.params.lobbyId;
 
-		page();
+      this.joinModal.open(lobbyId);
+
+      consolex.log(`joining lobby ${lobbyId}`);
+    });
+
+    page();
   }
 
   private async handleJoinLobby(event: CustomEvent) {

src/server/Server.ts

@@ -130,6 +130,11 @@ app.get("/private_lobby/:id", (req, res) => {
   });
 });
 
+app.get("*", function (req, res) {
+  // SPA routing
+  res.sendFile(path.join(__dirname, "../../out/index.html"));
+});
+
 wss.on("connection", (ws, req) => {
   ws.on("message", (message: string) => {
     try {