File size: 4,420 Bytes
7ef7190
53da5e9
7ef7190
 
07bb9cd
 
 
 
7ef7190
07bb9cd
 
 
7ef7190
 
 
07bb9cd
 
 
 
53da5e9
07bb9cd
 
 
 
53da5e9
07bb9cd
 
 
 
7ef7190
 
07bb9cd
 
 
 
 
53da5e9
07bb9cd
 
 
 
7ef7190
 
0d5c428
 
53da5e9
0d5c428
 
07bb9cd
 
 
 
 
 
 
 
 
 
 
53da5e9
07bb9cd
 
 
 
 
 
 
 
 
 
 
 
 
7ef7190
 
 
07bb9cd
 
 
 
 
 
 
 
 
 
 
 
 
 
53da5e9
07bb9cd
 
 
 
53da5e9
07bb9cd
 
7ef7190
 
 
 
53da5e9
07bb9cd
 
53da5e9
 
07bb9cd
53da5e9
07bb9cd
 
 
 
7ef7190
 
 
07bb9cd
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
let sessionId = null;
let playerIndex = 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;
            playerIndex = data.player_index;
            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 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 startGamePlay() {
    document.getElementById('waitingMessage').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_index: playerIndex, 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_index: playerIndex, guess: guess }),
    })
    .then(response => response.json())
    .then(data => {
        if (data.status === 'game_over') {
            alert(data.winner == playerIndex ? 'You win!' : 'You lose!');
        }
        updateGameState();
    });
}

function updateGameState() {
    fetch(`/game_state/${sessionId}/${playerIndex}`)
        .then(response => response.json())
        .then(data => {
            document.getElementById('playerWord').textContent = data.player_word;
            document.getElementById('opponentWord').textContent = data.opponent_word;
            document.getElementById('guesses').textContent = 'Guessed letters: ' + data.guesses.join(', ');
            isMyTurn = data.current_player_index == playerIndex;
            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;
        });
}