import characters from "./data";
const { hero, monster } = characters;
// add a new Array() fill with 1s and use map directly on
// the array instead of declare any new variables inside this function
function getDiceRollArray(diceCount) {
let newDiceRolls = [];
for(let i = 0; i < diceCount; i++) {
newDiceRolls.push(Math.floor(Math.random() * 6) + 1);
}
return newDiceRolls;
}
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);