diff --git a/optimized-controls.html b/optimized-controls.html index 113037d..47f8bf5 100644 --- a/optimized-controls.html +++ b/optimized-controls.html @@ -358,6 +358,138 @@ color: #ccc; font-size: 12px; } + + /* Player list */ + #player-list-container { + position: absolute; + display: none; + flex-direction: column; + gap: 4px; + opacity: 0; + z-index: 10; + } + + #player-list-container.player-list-position-left { + right: 55%; + top: 50%; + transform: translateY(-50%); + align-items: flex-end; + } + + #player-list-container.player-list-position-right { + left: 55%; + top: 50%; + transform: translateY(-50%); + align-items: flex-start; + } + + .player-slot { + display: flex; + gap: 8px; + align-items: baseline; + white-space: nowrap; + } + + .player-slot-number { + color: rgba(255,255,255,0.5); + font-size: 24px; + font-weight: bold; + min-width: 2em; + text-align: right; + text-shadow: 2px 2px 6px rgba(0,0,0,0.7); + } + + .player-slot-name { + font-size: 24px; + font-weight: bold; + text-shadow: 2px 2px 6px rgba(0,0,0,0.7); + } + + .player-slot-name.empty { + color: rgba(255,255,255,0.25); + font-style: italic; + } + + .player-slot-name.filled { + color: #ffffff; + } + + /* Debug dashboard */ + #manager-dashboard .dashboard-grid { + display: grid; + grid-template-columns: auto 1fr; + gap: 2px 8px; + font-size: 11px; + color: #ccc; + } + + #manager-dashboard .dashboard-grid .label { + color: #999; + text-align: right; + } + + #manager-state { + display: inline-block; + padding: 2px 8px; + border-radius: 3px; + font-size: 11px; + font-weight: bold; + color: white; + background-color: #888; + } + + .component-table { + width: 100%; + border-collapse: collapse; + font-size: 11px; + margin-top: 4px; + } + + .component-table th, + .component-table td { + padding: 2px 4px; + text-align: left; + color: #ccc; + border-bottom: 1px solid #444; + } + + .component-table th { + color: #999; + font-weight: normal; + } + + .component-table select { + font-size: 10px; + background: #333; + color: #ccc; + border: 1px solid #555; + border-radius: 3px; + padding: 1px 2px; + } + + #manager-event-log { + max-height: 100px; + overflow-y: auto; + font-size: 10px; + font-family: monospace; + background: rgba(0,0,0,0.3); + padding: 4px; + border-radius: 3px; + margin-top: 4px; + } + + .event-log-entry { + color: #aaa; + line-height: 1.4; + } + + .event-time { + color: #666; + } + + .event-type { + color: #4fc3f7; + } @@ -373,6 +505,8 @@ Your browser does not support the audio element. +
+
@@ -571,6 +705,43 @@
+ +
+
+ Player List Settings + +
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+
@@ -614,6 +785,51 @@
+ +
+
+ Overlay Manager + +
+
+
+ State: + IDLE + Room: + — + Session: + — + Game: + — + Players: + 0/? +
+ + + + + + + + + + + + + + + + + + + + + +
ComponentStatusOverride
Room CodeInactive
AudioInactive
Player ListInactive
+
+
+
+
@@ -631,717 +847,113 @@ - + ); + manager.registerComponent('playerList', playerList); + + const statusHandler = initConnectionStatusHandler(); + const wsClient = new WebSocketClient({ + onStatusChange: statusHandler, + onEvent: (type, data) => manager.handleEvent(type, data), + onSessionSubscribed: (sessionId) => { + console.log('[Overlay] Subscribed to session:', sessionId); + }, + }); + + 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'); + if (savedUrl && apiUrlInput) apiUrlInput.value = savedUrl; + if (savedKey && apiKeyInput) apiKeyInput.value = savedKey; + + if (savedUrl && savedKey) { + setTimeout(() => wsClient.connect(savedUrl, savedKey), 500); + } + + window.__overlay = { manager, wsClient, roomCodeDisplay, audioController, playerList }; +