import characterData from "./data";
import { getDiceRollArray, sumArray } from "./utils";

// 1. Refactor the getTemplate function as a method 
//    we'll nedd to replace 'hero' with 'this' through the code
// 2. Update the final line so it calls the new method rather than the function
function getTemplate() {
    const { name, emoji, health } = hero; 
    const diceElementArray = hero.getDiceElementArray();
    
    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}
            </div>
        </div>`;
}

function Character(data) {
    
    Object.assign(this, data);
    
    this.currentDiceRole = [];
    
    this.rollDice = function() {
        this.currentDiceRole = getDiceRollArray(this.diceCount);    
    };
    
    this.getDiceElementArray = function() {
        return this.currentDiceRole.map(function(num) {
            return `<div class="dice">${num}</div>`
        }); 
    };
    
};

const hero = new Character(characterData.hero);
document.getElementById(hero.elementId).innerHTML = getTemplate();