implement restart game, surrender

Cristiano Magro

2024-12-27 08ed4002fa471b60ac572a2ecae48d17310d0512

implement restart game, surrender

some fix

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

@@ -13,9 +13,15 @@
  },
  computed: {
    monsterBarStyle() {
      if (this.monsterHealth < 0) {
        return { width: "0%" };
      }
      return { width: this.monsterHealth + "%" };
    },
    playerBarStyle() {
      if (this.playerHealth < 0) {
        return { width: "0%" };
      }
      return { width: this.playerHealth + "%" };
    },
    mayUseSpecialAttack() {
@@ -23,15 +29,15 @@
    },
  },
  watch: {
    playerHealt(value) {
    playerHealth(value) {
      if (value <= 0 && this.monsterHealth <= 0) {
        this.winner = "draw";
      } else if (value <= 0) {
        this.winner = "moster";
        this.winner = "monster";
      }
    },
    monsterHealth(value) {
      if (value <= 0 && this.playerHealt <= 0) {
      if (value <= 0 && this.playerHealth <= 0) {
        this.winner = "draw";
      } else if (value <= 0) {
        this.winner = "player";
@@ -39,6 +45,12 @@
    },
  },
  methods: {
    startGame() {
      this.playerHealth = 100;
      this.monsterHealth = 100;
      this.currentRound = 0;
      this.winner = null;
    },
    attackMonster() {
      this.currentRound++;
      const attackValue = getRandomValue(5, 12);
@@ -65,6 +77,9 @@
      }
      this.attackPlayer();
    },
    surrender(){
        this.winner = 'monster';
    }
  },
});


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

@@ -31,17 +31,18 @@
      </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-if="winner === 'monster'">You lost!</h3>
        <h3 v-else-if="winner === 'player'">You won!</h3>
        <h3 v-else>It's a Draw</h3>
        <button @click="startGame">Start new game</button>
      </section>
      <section id="controls">
      <section id="controls" v-else>
        <button @click="attackMonster">ATTACK</button>
        <button @click="specialAttackMonster" :disabled="mayUseSpecialAttack">
          SPECIAL ATTACK
        </button>
        <button @click="healPlayer">HEAL</button>
        <button>SURRENDER</button>
        <button @click="surrender">SURRENDER</button>
      </section>
      <section id="log" class="container">
        <h2>Battle Log</h2>