blakcoder2017
diff --git a/‎app.js
Lines changed: 12 additions & 7 deletions b/‎app.js
Lines changed: 12 additions & 7 deletions
diff --git a/‎img/bag-burst.png
13.6 KB b/‎img/bag-burst.png
13.6 KB
diff --git a/‎img/bag.png
6.98 KB b/‎img/bag.png
6.98 KB
diff --git a/‎index.html
Lines changed: 13 additions & 11 deletions b/‎index.html
Lines changed: 13 additions & 11 deletions
diff --git a/‎styles.css
Lines changed: 24 additions & 8 deletions b/‎styles.css
Lines changed: 24 additions & 8 deletions
@@ -1,15 +1,20 @@
 new Vue({
     el: '#vue-app',
     data: {
-        characters: ['Mario', 'Luigi', 'Yoshi', 'Bowser'],
-        ninjas: [
-            { name: 'Ryu', age: 25 },
-            { name: 'Yoshi', age: 35 },
-            { name: 'Ken', age: 55 }
-        ]
+        health: 100,
+        ended: false
     },
     methods: {
-
+        punch: function(){
+            this.health -= 10;
+            if ( this.health <= 0 ){
+                this.ended = true;
+            }
+        },
+        restart: function(){
+            this.health = 100;
+            this.ended = false;
+        }
     },
     computed: {
 
 
@@ -8,17 +8,19 @@
     </head>
     <body>
         <div id="vue-app">
-            <h1>Looping through lists</h1>
-            <ul>
-                <li v-for="character in characters">{{ character }}</li>
-            </ul>
-            <ul>
-                <li v-for="(ninja, index) in ninjas">{{ index }} . {{ ninja.name }} - {{ ninja.age }}</li>
-            </ul>
-            <template v-for="(ninja, index) in ninjas">
-                <h3>{{ index }} . {{ ninja.name }}</h3>
-                <p>Age - {{ ninja.age }}</p>
-            </template>
+            <!-- bag image -->
+            <div id="bag" v-bind:class="{ burst: ended }"></div>
+
+            <!-- bag health bar -->
+            <div id="bag-health">
+                <div v-bind:style="{ width: health + '%' }"></div>
+            </div>
+
+            <!-- game control buttons -->
+            <div id="controls">
+                <button v-on:click="punch" v-show="!ended">Punch</button>
+                <button v-on:click="restart">Restart</button>
+            </div>
         </div>
     </body>
 
 
@@ -1,11 +1,27 @@
-.error{
-    background: red;
-    padding: 10px;
-    color: white;
+#bag{
+    width: 200px;
+    height: 500px;
+    margin: 0 auto;
+    background: url(/img/bag.png) center no-repeat;
+    background-size: 80%;
 }
 
-.success{
-    background: green;
-    padding: 10px;
-    color: white;
+#bag.burst{
+    background-image: url(/img/bag-burst.png);
+}
+
+#bag-health{
+    width: 200px;
+    border: 2px solid #000;
+    margin: 0 auto 20px auto;
+}
+
+#bag-health div{
+    height: 20px;
+    background: crimson
+}
+
+#controls{
+    width: 120px;
+    margin: 0 auto;
 }