const { hero, monster } = characters;
const getDice = (diceRollArray) =>
diceRollArray.map(
(num) => `<div class="dice">${num}</div>`
).join("");
// call the getHealthBar function to get the progress bar html
// and add to the chacter html template
// just before the 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);
import characters from "./data";
import { getDiceRollArray, sumArray } from "./utils";