Merge pull request #28 from NewHappyRabbit/SPA

Private lobby urls added. Server now acts as a SPA.

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

@@ -558,7 +558,10 @@ export class HostLobbyModal extends LitElement {
 
   private async copyToClipboard() {
     try {
-      await navigator.clipboard.writeText(this.lobbyId);
+      //TODO: Convert id to url and copy
+      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,10 +316,31 @@ 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 {
       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);
     }

src/client/Main.ts

@@ -14,6 +14,7 @@ import { generateCryptoRandomUUID } from "./Utils";
 import { consolex } from "../core/Consolex";
 import "./components/FlagInput";
 import { FlagInput } from "./components/FlagInput";
+import page from "page";
 
 class Client {
   private gameStop: () => void;
@@ -84,6 +85,16 @@ class Client {
           this.joinModal.open();
         }
       });
+
+    page("/join/:lobbyId", (ctx) => {
+      const lobbyId = ctx.params.lobbyId;
+
+      this.joinModal.open(lobbyId);
+
+      consolex.log(`joining lobby ${lobbyId}`);
+    });
+
+    page();
   }
 
   private async handleJoinLobby(event: CustomEvent) {

src/client/components/FlagInput.ts

@@ -163,7 +163,7 @@ export class FlagInput extends LitElement {
             </button>`
           : html`<img
               class="selected-flag"
-              src="flags/${this.flag}.svg"
+              src="/flags/${this.flag}.svg"
               @click=${() => (this.showModal = true)}
             />`}
         ${this.showModal
@@ -182,7 +182,7 @@ export class FlagInput extends LitElement {
                     @click=${() => this.setFlag("")}
                     class="dropdown-item"
                   >
-                    <img class="country-flag" src="flags/xx.svg" />
+                    <img class="country-flag" src="/flags/none.svg" />
                     <span class="country-name">None</span>
                   </button>
                   ${Countries.filter(
@@ -201,7 +201,7 @@ export class FlagInput extends LitElement {
                       >
                         <img
                           class="country-flag"
-                          src="flags/${country.code}.svg"
+                          src="/flags/${country.code}.svg"
                         />
                         <span class="country-name">${country.name}</span>
                       </button>

src/client/graphics/layers/NameLayer.ts

@@ -154,7 +154,7 @@ export class NameLayer implements Layer {
       flagImg.classList.add("player-flag");
       flagImg.style.marginBottom = "-5%";
       flagImg.style.opacity = "0.8";
-      flagImg.src = "flags/" + sanitize(player.flag()) + ".svg";
+      flagImg.src = "/flags/" + sanitize(player.flag()) + ".svg";
       flagImg.style.zIndex = "1";
       flagImg.style.width = "40%";
       flagImg.style.aspectRatio = "3/4";

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 {

webpack.config.js

@@ -13,6 +13,7 @@ export default (env, argv) => {
   return {
     entry: "./src/client/Main.ts",
     output: {
+      publicPath: "/",
       filename: "bundle.js",
       path: path.resolve(__dirname, "out"),
       clean: true,
@@ -118,6 +119,7 @@ export default (env, argv) => {
           static: {
             directory: path.join(__dirname, "out"),
           },
+          historyApiFallback: true,
           compress: true,
           port: 9000,
           proxy: [