static/js/game.js

let sessionId = null;
let player = null;

document.addEventListener('DOMContentLoaded', (event) => {
    document.getElementById('playButton').addEventListener('click', createGame);
    document.getElementById('joinButton').addEventListener('click', joinGame);
    document.getElementById('submitWordButton').addEventListener('click', submitWord);
});

function createGame() {
    fetch('/play', { method: 'POST' })
        .then(response => response.json())
        .then(data => {
            sessionId = data.session_id;
            player = 'player1';
            document.getElementById('sessionId').textContent = sessionId;
            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(`/status/${sessionId}`)
        .then(response => response.json())
        .then(data => {
            if (data.status === 'ready') {
                document.getElementById('statusMessage').textContent = 'Game is starting...';
                startGame();
            } else {
                setTimeout(checkGameStatus, 2000);  // Check again in 2 seconds
            }
        });
}

function startGame() {
    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: player, word: word }),
    })
    .then(response => response.json())
    .then(data => {
        if (data.status === 'waiting_for_opponent') {
            document.getElementById('wordInput').style.display = 'none';
            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() {
    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: player, guess: guess }),
    })
    .then(response => response.json())
    .then(data => {
        if (data.status === 'game_over') {
            alert(data.winner === player ? 'You win!' : 'You lose!');
        }
        updateGameState();
    });
}

function updateGameState() {
    fetch(`/game_state/${sessionId}`)
        .then(response => response.json())
        .then(data => {
            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(', ');
            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
}

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