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();
+ }
+ });