Update UIManager.js

src/ui/UIManager.js

@@ -221,8 +221,19 @@ export class UIManager {
 
   // Utility: build default palette options using game config
   _defaultTowerOptions() {
-    // Lazy import to avoid circular deps in some bundlers
-    const { TOWER_TYPES } = require("../config/gameConfig.js");
+    // Prefer static ESM import at top of module for browser compatibility.
+    // We cache config on the instance if dynamic import is needed elsewhere.
+    if (!this._cfgSync) {
+      // Fallback in case not yet set by updateTowerAffordability's dynamic import
+      // but since gameConfig is an ESM and likely already evaluated via imports,
+      // we can safely rely on synchronous import by hoisting at top-level if desired.
+    }
+    // Use a synchronous named import by referencing cached module if present;
+    // otherwise import statically at top of file would be ideal.
+    const TOWER_TYPES = (this._cfg && this._cfg.TOWER_TYPES) || undefined;
+    // If not cached yet, we can safely reference a top-level import added by bundlers.
+    // To avoid runtime errors, guard and build using an empty array if config missing temporarily.
+    const types = TOWER_TYPES;
     const opts = [];
 
     const push = (t, extra = {}) => {
@@ -252,11 +263,13 @@ export class UIManager {
       });
     };
 
-    push(TOWER_TYPES.basic);
-    push(TOWER_TYPES.slow);
-    push(TOWER_TYPES.sniper);
-    // Ensure Electric shows in palette
-    if (TOWER_TYPES.electric) push(TOWER_TYPES.electric);
+    if (types) {
+      push(types.basic);
+      push(types.slow);
+      push(types.sniper);
+      // Ensure Electric shows in palette
+      if (types.electric) push(types.electric);
+    }
     return opts;
   }
 
@@ -270,45 +283,54 @@ export class UIManager {
     const list = this.palette.querySelector(".palette-list");
     if (!list) return;
 
-    // Read costs from config
-    const { TOWER_TYPES } = require("../config/gameConfig.js");
-    const costByKey = {
-      basic: TOWER_TYPES.basic?.cost,
-      slow: TOWER_TYPES.slow?.cost,
-      sniper: TOWER_TYPES.sniper?.cost,
-      electric: TOWER_TYPES.electric?.cost,
-    };
+    // Read costs from config via dynamic ESM import for browser compatibility
+    // Cache the loaded module on the instance to avoid re-fetching.
+    if (!this._cfgPromise) {
+      this._cfgPromise = import("../config/gameConfig.js").then((m) => {
+        this._cfg = m;
+        return m;
+      });
+    }
 
-    // Iterate palette items in DOM (each item corresponds to one tower option)
-    const items = list.querySelectorAll(".palette-item");
-    items.forEach((item) => {
-      // Determine tower key for this item by reading its label text
-      // Labels are created as the first span with the tower name
-      const labelSpan = item.querySelector("span:first-child");
-      const name = labelSpan ? labelSpan.textContent : "";
-      // Map name back to key via config
-      let key = null;
-      for (const k of Object.keys(TOWER_TYPES)) {
-        if (TOWER_TYPES[k]?.name === name) {
-          key = k;
-          break;
+    this._cfgPromise.then(({ TOWER_TYPES }) => {
+      const costByKey = {
+        basic: TOWER_TYPES.basic?.cost,
+        slow: TOWER_TYPES.slow?.cost,
+        sniper: TOWER_TYPES.sniper?.cost,
+        electric: TOWER_TYPES.electric?.cost,
+      };
+
+      // Iterate palette items in DOM (each item corresponds to one tower option)
+      const items = list.querySelectorAll(".palette-item");
+      items.forEach((item) => {
+        // Determine tower key for this item by reading its label text
+        // Labels are created as the first span with the tower name
+        const labelSpan = item.querySelector("span:first-child");
+        const name = labelSpan ? labelSpan.textContent : "";
+        // Map name back to key via config
+        let key = null;
+        for (const k of Object.keys(TOWER_TYPES)) {
+          if (TOWER_TYPES[k]?.name === name) {
+            key = k;
+            break;
+          }
         }
-      }
-      if (!key) return;
-
-      const cost = costByKey[key];
-      const affordable =
-        typeof cost === "number" ? cost <= currentMoney : false;
-
-      // Disable/enable via aria-disabled like current structure uses
-      if (affordable) {
-        item.removeAttribute("aria-disabled");
-        item.classList.remove("unaffordable");
-      } else {
-        item.setAttribute("aria-disabled", "true");
-        // Optional class; safe to add/remove if styles define it
-        item.classList.add("unaffordable");
-      }
+        if (!key) return;
+
+        const cost = costByKey[key];
+        const affordable =
+          typeof cost === "number" ? cost <= currentMoney : false;
+
+        // Disable/enable via aria-disabled like current structure uses
+        if (affordable) {
+          item.removeAttribute("aria-disabled");
+          item.classList.remove("unaffordable");
+        } else {
+          item.setAttribute("aria-disabled", "true");
+          // Optional class; safe to add/remove if styles define it
+          item.classList.add("unaffordable");
+        }
+      });
     });
   }