static/js/game.js

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

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 (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;
            hideAllSections();
            if (data.waiting) {
                showSection('waitingMessage');
                checkGameStatus();
            } else {
                showSection('wordInput');
            }
        });
}

function checkGameStatus() {
    fetch(`/check_status/${sessionId}`)
        .then(response => response.json())
        .then(data => {
            if (data.players === 2) {
                hideAllSections();
                showSection('gameStarting');
                setTimeout(() => {
                    hideAllSections();
                    showSection('wordInput');
                }, 2000);
            } else {
                setTimeout(checkGameStatus, 2000);
            }
        });
}

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 => {
        hideAllSections();
        if (data.status === 'waiting_for_opponent') {
            showSection('waitingForWord');
            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() {
    hideAllSections();
    showSection('gameArea');
    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!');
            hideAllSections();
            showSection('initialScreen');
        }
        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;
        });
}

function hideAllSections() {
    const sections = ['initialScreen', 'waitingMessage', 'gameStarting', 'wordInput', 'waitingForWord', 'gameArea'];
    sections.forEach(section => {
        document.getElementById(section).style.display = 'none';
    });
}

function showSection(sectionId) {
    document.getElementById(sectionId).style.display = 'block';
}