TODO: Keep working

nginx.conf

@@ -0,0 +1,15 @@
+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",
@@ -12162,6 +12163,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

@@ -90,6 +90,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

@@ -305,6 +305,7 @@ export class HostLobbyModal extends LitElement {
 
   private async copyToClipboard() {
     try {
+      //TODO: Convert id to url and copy
       await navigator.clipboard.writeText(this.lobbyId);
       this.copySuccess = true;
       setTimeout(() => {

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;
@@ -92,6 +93,14 @@ class Client {
 					this.joinModal.open();
 				}
 			});
+
+		page('/join/:id', (ctx) => {
+			// TODO: Implement logic for joining a lobby
+			const id = ctx.params.id;
+			consolex.log('join', id);
+		});
+
+		page();
 	}
 
 	private async handleJoinLobby(event: CustomEvent) {

src/client/components/FlagInput.ts

@@ -162,7 +162,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
@@ -187,7 +187,7 @@ export class FlagInput extends LitElement {
                                   >
                                       <img
                                           class="country-flag"
-                                          src="flags/none.svg"
+                                          src="/flags/none.svg"
                                       />
                                       <span class="country-name">None</span>
                                   </button>
@@ -212,7 +212,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

src/client/graphics/layers/NameLayer.ts

@@ -149,7 +149,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";

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
@@ -116,6 +117,7 @@ export default (env, argv) => {
 			static: {
 				directory: path.join(__dirname, 'out'),
 			},
+			historyApiFallback: true,
 			compress: true,
 			port: 9000,
 			proxy: [