Update static/js/game.js

static/js/game.js

@@ -2,133 +2,121 @@ let sessionId = null;
 let playerId = null;
 let isMyTurn = false;
 
-document.addEventListener("DOMContentLoaded", (event) => {
-  const playButton = document.getElementById("playButton");
-  const joinButton = document.getElementById("joinButton");
-  const submitWordButton = document.getElementById("submitWordButton");
-  const guessButton = document.getElementById("guessButton");
+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 (joinButton) joinButton.addEventListener("click", joinGame);
-  if (submitWordButton) submitWordButton.addEventListener("click", submitWord);
-  if (guessButton) guessButton.addEventListener("click", makeGuess);
+    if (playButton) playButton.addEventListener('click', startGame);
+    if (submitWordButton) submitWordButton.addEventListener('click', submitWord);
+    if (guessButton) guessButton.addEventListener('click', makeGuess);
 });
 
 function startGame() {
-  fetch("/play", { method: "POST" })
-    .then((response) => response.json())
-    .then((data) => {
-      sessionId = data.session_id;
-      playerId = data.player_id;
-      document.getElementById("sessionId").textContent = sessionId;
-      document.getElementById("sessionInfo").style.display = "block";
-      document.getElementById("playButton").style.display = "none";
-      document.getElementById("wordInput").style.display = "block";
-    });
+    fetch('/play', { method: 'POST' })
+        .then(response => response.json())
+        .then(data => {
+            sessionId = data.session_id;
+            playerId = data.player_id;
+            document.getElementById('sessionId').textContent = sessionId;
+            document.getElementById('sessionInfo').style.display = 'block';
+            document.getElementById('playButton').style.display = 'none';
+            if (data.status === 'ready') {
+                startGamePlay();
+            } else {
+                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;
-        playerId = data.player_id;
-        document.getElementById("joinGame").style.display = "none";
-        document.getElementById("wordInput").style.display = "block";
-      }
-    });
+function checkGameStatus() {
+    fetch(`/check_status/${sessionId}`)
+        .then(response => response.json())
+        .then(data => {
+            if (data.status === 'ready') {
+                startGamePlay();
+            } else {
+                setTimeout(checkGameStatus, 2000);  // Check again in 2 seconds
+            }
+        });
 }
 
-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";
-      } else if (data.status === "game_started") {
-        startGamePlay();
-      }
-    });
+function startGamePlay() {
+    document.getElementById('waitingMessage').style.display = 'none';
+    document.getElementById('wordInput').style.display = 'block';
 }
 
-function startGamePlay() {
-  document.getElementById("waitingMessage").style.display = "none";
-  document.getElementById("gameArea").style.display = "block";
-  updateGameState();
+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') {
+            document.getElementById('wordInput').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");
-    return;
-  }
-  fetch("/guess", {
-    method: "POST",
-    headers: {
-      "Content-Type": "application/json",
-    },
-    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 === playerId ? "You win!" : "You lose!");
-      }
-      updateGameState();
+    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');
+        return;
+    }
+    fetch('/guess', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+        },
+        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 === playerId ? 'You win!' : 'You lose!');
+        }
+        updateGameState();
     });
 }
 
 function updateGameState() {
-  fetch(`/game_state/${sessionId}`)
-    .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("guesses").textContent =
-        "Guessed letters: " + data.guesses.join(", ");
-      isMyTurn = data.current_player === playerId;
-      document.getElementById("playerTurn").textContent = isMyTurn
-        ? "Your turn"
-        : "Opponent's turn";
-      updateHangmanSVG(data.incorrect_guesses);
-    });
-  setTimeout(updateGameState, 2000); // Poll every 2 seconds
+    fetch(`/game_state/${sessionId}`)
+        .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('guesses').textContent = 'Guessed letters: ' + data.guesses.join(', ');
+            isMyTurn = data.current_player === playerId;
+            document.getElementById('playerTurn').textContent = isMyTurn ? 'Your turn' : "Opponent's turn";
+            updateHangmanSVG(data.incorrect_guesses);
+        });
+    setTimeout(updateGameState, 2000);  // Poll every 2 seconds
 }
 
 function updateHangmanSVG(stage) {
-  fetch(`/static/images/hangman-stage-${stage + 1}.svg`)
-    .then((response) => response.text())
-    .then((svgContent) => {
-      document.getElementById("hangmanSvg").innerHTML = svgContent;
-    });
-}
+    fetch(`/static/images/hangman-stage-${stage + 1}.svg`)
+        .then(response => response.text())
+        .then(svgContent => {
+            document.getElementById('hangmanSvg').innerHTML = svgContent;
+        });
+}