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

nginx.conf

@@ -1,15 +0,0 @@
-http {
-    include       /etc/nginx/mime.types;
-    default_type  application/octet-stream;
-
-    server {
-        listen 80;
-        server_name localhost openfront.io openfront.dev;
-
-        location / {
-            root /usr/src/app/;
-            include /etc/nginx/mime.types;
-            try_files $uri $uri/ /index.html;
-        }
-    }
-}

package-lock.json

@@ -37,6 +37,7 @@
         "node-addon-api": "^8.1.0",
         "node-gyp": "^10.2.0",
         "obscenity": "^0.4.3",
+        "page": "^1.11.6",
         "priority-queue-typescript": "^1.0.1",
         "protobufjs": "^7.3.2",
         "pureimage": "^0.4.13",
@@ -12766,6 +12767,27 @@
       "integrity": "sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==",
       "license": "BlueOak-1.0.0"
     },
+    "node_modules/page": {
+      "version": "1.11.6",
+      "resolved": "https://registry.npmjs.org/page/-/page-1.11.6.tgz",
+      "integrity": "sha512-P6e2JfzkBrPeFCIPplLP7vDDiU84RUUZMrWdsH4ZBGJ8OosnwFkcUkBHp1DTIjuipLliw9yQn/ZJsXZvarsO+g==",
+      "dependencies": {
+        "path-to-regexp": "~1.2.1"
+      }
+    },
+    "node_modules/page/node_modules/isarray": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
+      "integrity": "sha512-D2S+3GLxWH+uhrNEcoh/fnmYeP8E8/zHl644d/jdA0g2uyXvy3sb0qxotE+ne0LtccHknQzWwZEzhak7oJ0COQ=="
+    },
+    "node_modules/page/node_modules/path-to-regexp": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.2.1.tgz",
+      "integrity": "sha512-DBw9IhWfevR2zCVwEZURTuQNseCvu/Q9f5ZgqMCK0Rh61bDa4uyjPAOy9b55yKiPT59zZn+7uYKxmWwsguInwg==",
+      "dependencies": {
+        "isarray": "0.0.1"
+      }
+    },
     "node_modules/pako": {
       "version": "1.0.11",
       "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz",

package.json

@@ -100,6 +100,7 @@
     "node-addon-api": "^8.1.0",
     "node-gyp": "^10.2.0",
     "obscenity": "^0.4.3",
+    "page": "^1.11.6",
     "priority-queue-typescript": "^1.0.1",
     "protobufjs": "^7.3.2",
     "pureimage": "^0.4.13",

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 {