From d35c69421640a458d16c64d7f4a556ad9d6cdbd3 Mon Sep 17 00:00:00 2001
From: Tyrel Souza <tyrelsouza@gmail.com>
Date: Sat, 14 Apr 2018 00:08:16 -0400
Subject: [PATCH] Monster game!!!

---
 proj_1_monster/app.js     | 79 +++++++++++++++++++++++++++++++++++++++
 proj_1_monster/index.html | 40 +++++++++++++-------
 2 files changed, 105 insertions(+), 14 deletions(-)
 create mode 100644 proj_1_monster/app.js

diff --git a/proj_1_monster/app.js b/proj_1_monster/app.js
new file mode 100644
index 0000000..01afe6c
--- /dev/null
+++ b/proj_1_monster/app.js
@@ -0,0 +1,79 @@
+PLAYER = 0;
+MONSTER = 1;
+
+var app = new Vue({
+  el: '#app',
+  data: {
+    pHP: 100,
+    mHP: 100,
+    gameOn: false,
+    logs: [],
+  },
+  watch: {
+    pHP(value){
+      if (value <= 0){
+        alert("You lose");
+        this.giveUp();
+      }
+    },
+    mHP(value){
+      if (value <= 0){
+        alert("You Win!");
+        this.giveUp();
+      }
+    }
+  },
+  methods:{
+    start(){
+      this.gameOn = true;
+      this.mHP = 100;
+      this.pHP = 100;
+      this.logs = [];
+    },
+    playerAttack(){
+      console.log("player Attack");
+      var dmg = this.getRandomInt(1, 10);
+      var log = {attacker: 'player', dmg: dmg}
+      this.mHP -= dmg;
+      this.logs.unshift(log);
+      this.monsterAttack();
+    },
+    specialAttack(){
+      console.log("special Attack");
+      var dmg = this.getRandomInt(1, 20);
+      var log = {attacker: 'player', dmg: dmg}
+      this.mHP -= dmg;
+      this.logs.unshift(log);
+      this.monsterAttack();
+    },
+    heal(){
+      console.log("heal");
+      var hp = this.getRandomInt(1, 10);
+      this.pHP += hp;
+      this.monsterAttack();
+    },
+    giveUp(){
+      this.gameOn = false;
+      this.logs = [];
+    },
+    monsterAttack(){
+      console.log("attacked");
+      var dmg = this.getRandomInt(1, 10);
+      var log = { attacker: 'monster', dmg: dmg}
+      this.pHP -= dmg;
+      this.logs.unshift(log);
+    },
+    getRandomInt(min, max) {
+      return Math.floor(Math.random() * (max - min + 1)) + min;
+    }
+  },
+  computed: {
+
+    mHPStyle(){
+      return {width: this.mHP + "%"};
+    },
+    pHPStyle(){
+      return {width: this.pHP + "%"};
+    },
+  }
+})
diff --git a/proj_1_monster/index.html b/proj_1_monster/index.html
index 17d14ed..ab080fd 100644
--- a/proj_1_monster/index.html
+++ b/proj_1_monster/index.html
@@ -12,42 +12,54 @@
         <div class="small-6 columns">
             <h1 class="text-center">YOU</h1>
             <div class="healthbar">
-                <div class="healthbar text-center" style="background-color: green; margin: 0; color: white;">
-
+                <div class="healthbar text-center" style="background-color: green; margin: 0; color: white;"  :style="pHPStyle">
+                    {{pHP}}
                 </div>
             </div>
         </div>
         <div class="small-6 columns">
             <h1 class="text-center">MONSTER</h1>
             <div class="healthbar">
-                <div class="healthbar text-center" style="background-color: green; margin: 0; color: white;">
-
+                <div class="healthbar text-center" style="background-color: green; margin: 0; color: white;" :style="mHPStyle">
+                    {{mHP}}
                 </div>
             </div>
         </div>
     </section>
-    <section class="row controls">
+    <section class="row controls" v-if="!gameOn">
         <div class="small-12 columns">
-            <button id="start-game">START NEW GAME</button>
+            <button id="start-game" @click="start">START NEW GAME</button>
         </div>
     </section>
-    <section class="row controls">
+    <section class="row controls" v-else>
         <div class="small-12 columns">
-            <button id="attack">ATTACK</button>
-            <button id="special-attack">SPECIAL ATTACK</button>
-            <button id="heal">HEAL</button>
-            <button id="give-up">GIVE UP</button>
+            <button id="attack" @click="playerAttack">ATTACK</button>
+            <button id="special-attack" @click="specialAttack">SPECIAL ATTACK</button>
+            <button id="heal" @click="heal">HEAL</button>
+            <button id="give-up" @click="giveUp">GIVE UP</button>
         </div>
     </section>
     <section class="row log">
         <div class="small-12 columns">
             <ul>
-                <li>
+                <template v-for="log in logs">
+                    <template v-if="log.attacker == 'player'">
+                      <li class="player-turn">
+                          player hits monster for {{log.dmg}} damage.
+                      </li>
+                    </template>
+                    <template v-else>
+                      <li class="monster-turn">
+                          monster hits player for {{log.dmg}} damage.
+                      </li>
+                    </template>
+                </template>
 
-                </li>
             </ul>
         </div>
     </section>
 </div>
+<script src="app.js" charset="utf-8"></script>
+
 </body>
-</html>
\ No newline at end of file
+</html>