app.js

function getRandomNumber(min, max) {
  return Math.floor(Math.random() * (max - min)) + min;
}

const app = Vue.createApp({
  data() {
    return{
      playerHealth: 100,
      monsterHealth: 100,
      currentRound: 0,
      winner: null,
      logMessages: []
    };
  },
  computed: {
    monsterHealthStatusBar() {
      if (this.monsterHealth < 0) {
        return {width: '0%'}
      }
      else {
        return {width: this.monsterHealth + '%'}
      }
    },
    playerHealthStatusBar() {
      if (this.playerHealth < 0) {
        return {width: '0%'}
      } else{
        return {width: this.playerHealth + '%'}
      }
    },
    mayUseSpecialAttack(){
      return this.currentRound % 3 !==0
    }
  },
  watch: {
    playerHealth(value){
      if (value <=0) {
        this.playerHealth = 0;
      }
      if (value <=0 && this.monsterHealth <=0) {
        // A draw
        this.winner = 'draw'
      } else if (value <= 0) {
        // player lost
        this.winner = 'monster'
      }
    },
    monsterHealth(value) {
      if (value <=0) {
        this.monsterHealth = 0;
      }
      if (value <=0 && this.playerHealth <=0) {
        // A draw
        this.winner = 'draw'
      } else if (value <= 0) {
        // monster lost
        this.winner = 'player'
      }
    }
  },
  methods: {
    startGame() {
      this.playerHealth = 100;
      this.monsterHealth = 100
      this.winner = null;
      this.currentRound = 0;
      this.logMessages = [];
    },
    attackMonster() {
      // calculate the amount of damage to give out and the
      // amount of monster health to reduce
      // Math.random() * (max - min) + min - gives random number between 5 and 12
      this.currentRound++;
      const attackValue = getRandomNumber(5, 12);
      this.monsterHealth -= attackValue;
      this.addLogMessage('player', 'attack', attackValue);
      this.attackPlayer();
    },

    attackPlayer() {
      const attackValue = getRandomNumber(8, 15);
      this.playerHealth -= attackValue
      this.addLogMessage('monster', 'attack', attackValue);
    },

    specialAttackMonster() {
      this.currentRound++;
      const attackValue = getRandomNumber(10, 25);
      this.monsterHealth -= attackValue;
      this.addLogMessage('player', 'attack', attackValue);
      this.attackPlayer();
    },

    healPlayer() {
      this.currentRound++;
      const healValue = getRandomNumber(8, 20);
      if (this.playerHealth + healValue > 100 ) {
        this.playerHealth = 100;
      } else {
        this.playerHealth += healValue
      }
      this.addLogMessage('player', 'heal', healValue);
      this.attackPlayer();
    },

    surrender() {
      this.winner = 'monster'
      this.playerHealth = 0
    },

    addLogMessage(who, what, value) {
      this.logMessages.unshift({
        actionBy: who,
        actionType: what,
        actionValue: value
      });
    }


  },
});

app.mount('#game');