// 1. convert monster and hero variables data into a monster and hero object
// 2. pass the whole object into the renderCharacter function
// 3. update renderCharacter function to accepts a single paramater that will be the object
//    and use the attributes of the object for name, emoji etc... 
const heroElementId = "hero";
const heroName = "Wizard";
const heroEmoji = "🧙";
const heroHealth = 60;
const heroDiceRoll = 6;

const monsterElementId = "monster";
const monsterName = "Spider";
const monsterEmoji = "️️🕷";
const monsterHealth = 10;
const monsterDiceRoll = 2;

function renderCharacter(elementId, name, emoji, health, diceRoll) {
   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"><div class="dice"> ${diceRoll} </div></div>
    </div>`;  
}

renderCharacter(heroElementId, heroName, heroEmoji, heroHealth, heroDiceRoll);
renderCharacter(monsterElementId, monsterName, monsterEmoji, monsterHealth, monsterDiceRoll);