return `<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">
${diceElementArray.join("")}
</div>
</div>`;
} ;
};
const hero = new Character(characterData.hero);
const monster = new Character(characterData.monster);
document.getElementById(hero.elementId).innerHTML = hero.getTemplate();
document.getElementById(monster.elementId).innerHTML = monster.getTemplate();
// 1. Make the hero and the monster roll the dice when we click the attack button
// 2. Rerender both the hero and the monster after
document.getElementById("attack-button").onclick = function() {
document.getElementById(hero.elementId).innerHTML = hero.getTemplate();
document.getElementById(monster.elementId).innerHTML = monster.getTemplate();
}
import characterData from "./data";
import { getDiceRollArray, sumArray } from "./utils";
function Character(data) {
Object.assign(this, data);
this.currentDiceRole = [];
this.rollDice = function() {
this.currentDiceRole = getDiceRollArray(this.diceCount);
return sumArray(this.currentDiceRole);
};
this.getDiceElementArray = function() {
return this.currentDiceRole.map((num) => `<div class="dice">${num}</div>`);
};
this.getTemplate = function() {
const { name, emoji, health } = this;
const diceElementArray = this.getDiceElementArray();