Monster game!!!

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 + "%"};
+    },
+  }
+})

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>
+</html>