.gladiator-gm-container {
max-width: 1000px;
margin: 20px auto;
font-family: Arial, sans-serif;
}
.team {
border: 1px solid #ccc;
padding: 15px;
margin: 10px 0;
background-color: white;
border-radius: 5px;
}
.gladiator {
margin: 5pxV: auto;
padding: 5px;
border-bottom: 1px solid #eee;
}
.log {
border: 1px solid #999;
padding: 15px;
height: 200px;
overflow-y: auto;
background-color: #fafafa;
margin-top: 20px;
}
button {
padding: 10px 20px;
margin: 5px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
h1, h2 {
color: #333;
}

class Gladiator {
constructor(name, strength, speed, endurance, skill) {
this.name = name;
this.strength = strength;
this.speed = speed;
this.endurance = endurance;
this.skill = skill;
this.health = endurance;
}
}

class Team {
constructor(name) {
this.name = name;
this.gladiators = [];
this.wins = 0;
this.losses = 0;
}

addGladiator(gladiator) {
if (this.gladiators.length {
playerRoster.innerHTML += `

`;
});

document.getElementById(“opponentRecord”).textContent = `${opponentTeam.wins}-${opponentTeam.losses}`;
const opponentRoster = document.getElementById(“opponentRoster”);
opponentRoster.innerHTML = “”;
opponentTeam.gladiators.forEach(glad => {
opponentRoster.innerHTML += `

`;
});

const logDiv = document.getElementById(“gameLog”);
logDiv.innerHTML = “

Game Log

“;
gameLog.forEach(entry => {
logDiv.innerHTML += `

${entry}

`;
});
logDiv.scrollTop = logDiv.scrollHeight;
}

function recruitGladiator() {
const newGladiator = createRandomGladiator();
if (playerTeam.addGladiator(newGladiator)) {
gameLog.push(`Recruited ${newGladiator.name} to your team!`);
} else {
gameLog.push(“Team is full! Maximum 5 gladiators.”);
}
updateDisplay();
}

function fight(glad1, glad2) {
let log = [`${glad1.name} vs ${glad2.name} begins!`];
while (glad1.health > 0 && glad2.health > 0) {
if (Math.random() * 100 < glad1.speed) {
let damage = glad1.strength;
if (Math.random() * 100 < glad1.skill) {
damage *= 2;
log.push(`${glad1.name} lands a critical hit!`);
}
glad2.health -= damage;
log.push(`${glad1.name} hits ${glad2.name} for ${damage} damage!`);
}

if (glad2.health <= 0) {
log.push(`${glad2.name} is defeated!`);
break;
}

if (Math.random() * 100 < glad2.speed) {
let damage = glad2.strength;
if (Math.random() * 100 < glad2.skill) {
damage *= 2;
log.push(`${glad2.name} lands a critical hit!`);
}
glad1.health -= damage;
log.push(`${glad2.name} hits ${glad1.name} for ${damage} damage!`);
}

if (glad1.health 0 ? glad1 : glad2, log];
}

function fightMatch() {
if (playerTeam.gladiators.length === 0) {
gameLog.push(“You need at least one gladiator to fight!”);
updateDisplay();
return;
}

opponentTeam.gladiators = [];
for (let i = 0; i < 3; i++) {
opponentTeam.gladiators.push(createRandomGladiator());
}

gameLog = [`Match: ${playerTeam.name} vs ${opponentTeam.name}`];
let playerWins = 0;

for (let i = 0; i opponentTeam.gladiators.length / 2) {
playerTeam.wins++;
opponentTeam.losses++;
gameLog.push(`${playerTeam.name} wins the match!`);
} else {
playerTeam.losses++;
opponentTeam.wins++;
gameLog.push(`${opponentTeam.name} wins the match!`);
}

playerTeam.gladiators.forEach(glad => glad.health = glad.endurance);
opponentTeam.gladiators.forEach(glad => glad.health = glad.endurance);

updateDisplay();
}

// Initialize with 3 gladiators
for (let i = 0; i < 3; i++) {
playerTeam.addGladiator(createRandomGladiator());
}

document.addEventListener("DOMContentLoaded", function() {
updateDisplay();
document.getElementById("recruitButton").addEventListener("click", recruitGladiator);
document.getElementById("fightButton").addEventListener("click", fightMatch);
});