fishy fix i guess;

3 years ago · 873942b592
3 changed files with 142 additions and 128 deletions
--- a/css/app.css
+++ b/css/app.css
@ -0,0 +1,53 @@
				@@ -0,0 +1,53 @@
+body {
+    font-family: Arial, sans-serif;
+}
+
+.rod {
+    float: right;
+    width: 50px;
+    height: 300px;
+    border: 1px solid black;
+    background-color: lightblue;
+    padding: 0;
+
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+
+    position: relative;
+}
+
+.hook {
+    background-color: sandybrown;
+    width: 100%;
+    height: 50px;
+    margin: 0;
+}
+
+.pull {
+    background-color: cornflowerblue;
+    width: 250px;
+    height: 250px;
+    border-radius: 15px;
+    border: 5px solid darkblue;
+
+    display: flex;
+    align-content: space-around;
+    justify-content: space-around;
+    align-items: center;
+
+    font-size: 4.7em;
+    user-select: none;
+    color: white;
+}
+
+.pull:active {
+    background-color: #a4bbe5;
+    margin-top: 3px;
+}
+
+.fish {
+    width: 50px;
+    position: absolute;
+    z-index: 10;
+}
--- a/index.html
+++ b/index.html
@ -4,147 +4,25 @@
				@@ -4,147 +4,25 @@
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>fishy</title>
-    <style>
-        body {
-            font-family: Arial,sans-serif;
-        }
-
-        .rod {
-            float: right;
-            width: 50px;
-            height: 300px;
-            border: 1px solid black;
-            background-color: lightblue;
-            padding: 0;
-
-            display: flex;
-            flex-direction: column;
-            justify-content: flex-end;
-        }
-
-        .hook {
-            background-color: sandybrown;
-            width: 100%;
-            height: 50px;
-            margin: 0;
-        }
-
-        .pull {
-            background-color: cornflowerblue;
-            width: 250px;
-            height: 250px;
-            border-radius: 15px;
-            border: 5px solid darkblue;
-
-            display: flex;
-            align-content: space-around;
-            justify-content: space-around;
-            align-items: center;
-
-            font-size: 4.7em;
-            user-select: none;
-            color: white;
-        }
-
-        .pull:active {
-            background-color: #a4bbe5;
-            margin-top: 3px;
-        }
-
-        .fish {
-            width: 50px;
-            position: fixed;
-            z-index: 10;
-        }
-    </style>
+    <link rel="stylesheet" href="css/app.css">
 </head>
 <body>

 <div id="root">
    <div class="rod">
-        <p class="hook" :style="'margin-bottom: '+force*2+'px'"></p>
-        <img v-if="fish" :src="fish.sprite" alt="fish.sprite" class="fish">
+        <p class="hook" :style="'margin-bottom: ' + force * 2 + 'px'"></p>
+        <img v-if="fishy" :src="fishy.sprite" alt="fishy.sprite" class="fish" :style="'bottom: '+fishy.position+'px'">
    </div>

-    {{ force }} | {{ pull }} | {{ intervalID }}<br>
+    {{ force }} | {{ pull }} | {{ intervalID }} | {{ fishy ? fishy.position +' '+ fishy.name: '' }}<br>
    <div class="pull" v-on:pointerdown="pull = true" v-on:pointerup="pull = false">
        <span>PULL</span>
    </div>
-    <a href="javascript:" v-on:click="deployFish()" v-if="!fish">let there be fish</a>
+    <a href="javascript:" v-on:click="deployFish()" v-if="!fishy">let there be fish</a>
 </div>
 </div>

 <script src="https://unpkg.com/vue@next"></script>
-<script type="text/javascript">
-    Array.prototype.random = function () {
-        return this[Math.floor((Math.random()*this.length))];
-    }
-
-    const FishApp = {
-        data() {
-            return {
-                force: 0,
-                pull: false,
-                pullRate: 1.5,
-                dropRate: 2.5,
-                intervalID: null,
-                fishMovementIntervalID: null,
-                fish: null,
-                fishies: [
-                    {
-                        name: 'Freddy the fishy',
-                        strength: 3,
-                        quirkyness: 100,
-                        points: 100,
-                        sprite: './assets/fishTile_074.png'
-                    }
-                ]
-            }
-        },
-        watch: {
-            pull() {
-                let vue = this;
-                window.clearInterval(vue.intervalID);
-
-                if (vue.pull) {
-                    vue.intervalID = setInterval(function () {
-                        if (vue.force < 125) {
-                            vue.force = Number(vue.force) + vue.pullRate;
-                        }
-                    }, 50);
-                } else {
-                    vue.intervalID = setInterval(function () {
-                        if (vue.force >= 0.0) {
-                            vue.force = Number(vue.force) - vue.dropRate;
-                        }
-
-                        if (vue.force < 0.7) {
-                            vue.force = 0;
-                        }
-                    }, 50);
-                }
-            }
-        },
-        methods: {
-            pullRod() {
-                this.force = Number(this.force) + 0.5;
-            },
-            deployFish() {
-                this.fish = this.fishies.random();
-                this.startFishLifecycle();
-            },
-            startFishLifecycle() {
-                let vue = this;
-                this.fish.position = 0;
-                
-                this.fishMovementIntervalID = setInterval(() => {
-                    
-                }, 50);
-            }
-        }
-    };
-
-    Vue.createApp(FishApp).mount('#root');
-</script>
+<script src="js/app.js"></script>
 </body>
 </html>
--- a/js/app.js
+++ b/js/app.js
@ -0,0 +1,83 @@
				@@ -0,0 +1,83 @@
+Array.prototype.random = function () {
+    return this[Math.floor((Math.random()*this.length))];
+}
+
+const FishApp = {
+    data() {
+        return {
+            force: 0,
+            pull: false,
+            pullRate: 1.5,
+            dropRate: 2.5,
+            intervalID: null,
+            fishMovementIntervalID: null,
+            fishy: null,
+            fishies: [
+                {
+                    name: 'Freddy the fishy',
+                    strength: 3,
+                    quirkyness: 10,
+                    points: 100,
+                    position: 0,
+                    sprite: './assets/fishTile_074.png'
+                }
+            ]
+        }
+    },
+    watch: {
+        pull() {
+            let vue = this;
+            window.clearInterval(vue.intervalID);
+
+            if (vue.pull) {
+                vue.intervalID = setInterval(function () {
+                    if (vue.force < 125) {
+                        vue.force = Number(vue.force) + vue.pullRate;
+                    }
+                }, 50);
+            } else {
+                vue.intervalID = setInterval(function () {
+                    if (vue.force >= 0.0) {
+                        vue.force = Number(vue.force) - vue.dropRate;
+                    }
+
+                    if (vue.force < 0.7) {
+                        vue.force = 0;
+                    }
+                }, 50);
+            }
+        }
+    },
+    methods: {
+        pullRod() {
+            this.force = Number(this.force) + 0.5;
+        },
+        deployFish() {
+            this.fishy = this.fishies.random();
+            this.startFishLifecycle();
+        },
+        startFishLifecycle() {
+            let vue = this;
+            this.fishy.position = 0;
+
+            this.fishMovementIntervalID = setInterval(() => {
+                let up = Math.floor(Math.random() * 100) < 10;
+                console.log(up);
+
+                if (up) {
+                    if (vue.fishy.position < 250) {
+                        vue.fishy.position += vue.fishy.quirkyness;
+                    } else {
+                        vue.fishy.position -= vue.fishy.quirkyness * 4;
+                    }
+                } else {
+                    if (vue.fishy.position < 0) {
+                        vue.fishy.position = Number(vue.fishy.position) - (vue.fishy.quirkyness * 4);
+                    }
+                }
+            }, 100);
+        }
+    }
+};
+
+Vue.createApp(FishApp).mount('#root');