Spaces:
Paused
Paused
File size: 5,564 Bytes
7ef7190 07bb9cd 7ef7190 07bb9cd 7ef7190 07bb9cd 0d5c428 07bb9cd 7ef7190 07bb9cd 0d5c428 07bb9cd 7ef7190 0d5c428 07bb9cd 7ef7190 0d5c428 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 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 |
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') {
startWordInput();
} else {
checkGameStatus();
}
});
}
function checkGameStatus() {
fetch(`/check_status/${sessionId}`)
.then(response => response.json())
.then(data => {
if (data.status === 'ready') {
startWordInput();
} else {
setTimeout(checkGameStatus, 2000); // Check again in 2 seconds
}
});
}
function startWordInput() {
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') {
startGamePlay();
}
});
}
function startGamePlay() {
document.getElementById('waitingMessage').style.display = 'none';
document.getElementById('wordInput').style.display = 'none';
document.getElementById('gameArea').style.display = 'block';
updateGameState();
}
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;
});
} |