PLAYER = 0;
MONSTER = 1;

var app = new Vue({
  el: '#app',
  data: {
    pHP: 100,
    mHP: 100,
    gameOn: false,
    logs: [],
  },
  watch: {
    pHP(value){
      if (value <= 0){
        alert("You lose");
        this.giveUp();
      }
    },
    mHP(value){
      if (value <= 0){
        alert("You Win!");
        this.giveUp();
      }
    }
  },
  methods:{
    start(){
      this.gameOn = true;
      this.mHP = 100;
      this.pHP = 100;
      this.logs = [];
    },
    playerAttack(){
      console.log("player Attack");
      var dmg = this.getRandomInt(1, 10);
      var log = {attacker: 'player', dmg: dmg}
      this.mHP -= dmg;
      this.logs.unshift(log);
      this.monsterAttack();
    },
    specialAttack(){
      console.log("special Attack");
      var dmg = this.getRandomInt(1, 20);
      var log = {attacker: 'player', dmg: dmg}
      this.mHP -= dmg;
      this.logs.unshift(log);
      this.monsterAttack();
    },
    heal(){
      console.log("heal");
      var hp = this.getRandomInt(1, 10);
      this.pHP += hp;
      this.monsterAttack();
    },
    giveUp(){
      this.gameOn = false;
      this.logs = [];
    },
    monsterAttack(){
      console.log("attacked");
      var dmg = this.getRandomInt(1, 10);
      var log = { attacker: 'monster', dmg: dmg}
      this.pHP -= dmg;
      this.logs.unshift(log);
    },
    getRandomInt(min, max) {
      return Math.floor(Math.random() * (max - min + 1)) + min;
    }
  },
  computed: {

    mHPStyle(){
      return {width: this.mHP + "%"};
    },
    pHPStyle(){
      return {width: this.pHP + "%"};
    },
  }
})