Update static/js/game.js

static/js/game.js

@@ -4,7 +4,12 @@ let isMyTurn = false;
 
 document.addEventListener('DOMContentLoaded', (event) => {
     const playButton = document.getElementById('playButton');
+    const submitWordButton = document.getElementById('submitWordButton');
+    const guessButton = document.getElementById('guessButton');
+
     if (playButton) playButton.addEventListener('click', startGame);
+    if (submitWordButton) submitWordButton.addEventListener('click', submitWord);
+    if (guessButton) guessButton.addEventListener('click', makeGuess);
 });
 
 function startGame() {
@@ -14,12 +19,12 @@ function startGame() {
             sessionId = data.session_id;
             playerId = data.player_id;
             document.getElementById('sessionId').textContent = sessionId;
-            document.getElementById('playButton').style.display = 'none';
+            hideAllSections();
             if (data.waiting) {
-                document.getElementById('waitingMessage').style.display = 'block';
+                showSection('waitingMessage');
                 checkGameStatus();
             } else {
-                startGamePlay();
+                showSection('wordInput');
             }
         });
 }
@@ -29,21 +34,18 @@ function checkGameStatus() {
         .then(response => response.json())
         .then(data => {
             if (data.players === 2) {
-                document.getElementById('waitingMessage').style.display = 'none';
-                document.getElementById('gameStarting').style.display = 'block';
-                setTimeout(startGamePlay, 2000);
+                hideAllSections();
+                showSection('gameStarting');
+                setTimeout(() => {
+                    hideAllSections();
+                    showSection('wordInput');
+                }, 2000);
             } else {
                 setTimeout(checkGameStatus, 2000);
             }
         });
 }
 
-function startGamePlay() {
-    window.location.href = `/game.html?session=${sessionId}&player=${playerId}`;
-}
-
-// The following functions will be used in game.html
-
 function submitWord() {
     const word = document.getElementById('wordInputField').value;
     if (word.length !== 7) {
@@ -59,9 +61,9 @@ function submitWord() {
     })
     .then(response => response.json())
     .then(data => {
+        hideAllSections();
         if (data.status === 'waiting_for_opponent') {
-            document.getElementById('wordInput').style.display = 'none';
-            document.getElementById('waitingMessage').style.display = 'block';
+            showSection('waitingForWord');
             setTimeout(checkWordSubmissionStatus, 2000);
         } else if (data.status === 'game_started') {
             startHangmanGame();
@@ -82,8 +84,8 @@ function checkWordSubmissionStatus() {
 }
 
 function startHangmanGame() {
-    document.getElementById('waitingMessage').style.display = 'none';
-    document.getElementById('gameArea').style.display = 'block';
+    hideAllSections();
+    showSection('gameArea');
     updateGameState();
 }
 
@@ -108,6 +110,8 @@ function makeGuess() {
     .then(data => {
         if (data.status === 'game_over') {
             alert(data.winner === playerId ? 'You win!' : 'You lose!');
+            hideAllSections();
+            showSection('initialScreen');
         }
         updateGameState();
     });
@@ -135,14 +139,13 @@ function updateHangmanSVG(stage) {
         });
 }
 
-// Initialize game when game.html loads
-window.onload = function() {
-    const urlParams = new URLSearchParams(window.location.search);
-    sessionId = urlParams.get('session');
-    playerId = urlParams.get('player');
-    if (sessionId && playerId) {
-        document.getElementById('wordInput').style.display = 'block';
-    } else {
-        alert('Invalid game session');
-    }
+function hideAllSections() {
+    const sections = ['initialScreen', 'waitingMessage', 'gameStarting', 'wordInput', 'waitingForWord', 'gameArea'];
+    sections.forEach(section => {
+        document.getElementById(section).style.display = 'none';
+    });
+}
+
+function showSection(sectionId) {
+    document.getElementById(sectionId).style.display = 'block';
 }