// move the getDiceRollArray and sumArray functions into the new utils file
// export at the bottom of the utisl file and import them at the top of this one
import characters from "./data";
const { hero, monster } = characters;

const getDiceRollArray = (diceCount) =>
    new Array(diceCount).fill(1).map(() => 
        Math.floor(Math.random() * 6) + 1
    );

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

const sumArray = arr => arr.reduce((acc, curr) => acc + curr, 0);

function renderCharacter(character) {
    
    const { elementId, name, emoji, health, diceCount } = character;
    const diceRollArray = getDiceRollArray(diceCount); 
    const diceString = getDice(diceRollArray);
  
    const sum = sumArray(diceRollArray);
    console.log(sum);
  
    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);