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