static/js/game.js

let sessionId = null;
let playerId = null;
let isMyTurn = false;

document.addEventListener('DOMContentLoaded', (event) => {
    const playButton = document.getElementById('playButton');
    if (playButton) playButton.addEventListener('click', startGame);
});

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('playButton').style.display = 'none';
            if (data.waiting) {
                document.getElementById('waitingMessage').style.display = 'block';
                checkGameStatus();
            } else {
                startGamePlay();
            }
        });
}

function checkGameStatus() {
    fetch(`/check_status/${sessionId}`)
        .then(response => response.json())
        .then(data => {
            if (data.players === 2) {
                document.getElementById('waitingMessage').style.display = 'none';
                document.getElementById('gameStarting').style.display = 'block';
                setTimeout(startGamePlay, 2000);
            } else {
                setTimeout(checkGameStatus, 2000);
            }
        });
}

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) {
        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';
            setTimeout(checkWordSubmissionStatus, 2000);
        } else if (data.status === 'game_started') {
            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');
        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;
        });
}

// 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');
    }
}