diff --git a/multiplayer_crosswords/webui/index.html b/multiplayer_crosswords/webui/index.html index df004c2..8e1c361 100644 --- a/multiplayer_crosswords/webui/index.html +++ b/multiplayer_crosswords/webui/index.html @@ -50,6 +50,7 @@ let currentSessionId = null; let clueArea = null; let gridElement = null; + let isClosingGame = false; // Flag to prevent popstate from reloading session // Test notifications notificationManager.success('App loaded successfully'); @@ -64,7 +65,7 @@ function updateUrlWithSessionId(sessionId) { const params = new URLSearchParams(window.location.search); params.set('session_id', sessionId); - window.history.replaceState({}, '', `${window.location.pathname}?${params.toString()}`); + window.history.pushState({ sessionId }, '', `${window.location.pathname}?${params.toString()}`); } // Helper function to subscribe to a session @@ -72,6 +73,12 @@ console.log('Subscribing to session:', sessionId); currentSessionId = sessionId; + // Show game UI immediately + menu.style.display = 'none'; + gridContainer.style.display = 'block'; + keyboard.style.display = 'block'; + gridContainer.innerHTML = '
Loading session...
'; + const message = { type: 'subscribe_session', session_id: sessionId @@ -408,54 +415,8 @@ function closeGame() { console.log('Closing game'); - // Clear session ID from URL - window.history.replaceState({}, '', window.location.pathname); - - // Reset state - currentSessionId = null; - - // Destroy clue area - check multiple ways it could be in the DOM - if (clueArea) { - if (clueArea.parentNode) { - clueArea.parentNode.removeChild(clueArea); - } - clueArea = null; - } - - // Also remove any clue-area elements that might exist - const allClueAreas = document.querySelectorAll('clue-area'); - allClueAreas.forEach(elem => { - if (elem.parentNode) { - elem.parentNode.removeChild(elem); - } - }); - - // Destroy grid element - if (gridElement) { - gridElement = null; - } - - // Hide grid, show menu - menu.style.display = 'block'; - gridContainer.style.display = 'none'; - keyboard.style.display = 'none'; - gridContainer.innerHTML = ''; - - // Close and reopen WebSocket to interrupt connection - wsManager.close(); - - // Reconnect WebSocket after a short delay - setTimeout(() => { - const wsUrl = menu._getWebsocketUrl ? menu._getWebsocketUrl() : (() => { - const protocol = window.location.protocol === 'https:' ? 'wss' : 'ws'; - const host = window.location.hostname; - const port = 8765; - return `${protocol}://${host}:${port}`; - })(); - - wsManager.connect(wsUrl); - notificationManager.info('Returned to menu'); - }, 100); + // Simply reload the page without session ID to return to menu + window.location.href = window.location.pathname; } // Handle errors @@ -495,6 +456,26 @@ gridContainer.innerHTML = '
Reconnecting to session...
'; } }); + + // Handle back button to switch between sessions + window.addEventListener('popstate', (event) => { + // Skip if we just closed the game intentionally + if (isClosingGame) { + console.log('Game is being closed, skipping popstate'); + return; + } + + console.log('Popstate event:', event); + const sessionId = getSessionIdFromUrl(); + + if (sessionId && currentSessionId !== sessionId) { + console.log('Navigating to session:', sessionId); + subscribeToSession(sessionId); + } else if (!sessionId) { + console.log('No session in URL, showing menu'); + closeGame(); + } + }); \ No newline at end of file