[FEAT] Add Dynamic HTTPS Config

client/.env.example

@@ -10,6 +10,8 @@ VITE_PUBLIC_MASTER_ADDRESS=YOUR_MASTER_ADDRESS
 VITE_PUBLIC_MASTER_PRIVATE_KEY=YOUR_MASTER_PRIVATE_KEY
 VITE_PUBLIC_SLOT_ADDRESS=YOUR_KATANA_ADDRESS
 
+VITE_PUBLIC_LOCAL_HTTPS=HTTPS_FLAG
+
 # PostHog Config
 VITE_POSTHOG_API_KEY="YOUR__POSTHOG_KEY"
 VITE_POSTHOG_HOST="YOUR_HOST"

client/.gitignore

@@ -22,6 +22,8 @@ mkcert+1.pem
 mkcert+1-key.pem
 localhost*.pem
 localhost*-key.pem
+dev-key.pem
+dev.pem
 
 # Editor directories and files
 .vscode/*

client/dev-dist/sw.js

@@ -82,7 +82,7 @@ define(['./workbox-86c9b217'], (function (workbox) { 'use strict';
     "revision": "3ca0b8505b4bec776b69afdba2768812"
   }, {
     "url": "index.html",
-    "revision": "0.cqa50r5rbt"
+    "revision": "0.73g75renlu8"
   }], {});
   workbox.cleanupOutdatedCaches();
   workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("index.html"), {

client/package.json

@@ -10,7 +10,11 @@
     "preview": "vite preview",
     "serve": "vite preview",
     "format:check": "prettier --check .",
-    "format": "prettier --write ."
+    "format": "prettier --write .",
+    "dev:https": "VITE_LOCAL_HTTPS=true vite",
+    "dev:http": "VITE_LOCAL_HTTPS=false vite",
+    "preview:https": "VITE_LOCAL_HTTPS=true vite preview",
+    "mkcert": "mkcert -key-file mkcert+1-key.pem -cert-file mkcert+1.pem localhost 127.0.0.1 ::1"
   },
   "dependencies": {
     "@cartridge/connector": "0.5.9",

client/vite.config.ts

@@ -1,93 +1,115 @@
-import react from "@vitejs/plugin-react";
 import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
 import topLevelAwait from "vite-plugin-top-level-await";
 import wasm from "vite-plugin-wasm";
 import { VitePWA } from "vite-plugin-pwa";
 import fs from "fs";
+import path from "path";
 
-export default defineConfig(({ mode }) => ({
-   server: {
-    port: 3001,
-           https: {
-            key: fs.readFileSync("mkcert+1-key.pem"), // Path to private key file
-            cert: fs.readFileSync("mkcert+1.pem"),   // Path to certificate file
-        },
-   },
-  plugins: [
-    react(),
-    wasm(),
-    topLevelAwait(),
-    VitePWA({
-      registerType: "autoUpdate",
-      devOptions: {
-        enabled: mode === 'development'
-      },
-      workbox: {
-        maximumFileSizeToCacheInBytes: 5 * 1024 * 1024, // 5 MB
-      },
-      includeAssets: [
-        "icons/logo.png",
-        "screenshots/loading.png",
-        "screenshots/home.png",
-        "screenshots/store.png",
-        "screenshots/leaderboard.png"
-      ],
-      manifest: {
-        name: "Golem Runner",
-        short_name: "Golem",
-        description:
-          "A captivating endless runner where elemental golems dash through magical realms. This game combines fun gameplay with powerful blockchain technology!",
-        start_url: "/",
-        display: "standalone",
-        lang: "en-US",
-        theme_color: "#000000",
-        background_color: "#000000",
-        orientation: "any",
-        icons: [
-          {
-            src: "/icons/logo.png",
-            sizes: "192x192",
-            type: "image/png",
-            purpose: "any maskable"
-          },
-          {
-            src: "/icons/logo.png",
-            sizes: "192x192",
-            type: "image/png",
-            purpose: "any"
-          }
-        ],
-        screenshots: [
-          {
-            src: "/screenshots/loading.png",
-            sizes: "822x1664",
-            type: "image/png",
-          },
-          {
-            src: "/screenshots/home.png",
-            sizes: "822x1664",
-            type: "image/png",
-          },
-          {
-            src: "/screenshots/store.png",
-            sizes: "822x1664",
-            type: "image/png",
+export default defineConfig(({ command }) => {
+  const isDev = command === 'serve';
+  const isLocalHttps = process.env.VITE_LOCAL_HTTPS === 'true';
+
+  // Conditionally load HTTPS certs in development
+  const getHttpsConfig = () => {
+    if (!isDev || !isLocalHttps) return {};
+
+    const keyPath = path.resolve('./mkcert+1-key.pem');
+    const certPath = path.resolve('./mkcert+1.pem');
+
+    try {
+      if (fs.existsSync(keyPath) && fs.existsSync(certPath)) {
+        return {
+          https: {
+            key: fs.readFileSync(keyPath),
+            cert: fs.readFileSync(certPath),
           },
-          {
-            src: "/screenshots/leaderboard.png",
-            sizes: "822x1664",
-            type: "image/png",
-          }
-        ],
-        shortcuts: [
-          {
-            name: "Play Now",
-            short_name: "Play",
-            description: "Start a new run with your golem.",
-            url: "/play"
-          }
-        ],
+        };
       }
-    })
-  ],
-}));
+    } catch (err) {
+      console.warn('⚠️ Error reading HTTPS certificates. Falling back to HTTP.');
+    }
+
+    return {};
+  };
+
+  return {
+    server: {
+      port: 3001,
+      ...getHttpsConfig(),
+      ...(isDev && {
+        host: true,
+        cors: true,
+      }),
+    },
+
+    define: {
+      global: 'globalThis',
+    },
+
+    optimizeDeps: {
+      include: ['buffer'],
+    },
+
+    plugins: [
+      react(),
+      wasm(),
+      topLevelAwait(),
+      VitePWA({
+        registerType: "autoUpdate",
+        devOptions: {
+          enabled: isDev,
+        },
+        workbox: {
+          maximumFileSizeToCacheInBytes: 5 * 1024 * 1024,
+        },
+        includeAssets: [
+          "icons/logo.png",
+          "screenshots/loading.png",
+          "screenshots/home.png",
+          "screenshots/store.png",
+          "screenshots/leaderboard.png",
+        ],
+        manifest: {
+          name: "Golem Runner",
+          short_name: "Golem",
+          description: "A captivating endless runner where elemental golems dash through magical realms. This game combines fun gameplay with powerful blockchain technology!",
+          start_url: "/",
+          display: "standalone",
+          lang: "en-US",
+          theme_color: "#000000",
+          background_color: "#000000",
+          orientation: "any",
+          icons: [
+            {
+              src: "/icons/logo.png",
+              sizes: "192x192",
+              type: "image/png",
+              purpose: "any maskable",
+            },
+            {
+              src: "/icons/logo.png",
+              sizes: "192x192",
+              type: "image/png",
+              purpose: "any",
+            },
+          ],
+          screenshots: [
+            { src: "/screenshots/loading.png", sizes: "822x1664", type: "image/png" },
+            { src: "/screenshots/home.png",   sizes: "822x1664", type: "image/png" },
+            { src: "/screenshots/store.png",  sizes: "822x1664", type: "image/png" },
+            { src: "/screenshots/leaderboard.png", sizes: "822x1664", type: "image/png" },
+          ],
+          shortcuts: [
+            {
+              name: "Play Now",
+              short_name: "Play",
+              description: "Start a new run with your golem.",
+              url: "/play",
+            },
+          ],
+        },
+      }),
+    ],
+  };
+});