diff --git a/src/battle.js b/src/battle.js index 9ecff1a..8b6256a 100644 --- a/src/battle.js +++ b/src/battle.js @@ -1,7 +1,19 @@ +document.getElementById('gameMode').addEventListener('change', function () { + const gameMode = this.value; + const teamSelect = document.getElementById('team'); + if (gameMode === 'team') { + teamSelect.style.display = 'block'; + } else { + teamSelect.style.display = 'none'; + } +}); + document.getElementById('joinForm').addEventListener('submit', function (event) { event.preventDefault(); const username = document.getElementById('username').value; - joinGame(username); + const gameMode = document.getElementById('gameMode').value; + const team = gameMode === 'team' ? document.getElementById('team').value : ''; + joinGame(username, gameMode, team); }); document.getElementById('submitMove').addEventListener('click', function () { @@ -13,13 +25,13 @@ document.getElementById('submitMove').addEventListener('click', function () { let pollInterval; -function joinGame(username) { +function joinGame(username, gameMode, team) { fetch('battle.php', { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, - body: `action=join&username=${encodeURIComponent(username)}` + body: `action=join&username=${encodeURIComponent(username)}&gameMode=${encodeURIComponent(gameMode)}&team=${encodeURIComponent(team)}` }).then(response => response.json()) .then(data => { document.getElementById('joinForm').style.display = 'none'; @@ -49,7 +61,7 @@ function submitMove(username, move, target) { function updateGameState(gameState) { const gameStateDiv = document.getElementById('gameState'); gameStateDiv.innerHTML = ''; - gameStateDiv.innerHTML += `

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

`; + gameStateDiv.innerHTML += `

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

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

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

`; }); @@ -57,7 +69,7 @@ function updateGameState(gameState) { const fightersDiv = document.getElementById('fighters'); fightersDiv.innerHTML = ''; gameState.fighters.forEach(fighter => { - fightersDiv.innerHTML += `

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

`; + fightersDiv.innerHTML += `

${fighter.name} ${fighter.team ? `(Team ${fighter.team})` : ''} - HP: ${fighter.hp}, ATT: ${fighter.attack}

`; }); const username = document.getElementById('username').value; @@ -67,7 +79,7 @@ function updateGameState(gameState) { if (gameState.battle_end) { const winnerDiv = document.createElement('div'); - winnerDiv.innerHTML = `

Battle End! Winner: ${gameState.winner}

`; + winnerDiv.innerHTML = `

Battle End! ${gameState.winner.team ? `Winning Team: ${gameState.winner.team}` : `Winner: ${gameState.winner.name}`}

`; document.body.appendChild(winnerDiv); submitButton.style.display = 'none'; targetSelector.style.display = 'none'; @@ -76,7 +88,7 @@ function updateGameState(gameState) { const aliveFighters = gameState.fighters.filter(fighter => fighter.hp > 0); targetSelector.innerHTML = ''; - if (aliveFighters.length > 2) { + if (aliveFighters.length > 2 && gameState.last_fighter !== username) { targetSelector.style.display = 'block'; aliveFighters.forEach(fighter => { if (fighter.name !== username) { @@ -99,10 +111,8 @@ function updateGameState(gameState) { if (gameState.last_fighter === username || currentFighter.hp <= 0) { submitButton.style.display = 'none'; - targetSelector.style.display = 'none'; } else { submitButton.style.display = 'block'; - targetSelector.style.display = 'block'; } } }