From c5fde1d287dd446bcd5776f8ec35f6ba7e368457 Mon Sep 17 00:00:00 2001
From: oleksandr-shysh <oleksandr.shysh@coralsoft.io>
Date: Thu, 12 Jun 2025 11:18:32 +0300
Subject: [PATCH] Integrated capacitor, adjusted the fetch urls and UI elements
 position to fit the safe area on mobile

---
 package-lock.json                          | 26 ++++++-
 package.json                               |  2 +
 src/client/DarkModeButton.ts               |  2 +-
 src/client/HostLobbyModal.ts               | 88 +++++++++++-----------
 src/client/JoinPrivateLobbyModal.ts        | 28 +++----
 src/client/PublicLobby.ts                  |  4 +-
 src/client/graphics/layers/ControlPanel.ts |  2 +-
 src/client/graphics/layers/OptionsMenu.ts  |  2 +-
 src/client/graphics/layers/TopBar.ts       |  2 +-
 src/client/index.html                      | 21 +++---
 src/client/styles.css                      | 16 ++++
 src/core/configuration/Config.ts           |  1 +
 src/core/configuration/ConfigLoader.ts     |  2 +-
 src/core/configuration/DefaultConfig.ts    | 12 +++
 src/server/Master.ts                       |  4 +-
 src/server/Worker.ts                       |  2 +
 src/server/cors.ts                         | 38 ++++++++++
 tests/util/TestServerConfig.ts             |  3 +
 webpack.config.js                          | 33 ++++++++
 19 files changed, 212 insertions(+), 76 deletions(-)
 create mode 100644 src/server/cors.ts

diff --git a/package-lock.json b/package-lock.json
index ebad04f12..cad573e57 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -29,6 +29,7 @@
         "binary-loader": "^0.0.1",
         "colord": "^2.9.3",
         "copy-webpack-plugin": "^13.0.0",
+        "cors": "^2.8.5",
         "d3": "^7.9.0",
         "dompurify": "^3.1.7",
         "dotenv": "^16.5.0",
@@ -69,6 +70,7 @@
         "@eslint/compat": "^1.2.7",
         "@eslint/js": "^9.21.0",
         "@types/chai": "^4.3.17",
+        "@types/cors": "^2.8.19",
         "@types/d3": "^7.4.3",
         "@types/jest": "^30.0.0",
         "@types/jquery": "^3.5.31",
@@ -8986,6 +8988,16 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/cors": {
+      "version": "2.8.19",
+      "resolved": "https://registry.npmjs.org/@types/cors/-/cors-2.8.19.tgz",
+      "integrity": "sha512-mFNylyeyqN93lfe/9CSxOGREz8cpzAhH+E93xJ4xWQf62V8sQ/24reV2nyzUWM6H6Xji+GGHpkbLe7pVoUEskg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
     "node_modules/@types/d3": {
       "version": "7.4.3",
       "resolved": "https://registry.npmjs.org/@types/d3/-/d3-7.4.3.tgz",
@@ -12005,6 +12017,19 @@
       "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==",
       "license": "MIT"
     },
+    "node_modules/cors": {
+      "version": "2.8.5",
+      "resolved": "https://registry.npmjs.org/cors/-/cors-2.8.5.tgz",
+      "integrity": "sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==",
+      "license": "MIT",
+      "dependencies": {
+        "object-assign": "^4",
+        "vary": "^1"
+      },
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
     "node_modules/cosmiconfig": {
       "version": "9.0.0",
       "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-9.0.0.tgz",
@@ -18887,7 +18912,6 @@
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
       "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
diff --git a/package.json b/package.json
index b41cd64f6..bd6af4d44 100644
--- a/package.json
+++ b/package.json
@@ -29,6 +29,7 @@
     "@eslint/compat": "^1.2.7",
     "@eslint/js": "^9.21.0",
     "@types/chai": "^4.3.17",
+    "@types/cors": "^2.8.19",
     "@types/d3": "^7.4.3",
     "@types/jest": "^30.0.0",
     "@types/jquery": "^3.5.31",
@@ -102,6 +103,7 @@
     "binary-loader": "^0.0.1",
     "colord": "^2.9.3",
     "copy-webpack-plugin": "^13.0.0",
+    "cors": "^2.8.5",
     "d3": "^7.9.0",
     "dompurify": "^3.1.7",
     "dotenv": "^16.5.0",
diff --git a/src/client/DarkModeButton.ts b/src/client/DarkModeButton.ts
index 65071408f..dc0924b09 100644
--- a/src/client/DarkModeButton.ts
+++ b/src/client/DarkModeButton.ts
@@ -20,7 +20,7 @@ export class DarkModeButton extends LitElement {
     return html`
       <button
         title="Toggle Dark Mode"
-        class="absolute top-0 right-0 md:top-[10px] md:right-[10px] border-none bg-none cursor-pointer text-2xl"
+        class="absolute top-0 safe-top right-0 md:top-[10px] md:right-[10px] border-none bg-none cursor-pointer text-2xl"
         @click=${() => this.toggleDarkMode()}
       >
         ${this.darkMode ? "☀️" : "🌙"}
diff --git a/src/client/HostLobbyModal.ts b/src/client/HostLobbyModal.ts
index 2a71ec7be..b235cc55b 100644
--- a/src/client/HostLobbyModal.ts
+++ b/src/client/HostLobbyModal.ts
@@ -342,7 +342,7 @@ export class HostLobbyModal extends LitElement {
           </div>
         </div>
 
-        <div class="start-game-button-container">
+         <div class="start-game-button-container">
           <button
             @click=${this.startGame}
             ?disabled=${this.players.length < 2}
@@ -471,28 +471,25 @@ export class HostLobbyModal extends LitElement {
   }
 
   private async putGameConfig() {
-    const config = await getServerConfigFromClient();
-    const response = await fetch(
-      `${window.location.origin}/${config.workerPath(this.lobbyId)}/api/game/${this.lobbyId}`,
-      {
-        method: "PUT",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify({
-          gameMap: this.selectedMap,
-          difficulty: this.selectedDifficulty,
-          disableNPCs: this.disableNPCs,
-          bots: this.bots,
-          infiniteGold: this.infiniteGold,
-          infiniteTroops: this.infiniteTroops,
-          instantBuild: this.instantBuild,
-          gameMode: this.gameMode,
-          disabledUnits: this.disabledUnits,
-          playerTeams: this.teamCount,
-        } satisfies Partial<GameConfig>),
+    const url = await buildGameUrl(this.lobbyId, "game");
+    const response = await fetch(url, {
+      method: "PUT",
+      headers: {
+        "Content-Type": "application/json",
       },
-    );
+      body: JSON.stringify({
+        gameMap: this.selectedMap,
+        difficulty: this.selectedDifficulty,
+        disableNPCs: this.disableNPCs,
+        bots: this.bots,
+        infiniteGold: this.infiniteGold,
+        infiniteTroops: this.infiniteTroops,
+        instantBuild: this.instantBuild,
+        gameMode: this.gameMode,
+        disabledUnits: this.disabledUnits,
+        playerTeams: this.teamCount,
+      } satisfies Partial<GameConfig>),
+    });
     return response;
   }
 
@@ -521,16 +518,13 @@ export class HostLobbyModal extends LitElement {
       `Starting private game with map: ${GameMapType[this.selectedMap]} ${this.useRandomMap ? " (Randomly selected)" : ""}`,
     );
     this.close();
-    const config = await getServerConfigFromClient();
-    const response = await fetch(
-      `${window.location.origin}/${config.workerPath(this.lobbyId)}/api/start_game/${this.lobbyId}`,
-      {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-        },
+    const url = await buildGameUrl(this.lobbyId, "start_game");
+    const response = await fetch(url, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
       },
-    );
+    });
     return response;
   }
 
@@ -550,8 +544,8 @@ export class HostLobbyModal extends LitElement {
   }
 
   private async pollPlayers() {
-    const config = await getServerConfigFromClient();
-    fetch(`/${config.workerPath(this.lobbyId)}/api/game/${this.lobbyId}`, {
+    const url = await buildGameUrl(this.lobbyId, "game");
+    fetch(url, {
       method: "GET",
       headers: {
         "Content-Type": "application/json",
@@ -566,19 +560,16 @@ export class HostLobbyModal extends LitElement {
 }
 
 async function createLobby(): Promise<GameInfo> {
-  const config = await getServerConfigFromClient();
   try {
     const id = generateID();
-    const response = await fetch(
-      `/${config.workerPath(id)}/api/create_game/${id}`,
-      {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        // body: JSON.stringify(data), // Include this if you need to send data
+    const url = await buildGameUrl(id, "create_game");
+    const response = await fetch(url, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
       },
-    );
+      // body: JSON.stringify(data), // Include this if you need to send data
+    });
 
     if (!response.ok) {
       throw new Error(`HTTP error! status: ${response.status}`);
@@ -593,3 +584,14 @@ async function createLobby(): Promise<GameInfo> {
     throw error; // Re-throw the error so the caller can handle it
   }
 }
+
+export async function buildGameUrl(
+  gameID: string,
+  path: string,
+): Promise<string> {
+  const config = await getServerConfigFromClient();
+
+  const apiPath = `/api/${path}/${gameID}`;
+  const baseUrl = process.env.API_BASE_URL || "/";
+  return `${baseUrl}${config.workerPath(gameID)}${apiPath}`;
+}
diff --git a/src/client/JoinPrivateLobbyModal.ts b/src/client/JoinPrivateLobbyModal.ts
index 3640bb220..2e7ef76c5 100644
--- a/src/client/JoinPrivateLobbyModal.ts
+++ b/src/client/JoinPrivateLobbyModal.ts
@@ -3,10 +3,11 @@ import { customElement, query, state } from "lit/decorators.js";
 import { translateText } from "../client/Utils";
 import { GameInfo, GameRecord } from "../core/Schemas";
 import { generateID } from "../core/Util";
-import { getServerConfigFromClient } from "../core/configuration/ConfigLoader";
-import { JoinLobbyEvent } from "./Main";
 import "./components/baseComponents/Button";
 import "./components/baseComponents/Modal";
+import { buildGameUrl } from "./HostLobbyModal";
+import { JoinLobbyEvent } from "./Main";
+
 @customElement("join-private-lobby-modal")
 export class JoinPrivateLobbyModal extends LitElement {
   @query("o-modal") private modalEl!: HTMLElement & {
@@ -170,8 +171,7 @@ export class JoinPrivateLobbyModal extends LitElement {
   }
 
   private async checkActiveLobby(lobbyId: string): Promise<boolean> {
-    const config = await getServerConfigFromClient();
-    const url = `/${config.workerPath(lobbyId)}/api/game/${lobbyId}/exists`;
+    const url = await buildGameUrl(lobbyId, "game/exists");
 
     const response = await fetch(url, {
       method: "GET",
@@ -203,10 +203,9 @@ export class JoinPrivateLobbyModal extends LitElement {
   }
 
   private async checkArchivedGame(lobbyId: string): Promise<boolean> {
-    const config = await getServerConfigFromClient();
-    const archiveUrl = `/${config.workerPath(lobbyId)}/api/archived_game/${lobbyId}`;
+    const url = await buildGameUrl(lobbyId, "archived_game");
 
-    const archiveResponse = await fetch(archiveUrl, {
+    const archiveResponse = await fetch(url, {
       method: "GET",
       headers: { "Content-Type": "application/json" },
     });
@@ -249,17 +248,14 @@ export class JoinPrivateLobbyModal extends LitElement {
 
   private async pollPlayers() {
     if (!this.lobbyIdInput?.value) return;
-    const config = await getServerConfigFromClient();
 
-    fetch(
-      `/${config.workerPath(this.lobbyIdInput.value)}/api/game/${this.lobbyIdInput.value}`,
-      {
-        method: "GET",
-        headers: {
-          "Content-Type": "application/json",
-        },
+    const url = await buildGameUrl(this.lobbyIdInput.value, "game");
+    fetch(url, {
+      method: "GET",
+      headers: {
+        "Content-Type": "application/json",
       },
-    )
+    })
       .then((response) => response.json())
       .then((data: GameInfo) => {
         this.players = data.clients?.map((p) => p.username) ?? [];
diff --git a/src/client/PublicLobby.ts b/src/client/PublicLobby.ts
index 2292d9d8d..1b8408b43 100644
--- a/src/client/PublicLobby.ts
+++ b/src/client/PublicLobby.ts
@@ -56,7 +56,9 @@ export class PublicLobby extends LitElement {
 
   async fetchLobbies(): Promise<GameInfo[]> {
     try {
-      const response = await fetch(`/api/public_lobbies`);
+      const response = await fetch(
+        `${process.env.API_BASE_URL}/api/public_lobbies`,
+      );
       if (!response.ok)
         throw new Error(`HTTP error! status: ${response.status}`);
       const data = await response.json();
diff --git a/src/client/graphics/layers/ControlPanel.ts b/src/client/graphics/layers/ControlPanel.ts
index cff9ac873..8c8c2ee8f 100644
--- a/src/client/graphics/layers/ControlPanel.ts
+++ b/src/client/graphics/layers/ControlPanel.ts
@@ -204,7 +204,7 @@ export class ControlPanel extends LitElement implements Layer {
       </style>
       <div
         class="${this._isVisible
-          ? "w-[320px] text-sm lg:text-m bg-gray-800/70 p-2 pr-3 lg:p-4 shadow-lg lg:rounded-lg backdrop-blur"
+          ? "w-[320px] text-sm lg:text-m bg-gray-800/70 p-2 pr-3 lg:p-4 shadow-lg lg:rounded-lg backdrop-blur safe-pb"
           : "hidden"}"
         @contextmenu=${(e) => e.preventDefault()}
       >
diff --git a/src/client/graphics/layers/OptionsMenu.ts b/src/client/graphics/layers/OptionsMenu.ts
index 270e10f66..68ebf9f8e 100644
--- a/src/client/graphics/layers/OptionsMenu.ts
+++ b/src/client/graphics/layers/OptionsMenu.ts
@@ -153,7 +153,7 @@ export class OptionsMenu extends LitElement implements Layer {
     }
     return html`
       <div
-        class="top-0 lg:top-4 right-0 lg:right-4 z-50 pointer-events-auto"
+        class="top-0 lg:top-4 right-0 lg:right-4 z-50 pointer-events-auto safe-pt"
         @contextmenu=${(e) => e.preventDefault()}
       >
         <div
diff --git a/src/client/graphics/layers/TopBar.ts b/src/client/graphics/layers/TopBar.ts
index c6d58536a..9b8e21a71 100644
--- a/src/client/graphics/layers/TopBar.ts
+++ b/src/client/graphics/layers/TopBar.ts
@@ -54,7 +54,7 @@ export class TopBar extends LitElement implements Layer {
 
     return html`
       <div
-        class="fixed top-0 z-50 bg-slate-800/40 backdrop-blur-sm shadow-xs text-white text-sm p-1 rounded-ee-sm lg:rounded grid grid-cols-1 sm:grid-cols-2 w-1/2 sm:w-2/3 md:w-1/2 lg:hidden"
+        class="fixed top-0 safe-top z-50 bg-slate-800/40 backdrop-blur-sm shadow-xs text-white text-sm p-1 rounded-ee-sm lg:rounded grid grid-cols-1 sm:grid-cols-2 w-1/2 sm:w-2/3 md:w-1/2 lg:hidden"
       >
         <!-- Pop section (takes 2 columns on desktop) -->
         <div
diff --git a/src/client/index.html b/src/client/index.html
index f0ca4c1ee..95fcd5a36 100644
--- a/src/client/index.html
+++ b/src/client/index.html
@@ -2,7 +2,10 @@
 <html lang="en" class="h-full">
   <head>
     <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, viewport-fit=cover"
+    />
     <title>OpenFront (ALPHA)</title>
     <link rel="manifest" href="../../resources/manifest.json" />
 
@@ -97,7 +100,7 @@
   <body
     class="h-full select-none font-sans min-h-screen bg-opacity-0 bg-cover bg-center bg-fixed transition-opacity duration-300 ease-in-out flex flex-col"
   >
-    <header class="l-header">
+    <header class="l-header safe-pt">
       <div class="l-header__content">
         <svg
           xmlns="http://www.w3.org/2000/svg"
@@ -209,11 +212,11 @@
             secondary
           ></o-button>
           <!-- <o-button
-            id="chat-button"
-            title="Chat Test"
-            block
-            secondary
-          ></o-button> -->
+              id="chat-button"
+              title="Chat Test"
+              block
+              secondary
+            ></o-button> -->
         </div>
 
         <o-button
@@ -240,7 +243,7 @@
     <button
       id="settings-button"
       title="Settings"
-      class="fixed bottom-4 right-4 z-50 rounded-full p-2 shadow-lg transition-colors duration-300 flex items-center justify-center"
+      class="fixed bottom-4 right-4 z-50 rounded-full p-2 shadow-lg transition-colors duration-300 flex items-center justify-center safe-mb"
       style="width: 80px; height: 80px; background-color: #0075ff"
     >
       <img
@@ -287,7 +290,7 @@
     </div>
 
     <!-- Footer section -->
-    <footer class="l-footer">
+    <footer class="l-footer safe-pb">
       <div class="l-footer__content">
         <div class="l-footer__col">
           <a
diff --git a/src/client/styles.css b/src/client/styles.css
index c90750863..85d0e5faf 100644
--- a/src/client/styles.css
+++ b/src/client/styles.css
@@ -17,6 +17,22 @@
   box-sizing: border-box;
 }
 
+/* Add safe-area offsets for iOS native mobile device */
+@supports (-webkit-touch-callout: none) {
+  .safe-pt {
+    padding-top: env(safe-area-inset-top);
+  }
+  .safe-pb {
+    padding-bottom: env(safe-area-inset-bottom);
+  }
+  .safe-top {
+    top: env(safe-area-inset-top);
+  }
+  .safe-mb {
+    margin-bottom: env(safe-area-inset-bottom);
+  }
+}
+
 /* Add custom scrollbar styles */
 ::-webkit-scrollbar {
   width: 8px;
diff --git a/src/core/configuration/Config.ts b/src/core/configuration/Config.ts
index 8f4cca4c5..e77f96d0b 100644
--- a/src/core/configuration/Config.ts
+++ b/src/core/configuration/Config.ts
@@ -62,6 +62,7 @@ export interface ServerConfig {
   cloudflareApiToken(): string;
   cloudflareConfigPath(): string;
   cloudflareCredsPath(): string;
+  origin(): string;
 }
 
 export interface NukeMagnitude {
diff --git a/src/core/configuration/ConfigLoader.ts b/src/core/configuration/ConfigLoader.ts
index 184902694..a459020d2 100644
--- a/src/core/configuration/ConfigLoader.ts
+++ b/src/core/configuration/ConfigLoader.ts
@@ -29,7 +29,7 @@ export async function getServerConfigFromClient(): Promise<ServerConfig> {
   if (cachedSC) {
     return cachedSC;
   }
-  const response = await fetch("/api/env");
+  const response = await fetch(`${process.env.API_BASE_URL}/api/env`);
 
   if (!response.ok) {
     throw new Error(
diff --git a/src/core/configuration/DefaultConfig.ts b/src/core/configuration/DefaultConfig.ts
index eaa43d089..aeb4356f5 100644
--- a/src/core/configuration/DefaultConfig.ts
+++ b/src/core/configuration/DefaultConfig.ts
@@ -85,6 +85,18 @@ export abstract class DefaultServerConfig implements ServerConfig {
     return process.env.CF_CREDS_PATH ?? "";
   }
 
+  origin(): string {
+    const audience = this.jwtAudience();
+    const subdomain = this.subdomain();
+    if (audience === "localhost") {
+      return "http://localhost:9000";
+    }
+    if (subdomain === "") {
+      return `https://${audience}`;
+    }
+    return `https://${subdomain}.${audience}`;
+  }
+
   private publicKey: JWK;
   abstract jwtAudience(): string;
   jwtIssuer(): string {
diff --git a/src/server/Master.ts b/src/server/Master.ts
index 388aba19c..457178833 100644
--- a/src/server/Master.ts
+++ b/src/server/Master.ts
@@ -7,6 +7,7 @@ import { fileURLToPath } from "url";
 import { getServerConfigFromServer } from "../core/configuration/ConfigLoader";
 import { GameInfo } from "../core/Schemas";
 import { generateID } from "../core/Util";
+import { corsMiddleware } from "./cors";
 import { gatekeeper, LimiterType } from "./Gatekeeper";
 import { logger } from "./Logger";
 import { MapPlaylist } from "./MapPlaylist";
@@ -22,7 +23,8 @@ const log = logger.child({ comp: "m" });
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
-app.use(express.json());
+
+app.use(corsMiddleware);
 app.use(
   express.static(path.join(__dirname, "../../static"), {
     maxAge: "1y", // Set max-age to 1 year for all static assets
diff --git a/src/server/Worker.ts b/src/server/Worker.ts
index 427e369b0..360533efa 100644
--- a/src/server/Worker.ts
+++ b/src/server/Worker.ts
@@ -18,6 +18,7 @@ import {
 import { CreateGameInputSchema, GameInputSchema } from "../core/WorkerSchemas";
 import { archive, readGameRecord } from "./Archive";
 import { Client } from "./Client";
+import { corsMiddleware } from "./cors";
 import { GameManager } from "./GameManager";
 import { gatekeeper, LimiterType } from "./Gatekeeper";
 import { getUserMe, verifyClientToken } from "./jwt";
@@ -71,6 +72,7 @@ export function startWorker() {
     next();
   });
 
+  app.use(corsMiddleware);
   app.set("trust proxy", 3);
   app.use(express.json());
   app.use(express.static(path.join(__dirname, "../../out")));
diff --git a/src/server/cors.ts b/src/server/cors.ts
new file mode 100644
index 000000000..801c8b77b
--- /dev/null
+++ b/src/server/cors.ts
@@ -0,0 +1,38 @@
+import cors from "cors";
+import { getLocalIP } from "../../webpack.config";
+import { GameEnv } from "../core/configuration/Config";
+import { getServerConfigFromServer } from "../core/configuration/ConfigLoader";
+
+const config = getServerConfigFromServer();
+const origin = config.origin();
+
+const allowedOrigins = [
+  origin,
+  "capacitor://openfront.io",
+  "https://openfront.io",
+];
+
+if (config.env() === GameEnv.Dev) {
+  const localIp = getLocalIP();
+  if (localIp) {
+    allowedOrigins.push(`http://${localIp}:9000`);
+  }
+}
+
+const corsOptions = {
+  origin: (
+    origin: string | undefined,
+    callback: (err: Error | null, allow?: boolean) => void,
+  ) => {
+    // allow requests with no origin (like mobile apps or curl requests)
+    if (!origin) return callback(null, true);
+    if (allowedOrigins.indexOf(origin) !== -1) {
+      callback(null, true);
+    } else {
+      callback(new Error("Not allowed by CORS"));
+    }
+  },
+  credentials: true,
+};
+
+export const corsMiddleware = cors(corsOptions);
diff --git a/tests/util/TestServerConfig.ts b/tests/util/TestServerConfig.ts
index be5155d5a..b011430ec 100644
--- a/tests/util/TestServerConfig.ts
+++ b/tests/util/TestServerConfig.ts
@@ -4,6 +4,9 @@ import { GameMapType } from "../../src/core/game/Game";
 import { GameID } from "../../src/core/Schemas";
 
 export class TestServerConfig implements ServerConfig {
+  origin(): string {
+    return "unused";
+  }
   cloudflareConfigPath(): string {
     throw new Error("Method not implemented.");
   }
diff --git a/webpack.config.js b/webpack.config.js
index 78721528f..0f46022ca 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -2,10 +2,25 @@ import { execSync } from "child_process";
 import CopyPlugin from "copy-webpack-plugin";
 import ESLintPlugin from "eslint-webpack-plugin";
 import HtmlWebpackPlugin from "html-webpack-plugin";
+import os from "os";
 import path from "path";
 import { fileURLToPath } from "url";
 import webpack from "webpack";
 
+export function getLocalIP() {
+  const interfaces = os.networkInterfaces();
+  for (const interfaceName in interfaces) {
+    const networkInterface = interfaces[interfaceName];
+    if (!networkInterface) continue;
+    for (const address of networkInterface) {
+      if (address.family === "IPv4" && !address.internal) {
+        return address.address;
+      }
+    }
+  }
+  return "localhost";
+}
+
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 
@@ -15,6 +30,12 @@ const gitCommit =
 export default async (env, argv) => {
   const isProduction = argv.mode === "production";
 
+  const apiBaseUrl = process.env.CAPACITOR_BUILD
+    ? isProduction && process.env.CAPACITOR_PRODUCTION_HOSTNAME
+      ? `https://${process.env.CAPACITOR_PRODUCTION_HOSTNAME}`
+      : `http://${getLocalIP()}:9000`
+    : "";
+
   return {
     entry: "./src/client/Main.ts",
     output: {
@@ -126,6 +147,10 @@ export default async (env, argv) => {
         ),
         "process.env.GAME_ENV": JSON.stringify(isProduction ? "prod" : "dev"),
         "process.env.GIT_COMMIT": JSON.stringify(gitCommit),
+        "process.env.API_BASE_URL": JSON.stringify(apiBaseUrl),
+        "process.env.CAPACITOR_PRODUCTION_HOSTNAME": JSON.stringify(
+          process.env.CAPACITOR_PRODUCTION_HOSTNAME,
+        ),
       }),
       new CopyPlugin({
         patterns: [
@@ -134,6 +159,14 @@ export default async (env, argv) => {
             to: path.resolve(__dirname, "static"),
             noErrorOnMissing: true,
           },
+          {
+            from: path.resolve(
+              __dirname,
+              "node_modules/@capacitor/android/capacitor.js",
+            ),
+            to: path.resolve(__dirname, "static/capacitor.js"),
+            noErrorOnMissing: true,
+          },
         ],
         options: { concurrency: 100 },
       }),