<code>const sectionSeleccionarPoder = document.getElementById(&quot;seleccionar-poder&quot;) const sectionReiniciar = document.getElement...

const sectionSeleccionarPoder = document.getElementById("seleccionar-poder")
const sectionReiniciar = document.getElementById('reiniciar')
const botonHeroeJugador = document.getElementById("boton-heroe") //boton para seleccionar heroes
const botonReiniciar = document.getElementById('boton-reiniciar')
sectionReiniciar.style.display='none'
const sectionSeleccionarHeroe = document.getElementById("seleccionar-heroe")
const spanHeroeJugador = document.getElementById("heroe-jugador")
const spanHeroeEnemigo = document.getElementById("heroe-enemigo")
const spanVidasJugador = document.getElementById("vidas-jugador")
const spanVidasEnemigo = document.getElementById("vidas-enemigo")
const sectionMensaje = document.getElementById("resultado")
const ataquesDeljugador = document.getElementById("ataques-del-jugador")
const ataquesDelEnemigo = document.getElementById("ataques-del-enemigo")
const contenedorTarjetas = document.getElementById("contenedorTarjetas")
const contenedorAtaques = document.getElementById("contenedorAtaques")


let heroes = []
let ataqueJugador =[]
let ataqueEnemigo = []
let opcionDeHeroes
let inputDeku
let inputBakugo
let inputShoto
let heroesJugador
let ataquesHeroes
let ataquesHeroesEnemigo
let botonFuerza 
let botonExplosion 
let botonHielo 
let botones =[]
let indexAtaqueJugador
let indexAtaqueEnemigo
let victoriasJugador = 0
let victoriasEnemigo = 0
let vidasJugador = 3
let vidasEnemigo = 3

class Heroe{
    constructor(nombre, foto, vida)
    {
        this.nombre = nombre
        this.foto = foto
        this.vida = vida
        this.ataques = []
    }
}

let deku = new Heroe("Deku", "./Heroes/deku.jpg", 5)

let bakugo = new Heroe("Bakugo", "./Heroes/bakugo.jpg", 5)

let shoto = new Heroe("Shoto", "./Heroes/shoto.jpg", 5)

deku.ataques.push(
    {nombre: "💪🏻", id: "boton-fuerza"},
    {nombre: "💪🏻", id:"boton-fuerza"},
    {nombre: "💪🏻", id: "boton-fuerza"},
    {nombre: "💥", id:"boton-explosion"},
    {nombre: "🧊", id: "boton-hielo"},
    )

bakugo.ataques.push(
    {nombre: "💥", id: "boton-explosion"},
    {nombre: "💥", id:"boton-explosion"},
    {nombre: "💥", id: "boton-explosion"},
    {nombre: "💪🏻", id:"boton-fuerza"},
    {nombre: "🧊", id: "boton-hielo"},
    )

shoto.ataques.push(
    {nombre: "🧊", id: "boton-hielo"},
    {nombre: "🧊", id:"boton-hielo"},
    {nombre: "🧊", id: "boton-hielo"},
    {nombre: "💥", id:"boton-explosion"},
    {nombre: "💪🏻", id: "boton-fuerza"},
    )

heroes.push(deku, bakugo, shoto)


function iniciarJuego(){ 
    sectionSeleccionarPoder.style.display = "none"//STYLE.DISPLAY = none ES PARA OCULTAR LOS BOTONES  

    heroes.forEach((heroe) =>
    {
        opcionDeHeroes = `
        <input type="radio" name="heroe" id=${heroe.nombre} />
        <label class="tarjeta-de-heroes" for=${heroe.nombre}>
            <p>${heroe.nombre}</p>
            <img src=${heroe.foto} alt=${heroe.nombre}>
        </label>
        
        `
        
    contenedorTarjetas.innerHTML +=  opcionDeHeroes

    inputDeku = document.getElementById("Deku")
    inputBakugo = document.getElementById("Bakugo")
    inputShoto = document.getElementById("Shoto")
    })

    botonHeroeJugador.addEventListener("click", seleccionarHeroeJugador)
    botonReiniciar.addEventListener('click', reiniciarJuego)
    
}//INICIACION DEL JUEGO

function seleccionarHeroeJugador (){

    sectionSeleccionarHeroe.style.display = "none"
    sectionSeleccionarPoder.style.display = "flex"//STYLE.DISPLAY = "BLOCK" SIRVE PARA VOLVER A MOSTRAR LOS BOTONES OCULTADOS 

    if(inputDeku.checked){
        spanHeroeJugador.innerHTML = inputDeku.id 
        heroesJugador = inputDeku.id}
        
    else if (inputBakugo.checked){
        spanHeroeJugador.innerHTML = inputBakugo.id
        heroesJugador = inputBakugo.id}
        
    else if (inputShoto.checked){
        spanHeroeJugador.innerHTML = inputShoto.id
        heroesJugador = inputShoto.id}
         
    else{
        alert("Selecciona tu heroe!!")}

    extraerAtaques(heroesJugador)

        seleccionarHeroeEnemigo()
}//FUNCION PARA SELECCIONAR JUGADOR

function extraerAtaques(heroesJugador){
    let ataques
    for (let i = 0; i < heroes.length; i++) {
        if(heroesJugador === heroes[i].nombre){
            ataques = heroes[i].ataques
        }
    }
    mostrarAtaques(ataques)
}

function mostrarAtaques(ataques){
    ataques.forEach((ataque) => {
        ataquesHeroes =`
        <button id=${ataque.id} class="boton-de-poder BAtaque">${ataque.nombre} </button> 
        `
        
        contenedorAtaques.innerHTML += ataquesHeroes
    })

    botonFuerza = document.getElementById("boton-fuerza")
    botonExplosion = document.getElementById("boton-explosion")
    botonHielo = document.getElementById("boton-hielo")
    botones = document.querySelectorAll(".BAtaque")

    console.log(botones)
}

function secuenciaAtaque() {
    botones.forEach((boton) => {
        boton.addEventListener('click', (e) =>{
            if (e.target.textContent === "💪🏻"){
                ataqueJugador.push("FUERZA")
                console.log(ataqueJugador)
                boton.style.background = "#112f58"
                
            }
            else if (e.target.textContent === "💥"){
                ataqueJugador.push("AGUA")
                console.log(ataqueJugador)
                boton.style.background = "#112f58"
            }
            else {
                ataqueJugador.push("HIELO")
                console.log(ataqueJugador)
                boton.style.background = "#112f58"
            }
            ataqueAleatorioEnemigo()
        })
    })

  

}

function seleccionarHeroeEnemigo(){
    let heroeAleatorio = aleatorio(0, heroes.length -1)

    spanHeroeEnemigo.innerHTML = heroes[heroeAleatorio].nombre
    ataquesHeroesEnemigo = heroes[heroeAleatorio].ataques
    secuenciaAtaque()

}//SELECCION DEL HEROE DEL ENEMIGO

function ataqueAleatorioEnemigo(){
    let ataqueAleatorio = aleatorio(0,ataquesHeroesEnemigo -1)

    if(ataqueAleatorio == 0 || ataqueAleatorio ==1){
        ataqueEnemigo.push ("FUERZA💪🏻")
    }
    else if (ataqueAleatorio == 3 || ataqueAleatorio == 4){
        ataqueEnemigo,push("EXPLOSION💥")
    }
    else{
        ataqueEnemigo.push("HIELO🧊")
    }

    console.log(ataqueEnemigo)
    iniciarPelea()
}//ATAQUE DEL ENEMIGO

function iniciarPelea(){
    if (ataqueJugador.length === 5) {
        combate()
    }
}

function indexAmbosOponentes(jugador, enemigo){
    indexAtaqueJugador = ataqueJugador[jugador]
    indexAtaqueEnemigo = ataqueEnemigo[enemigo]
}

function combate(){
    for (let index = 0; index < ataqueJugador.length; index++) {

        if(ataqueJugador[index]=== ataqueEnemigo[index]){
            indexAmbosOponentes(index, index)
            crearMensaje("EMPATE🟡")
        }

        else if 
        ((ataqueJugador[index] == "FUERZA💪🏻" && ataqueEnemigo[index]  == "HIELO🧊") ||
        (ataqueJugador[index]  == "EXPLOSION💥" && ataqueEnemigo[index]  == "FUERZA💪🏻") ||
        (ataqueJugador[index]  == "HIELO🧊" && ataqueEnemigo[index]  == "EXPLOSION💥")){
            indexAmbosOponentes(index, index)
            crearMensaje("GANASTE✅")
            victoriasJugador++

            spanVidasJugador.innerHTML = victoriasJugador
        }

        else{
            indexAmbosOponentes(index, index)
            crearMensaje("PERDISTE❌")
            victoriasEnemigo++
            spanVidasEnemigo.innerHTML = victoriasEnemigo
        }
        
    }

       revisarVidas()
}//COMBATE DEL JUEGO

function revisarVidas(){
    if (victoriasJugador === victoriasEnemigo){
        crearMensajeFinal("Esto fue un empate😮")
    }
    else if (victoriasJugador > victoriasEnemigo){
        crearMensajeFinal("🥳🎉FELICITACIONES! Ganaste🎉🥳")
    }
    else{
        crearMensajeFinal("🥲LO SIENTO, PERDISTE🥲")
    }

}//REVISACION DE VIDAS

function crearMensaje(resultado){

    let nuevoAtaqueDelJugador = document.createElement("p")
    let nuevoAtaqueDelEnemigo = document.createElement("p")

    sectionMensaje.innerHTML = resultado
    nuevoAtaqueDelJugador.innerHTML = indexAtaqueJugador
    nuevoAtaqueDelEnemigo.innerHTML = indexAtaqueEnemigo

    ataquesDeljugador.appendChild(nuevoAtaqueDelJugador)
    ataquesDelEnemigo.appendChild(nuevoAtaqueDelEnemigo)
}//MENSAJE CON JAVASCRIPT

function crearMensajeFinal(resultadoFinal){
    sectionMensaje.innerHTML=resultadoFinal

    botonFuerza.disabled = true
    botonExplosion.disabled = true
    botonHielo.disabled = true
    sectionReiniciar.style.display = 'block'//disabled sirve para desabilitar los botones

}//RESULTADO FINAL

function reiniciarJuego(){
    location.reload()
}//BOTON DE REINICIO

function aleatorio(min, max) {
    return Math.floor(Math.random() * (max - min + 1) + min)
  }//FUNCION PARA ELEGIR ENEMIGO ALEATORIO
  
window.addEventListener("load", iniciarJuego)//sirve para que js este arriba en (HEAD)