fishy/js/app.js

Array.prototype.random = function () {
    return this[Math.floor((Math.random()*this.length))];
}

const FishApp = {
    data() {
        return {
            score: 0,
            force: 0,
            pull: false,
            pullRate: 2,
            dropRate: 3,
            intervals: {
                forceIntervalID: null,
                fishMovementIntervalID: null
            },
            fishy: null,
            fishiesCaught: [],
            fishies: [
                {
                    name: 'Franz the Flying Fishy',
                    strength: 3,
                    quirkyness: 10,
                    points: 100,
                    position: 0,
                    sprite: './assets/fish/ol/blue.png'
                },
                {
                    name: 'Paul the Pufferfishy',
                    strength: 3,
                    quirkyness: 5,
                    points: 50,
                    position: 200,
                    sprite: './assets/fish/ol/puff.png'
                },
                {
                    name: 'Sandro the Squishyfishy',
                    strength: 3,
                    quirkyness: 15,
                    points: 50,
                    position: 200,
                    sprite: './assets/fish/ol/pink.png'
                }
            ],
            fishyScore: 0
        }
    },
    watch: {
        pull() {
            let vue = this;
            window.clearInterval(vue.intervals.forceIntervalID);

            if (vue.pull) {
                vue.intervals.forceIntervalID = setInterval(function () {
                    if (vue.force < 125) {
                        vue.force = Number(vue.force) + vue.pullRate;
                    }
                }, 50);
            } else {
                vue.intervals.forceIntervalID = setInterval(function () {
                    if (vue.force >= 0.0) {
                        vue.force = Number(vue.force) - vue.dropRate;
                    }

                    if (vue.force < 0.7) {
                        vue.force = 0;
                    }
                }, 50);
            }
        }
    },
    computed: {
        fishyPosition() {
            return this.fishy ? (this.fishy.position / 2) : -200;
        },
        fishyInRange() {
            return (this.force < (this.fishyPosition + 10) && this.force > (this.fishyPosition -10));
        }
    },
    methods: {
        pullRod() {
            this.force = Number(this.force) + 0.5;
        },
        deployFish() {
            this.fishy = this.fishies.random();
            this.fishyScore = 20;
            this.startFishLifecycle();
        },
        startFishLifecycle() {
            let vue = this;
            this.fishy.position = 0;

            this.intervals.fishMovementIntervalID = setInterval(() => {
                let up = Math.floor(Math.random() * 101) <= 55;

                if (up) {
                    if (vue.fishy.position < 250) {
                        vue.fishy.position += vue.fishy.quirkyness;
                    } else {
                        vue.fishy.position -= vue.fishy.quirkyness;
                    }
                } else {
                    if (vue.fishy.position >= vue.fishy.quirkyness) {
                        vue.fishy.position = Number(vue.fishy.position) - vue.fishy.quirkyness;
                    }
                }

                if (vue.fishyScore >= 100) {
                    vue.fishyCaught();
                } else if (vue.fishyInRange) {
                    vue.fishyScore++;
                } else {
                    if (vue.fishyScore > 0) {
                        vue.fishyScore--;
                    } else {
                        vue.fishyFled();
                    }
                }
            }, 100);
        },
        fishyCaught() {
            window.clearInterval(this.intervals.fishMovementIntervalID);

            this.score += this.fishy.points;
            this.fishyCaught.push(this.fishy);

            this.fishy = null;
            this.pull = false;

            iziToast.success({
                title: 'fischi ist jetzt dein freund',
                position: 'topCenter'
            });
        },
        fishyFled() {
            window.clearInterval(this.intervals.fishMovementIntervalID);

            this.fishy = null;
            this.pull = false;

            iziToast.warning({
                title: 'fischi fort!',
                position: 'topCenter'
            });
        }
    }
};

Vue.createApp(FishApp).mount('#root');