Update static/js/game.js

static/js/game.js

@@ -1,62 +1,49 @@
 let sessionId = null;
-let player = null;
+let playerId = null;
+let isMyTurn = false;
 
 document.addEventListener('DOMContentLoaded', (event) => {
-    document.getElementById('playButton').addEventListener('click', createGame);
-    document.getElementById('joinButton').addEventListener('click', joinGame);
-    document.getElementById('submitWordButton').addEventListener('click', submitWord);
+    const playButton = document.getElementById('playButton');
+    if (playButton) playButton.addEventListener('click', startGame);
 });
 
-function createGame() {
+function startGame() {
     fetch('/play', { method: 'POST' })
         .then(response => response.json())
         .then(data => {
             sessionId = data.session_id;
-            player = 'player1';
+            playerId = data.player_id;
             document.getElementById('sessionId').textContent = sessionId;
-            document.getElementById('startOptions').style.display = 'none';
-            document.getElementById('gameInfo').style.display = 'block';
-            document.getElementById('statusMessage').textContent = 'Waiting for player 2...';
-            checkGameStatus();
-        });
-}
-
-function joinGame() {
-    const joinSessionId = document.getElementById('joinSessionId').value;
-    fetch(`/join/${joinSessionId}`, { method: 'POST' })
-        .then(response => response.json())
-        .then(data => {
-            if (data.error) {
-                alert(data.error);
-            } else {
-                sessionId = joinSessionId;
-                player = 'player2';
-                document.getElementById('sessionId').textContent = sessionId;
-                document.getElementById('startOptions').style.display = 'none';
-                document.getElementById('gameInfo').style.display = 'block';
-                document.getElementById('statusMessage').textContent = 'Joined the game. Starting soon...';
+            document.getElementById('playButton').style.display = 'none';
+            if (data.waiting) {
+                document.getElementById('waitingMessage').style.display = 'block';
                 checkGameStatus();
+            } else {
+                startGamePlay();
             }
         });
 }
 
 function checkGameStatus() {
-    fetch(`/status/${sessionId}`)
+    fetch(`/check_status/${sessionId}`)
         .then(response => response.json())
         .then(data => {
-            if (data.status === 'ready') {
-                document.getElementById('statusMessage').textContent = 'Game is starting...';
-                startGame();
+            if (data.players === 2) {
+                document.getElementById('waitingMessage').style.display = 'none';
+                document.getElementById('gameStarting').style.display = 'block';
+                setTimeout(startGamePlay, 2000);
             } else {
-                setTimeout(checkGameStatus, 2000);  // Check again in 2 seconds
+                setTimeout(checkGameStatus, 2000);
             }
         });
 }
 
-function startGame() {
-    document.getElementById('wordInput').style.display = 'block';
+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) {
@@ -68,23 +55,43 @@ function submitWord() {
         headers: {
             'Content-Type': 'application/json',
         },
-        body: JSON.stringify({ session_id: sessionId, player: player, word: word }),
+        body: JSON.stringify({ session_id: sessionId, player_id: playerId, word: word }),
     })
     .then(response => response.json())
     .then(data => {
         if (data.status === 'waiting_for_opponent') {
             document.getElementById('wordInput').style.display = 'none';
-            document.getElementById('statusMessage').textContent = 'Waiting for opponent to submit their word...';
+            document.getElementById('waitingMessage').style.display = 'block';
+            setTimeout(checkWordSubmissionStatus, 2000);
         } else if (data.status === 'game_started') {
-            document.getElementById('wordInput').style.display = 'none';
-            document.getElementById('gameArea').style.display = 'block';
-            document.getElementById('statusMessage').textContent = 'Game started!';
-            updateGameState();
+            startHangmanGame();
         }
     });
 }
 
+function checkWordSubmissionStatus() {
+    fetch(`/game_state/${sessionId}`)
+        .then(response => response.json())
+        .then(data => {
+            if (Object.keys(data.words).length === 2) {
+                startHangmanGame();
+            } else {
+                setTimeout(checkWordSubmissionStatus, 2000);
+            }
+        });
+}
+
+function startHangmanGame() {
+    document.getElementById('waitingMessage').style.display = 'none';
+    document.getElementById('gameArea').style.display = 'block';
+    updateGameState();
+}
+
 function makeGuess() {
+    if (!isMyTurn) {
+        alert("It's not your turn!");
+        return;
+    }
     const guess = document.getElementById('guessInput').value;
     if (guess.length !== 1) {
         alert('Please enter a single letter');
@@ -95,12 +102,12 @@ function makeGuess() {
         headers: {
             'Content-Type': 'application/json',
         },
-        body: JSON.stringify({ session_id: sessionId, player: player, guess: guess }),
+        body: JSON.stringify({ session_id: sessionId, player_id: playerId, guess: guess }),
     })
     .then(response => response.json())
     .then(data => {
         if (data.status === 'game_over') {
-            alert(data.winner === player ? 'You win!' : 'You lose!');
+            alert(data.winner === playerId ? 'You win!' : 'You lose!');
         }
         updateGameState();
     });
@@ -110,12 +117,11 @@ function updateGameState() {
     fetch(`/game_state/${sessionId}`)
         .then(response => response.json())
         .then(data => {
-            document.getElementById('playerWord').textContent = data.words[player];
-            document.getElementById('opponentWord').textContent = data.words[player === 'player1' ? 'player2' : 'player1'];
+            document.getElementById('playerWord').textContent = data.words[playerId];
+            document.getElementById('opponentWord').textContent = data.words[data.players.find(p => p !== playerId)];
             document.getElementById('guesses').textContent = 'Guessed letters: ' + data.guesses.join(', ');
-            const isMyTurn = data.current_player === player;
+            isMyTurn = data.current_player === playerId;
             document.getElementById('playerTurn').textContent = isMyTurn ? 'Your turn' : "Opponent's turn";
-            document.getElementById('guessButton').disabled = !isMyTurn;
             updateHangmanSVG(data.incorrect_guesses);
         });
     setTimeout(updateGameState, 2000);  // Poll every 2 seconds
@@ -127,4 +133,16 @@ function updateHangmanSVG(stage) {
         .then(svgContent => {
             document.getElementById('hangmanSvg').innerHTML = svgContent;
         });
+}
+
+// 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');
+    }
 }