From fa7363bc78d1f34b4ef9e30b283d58c250ec51b4 Mon Sep 17 00:00:00 2001
From: cottongin <cottongin@users.noreply.github.com>
Date: Fri, 20 Mar 2026 22:20:12 -0400
Subject: [PATCH] fix: convert ES modules to classic scripts for file://
 compatibility

Browsers block ES module imports over the file:// protocol due to CORS.
Users opening the overlay by double-clicking the HTML file saw all JS
fail to load. Replace import/export with a window.OBS global namespace
and classic <script> tags so the overlay works without a local server.

Made-with: Cursor
---
 js/audio-controller.js  |  5 ++++-
 js/controls.js          | 12 ++++++-----
 js/player-list.js       |  5 ++++-
 js/room-code-display.js |  5 ++++-
 js/state-manager.js     |  8 +++++--
 js/websocket-client.js  |  5 ++++-
 optimized-controls.html | 47 ++++++++++++++++++++++-------------------
 7 files changed, 54 insertions(+), 33 deletions(-)

diff --git a/js/audio-controller.js b/js/audio-controller.js
index dff4da8..27a40a3 100644
--- a/js/audio-controller.js
+++ b/js/audio-controller.js
@@ -10,7 +10,7 @@
  * @property {HTMLInputElement} soundUrl
  */
 
-export class AudioController {
+class AudioController {
   /** @type {HTMLAudioElement | null} */
   #audio = null;
 
@@ -137,3 +137,6 @@ export class AudioController {
     }, intervalMs);
   }
 }
+
+window.OBS = window.OBS || {};
+window.OBS.AudioController = AudioController;
diff --git a/js/controls.js b/js/controls.js
index 294eafe..69d0d1b 100644
--- a/js/controls.js
+++ b/js/controls.js
@@ -2,8 +2,6 @@
  * Debug dashboard, manual overrides, and bindings for the controls panel.
  */
 
-import { OVERRIDE_MODES } from './state-manager.js';
-
 const STATE_COLORS = Object.freeze({
   idle: '#888',
   lobby: '#4CAF50',
@@ -20,7 +18,7 @@ const STORAGE_API_KEY = 'jackbox-api-key';
  * @param {import('./websocket-client.js').WebSocketClient} wsClient
  * @param {{ roomCode?: unknown, audio?: unknown, playerList?: unknown }} components
  */
-export function initControls(manager, wsClient, components) {
+function initControls(manager, wsClient, components) {
   const stateEl = document.getElementById('manager-state');
   const roomCodeEl = document.getElementById('manager-room-code');
   const sessionIdEl = document.getElementById('manager-session-id');
@@ -34,7 +32,7 @@ export function initControls(manager, wsClient, components) {
     const select = document.getElementById(`override-${name}`);
     if (!select) continue;
     if (select.options.length === 0) {
-      for (const mode of Object.values(OVERRIDE_MODES)) {
+      for (const mode of Object.values(window.OBS.OVERRIDE_MODES)) {
         const opt = document.createElement('option');
         opt.value = mode;
         opt.textContent = mode.replace(/_/g, ' ');
@@ -335,7 +333,7 @@ export function initControls(manager, wsClient, components) {
 /**
  * @returns {(state: string, message?: string) => void}
  */
-export function initConnectionStatusHandler() {
+function initConnectionStatusHandler() {
   const wsStatusDot = document.getElementById('ws-status-dot');
   const wsStatusText = document.getElementById('ws-status-text');
   const wsConnectBtn = document.getElementById('ws-connect-btn');
@@ -360,3 +358,7 @@ export function initConnectionStatusHandler() {
     }
   };
 }
+
+window.OBS = window.OBS || {};
+window.OBS.initControls = initControls;
+window.OBS.initConnectionStatusHandler = initConnectionStatusHandler;
diff --git a/js/player-list.js b/js/player-list.js
index ae3ef84..50985a0 100644
--- a/js/player-list.js
+++ b/js/player-list.js
@@ -39,7 +39,7 @@ function displayName(p) {
   return String(p).trim();
 }
 
-export class PlayerList {
+class PlayerList {
   constructor() {
     this._active = false;
     /** @type {HTMLElement | null} */
@@ -315,3 +315,6 @@ export class PlayerList {
     this._animationTimers = [];
   }
 }
+
+window.OBS = window.OBS || {};
+window.OBS.PlayerList = PlayerList;
diff --git a/js/room-code-display.js b/js/room-code-display.js
index 914bc4e..3153a7f 100644
--- a/js/room-code-display.js
+++ b/js/room-code-display.js
@@ -43,7 +43,7 @@
  * @property {HTMLInputElement} line2HideDuration
  */
 
-export class RoomCodeDisplay {
+class RoomCodeDisplay {
   /** @type {RoomCodeDisplayElements | null} */
   #elements = null;
 
@@ -381,3 +381,6 @@ export class RoomCodeDisplay {
     }
   }
 }
+
+window.OBS = window.OBS || {};
+window.OBS.RoomCodeDisplay = RoomCodeDisplay;
diff --git a/js/state-manager.js b/js/state-manager.js
index 35248cc..4244142 100644
--- a/js/state-manager.js
+++ b/js/state-manager.js
@@ -2,7 +2,7 @@
  * Central overlay state machine: coordinates room/game lifecycle and registered UI components.
  */
 
-export const OVERRIDE_MODES = Object.freeze({
+const OVERRIDE_MODES = Object.freeze({
   AUTO: 'auto',
   FORCE_SHOW: 'force_show',
   FORCE_HIDE: 'force_hide',
@@ -34,7 +34,7 @@ function shallowClone(obj) {
  * @property {() => object} getStatus
  */
 
-export class OverlayManager {
+class OverlayManager {
   /** @type {OverlayState} */
   #state = 'idle';
 
@@ -414,3 +414,7 @@ export class OverlayManager {
     }
   }
 }
+
+window.OBS = window.OBS || {};
+window.OBS.OVERRIDE_MODES = OVERRIDE_MODES;
+window.OBS.OverlayManager = OverlayManager;
diff --git a/js/websocket-client.js b/js/websocket-client.js
index c9e2175..a409c1b 100644
--- a/js/websocket-client.js
+++ b/js/websocket-client.js
@@ -10,7 +10,7 @@ const INITIAL_RECONNECT_DELAY_MS = 1_000;
  * @typedef {'connecting'|'connected'|'disconnected'|'error'} WsConnectionState
  */
 
-export class WebSocketClient {
+class WebSocketClient {
   constructor(options = {}) {
     const {
       onStatusChange = () => {},
@@ -466,3 +466,6 @@ export class WebSocketClient {
     }, delay);
   }
 }
+
+window.OBS = window.OBS || {};
+window.OBS.WebSocketClient = WebSocketClient;
diff --git a/optimized-controls.html b/optimized-controls.html
index eefa2e5..38e8468 100644
--- a/optimized-controls.html
+++ b/optimized-controls.html
@@ -806,17 +806,19 @@
     <button id="toggle-display-btn">Hide Display</button>
     <button id="show-controls-btn">Show Controls</button>
     
-    <script type="module">
-    import { OverlayManager } from './js/state-manager.js';
-    import { WebSocketClient } from './js/websocket-client.js';
-    import { RoomCodeDisplay } from './js/room-code-display.js';
-    import { AudioController } from './js/audio-controller.js';
-    import { PlayerList } from './js/player-list.js';
-    import { initControls, initConnectionStatusHandler } from './js/controls.js';
+    <script src="js/state-manager.js"></script>
+    <script src="js/websocket-client.js"></script>
+    <script src="js/room-code-display.js"></script>
+    <script src="js/audio-controller.js"></script>
+    <script src="js/player-list.js"></script>
+    <script src="js/controls.js"></script>
+    <script>
+    (function () {
+    var O = window.OBS;
 
-    const manager = new OverlayManager();
+    var manager = new O.OverlayManager();
 
-    const roomCodeDisplay = new RoomCodeDisplay();
+    var roomCodeDisplay = new O.RoomCodeDisplay();
     roomCodeDisplay.init(
         {
             header: document.getElementById('header'),
@@ -857,7 +859,7 @@
     );
     manager.registerComponent('roomCode', roomCodeDisplay);
 
-    const audioController = new AudioController();
+    var audioController = new O.AudioController();
     audioController.init(
         document.getElementById('theme-sound'),
         {
@@ -868,7 +870,7 @@
     );
     manager.registerComponent('audio', audioController);
 
-    const playerList = new PlayerList();
+    var playerList = new O.PlayerList();
     playerList.init(
         document.getElementById('player-list-container'),
         {
@@ -887,33 +889,34 @@
     );
     manager.registerComponent('playerList', playerList);
 
-    const statusHandler = initConnectionStatusHandler();
-    const wsClient = new WebSocketClient({
+    var statusHandler = O.initConnectionStatusHandler();
+    var wsClient = new O.WebSocketClient({
         onStatusChange: statusHandler,
-        onEvent: (type, data) => manager.handleEvent(type, data),
-        onSessionSubscribed: (sessionId) => {
+        onEvent: function (type, data) { manager.handleEvent(type, data); },
+        onSessionSubscribed: function (sessionId) {
             console.log('[Overlay] Subscribed to session:', sessionId);
         },
     });
 
-    initControls(manager, wsClient, {
+    O.initControls(manager, wsClient, {
         roomCode: roomCodeDisplay,
         audio: audioController,
         playerList: playerList,
     });
 
-    const savedUrl = localStorage.getItem('jackbox-api-url');
-    const savedKey = localStorage.getItem('jackbox-api-key');
-    const apiUrlInput = document.getElementById('api-url-input');
-    const apiKeyInput = document.getElementById('api-key-input');
+    var savedUrl = localStorage.getItem('jackbox-api-url');
+    var savedKey = localStorage.getItem('jackbox-api-key');
+    var apiUrlInput = document.getElementById('api-url-input');
+    var apiKeyInput = document.getElementById('api-key-input');
     if (savedUrl && apiUrlInput) apiUrlInput.value = savedUrl;
     if (savedKey && apiKeyInput) apiKeyInput.value = savedKey;
 
     if (savedUrl && savedKey) {
-        setTimeout(() => wsClient.connect(savedUrl, savedKey), 500);
+        setTimeout(function () { wsClient.connect(savedUrl, savedKey); }, 500);
     }
 
-    window.__overlay = { manager, wsClient, roomCodeDisplay, audioController, playerList };
+    window.__overlay = { manager: manager, wsClient: wsClient, roomCodeDisplay: roomCodeDisplay, audioController: audioController, playerList: playerList };
+    })();
 </script>
 </body>
 </html>