implement game over by watch

Cristiano Magro

2024-12-27 807972024cb2e4c0f2235d7a8941e201ea40ca2c

implement game over by watch

 04 - monster slayer game/prj-monster-01-starting-setup/app.js

@@ -8,6 +8,7 @@
      playerHealth: 100,
      monsterHealth: 100,
      currentRound: 0,
      winner: null,
    };
  },
  computed: {
@@ -21,7 +22,22 @@
      return this.currentRound % 3 !== 0;
    },
  },
  watch: {},
  watch: {
    playerHealt(value) {
      if (value <= 0 && this.monsterHealth <= 0) {
        this.winner = "draw";
      } else if (value <= 0) {
        this.winner = "moster";
      }
    },
    monsterHealth(value) {
      if (value <= 0 && this.playerHealt <= 0) {
        this.winner = "draw";
      } else if (value <= 0) {
        this.winner = "player";
      }
    },
  },
  methods: {
    attackMonster() {
      this.currentRound++;

 04 - monster slayer game/prj-monster-01-starting-setup/index.html

@@ -29,6 +29,12 @@
          <div class="healthbar__value" :style="playerBarStyle"></div>
        </div>
      </section>
      <section class="container" v-if="winner">
        <h2>Game Over!</h2>
        <h3 v-if="winner == 'monster'">You lost!</h3>
        <h3 v-else-if="winner == 'player'">You won!</h3>
        <h3 v-else>It's a Draw</h3>
      </section>
      <section id="controls">
        <button @click="attackMonster">ATTACK</button>
        <button @click="specialAttackMonster" :disabled="mayUseSpecialAttack">