let game = new Vue({ el: '#root', data: { money: 0, resources: { wood: 0, stone: 0 }, buildings: [ { name: 'Bank', intervalInSeconds: 15, amount: 100, level: 1, price: 1000, resource: 'gold', isOwned: true, isUpgradeable: true, maxLevel: 20, priceMultiplicator: 10, intervalMultiplicator: 0.95, icon: 'medieval_largeCastle' }, { name: 'Lumberjack', intervalInSeconds: 10, amount: 2, level: 0, price: 100, resource: 'wood', isOwned: false, isUpgradeable: true, maxLevel: 15, priceMultiplicator: 2, intervalMultiplicator: 0.95, icon: 'medieval_lumber' }, { name: 'Quarry', intervalInSeconds: 20, amount: 2, level: 0, price: 250, resource: 'stone', isOwned: false, isUpgradeable: true, maxLevel: 15, priceMultiplicator: 2, intervalMultiplicator: 0.95, icon: 'medieval_mine' }, ], 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, resource = 'gold') { switch (resource) { case 'wood': this.resources.wood += amount; break; case 'stone': this.resources.stone += amount; break; case 'gold': this.money += amount; break; } return this.saveMoney(); }, sub(amount = 0, resource = false) { 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) { game.initiateIntervals(building); } }); }, initiateIntervals(building) { building.intervalEarnID = setInterval(() => { game.add(building.amount, building.resource); }, building.intervalInSeconds * 1000); 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); }, 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 < (building.maxLevel - 1)) { building.level++; } else { building.level = 'MAX'; building.isUpgradeable = false; } building.price = Number(building.price * building.priceMultiplicator).toFixed(2); if (first === false) { building.intervalInSeconds = Number(building.intervalInSeconds * building.intervalMultiplicator).toFixed(2); } // this.reloadBuildings(); this.reloadSingleBuilding(building); this.saveBuildings(); }, reloadSingleBuilding(building) { clearInterval(building.intervalEarnID); clearInterval(building.intervalLoadingID); building.loader = 10; this.initiateIntervals(building); }, saveBuildings() { localStorage.setItem('buildings', JSON.stringify(this.buildings)); }, loadBuildings: function () { let savedBuildings = JSON.parse(localStorage.getItem('buildings')); if (savedBuildings.length > 0) { this.buildings = savedBuildings; } } }, });