import characterData from "./data";
import Character from "./Character";

let monstersArray = ["spider", "scorpion", "dragon"];

function getNextMonster() {
    const monsterData = characterData[monstersArray.shift()];
    return monsterData ? new Character(monsterData) : {};
}

function render() {
    document.getElementById(hero.elementId).innerHTML = hero.getTemplate();
    document.getElementById(monster.elementId).innerHTML = monster.getTemplate(); 
}

function attackPhase() {
    
    const heroAttackScore = hero.rollDice(); 
    const monsterAttackScore = monster.rollDice();

    hero.takeDamage(monsterAttackScore);
    monster.takeDamage(heroAttackScore);
    
    if(hero.dead) {
        console.log("Our hero is dead");
    }
    if(monster.dead) {
        // use a set timeout to wait for 1 second before calling
        // next monster
        // you'll need to run render() again after you call getNextMonster
        monster = getNextMonster();
    }
    
    render();
}


const hero = new Character(characterData.hero);
let monster = getNextMonster();

render();

document.getElementById("attack-button").onclick = attackPhase;