From 1e1942ab1c0485c34dcd0da1b17740601b9e07a0 Mon Sep 17 00:00:00 2001 From: NewHappyRabbit <31893343+NewHappyRabbit@users.noreply.github.com> Date: Wed, 12 Feb 2025 02:08:29 +0200 Subject: [PATCH 1/4] TODO: Keep working --- nginx.conf | 15 +++++++++++++++ package-lock.json | 22 ++++++++++++++++++++++ package.json | 1 + src/client/HostLobbyModal.ts | 1 + src/client/Main.ts | 9 +++++++++ src/client/components/FlagInput.ts | 6 +++--- src/client/graphics/layers/NameLayer.ts | 2 +- webpack.config.js | 2 ++ 8 files changed, 54 insertions(+), 4 deletions(-) create mode 100644 nginx.conf diff --git a/nginx.conf b/nginx.conf new file mode 100644 index 000000000..954253a6c --- /dev/null +++ b/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; + } + } +} \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 6cd82a35f..2eef891b3 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index bcf4f563c..e0abf915c 100644 --- a/package.json +++ b/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", diff --git a/src/client/HostLobbyModal.ts b/src/client/HostLobbyModal.ts index 0a37a2410..9a0af8d68 100644 --- a/src/client/HostLobbyModal.ts +++ b/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(() => { diff --git a/src/client/Main.ts b/src/client/Main.ts index 3b36a7fe4..44c09f009 100644 --- a/src/client/Main.ts +++ b/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) { diff --git a/src/client/components/FlagInput.ts b/src/client/components/FlagInput.ts index e4334d27f..d3198b6fe 100644 --- a/src/client/components/FlagInput.ts +++ b/src/client/components/FlagInput.ts @@ -162,7 +162,7 @@ export class FlagInput extends LitElement { ` : html` (this.showModal = true)} />`} ${this.showModal @@ -187,7 +187,7 @@ export class FlagInput extends LitElement { > None @@ -212,7 +212,7 @@ export class FlagInput extends LitElement { > ${country.name} { 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: [ From 7be0b9bc65180cdfbb51ab5621a489fc5a085d02 Mon Sep 17 00:00:00 2001 From: NewHappyRabbit <31893343+NewHappyRabbit@users.noreply.github.com> Date: Wed, 12 Feb 2025 02:08:56 +0200 Subject: [PATCH 2/4] quickfix --- src/client/JoinPrivateLobbyModal.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/client/JoinPrivateLobbyModal.ts b/src/client/JoinPrivateLobbyModal.ts index dede85d4e..5d03aec3f 100644 --- a/src/client/JoinPrivateLobbyModal.ts +++ b/src/client/JoinPrivateLobbyModal.ts @@ -156,6 +156,7 @@ export class JoinPrivateLobbyModal extends LitElement { 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; } catch (err) { @@ -164,6 +165,7 @@ export class JoinPrivateLobbyModal extends LitElement { } 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 From 303543d246fbb850f7e5ef9eeaaf42078dd71b9e Mon Sep 17 00:00:00 2001 From: NewHappyRabbit <31893343+NewHappyRabbit@users.noreply.github.com> Date: Wed, 12 Feb 2025 21:18:23 +0200 Subject: [PATCH 3/4] Lobby urls! Server will server index.html and act as a SPA. --- nginx.conf | 15 ----------- package-lock.json | 22 ++++++++++++++++ package.json | 1 + src/client/HostLobbyModal.ts | 4 ++- src/client/JoinPrivateLobbyModal.ts | 39 +++++++++++++++++++++++++---- src/client/Main.ts | 16 ++++++------ src/server/Server.ts | 5 ++++ 7 files changed, 74 insertions(+), 28 deletions(-) delete mode 100644 nginx.conf diff --git a/nginx.conf b/nginx.conf deleted file mode 100644 index 954253a6c..000000000 --- a/nginx.conf +++ /dev/null @@ -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; - } - } -} \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index b553a49ac..3487256bf 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index b39f4f232..d47e714dc 100644 --- a/package.json +++ b/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", diff --git a/src/client/HostLobbyModal.ts b/src/client/HostLobbyModal.ts index d469f5269..bbfb96284 100644 --- a/src/client/HostLobbyModal.ts +++ b/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; diff --git a/src/client/JoinPrivateLobbyModal.ts b/src/client/JoinPrivateLobbyModal.ts index a75d723e9..418cd4ce3 100644 --- a/src/client/JoinPrivateLobbyModal.ts +++ b/src/client/JoinPrivateLobbyModal.ts @@ -228,7 +228,12 @@ export class JoinPrivateLobbyModal extends LitElement { ×
Join Private Lobby
- + ` + : html` (this.showModal = true)} + />`} + ${this.showModal + ? html` +
+ +
+ + + ${Countries.filter( + (country) => + country.name + .toLowerCase() + .includes(this.search.toLowerCase()) || + country.code + .toLowerCase() + .includes(this.search.toLowerCase()), + ).map( + (country) => html` + ` - : html` (this.showModal = true)} - />`} - ${this.showModal - ? html` -
- -
- - - ${Countries.filter( - (country) => - country.name - .toLowerCase() - .includes( - this.search.toLowerCase() - ) || - country.code - .toLowerCase() - .includes( - this.search.toLowerCase() - ) - ).map( - (country) => html` - - ` - )} -
-
- ` - : ""} -
- `; - } + + ${country.name} + + `, + )} +
+
+ ` + : ""} + + `; + } } diff --git a/src/client/graphics/layers/NameLayer.ts b/src/client/graphics/layers/NameLayer.ts index 47836fb26..566af94d0 100644 --- a/src/client/graphics/layers/NameLayer.ts +++ b/src/client/graphics/layers/NameLayer.ts @@ -153,8 +153,8 @@ export class NameLayer implements Layer { const flagImg = document.createElement("img"); flagImg.classList.add("player-flag"); flagImg.style.marginBottom = "-5%"; - flagImg.style.opacity = '0.8'; - flagImg.src = '/flags/' + sanitize(player.flag()) + '.svg'; + flagImg.style.opacity = "0.8"; + flagImg.src = "/flags/" + sanitize(player.flag()) + ".svg"; flagImg.style.zIndex = "1"; flagImg.style.width = "40%"; flagImg.style.aspectRatio = "3/4"; diff --git a/webpack.config.js b/webpack.config.js index 26c379005..c6e879fae 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -11,129 +11,139 @@ export default (env, argv) => { const isProduction = argv.mode === "production"; return { - entry: './src/client/Main.ts', + entry: "./src/client/Main.ts", output: { publicPath: "/", - filename: 'bundle.js', - path: path.resolve(__dirname, 'out'), - clean: true + filename: "bundle.js", + path: path.resolve(__dirname, "out"), + clean: true, }, module: { rules: [ { test: /\.bin$/, - use: 'raw-loader' + use: "raw-loader", }, { test: /\.txt$/, - use: 'raw-loader' + use: "raw-loader", }, { test: /\.ts$/, - use: 'ts-loader', + use: "ts-loader", exclude: /node_modules/, }, { test: /\.css$/, use: [ - 'style-loader', + "style-loader", { - loader: 'css-loader', + loader: "css-loader", options: { - importLoaders: 1 - } + importLoaders: 1, + }, }, { - loader: 'postcss-loader', + loader: "postcss-loader", options: { postcssOptions: { - plugins: [ - 'tailwindcss', - 'autoprefixer', - ], - } - } - } - ] + plugins: ["tailwindcss", "autoprefixer"], + }, + }, + }, + ], }, { test: /\.(png|jpe?g|gif)$/i, - type: 'asset/resource', + type: "asset/resource", generator: { - filename: 'images/[hash][ext][query]' - } + filename: "images/[hash][ext][query]", + }, }, { test: /\.html$/, - use: ['html-loader'] + use: ["html-loader"], }, { test: /\.svg$/, - type: 'asset/inline', + type: "asset/inline", }, { test: /\.(woff|woff2|eot|ttf|otf)$/, use: [ { - loader: 'file-loader', + loader: "file-loader", options: { - name: '[name].[ext]', - outputPath: 'fonts/', - publicPath: '../fonts/', // This is important - } - } - ] - } + name: "[name].[ext]", + outputPath: "fonts/", + publicPath: "../fonts/", // This is important + }, + }, + ], + }, ], }, resolve: { - extensions: ['.tsx', '.ts', '.js'], + extensions: [".tsx", ".ts", ".js"], alias: { - 'protobufjs/minimal': path.resolve(__dirname, 'node_modules/protobufjs/minimal.js') - } + "protobufjs/minimal": path.resolve( + __dirname, + "node_modules/protobufjs/minimal.js", + ), + }, }, plugins: [ new HtmlWebpackPlugin({ - template: './src/client/index.html', - filename: 'index.html' + template: "./src/client/index.html", + filename: "index.html", }), new webpack.DefinePlugin({ - 'process.env.WEBSOCKET_URL': JSON.stringify(isProduction ? '' : 'localhost:3000') + "process.env.WEBSOCKET_URL": JSON.stringify( + isProduction ? "" : "localhost:3000", + ), }), new webpack.DefinePlugin({ - 'process.env.GAME_ENV': JSON.stringify(isProduction ? 'prod' : 'dev') + "process.env.GAME_ENV": JSON.stringify(isProduction ? "prod" : "dev"), }), new CopyPlugin({ - patterns: [ - { from: "resources", to: path.resolve(__dirname, 'out') }, - ], + patterns: [{ from: "resources", to: path.resolve(__dirname, "out") }], options: { concurrency: 100, }, }), ], - devServer: isProduction ? {} : { - devMiddleware: { writeToDisk: true }, - static: { - directory: path.join(__dirname, 'out'), - }, - historyApiFallback: true, - compress: true, - port: 9000, - proxy: [ - { - context: ['/socket'], - target: 'ws://localhost:3000', - ws: true, + devServer: isProduction + ? {} + : { + devMiddleware: { writeToDisk: true }, + static: { + directory: path.join(__dirname, "out"), + }, + historyApiFallback: true, + compress: true, + port: 9000, + proxy: [ + { + context: ["/socket"], + target: "ws://localhost:3000", + ws: true, + }, + { + context: [ + "/lobbies", + "/join_game", + "/join_lobby", + "/private_lobby", + "/start_private_lobby", + "/lobby", + "/archive_singleplayer_game", + "/validate-username", + ], + target: "http://localhost:3000", + secure: false, + changeOrigin: true, + }, + ], }, - { - context: ['/lobbies', '/join_game', '/join_lobby', '/private_lobby', '/start_private_lobby', - '/lobby', '/archive_singleplayer_game', '/validate-username'], - target: 'http://localhost:3000', - secure: false, - changeOrigin: true, - } - ], - }, }; };