static/js/game.js

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");

  if (playButton) playButton.addEventListener("click", startGame);
  if (joinButton) joinButton.addEventListener("click", joinGame);
  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";
    });
}

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 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("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();
    });
}

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
}

function updateHangmanSVG(stage) {
  fetch(`/static/images/hangman-stage-${stage + 1}.svg`)
    .then((response) => response.text())
    .then((svgContent) => {
      document.getElementById("hangmanSvg").innerHTML = svgContent;
    });
}