Update static/js/game.js

static/js/game.js

@@ -1,5 +1,5 @@
 let sessionId = null;
-let playerId = null;
+let playerIndex = null;
 let isMyTurn = false;
 
 document.addEventListener('DOMContentLoaded', (event) => {
@@ -17,12 +17,12 @@ function startGame() {
         .then(response => response.json())
         .then(data => {
             sessionId = data.session_id;
-            playerId = data.player_id;
+            playerIndex = data.player_index;
             document.getElementById('sessionId').textContent = sessionId;
             document.getElementById('sessionInfo').style.display = 'block';
             document.getElementById('playButton').style.display = 'none';
             if (data.status === 'ready') {
-                startWordInput();
+                startGamePlay();
             } else {
                 checkGameStatus();
             }
@@ -34,48 +34,16 @@ function checkGameStatus() {
         .then(response => response.json())
         .then(data => {
             if (data.status === 'ready') {
-                startWordInput();
+                startGamePlay();
             } else {
                 setTimeout(checkGameStatus, 2000);  // Check again in 2 seconds
             }
         });
 }
 
-function startWordInput() {
-    document.getElementById('waitingMessage').style.display = 'none';
-    document.getElementById('wordInput').style.display = 'block';
-}
-
-function submitWord() {
-    const word = document.getElementById('wordInputField').value;
-    if (word.length !== 7) {
-        alert('Word must be 7 letters long');
-        return;
-    }
-    fetch('/submit_word', {
-        method: 'POST',
-        headers: {
-            'Content-Type': 'application/json',
-        },
-        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('waitingMessage').style.display = 'block';
-            document.getElementById('waitingMessage').textContent = 'Waiting for opponent to submit their word...';
-        } else if (data.status === 'game_started') {
-            startGamePlay();
-        }
-    });
-}
-
 function startGamePlay() {
     document.getElementById('waitingMessage').style.display = 'none';
-    document.getElementById('wordInput').style.display = 'none';
-    document.getElementById('gameArea').style.display = 'block';
-    updateGameState();
+    document.getElementById('wordInput').style.display = 'block';
 }
 
 function submitWord() {
@@ -89,7 +57,7 @@ function submitWord() {
         headers: {
             'Content-Type': 'application/json',
         },
-        body: JSON.stringify({ session_id: sessionId, player_id: playerId, word: word }),
+        body: JSON.stringify({ session_id: sessionId, player_index: playerIndex, word: word }),
     })
     .then(response => response.json())
     .then(data => {
@@ -120,25 +88,25 @@ function makeGuess() {
         headers: {
             'Content-Type': 'application/json',
         },
-        body: JSON.stringify({ session_id: sessionId, player_id: playerId, guess: guess }),
+        body: JSON.stringify({ session_id: sessionId, player_index: playerIndex, guess: guess }),
     })
     .then(response => response.json())
     .then(data => {
         if (data.status === 'game_over') {
-            alert(data.winner === playerId ? 'You win!' : 'You lose!');
+            alert(data.winner == playerIndex ? 'You win!' : 'You lose!');
         }
         updateGameState();
     });
 }
 
 function updateGameState() {
-    fetch(`/game_state/${sessionId}`)
+    fetch(`/game_state/${sessionId}/${playerIndex}`)
         .then(response => response.json())
         .then(data => {
-            document.getElementById('playerWord').textContent = data.words[playerId];
-            document.getElementById('opponentWord').textContent = data.words[data.players.find(p => p !== playerId)];
+            document.getElementById('playerWord').textContent = data.player_word;
+            document.getElementById('opponentWord').textContent = data.opponent_word;
             document.getElementById('guesses').textContent = 'Guessed letters: ' + data.guesses.join(', ');
-            isMyTurn = data.current_player === playerId;
+            isMyTurn = data.current_player_index == playerIndex;
             document.getElementById('playerTurn').textContent = isMyTurn ? 'Your turn' : "Opponent's turn";
             updateHangmanSVG(data.incorrect_guesses);
         });