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

@@ -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;

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;

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;

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;

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;

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;