Add electron deployment (#312)

electron/main.cjs

@@ -0,0 +1,70 @@
+const { app, BrowserWindow } = require("electron");
+const path = require("path");
+
+// Keep a global reference of the window object
+let mainWindow = null;
+
+const GAME_SERVER_URL = "http://openfront.io";
+
+function createWindow() {
+  // Create the browser window
+  mainWindow = new BrowserWindow({
+    width: 1280,
+    height: 720,
+    show: false, // Don't show until ready
+    webPreferences: {
+      nodeIntegration: false,
+      contextIsolation: true,
+    },
+  });
+
+  // Maximize the window
+  mainWindow.maximize();
+  mainWindow.show();
+  // Automatically open DevTools when the window is created
+  // mainWindow.webContents.openDevTools();
+
+  mainWindow.webContents.session.webRequest.onBeforeSendHeaders(
+    (details, callback) => {
+      const { requestHeaders } = details;
+      requestHeaders["X-Electron-App"] = "true";
+      callback({ requestHeaders });
+    },
+  );
+
+  // Load directly from your server
+  mainWindow.loadURL(GAME_SERVER_URL);
+
+  // Add keyboard shortcut to toggle fullscreen (F11 or F)
+  mainWindow.webContents.on("before-input-event", (event, input) => {
+    if (input.key === "F11" || (input.key === "f" && input.control)) {
+      mainWindow.setFullScreen(!mainWindow.isFullScreen());
+      event.preventDefault();
+    } else if (input.key === "Escape" && mainWindow.isFullScreen()) {
+      mainWindow.setFullScreen(false);
+      event.preventDefault();
+    }
+  });
+
+  // Handle window being closed
+  mainWindow.on("closed", () => {
+    mainWindow = null;
+  });
+  mainWindow.webContents.session.setCacheSize(1024 * 1024 * 100); // 100MB cache
+}
+
+// Create window when Electron has finished initialization
+app.whenReady().then(createWindow);
+
+// Quit when all windows are closed
+app.on("window-all-closed", () => {
+  if (process.platform !== "darwin") {
+    app.quit();
+  }
+});
+
+app.on("activate", () => {
+  if (mainWindow === null) {
+    createWindow();
+  }
+});

package.json

@@ -13,7 +13,8 @@
     "format": "prettier --ignore-unknown --write .",
     "lint": "eslint",
     "lint:fix": "eslint --fix",
-    "prepare": "husky"
+    "prepare": "husky",
+    "electron:start": "electron ./electron/main.cjs"
   },
   "lint-staged": {
     "**/*": [
@@ -29,7 +30,6 @@
     "@types/d3": "^7.4.3",
     "@types/jest": "^29.5.12",
     "@types/jquery": "^3.5.31",
-    "@types/mocha": "^10.0.7",
     "@types/node": "^22.10.2",
     "@types/pg": "^8.11.11",
     "@types/sinon": "^17.0.3",
@@ -44,6 +44,8 @@
     "concurrently": "^8.2.2",
     "cross-env": "^7.0.3",
     "css-loader": "^7.1.2",
+    "electron": "^29.4.6",
+    "electron-builder": "^24.13.3",
     "eslint": "^9.21.0",
     "eslint-config-prettier": "^10.1.1",
     "file-loader": "^6.2.0",
@@ -53,7 +55,6 @@
     "husky": "^9.1.7",
     "jest": "^29.7.0",
     "lint-staged": "^15.4.3",
-    "mocha": "^10.7.0",
     "mrmime": "^2.0.0",
     "postcss": "^8.5.1",
     "postcss-loader": "^8.1.1",
@@ -65,7 +66,6 @@
     "tailwindcss": "^3.4.17",
     "ts-jest": "^29.2.4",
     "ts-loader": "^9.5.2",
-    "ts-mocha": "^10.0.0",
     "ts-node": "^10.9.2",
     "tsconfig-paths": "^4.2.0",
     "tsx": "^4.17.0",

src/client/GoogleAdElement.ts

@@ -21,7 +21,6 @@ export class GoogleAdElement extends LitElement {
   @property({ type: String }) adFormat = "auto";
   @property({ type: Boolean }) fullWidthResponsive = true;
   @property({ type: String }) adTest = "off"; // "on" for testing, remove or set to "off" for production
-  @property({ type: String }) backgroundColor = "rgba(255, 255, 255, 0.1)";
   @property({ type: String }) darkBackgroundColor = "rgba(0, 0, 0, 0.2)";
 
   // Disable shadow DOM so AdSense can access the elements
@@ -50,13 +49,11 @@ export class GoogleAdElement extends LitElement {
   `;
 
   render() {
-    // Apply background color dynamically
-    const containerStyle = `
-      background-color: ${this.backgroundColor};
-    `;
-
+    if (isElectron()) {
+      return html``;
+    }
     return html`
-      <div class="google-ad-container" style="${containerStyle}">
+      <div class="google-ad-container">
         <ins
           class="adsbygoogle"
           style="display:block"
@@ -85,4 +82,38 @@ export class GoogleAdElement extends LitElement {
     }, 100);
   }
 }
+
+// Check if running in Electron
+const isElectron = () => {
+  // Renderer process
+  if (
+    typeof window !== "undefined" &&
+    typeof window.process === "object" &&
+    // @ts-ignore
+    window.process.type === "renderer"
+  ) {
+    return true;
+  }
+
+  // Main process
+  if (
+    typeof process !== "undefined" &&
+    typeof process.versions === "object" &&
+    !!process.versions.electron
+  ) {
+    return true;
+  }
+
+  // Detect the user agent when the `nodeIntegration` option is set to false
+  if (
+    typeof navigator === "object" &&
+    typeof navigator.userAgent === "string" &&
+    navigator.userAgent.indexOf("Electron") >= 0
+  ) {
+    return true;
+  }
+
+  return false;
+};
+
 export default GoogleAdElement;