idle-buildup/js/app.js

let game = new Vue({
    el: '#root',
    data: {
        version: 0.5,
        resources: {
            gold: 0,
            wood: 0,
            stone: 0,
            iron: 0,
            bricks: 0,
            corn: 0,
            coal: 0,
            planks: 0
        },
        hadResource: {
            wood: false,
            stone: false,
            iron: false,
            bricks: false,
            corn: false,
            coal: false,
            planks: false
        },
        storageNames: null,
        buildings: [
            {
                name: 'Bank',
                resource: 'gold',
                icon: 'medieval_largeCastle',
                level: 1,
                maxLevel: 10,
                isOwned: true,
                isUpgradeable: true,
                amount: 100,
                amountMultiplicator: false,
                intervalInSeconds: 15,
                intervalMultiplicator: false,
                price: 500,
                priceMultiplicator: false,
                amountPerLevel: [100, 250, 500, 750, 1000, 1500, 2000, 2500, 3000, 5000],
                pricePerLevel: [500, 1000, 1500, 2000, 2500, 3000, 3500, 4000, 4500, 5000],
                intervalPerLevel: [15, 25, 30, 45, 60, 90, 90, 120, 120, 120],
            },
            {
                name: 'Lumberjack',
                resource: 'wood',
                icon: 'medieval_lumber',
                level: 0,
                maxLevel: 10,
                isOwned: false,
                isUpgradeable: true,
                amount: 2,
                amountMultiplicator: 1,
                intervalInSeconds: 10,
                intervalMultiplicator: 0.95,
                price: 100,
                priceMultiplicator: 2
            },
            {
                name: 'Carpenter',
                resource: 'planks',
                icon: 'medieval_lumber',
                level: 0,
                maxLevel: 10,
                isOwned: false,
                isUpgradeable: true,
                amount: 5,
                amountMultiplicator: 1,
                intervalInSeconds: 25,
                intervalMultiplicator: 0.80,
                price: 15000,
                priceMultiplicator: 2,
                hasRequirements: true,
                requires: {
                    wood: 2
                }
            },
            {
                name: 'Quarry',
                resource: 'stone',
                icon: 'medieval_mine',
                level: 0,
                maxLevel: 10,
                isOwned: false,
                isUpgradeable: true,
                amount: 2,
                amountMultiplicator: 1,
                intervalInSeconds: 20,
                intervalMultiplicator: 0.95,
                price: 250,
                priceMultiplicator: 2
            },
            {
                name: 'Coal Mine',
                resource: 'coal',
                icon: 'medieval_mine',
                level: 0,
                maxLevel: 10,
                isOwned: false,
                isUpgradeable: true,
                amount: 2,
                amountMultiplicator: 1,
                intervalInSeconds: 20,
                intervalMultiplicator: 0.95,
                price: 600,
                priceMultiplicator: 2
            },
            // Wood is gone when production dies
            {
                name: 'Blacksmith',
                resource: 'iron',
                icon: 'medieval_blacksmith',
                level: 0,
                maxLevel: 10,
                isOwned: false,
                isUpgradeable: true,
                amount: 2,
                amountMultiplicator: 3,
                intervalInSeconds: 20,
                intervalMultiplicator: 0.95,
                price: 1000,
                priceMultiplicator: 2.5,
                hasRequirements: true,
                requires: {
                    stone: 2,
                    coal: 1
                }
            },
            {
                name: 'Farm',
                resource: 'corn',
                icon: 'medieval_farm',
                level: 0,
                maxLevel: 25,
                isOwned: false,
                isUpgradeable: true,
                amount: 5,
                amountMultiplicator: 2,
                price: 500,
                priceMultiplicator: 2,
                intervalInSeconds: 60,
                intervalMultiplicator: 1
            },
        ],
        currentQuest: null,
        loadedIntervals: []
    },
    created() {
        this.storageNames = {
            lastVersion: 'lastVersion',
            resources: 'resources' + this.version,
            hadResource: 'hadResource' + this.version,
            buildings: 'buildings' + this.version,
            currentQuest: 'currentQuest' + this.version
        }

        this.checkVersion();

        this.checkBuildings();
        this.loadHadResourceFromStorage();
        this.loadResourcesFromStorage();
        this.currentQuest = JSON.parse(localStorage.getItem(this.storageNames.currentQuest));

        this.loadBuildingsFromStorage();
        this.reloadBuildings();
    },
    methods: {
        // System & Saving
        // Check if a new version is played and notify the user of the loss of his beloved score & progress
        checkVersion() {
            let lastVersion = localStorage.getItem(this.storageNames.lastVersion);

            if (lastVersion && lastVersion < this.version) {
                this.sendSystemNotification('Your beta-progress has been resetted due to a new version of the game, we\'re very sorry about that.')
            }

            localStorage.setItem(this.storageNames.lastVersion, this.version);
        },

        // Check if buildings-array is outdated
        checkBuildings() {
            let savedBuildings = JSON.parse(localStorage.getItem(this.storageNames.buildings));

            if (!savedBuildings) {
                localStorage.setItem(this.storageNames.buildings, JSON.stringify(this.buildings));
            } else if (savedBuildings.length !== this.buildings.length) {
                localStorage.setItem(this.storageNames.buildings, JSON.stringify(this.buildings));
                this.sendInfo('Buildings have been resetted due to an important update.');
            }
        },

        // Save buildings with progress -> has to resetted while in beta via version
        saveBuildingsToStorage() {
            localStorage.setItem(this.storageNames.buildings, JSON.stringify(this.buildings));
        },

        loadBuildingsFromStorage() {
            let savedBuildings = JSON.parse(localStorage.getItem(this.storageNames.buildings));

            if (savedBuildings) {
                savedBuildings.forEach((building) => {
                    if (building.isOwned) {
                        building.loader = 0;
                    }

                    if (building.hasMissingResources) {
                        building.loader = 100;
                    }
                });

                this.buildings = savedBuildings;
            }
        },

        // Save resources a user has
        saveResourcesToStorage() {
            localStorage.setItem(this.storageNames.resources, JSON.stringify(this.resources));
        },

        loadResourcesFromStorage: function () {
            let savedResources = JSON.parse(localStorage.getItem(this.storageNames.resources));

            if (savedResources) {
                this.resources = savedResources;
            }
        },

        // Save resources a user ever had to generate quests
        saveHadResourceToStorage() {
            localStorage.setItem(this.storageNames.hadResource, JSON.stringify(this.hadResource));
        },

        loadHadResourceFromStorage: function () {
            let savedHadResource = JSON.parse(localStorage.getItem(this.storageNames.hadResource));

            if (savedHadResource) {
                this.hadResource = savedHadResource;
            }
        },

        // Resource-Management
        add(amount = 0, resource = 'gold') {
            switch (resource) {
                case 'wood':
                    this.sendResourceMessage(amount, 'wood');
                    this.resources.wood += amount;
                    this.hadResource.wood = true;
                    break;
                case 'planks':
                    this.sendResourceMessage(amount, 'planks');
                    this.resources.planks += amount;
                    this.hadResource.planks = true;
                    break;
                case 'stone':
                    this.sendResourceMessage(amount, 'stone');
                    this.resources.stone += amount;
                    this.hadResource.stone = true;
                    break;
                case 'bricks':
                    this.sendResourceMessage(amount, 'bricks');
                    this.resources.bricks += amount;
                    this.hadResource.bricks = true;
                    break;
                case 'coal':
                    this.sendResourceMessage(amount, 'coal');
                    this.resources.coal += amount;
                    this.hadResource.coal = true;
                    break;
                case 'iron':
                    this.sendResourceMessage(amount, 'iron');
                    this.resources.iron += amount;
                    this.hadResource.iron = true;
                    break;
                case 'corn':
                    this.sendResourceMessage(amount, 'corn');
                    this.resources.corn += amount;
                    this.hadResource.corn = true;
                    break;
                case 'gold':
                    this.sendResourceMessage(amount, 'gold');
                    this.resources.gold += amount;
                    this.hadResource.gold = true;
                    break;
            }

            this.saveHadResourceToStorage();
            this.saveResourcesToStorage();
        },

        sub(amount = 0, resource = false) {
            this.resources.gold -= amount;
            return this.saveResourcesToStorage();
        },

        // Buying & upgrading buildings + checks + interval-generators
        reloadBuildings() {
            let vue = this;

            this.buildings.forEach((building) => {
                if (building.isOwned && !building.hasMissingResources) {
                    vue.initiateIntervals(building);
                }
            });
        },

        initiateIntervals(building) {
            building.intervalEarnID = setInterval(() => {
                if (building.requires) {
                    if (
                        game.buildingHasEnoughResourcesToStart(building)
                    ) {
                        building.hasMissingResources = true;
                        game.sendWarning(building.name + ' has stopped production of ' + building.resource + ' due to missing resources.')
                        clearInterval(building.intervalLoadingID);
                        game.saveBuildingsToStorage();
                    } else {
                        building.hasMissingResources = false;
                        game.sendWarning(building.name + ' has resumed production of ' + building.resource + '.')
                        game.useRequiredResources(building);
                        game.add(building.amount, building.resource);
                        game.reloadSingleBuilding(building);
                    }
                } else {
                    game.add(building.amount, building.resource);
                }
            }, building.intervalInSeconds * 1000);

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

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

            this.loadedIntervals.push(building.intervalEarnID, building.intervalLoadingID);
        },

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

                this.upgradeBuilding(building, true);
                this.saveBuildingsToStorage();
            } else {
                this.sendWarning('Not enough gold');
            }
        },

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

            if (this.resources.gold >= building.price) {
                this.sub(building.price);
                this.upgradeBuilding(building);
            } else {
                this.sendWarning('Not enough gold');
            }
        },

        upgradeBuilding(building, first = false) {
            if (building.level < (building.maxLevel)) {
                building.level++;

                if (building.level === building.maxLevel) {
                    building.isUpgradeable = false;
                }
            } else {
                building.isUpgradeable = false;
                this.sendWarning('Building is already at max-level.')
                return false;
            }

            if (building.priceMultiplicator) {
                building.price = Number(
                    building.price * building.priceMultiplicator
                ).toFixed(0);
            } else if (building.pricePerLevel) {
                building.price = building.pricePerLevel[building.level - 1];
            }

            if (first === false) {
                if (building.amountMultiplicator) {
                    building.amount = building.amount * building.amountMultiplicator;
                } else if (building.amountPerLevel) {
                    building.amount = building.amountPerLevel[building.level - 1];
                }

                if (building.intervalMultiplicator) {
                    building.intervalInSeconds = Number(building.intervalInSeconds * building.intervalMultiplicator).toFixed(2);
                } else if (building.intervalPerLevel) {
                    building.intervalInSeconds = building.intervalPerLevel[building.level - 1];
                }
            }

            this.reloadSingleBuilding(building);
            this.saveBuildingsToStorage();
        },

        reloadSingleBuilding(building) {
            clearInterval(building.intervalEarnID);
            clearInterval(building.intervalLoadingID);
            building.loader = 0;

            this.initiateIntervals(building);
        },

        buildingHasEnoughResourcesToStart(building) {
            if (building.requires) {
                return (
                    building.requires.wood > this.resources.wood ||
                    building.requires.stone > this.resources.stone ||
                    building.requires.iron > this.resources.iron ||
                    building.requires.bricks > this.resources.bricks ||
                    building.requires.coal > this.resources.coal ||
                    building.requires.corn > this.resources.corn
                );
            } else {
                return true;
            }
        },

        // Quests
        generateQuestWithRandomItems() {
            // defines the rates of possible amounts of resources for quests
            let possibleAmountsForQuest = [
                0, 0, 0, 0, 5, 10, 15, 20, 25, 30, 35, 5, 10, 15, 20, 25, 30, 35, 50
            ];

            let randomWood = 0;
            let randomStone = 0;
            let randomIron = 0;
            let randomBricks = 0;
            let randomCorn = 0;
            let randomCoal = 0;
            let randomPlanks = 0;

            let rewardSum = 0;

            if (this.hadResource.wood > 0) {
                randomWood = this.getRandomElementForQuestResource(possibleAmountsForQuest);
                rewardSum += (randomWood * 5);
            }

            if (this.hadResource.stone > 0) {
                randomStone = this.getRandomElementForQuestResource(possibleAmountsForQuest);
                rewardSum += (randomStone * 7);
            }

            if (this.hadResource.iron > 0) {
                randomIron = this.getRandomElementForQuestResource(possibleAmountsForQuest);
                rewardSum += (randomIron * 200);
            }

            if (this.hadResource.bricks > 0) {
                randomBricks = this.getRandomElementForQuestResource(possibleAmountsForQuest);
                rewardSum += (randomBricks * 25);
            }

            if (this.hadResource.corn > 0) {
                randomCorn = this.getRandomElementForQuestResource(possibleAmountsForQuest);
                rewardSum += (randomCorn * 30);
            }

            if (this.hadResource.coal > 0) {
                randomCoal = this.getRandomElementForQuestResource(possibleAmountsForQuest);
                rewardSum += (randomCoal * 10);
            }

            if (this.hadResource.planks > 0) {
                randomPlanks = this.getRandomElementForQuestResource(possibleAmountsForQuest);
                rewardSum += (randomPlanks * 5);
            }

            if (rewardSum > 0) {
                this.currentQuest = {
                    wood: randomWood,
                    planks: randomPlanks,
                    stone: randomStone,
                    coal: randomCoal,
                    iron: randomIron,
                    bricks: randomBricks,
                    corn: randomCorn,
                    reward: rewardSum
                };
            } else {
                this.currentQuest = null;
                this.sendInfo('There are no quests available. Please try again.')
            }

            localStorage.setItem(this.storageNames.currentQuest, JSON.stringify(this.currentQuest));
            return this.currentQuest;
        },

        getRandomElementForQuestResource(possibleValues) {
            return possibleValues[Math.floor(Math.random() * possibleValues.length)];
        },

        isQuestRedeemable() {
            let enoughWood = this.resources.wood >= this.currentQuest.wood;
            let enoughStone = this.resources.stone >= this.currentQuest.stone;
            let enoughIron = this.resources.iron >= this.currentQuest.iron;
            let enoughBricks = this.resources.bricks >= this.currentQuest.bricks;
            let enoughCorn = this.resources.corn >= this.currentQuest.corn;
            let enoughCoal = this.resources.coal >= this.currentQuest.coal;

            if (enoughWood && enoughStone && enoughIron && enoughBricks && enoughCorn && enoughCoal) {
                return true;
            } else {
                return false;
            }
        },

        redeemReward() {
            if (this.isQuestRedeemable()) {
                this.resources.gold += this.currentQuest.reward;
                this.resources.wood -= this.currentQuest.wood;
                this.resources.stone -= this.currentQuest.stone;
                this.resources.iron -= this.currentQuest.iron;
                this.resources.bricks -= this.currentQuest.bricks;
                this.resources.corn -= this.currentQuest.corn;
                this.resources.coal -= this.currentQuest.coal;

                this.sendRewardMessage(this.currentQuest.reward);
                this.generateQuestWithRandomItems();
            } else {
                this.sendWarning('Not enough resources to redeem reward.');
                return false;
            }
        },

        useRequiredResources(building) {
            this.resources.wood -= building.requires.wood;
            this.resources.stone -= building.requires.stone;
            this.resources.iron -= building.requires.iron;
            this.resources.bricks -= building.requires.bricks;
            this.resources.corn -= building.requires.corn;
            this.resources.coal -= building.requires.coal;
        },

        // Templating
        getFormattedNumber(value) {
            return value.toLocaleString('de-DE');
        },

        getResourceIconForBuilding(building) {
            return this.getResourceIcon(building.resource);
        },

        getResourceIcon(resource) {
            return '<img class="resource-icon" src="img/' + resource + '.png" title="' + resource + '" alt="' + resource + '">';
        },

        getRequirementsText(building) {
            let requirementList = '<br/>Uses';

            requirementList += building.requires.wood ? ' ' + building.requires.wood + ' ' + this.getResourceIcon('wood') : '';
            requirementList += building.requires.stone ? ' ' + building.requires.stone + ' ' + this.getResourceIcon('stone') : '';
            requirementList += building.requires.iron ? ' ' + building.requires.iron + ' ' + this.getResourceIcon('iron') : '';
            requirementList += building.requires.bricks ? ' ' + building.requires.bricks + ' ' + this.getResourceIcon('bricks') : '';
            requirementList += building.requires.coal ? ' ' + building.requires.coal + ' ' + this.getResourceIcon('coal') : '';
            requirementList += building.requires.corn ? ' ' + building.requires.corn + ' ' + this.getResourceIcon('corn') : '';

            return requirementList + ' for ' + building.amount + ' ' + this.getResourceIconForBuilding(building);
        },

        getColorForQuestResource(needed, has) {
            return (has >= needed) ? 'lightgreen' : 'red';
        },

        // Alerts
        sendRewardMessage(reward) {
            iziToast.show({
                image: 'img/gold.png',
                color: 'green',
                message: 'You got a reward of ' + reward + ' gold!',
                position: 'bottomCenter',
                timeout: 1500,
                transitionIn: 'boundInRight',
                transitionInMobile: 'boundInRight'
            });
        },

        sendResourceMessage(amount, resource) {
            iziToast.show({
                image: 'img/' + resource + '.png',
                theme: 'dark',
                position: 'bottomCenter',
                message: amount + ' ' + resource,
                timeout: 1000,
                transitionIn: 'boundInRight',
                transitionInMobile: 'boundInRight'
            });
        },

        sendNotification(message) {
            iziToast.show({
                color: 'green',
                message: message,
                position: 'bottomCenter',
                transitionIn: 'boundInRight',
                transitionInMobile: 'boundInRight'
            });
        },

        sendSystemNotification(message) {
            iziToast.show({
                color: 'red',
                message: message,
                position: 'topCenter',
                timeout: 7000,
                transitionIn: 'boundInRight',
                transitionInMobile: 'boundInRight'
            });
        },

        sendWarning(message) {
            iziToast.show({
                color: 'red',
                message: message,
                position: 'bottomCenter',
                transitionIn: 'boundInRight',
                transitionInMobile: 'boundInRight'
            });
        },

        sendInfo(message) {
            iziToast.show({
                color: 'blue',
                message: message,
                position: 'bottomCenter',
                transitionIn: 'boundInRight',
                transitionInMobile: 'boundInRight'
            });
        },

        // Debug & Testing
        removeBlackSmith() {
            this.buildings[5].isOwned = false;
            this.saveBuildingsToStorage();
            location.reload();
        },

        reset(hard = false) {
            localStorage.removeItem('buildings' + this.version);
            localStorage.removeItem('hadResource' + this.version);
            localStorage.removeItem('currentQuest' + this.version);

            if (hard) {
                localStorage.removeItem('resources' + this.version);
            }

            location.reload();
        }
    }
});