// 1. call the getDiceRollArray directly from the renderCharacter function
// 2. pass the return value (diceRollArray) directly into getDice

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

function getDice(diceCount) {    
    const diceRollArray = getDiceRollArray(diceCount); 
    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;
    let diceString = getDice(diceCount);
      
    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);