diff --git a/css/app.css b/css/app.css new file mode 100644 index 0000000..881fd1a --- /dev/null +++ b/css/app.css @@ -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; +} diff --git a/index.html b/index.html index 44b5658..7bf7e9f 100644 --- a/index.html +++ b/index.html @@ -4,147 +4,25 @@ fishy - +
-

- fish.sprite +

+ fishy.sprite
- {{ force }} | {{ pull }} | {{ intervalID }}
+ {{ force }} | {{ pull }} | {{ intervalID }} | {{ fishy ? fishy.position +' '+ fishy.name: '' }}
PULL
- let there be fish + let there be fish
- + \ No newline at end of file diff --git a/js/app.js b/js/app.js new file mode 100644 index 0000000..08af480 --- /dev/null +++ b/js/app.js @@ -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');