import characters from "./data";
const { hero, monster } = characters;

// these two functions now have function and return written in them twice
// it's not really adding much let's use arrow functions to write cleaner versions
function getDiceRollArray(diceCount) {
    return new Array(diceCount).fill(1).map(function(){
        return Math.floor(Math.random() * 6) + 1
    });
}

function getDice(diceRollArray) {   
    return diceRollArray.map(function(num){
        return `<div class="dice">${num}</div>`
    }).join("");
}

function renderCharacter(character) {
    
    const { elementId, name, emoji, health, diceCount } = character;
    const diceRollArray = getDiceRollArray(diceCount); 
    const diceString = getDice(diceRollArray);
      
    document.getElementById(elementId).innerHTML = `
        <div class="character">
            <div class="name">${name}</div>
            <div class="emoji">️${emoji}</div>
            <div class="health">health: <b>${health}</b></div>
            <div class="dice-container">
                ${diceString}
            </div>
        </div>`; 
}


document.getElementById("attack-button").onclick = function() {
    renderCharacter(hero);
    renderCharacter(monster); 
}

renderCharacter(hero);
renderCharacter(monster);