Update src/battle.js

closes #1
This commit is contained in:
Ivor Barhansky 2024-06-21 11:12:40 +00:00
parent 32b1e355a4
commit a17028c651

View File

@ -1,105 +1,111 @@
document.getElementById('joinForm').addEventListener('submit', function (event) { document.getElementById('joinForm').addEventListener('submit', function (event) {
event.preventDefault(); event.preventDefault();
const username = document.getElementById('username').value; const username = document.getElementById('username').value;
joinGame(username); joinGame(username);
}); });
document.getElementById('submitMove').addEventListener('click', function () { document.getElementById('submitMove').addEventListener('click', function () {
const username = document.getElementById('username').value; const username = document.getElementById('username').value;
const move = document.getElementById('submitMove').value; const move = document.getElementById('submitMove').value;
const target = document.getElementById('targetPlayer').value; const target = document.getElementById('targetPlayer').value;
submitMove(username, move, target); submitMove(username, move, target);
}); });
let pollInterval; let pollInterval;
function joinGame(username) { function joinGame(username) {
fetch('battle.php', { fetch('battle.php', {
method: 'POST', method: 'POST',
headers: { headers: {
'Content-Type': 'application/x-www-form-urlencoded' 'Content-Type': 'application/x-www-form-urlencoded'
}, },
body: `action=join&username=${encodeURIComponent(username)}` body: `action=join&username=${encodeURIComponent(username)}`
}).then(response => response.json()) }).then(response => response.json())
.then(data => { .then(data => {
document.getElementById('joinForm').style.display = 'none'; document.getElementById('joinForm').style.display = 'none';
document.getElementById('gameContainer').style.display = 'block'; document.getElementById('gameContainer').style.display = 'block';
updateGameState(data); updateGameState(data);
pollInterval = setInterval(pollGameState, 1000); pollInterval = setInterval(pollGameState, 1000);
}); });
} }
function submitMove(username, move, target) { function submitMove(username, move, target) {
fetch('battle.php', { fetch('battle.php', {
method: 'POST', method: 'POST',
headers: { headers: {
'Content-Type': 'application/x-www-form-urlencoded' 'Content-Type': 'application/x-www-form-urlencoded'
}, },
body: `action=move&username=${encodeURIComponent(username)}&move=${encodeURIComponent(move)}&target=${encodeURIComponent(target)}` body: `action=move&username=${encodeURIComponent(username)}&move=${encodeURIComponent(move)}&target=${encodeURIComponent(target)}`
}).then(response => response.json()) }).then(response => response.json())
.then(data => { .then(data => {
if (data.error) { if (data.error) {
alert(data.error); alert(data.error);
} else { } else {
updateGameState(data); updateGameState(data);
} }
}); });
} }
function updateGameState(gameState) { function updateGameState(gameState) {
const gameStateDiv = document.getElementById('gameState'); const gameStateDiv = document.getElementById('gameState');
gameStateDiv.innerHTML = ''; gameStateDiv.innerHTML = '';
gameStateDiv.innerHTML += `<p>Players: ${gameState.fighters.map(f => f.name).join(', ')}</p>`; gameStateDiv.innerHTML += `<p>Players: ${gameState.fighters.map(f => f.name).join(', ')}</p>`;
gameState.moves.forEach(move => { gameState.moves.forEach(move => {
gameStateDiv.innerHTML += `<p>${move.fighter}: ${move.move} -> ${move.target}</p>`; gameStateDiv.innerHTML += `<p>${move.fighter}: ${move.move} -> ${move.target}</p>`;
}); });
const fightersDiv = document.getElementById('fighters'); const fightersDiv = document.getElementById('fighters');
fightersDiv.innerHTML = ''; fightersDiv.innerHTML = '';
gameState.fighters.forEach(fighter => { gameState.fighters.forEach(fighter => {
fightersDiv.innerHTML += `<p>${fighter.name} - HP: ${fighter.hp}, ATT: ${fighter.attack}</p>`; fightersDiv.innerHTML += `<p>${fighter.name} - HP: ${fighter.hp}, ATT: ${fighter.attack}</p>`;
}); });
const username = document.getElementById('username').value; const username = document.getElementById('username').value;
const submitButton = document.getElementById('submitMove'); const submitButton = document.getElementById('submitMove');
const targetSelector = document.getElementById('targetPlayer'); const targetSelector = document.getElementById('targetPlayer');
const currentTarget = targetSelector.value; // Сохраняем текущий выбор цели
if (gameState.battle_end) {
const winnerDiv = document.createElement('div'); if (gameState.battle_end) {
winnerDiv.innerHTML = `<p>Battle End! Winner: ${gameState.winner}</p>`; const winnerDiv = document.createElement('div');
document.body.appendChild(winnerDiv); winnerDiv.innerHTML = `<p>Battle End! Winner: ${gameState.winner}</p>`;
submitButton.disabled = true; document.body.appendChild(winnerDiv);
clearInterval(pollInterval); submitButton.disabled = true;
} else { clearInterval(pollInterval);
const aliveFighters = gameState.fighters.filter(fighter => fighter.hp > 0); } else {
targetSelector.innerHTML = ''; const aliveFighters = gameState.fighters.filter(fighter => fighter.hp > 0);
targetSelector.innerHTML = '';
if (aliveFighters.length > 2) {
targetSelector.style.display = 'block'; if (aliveFighters.length > 2) {
aliveFighters.forEach(fighter => { targetSelector.style.display = 'block';
if (fighter.name !== username) { aliveFighters.forEach(fighter => {
const option = document.createElement('option'); if (fighter.name !== username) {
option.value = fighter.name; const option = document.createElement('option');
option.textContent = fighter.name; option.value = fighter.name;
targetSelector.appendChild(option); option.textContent = fighter.name;
} targetSelector.appendChild(option);
}); }
} else { });
targetSelector.style.display = 'none';
} // Восстанавливаем текущий выбор цели, если он существует в новом списке
if (aliveFighters.some(fighter => fighter.name === currentTarget)) {
if (gameState.last_fighter === username) { targetSelector.value = currentTarget;
submitButton.style.display = 'none'; }
} else { } else {
submitButton.style.display = 'block'; targetSelector.style.display = 'none';
} }
}
} if (gameState.last_fighter === username) {
submitButton.style.display = 'none';
function pollGameState() { } else {
fetch('battle.php') submitButton.style.display = 'block';
.then(response => response.json()) }
.then(data => { }
updateGameState(data); }
});
} function pollGameState() {
fetch('battle.php')
.then(response => response.json())
.then(data => {
updateGameState(data);
});
}