From 0d84a18f2e4aef0b0c0a683d88fcab91ac51c706 Mon Sep 17 00:00:00 2001
From: Andreas Zweili <andreas@2li.ch>
Date: Fri, 22 Jan 2021 19:50:36 +0100
Subject: [PATCH] add a win dialog

---
 prj-monster-01-starting-setup/app.js     | 38 ++++++++++++++++++++++++
 prj-monster-01-starting-setup/index.html |  6 ++++
 2 files changed, 44 insertions(+)

diff --git a/prj-monster-01-starting-setup/app.js b/prj-monster-01-starting-setup/app.js
index 8745c59..973fe89 100644
--- a/prj-monster-01-starting-setup/app.js
+++ b/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() {
diff --git a/prj-monster-01-starting-setup/index.html b/prj-monster-01-starting-setup/index.html
index 5d02080..7d8cf34 100644
--- a/prj-monster-01-starting-setup/index.html
+++ b/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">