keep session id history
This commit is contained in:
@ -50,6 +50,7 @@
|
|||||||
let currentSessionId = null;
|
let currentSessionId = null;
|
||||||
let clueArea = null;
|
let clueArea = null;
|
||||||
let gridElement = null;
|
let gridElement = null;
|
||||||
|
let isClosingGame = false; // Flag to prevent popstate from reloading session
|
||||||
|
|
||||||
// Test notifications
|
// Test notifications
|
||||||
notificationManager.success('App loaded successfully');
|
notificationManager.success('App loaded successfully');
|
||||||
@ -64,7 +65,7 @@
|
|||||||
function updateUrlWithSessionId(sessionId) {
|
function updateUrlWithSessionId(sessionId) {
|
||||||
const params = new URLSearchParams(window.location.search);
|
const params = new URLSearchParams(window.location.search);
|
||||||
params.set('session_id', sessionId);
|
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
|
// Helper function to subscribe to a session
|
||||||
@ -72,6 +73,12 @@
|
|||||||
console.log('Subscribing to session:', sessionId);
|
console.log('Subscribing to session:', sessionId);
|
||||||
currentSessionId = sessionId;
|
currentSessionId = sessionId;
|
||||||
|
|
||||||
|
// Show game UI immediately
|
||||||
|
menu.style.display = 'none';
|
||||||
|
gridContainer.style.display = 'block';
|
||||||
|
keyboard.style.display = 'block';
|
||||||
|
gridContainer.innerHTML = '<div class="loading-spinner">Loading session...</div>';
|
||||||
|
|
||||||
const message = {
|
const message = {
|
||||||
type: 'subscribe_session',
|
type: 'subscribe_session',
|
||||||
session_id: sessionId
|
session_id: sessionId
|
||||||
@ -408,54 +415,8 @@
|
|||||||
function closeGame() {
|
function closeGame() {
|
||||||
console.log('Closing game');
|
console.log('Closing game');
|
||||||
|
|
||||||
// Clear session ID from URL
|
// Simply reload the page without session ID to return to menu
|
||||||
window.history.replaceState({}, '', window.location.pathname);
|
window.location.href = 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);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Handle errors
|
// Handle errors
|
||||||
@ -495,6 +456,26 @@
|
|||||||
gridContainer.innerHTML = '<div class="loading-spinner">Reconnecting to session...</div>';
|
gridContainer.innerHTML = '<div class="loading-spinner">Reconnecting to session...</div>';
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// 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();
|
||||||
|
}
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
Reference in New Issue
Block a user