add a win dialog

prj-monster-01-starting-setup/app.js

@@ -11,6 +11,7 @@ const app = Vue.createApp({
             monsterHealth: 100,
             battleLog: [],
             currentRound: 0,
+            winner: null,
         };
     },
     computed: {
@@ -23,6 +24,43 @@ const app = Vue.createApp({
         specialAttackAllowed() {
             return this.currentRound % 3 !== 0;
         },
+        playerWon() {
+            if (this.winner === "player") {
+                return true;
+            } else {
+                return false;
+            }
+        },
+        monsterWon() {
+            if (this.winner === "monster") {
+                return true;
+            } else {
+                return false;
+            }
+        },
+        draw() {
+            if (this.winner === "draw") {
+                return true;
+            } else {
+                return false;
+            }
+        },
+    },
+    watch: {
+        playerHealth(value) {
+            if (value <= 0 && this.monsterHealth <= 0) {
+                this.winner = "draw";
+            } else if (value <= 0) {
+                this.winner = "monster";
+            }
+        },
+        monsterHealth(value) {
+            if (value <= 0 && this.playerHealth <= 0) {
+                this.winner = "draw";
+            } else if (value <= 0) {
+                this.winner = "player";
+            }
+        },
     },
     methods: {
         attackMonster() {

prj-monster-01-starting-setup/index.html

@@ -22,6 +22,12 @@
                 <div class="healthbar__value" :style="monsterBarStyles"></div>
             </div>
         </section>
+        <section v-if="winner" class="container">
+            <h2>Game Over!</h2>
+            <h3 v-if="monsterWon">You lost!</h3>
+            <h3 v-if="playerWon">You won!</h3>
+            <h3 v-if="draw">It's a draw'!</h3>
+        </section>
         <section id="player" class="container">
             <h2>Your Health</h2>
             <div class="healthbar">