diff --git a/src/battle.js b/src/battle.js index 6e6ce69..7730d98 100644 --- a/src/battle.js +++ b/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 += `

Players: ${gameState.fighters.map(f => f.name).join(', ')}

`; - gameState.moves.forEach(move => { - gameStateDiv.innerHTML += `

${move.fighter}: ${move.move} -> ${move.target}

`; - }); - - const fightersDiv = document.getElementById('fighters'); - fightersDiv.innerHTML = ''; - gameState.fighters.forEach(fighter => { - fightersDiv.innerHTML += `

${fighter.name} - HP: ${fighter.hp}, ATT: ${fighter.attack}

`; - }); - - 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 = `

Battle End! Winner: ${gameState.winner}

`; - 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 += `

Players: ${gameState.fighters.map(f => f.name).join(', ')}

`; + gameState.moves.forEach(move => { + gameStateDiv.innerHTML += `

${move.fighter}: ${move.move} -> ${move.target}

`; + }); + + const fightersDiv = document.getElementById('fighters'); + fightersDiv.innerHTML = ''; + gameState.fighters.forEach(fighter => { + fightersDiv.innerHTML += `

${fighter.name} - HP: ${fighter.hp}, ATT: ${fighter.attack}

`; + }); + + 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 = `

Battle End! Winner: ${gameState.winner}

`; + 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); + }); +}