// Get gameId and playerId from meta tags generated by the server const gameIdMeta = document.querySelector('meta[name="gameId"]'); const playerIdMeta = document.querySelector('meta[name="playerId"]'); if (!gameIdMeta || !playerIdMeta) { console.error('Game ID or Player ID meta tags not found.'); } const gameId = gameIdMeta.content; const playerId = playerIdMeta.content; // Dynamically construct WebSocket URL const wsUrl = `ws://${window.location.host}/ws?gameId=${gameId}&playerId=${playerId}`; // Get the game container element const gameContainer = document.getElementById('game-container'); // Set the ws-connect attribute gameContainer.setAttribute('ws-connect', wsUrl); // Tell HTMX to connect the WebSocket htmx.trigger(gameContainer, ' and connect'); // Update the WebSocket status indicator const wsStatusDiv = document.getElementById('ws-status'); gameContainer.addEventListener('htmx:wsConnecting', function () { if (wsStatusDiv) wsStatusDiv.textContent = 'Connecting...'; }); gameContainer.addEventListener('htmx:wsOpen', function () { if (wsStatusDiv) wsStatusDiv.textContent = 'Connected'; }); gameContainer.addEventListener('htmx:wsClose', function () { if (wsStatusDiv) wsStatusDiv.textContent = 'Disconnected'; }); gameContainer.addEventListener('htmx:wsError', function () { if (wsStatusDiv) wsStatusDiv.textContent = 'Connection Error'; });