add fishy

index.html

@@ -11,7 +11,7 @@
 
         .rod {
             float: right;
-            width: 25px;
+            width: 50px;
             height: 300px;
             border: 1px solid black;
             background-color: lightblue;
@@ -52,7 +52,9 @@
         }
 
         .fish {
-
+            width: 50px;
+            position: fixed;
+            z-index: 10;
         }
     </style>
 </head>
@@ -60,14 +62,15 @@
 
 <div id="root">
     <div class="rod">
-        <p class="hook" :style="'margin-bottom: '+force*2+'px'">
+        <p class="hook" :style="'margin-bottom: '+force*2+'px'"></p>
+        <img v-if="fish" :src="fish.sprite" alt="fish.sprite" class="fish">
     </div>
 
     {{ force }} | {{ pull }} | {{ intervalID }}<br>
     <div class="pull" v-on:pointerdown="pull = true" v-on:pointerup="pull = false">
         <span>PULL</span>
     </div>
-    <a href="javascript:">let there be fish</a>
+    <a href="javascript:" v-on:click="deployFish()" v-if="!fish">let there be fish</a>
 </div>
 </div>
 
@@ -82,14 +85,18 @@
             return {
                 force: 0,
                 pull: false,
+                pullRate: 1.5,
+                dropRate: 2.5,
                 intervalID: null,
+                fishMovementIntervalID: null,
                 fish: null,
                 fishies: [
                     {
                         name: 'Freddy the fishy',
-                        strength: 1,
-                        quirky: false,
-                        points: 100
+                        strength: 3,
+                        quirkyness: 100,
+                        points: 100,
+                        sprite: './assets/fishTile_074.png'
                     }
                 ]
             }
@@ -102,13 +109,13 @@
                 if (vue.pull) {
                     vue.intervalID = setInterval(function () {
                         if (vue.force < 125) {
-                            vue.force = Number(vue.force) + 1;
+                            vue.force = Number(vue.force) + vue.pullRate;
                         }
                     }, 50);
                 } else {
                     vue.intervalID = setInterval(function () {
                         if (vue.force >= 0.0) {
-                            vue.force = Number(vue.force) - 2;
+                            vue.force = Number(vue.force) - vue.dropRate;
                         }
 
                         if (vue.force < 0.7) {
@@ -123,7 +130,16 @@
                 this.force = Number(this.force) + 0.5;
             },
             deployFish() {
-                this.fish = this.fishies.random;
+                this.fish = this.fishies.random();
+                this.startFishLifecycle();
+            },
+            startFishLifecycle() {
+                let vue = this;
+                this.fish.position = 0;
+                
+                this.fishMovementIntervalID = setInterval(() => {
+                    
+                }, 50);
             }
         }
     };