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

function getDiceRollArray(diceCount) {
    let newDiceRolls = [];
    for(let i = 0; i < diceCount; i++) {
        newDiceRolls.push(Math.floor(Math.random() * 6) + 1);
    }
    return newDiceRolls;
}

// convert this loop so it doesn't declare any new variables or constants
// use a .map() method
function getDice(diceRollArray) {   
    let diceString = '';
    for(let num of diceRollArray) {
        diceString += `<div class="dice">${num}</div>`;
    } 
    return diceString;
    
}

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);