idle-buildup/js/app.js

let game = new Vue({
    el: '#root',
    data: {
        money: 0,
        buildings: [
            {
                name: 'TestBuilding',
                intervalInSeconds: 10,
                amount: 1000,
                level: 0,
                price: 100,
                isOwned: false
            }
        ],
        loadedIntervals: []
    },
    created() {
        this.money = this.getSavedMoney();
        this.saveMoney();

        this.reloadBuildings();
    },
    methods: {
        saveMoney() {
            localStorage.setItem('money', String(this.money));
            return this.getSavedMoney();
        },

        getSavedMoney() {
            this.money = Number(localStorage.getItem('money') ?? 0);
            return this.money;
        },

        add(amount = 0) {
            this.money += amount;
            return this.saveMoney();
        },

        sub(amount = 0) {
            this.money -= amount;
            return this.saveMoney();
        },

        getAmount() {
            return this.money;
        },

        getAmountFormatted() {
            return Intl.NumberFormat('de-DE', {style: 'currency', currency: 'EUR'}).format(this.money);
        },

        reloadBuildings() {
            this.killIntervals();

            let game = this;
            this.buildings.forEach((building) => {
                if (building.isOwned) {
                    this.loadedIntervals.push(
                        setInterval(() => {
                            game.add(building.amount);
                        }, building.intervalInSeconds * 1000)
                    );

                    this.loadedIntervals.push(
                        setInterval(() => {
                            if (building.loader < 100) {
                                building.loader += 10;
                            } else {
                                building.loader = 10;
                            }

                            game.$forceUpdate()
                        }, building.intervalInSeconds / 10 * 1000)
                    )
                }
            });
        },

        killIntervals() {
            this.buildings.forEach((building) => {
                building.loader = 0;
            });

            this.loadedIntervals.forEach((interval) => {
                clearInterval(interval)
            });
        },

        buyBuilding(building) {
            if (this.money >= building.price) {
                this.sub(building.price);
                building.isOwned = true;

                this.upgradeBuilding(building, true);
                this.saveBuildings();
            } else {
                alert('Not enough money');
            }
        },

        buyUpgrade(building) {
            if (building.level === 'MAX') {
                alert('Already at MAX-Level');
                return false;
            }

            if (this.money >= building.price) {
                this.sub(building.price);
                this.upgradeBuilding(building);
            } else {
                alert('Not enough money');
            }
        },

        upgradeBuilding(building, first = false) {
            this.killIntervals();

            if (building.level < 15) {
                building.level++;
            } else {
                building.level = 'MAX';
            }

            building.price = Number(building.price * 1.25).toFixed(2);

            if (first === false) {
                building.intervalInSeconds = Number(building.intervalInSeconds * 0.95).toFixed(2);
            }

            this.reloadBuildings();
            this.saveBuildings();
        },

        saveBuildings() {
            localStorage.setItem('buildings', JSON.stringify(this.buildings));
        },

        loadBuildings: function () {
            let savedBuildings = JSON.parse(localStorage.getItem('buildings'));

            if (savedBuildings.length > 0) {
                this.buildings = savedBuildings;
            }
        }
    },
});