File size: 4,410 Bytes
7ef7190
 
 
 
07bb9cd
 
 
 
7ef7190
07bb9cd
 
 
7ef7190
 
 
07bb9cd
 
 
 
 
 
 
 
 
 
 
 
 
 
7ef7190
 
07bb9cd
 
 
 
 
 
 
 
 
 
7ef7190
 
07bb9cd
 
 
7ef7190
 
07bb9cd
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
7ef7190
 
 
07bb9cd
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
7ef7190
 
 
 
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 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;
            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_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';
            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_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;
        });
}