Update static/js/game.js

static/js/game.js

@@ -1,48 +1,59 @@
 let sessionId = null;
-let playerIndex = null;
-let isMyTurn = false;
+let player = null;
 
 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);
+    document.getElementById('playButton').addEventListener('click', createGame);
+    document.getElementById('joinButton').addEventListener('click', joinGame);
+    document.getElementById('submitWordButton').addEventListener('click', submitWord);
 });
 
-function startGame() {
+function createGame() {
     fetch('/play', { method: 'POST' })
         .then(response => response.json())
         .then(data => {
             sessionId = data.session_id;
-            playerIndex = data.player_index;
+            player = 'player1';
             document.getElementById('sessionId').textContent = sessionId;
-            document.getElementById('sessionInfo').style.display = 'block';
-            document.getElementById('playButton').style.display = 'none';
-            if (data.status === 'ready') {
-                startGamePlay();
+            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...';
                 checkGameStatus();
             }
         });
 }
 
 function checkGameStatus() {
-    fetch(`/check_status/${sessionId}`)
+    fetch(`/status/${sessionId}`)
         .then(response => response.json())
         .then(data => {
             if (data.status === 'ready') {
-                startGamePlay();
+                document.getElementById('statusMessage').textContent = 'Game is starting...';
+                startGame();
             } else {
                 setTimeout(checkGameStatus, 2000);  // Check again in 2 seconds
             }
         });
 }
 
-function startGamePlay() {
-    document.getElementById('waitingMessage').style.display = 'none';
+function startGame() {
     document.getElementById('wordInput').style.display = 'block';
 }
 
@@ -57,27 +68,23 @@ function submitWord() {
         headers: {
             'Content-Type': 'application/json',
         },
-        body: JSON.stringify({ session_id: sessionId, player_index: playerIndex, word: word }),
+        body: JSON.stringify({ session_id: sessionId, player: player, word: word }),
     })
     .then(response => response.json())
     .then(data => {
         if (data.status === 'waiting_for_opponent') {
             document.getElementById('wordInput').style.display = 'none';
-            document.getElementById('waitingMessage').style.display = 'block';
-            document.getElementById('waitingMessage').textContent = 'Waiting for opponent to submit their word...';
+            document.getElementById('statusMessage').textContent = 'Waiting for opponent to submit their word...';
         } 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();
         }
     });
 }
 
 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');
@@ -88,26 +95,27 @@ function makeGuess() {
         headers: {
             'Content-Type': 'application/json',
         },
-        body: JSON.stringify({ session_id: sessionId, player_index: playerIndex, guess: guess }),
+        body: JSON.stringify({ session_id: sessionId, player: player, guess: guess }),
     })
     .then(response => response.json())
     .then(data => {
         if (data.status === 'game_over') {
-            alert(data.winner == playerIndex ? 'You win!' : 'You lose!');
+            alert(data.winner === player ? 'You win!' : 'You lose!');
         }
         updateGameState();
     });
 }
 
 function updateGameState() {
-    fetch(`/game_state/${sessionId}/${playerIndex}`)
+    fetch(`/game_state/${sessionId}`)
         .then(response => response.json())
         .then(data => {
-            document.getElementById('playerWord').textContent = data.player_word;
-            document.getElementById('opponentWord').textContent = data.opponent_word;
+            document.getElementById('playerWord').textContent = data.words[player];
+            document.getElementById('opponentWord').textContent = data.words[player === 'player1' ? 'player2' : 'player1'];
             document.getElementById('guesses').textContent = 'Guessed letters: ' + data.guesses.join(', ');
-            isMyTurn = data.current_player_index == playerIndex;
+            const isMyTurn = data.current_player === player;
             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