From 95d56056227cb14128fd5593dd95c32c36bcb1e6 Mon Sep 17 00:00:00 2001 From: Nero Ignis Date: Mon, 19 Apr 2021 21:56:34 +0200 Subject: [PATCH] Massive refactor; --- .idea/idle-build-up.iml | 2 + changelog.html | 12 ++ index.html | 91 ++++++++------ js/app.js | 259 +++++++++++++++++++++++----------------- 4 files changed, 219 insertions(+), 145 deletions(-) create mode 100644 changelog.html diff --git a/.idea/idle-build-up.iml b/.idea/idle-build-up.iml index a2f0531..35dacbe 100644 --- a/.idea/idle-build-up.iml +++ b/.idea/idle-build-up.iml @@ -6,5 +6,7 @@ + + \ No newline at end of file diff --git a/changelog.html b/changelog.html new file mode 100644 index 0000000..13a385d --- /dev/null +++ b/changelog.html @@ -0,0 +1,12 @@ + + + + + Changelog + + + + + + + \ No newline at end of file diff --git a/index.html b/index.html index d39053c..de30fba 100644 --- a/index.html +++ b/index.html @@ -5,59 +5,85 @@ Idle Gathering +
-
+

Resources
-

{{ this.getAmount() }}

-
-

{{ resources.wood }} Wood

-

{{ resources.planks }} Planks

-

{{ resources.stone }} Stone

-

{{ resources.coal }} Coal

-

{{ resources.iron }} Iron

-

{{ resources.bricks }} Bricks

-

{{ resources.corn }} Corn

+
+
+
{{ getFormattedNumber(resources.gold) }}
+ Coins +
+
+
{{ getFormattedNumber(resources.wood) }}
+ Wood +
+
+
{{ getFormattedNumber(resources.planks) }}
+ Planks +
+
+
{{ getFormattedNumber(resources.stone) }}
+ Stones +
+
+
{{ getFormattedNumber(resources.coal) }}
+ Coal +
+
+
{{ getFormattedNumber(resources.iron) }}
+ Iron +
+
+
{{ getFormattedNumber(resources.corn) }}
+ Corn +
+
+
{{ getFormattedNumber(resources.bricks) }}
+ Bricks +
+
-
+

Quests

-
+
- The following items are needed:
+ Items needed:
{{ currentQuest.wood }} + {{ currentQuest.planks }} {{ currentQuest.stone }} {{ currentQuest.coal }} {{ currentQuest.iron }} {{ currentQuest.bricks }} {{ currentQuest.corn }}
-
Redeem reward ({{ currentQuest.reward }} )
-
+

Owned buildings

-
+
  • @@ -68,8 +94,8 @@
{{ building.name }} (Level {{ building.level }})
- {{ building.amount }} / {{ building.intervalInSeconds }}s
- + {{ building.amount }} every {{ building.intervalInSeconds }}s
+
@@ -88,9 +114,9 @@
-
+

Available buildings

-
+
  • @@ -101,31 +127,20 @@
{{ building.name }}
- {{ building.amount }} / {{ building.intervalInSeconds }}s
- + {{ building.amount }} every {{ building.intervalInSeconds }}s
+
-
-
-
-

Testing & Debugging

-
-
- Reset buildings (to reload newly added ones)

- Reset everything (also coins!)

- Add 10.000 coins

-
-
-
- - - + + + + diff --git a/js/app.js b/js/app.js index 2a2a8be..a00ada0 100644 --- a/js/app.js +++ b/js/app.js @@ -1,10 +1,15 @@ +const storage = { + resources: 'resources', + buildings: 'buildings', + currentQuest: 'currentQuest' +}; + let game = new Vue({ el: '#root', data: { - money: 0, - loaded: false, resources: { - wood: 50, + gold: 0, + wood: 0, stone: 0, iron: 0, bricks: 0, @@ -133,75 +138,100 @@ let game = new Vue({ }, created() { this.checkBuildings(); - - this.money = this.getSavedMoney(); - this.saveMoney(); - this.loadResources(); + this.loadResourcesFromStorage(); this.currentQuest = JSON.parse(localStorage.getItem('currentQuest')); - this.loadBuildings(); + this.loadBuildingsFromStorage(); this.reloadBuildings(); - this.loaded = true; }, methods: { checkBuildings() { let savedBuildings = JSON.parse(localStorage.getItem('buildings')); - if (savedBuildings.length !== this.buildings.length) { + if (!savedBuildings) { + localStorage.setItem('buildings', JSON.stringify(this.buildings)); + } else if (savedBuildings.length !== this.buildings.length) { localStorage.setItem('buildings', JSON.stringify(this.buildings)); - alert('Buildings have been resetted due to an important update.') + this.sendInfo('Buildings have been resetted due to an important update.'); } }, - saveMoney() { - localStorage.setItem('money', String(this.money)); - return this.getSavedMoney(); + saveBuildingsToStorage() { + localStorage.setItem('buildings', JSON.stringify(this.buildings)); }, - getSavedMoney() { - this.money = Number(localStorage.getItem('money') ?? 0); - return this.money; + loadBuildingsFromStorage() { + let savedBuildings = JSON.parse(localStorage.getItem('buildings')); + + if (savedBuildings) { + savedBuildings.forEach((building) => { + if (building.isOwned) { + building.loader = 10; + } + }); + + this.buildings = savedBuildings; + } + }, + + saveResourcesToStorage() { + localStorage.setItem('resources', JSON.stringify(this.resources)); + }, + + loadResourcesFromStorage: function () { + let savedResources = JSON.parse(localStorage.getItem('resources')); + + if (savedResources) { + this.resources = savedResources; + } }, add(amount = 0, resource = 'gold') { switch (resource) { case 'wood': + this.sendResourceMessage(amount, 'wood'); this.resources.wood += amount; break; + case 'planks': + this.sendResourceMessage(amount, 'planks'); + this.resources.planks += amount; + break; case 'stone': + this.sendResourceMessage(amount, 'stone'); this.resources.stone += amount; break; - case 'iron': - this.resources.iron = Number(this.resources.iron + amount); - break; case 'bricks': + this.sendResourceMessage(amount, 'bricks'); this.resources.bricks += amount; break; - case 'corn': - this.resources.corn += amount; - break; case 'coal': + this.sendResourceMessage(amount, 'coal'); this.resources.coal += amount; break; - case 'planks': - this.resources.planks += amount; + case 'iron': + this.sendResourceMessage(amount, 'iron'); + this.resources.iron = Number(this.resources.iron + amount); + break; + case 'corn': + this.sendResourceMessage(amount, 'corn'); + this.resources.corn += amount; break; case 'gold': - this.money += amount; + this.sendResourceMessage(amount, 'gold'); + this.resources.gold += amount; break; } - this.saveResources(); - return this.saveMoney(); + this.saveResourcesToStorage(); }, sub(amount = 0, resource = false) { - this.money -= amount; - return this.saveMoney(); + this.resources.gold -= amount; + return this.saveResourcesToStorage(); }, - getAmount() { - return this.money.toFixed(0); + getFormattedNumber(value) { + return value.toLocaleString('de-DE'); }, reloadBuildings() { @@ -252,28 +282,28 @@ let game = new Vue({ }, buyBuilding(building) { - if (this.money >= building.price) { + if (this.resources.gold >= building.price) { this.sub(building.price); building.isOwned = true; this.upgradeBuilding(building, true); - this.saveBuildings(); + this.saveBuildingsToStorage(); } else { - alert('Not enough money'); + this.sendWarning('Not enough gold'); } }, buyUpgrade(building) { if (building.level === 'MAX') { - alert('Already at MAX-Level'); + this.sendWarning('Already at MAX-Level'); return false; } - if (this.money >= building.price) { + if (this.resources.gold >= building.price) { this.sub(building.price); this.upgradeBuilding(building); } else { - alert('Not enough money'); + this.sendWarning('Not enough gold'); } }, @@ -295,7 +325,7 @@ let game = new Vue({ } this.reloadSingleBuilding(building); - this.saveBuildings(); + this.saveBuildingsToStorage(); }, reloadSingleBuilding(building) { @@ -306,31 +336,7 @@ let game = new Vue({ this.initiateIntervals(building); }, - saveBuildings() { - localStorage.setItem('buildings', JSON.stringify(this.buildings)); - }, - - loadBuildings: function () { - let savedBuildings = JSON.parse(localStorage.getItem('buildings')); - - if (savedBuildings) { - this.buildings = savedBuildings; - } - }, - - saveResources() { - localStorage.setItem('resources', JSON.stringify(this.resources)); - }, - - loadResources: function () { - let savedResources = JSON.parse(localStorage.getItem('resources')); - - if (savedResources) { - this.resources = savedResources; - } - }, - - generateQuest() { + generateQuestWithRandomItems() { let possibleAmountsForQuest = [ 0, 0, 0, 5, 10, 15, 20, 25, 30, 35 ]; @@ -347,37 +353,37 @@ let game = new Vue({ if (this.resources.wood > 0) { - randomWood = this.getRandomElement(possibleAmountsForQuest); + randomWood = this.getRandomElementForQuestResource(possibleAmountsForQuest); rewardSum += (randomWood * 5); } if (this.resources.stone > 0) { - randomStone = this.getRandomElement(possibleAmountsForQuest); + randomStone = this.getRandomElementForQuestResource(possibleAmountsForQuest); rewardSum += (randomStone * 7); } if (this.resources.iron > 0) { - randomIron = this.getRandomElement(possibleAmountsForQuest); + randomIron = this.getRandomElementForQuestResource(possibleAmountsForQuest); rewardSum += (randomIron * 200); } if (this.resources.bricks > 0) { - randomBricks = this.getRandomElement(possibleAmountsForQuest); + randomBricks = this.getRandomElementForQuestResource(possibleAmountsForQuest); rewardSum += (randomBricks * 25); } if (this.resources.corn > 0) { - randomCorn = this.getRandomElement(possibleAmountsForQuest); + randomCorn = this.getRandomElementForQuestResource(possibleAmountsForQuest); rewardSum += (randomCorn * 30); } if (this.resources.coal > 0) { - randomCoal = this.getRandomElement(possibleAmountsForQuest); + randomCoal = this.getRandomElementForQuestResource(possibleAmountsForQuest); rewardSum += (randomCoal * 10); } if (this.resources.planks > 0) { - randomPlanks = this.getRandomElement(possibleAmountsForQuest); + randomPlanks = this.getRandomElementForQuestResource(possibleAmountsForQuest); rewardSum += (randomPlanks * 5); } @@ -401,43 +407,28 @@ let game = new Vue({ return this.currentQuest; }, - getRandomElement(possibleValues) { + getRandomElementForQuestResource(possibleValues) { return possibleValues[Math.floor(Math.random() * possibleValues.length)]; }, isQuestRedeemable() { - console.log(this.resources.wood + ' wood available'); - console.log(this.currentQuest.wood + ' wood needed in quest'); - console.log(this.resources.wood >= this.currentQuest.wood); - console.log(this.resources.stone + ' stone available'); - console.log(this.currentQuest.stone + ' wood needed in quest'); - console.log(this.resources.stone >= this.currentQuest.stone); - console.log(this.resources.iron + ' iron available'); - console.log(this.currentQuest.iron + ' wood needed in quest'); - console.log(this.resources.iron >= this.currentQuest.iron); - console.log(this.resources.bricks + ' bricks available'); - console.log(this.currentQuest.bricks + ' wood needed in quest'); - console.log(this.resources.bricks >= this.currentQuest.bricks); - console.log(this.resources.corn + ' corn available'); - console.log(this.currentQuest.corn + ' wood needed in quest'); - console.log(this.resources.corn >= this.currentQuest.corn); - console.log(this.resources.coal + ' coal available'); - console.log(this.currentQuest.coal + ' wood needed in quest'); - console.log(this.resources.coal >= this.currentQuest.coal); - - return ( - 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 - ); + 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.money += this.currentQuest.reward; + this.resources.gold += this.currentQuest.reward; this.resources.wood -= this.currentQuest.wood; this.resources.stone -= this.currentQuest.stone; this.resources.iron -= this.currentQuest.iron; @@ -445,9 +436,10 @@ let game = new Vue({ this.resources.corn -= this.currentQuest.corn; this.resources.coal -= this.currentQuest.coal; - this.generateQuest(); + this.sendRewardMessage(this.currentQuest.reward); + this.generateQuestWithRandomItems(); } else { - alert('Not enough resources to redeem reward.'); + this.sendWarning('Not enough resources to redeem reward.'); return false; } }, @@ -461,6 +453,7 @@ let game = new Vue({ this.resources.coal -= building.requires.coal; }, + // Templating getResourceIconForBuilding(building) { return this.getResourceIcon(building.resource); }, @@ -469,7 +462,7 @@ let game = new Vue({ return '' + resource + ''; }, - getRequirementsForProduction(building) { + getRequirementsText(building) { let requirementList = '
Uses'; if (building.requires.wood) { @@ -480,15 +473,67 @@ let game = new Vue({ requirementList += ' ' + building.requires.stone + ' ' + this.getResourceIcon('stone'); } + if (building.requires.iron) { + requirementList += ' ' + building.requires.iron + ' ' + this.getResourceIcon('iron'); + } + + if (building.requires.bricks) { + requirementList += ' ' + building.requires.bricks + ' ' + this.getResourceIcon('bricks'); + } + if (building.requires.coal) { requirementList += ' ' + building.requires.coal + ' ' + this.getResourceIcon('coal'); } - if (building.requires.iron) { - requirementList += ' ' + building.requires.iron + ' ' + this.getResourceIcon('iron'); + if (building.requires.corn) { + requirementList += ' ' + building.requires.corn + ' ' + this.getResourceIcon('corn'); } - return requirementList + ' / ' + building.amount + ' ' + this.getResourceIconForBuilding(building); + return requirementList + ' for ' + building.amount + ' ' + this.getResourceIconForBuilding(building); + }, + + // Alerts + sendRewardMessage(reward) { + iziToast.show({ + image: 'img/gold.png', + color: 'green', + message: 'You got a reward of ' + reward + ' gold!', + position: 'bottomCenter', + timeout: 1500, + }); + }, + + sendResourceMessage(amount, resource) { + iziToast.show({ + image: 'img/' + resource + '.png', + position: 'bottomCenter', + message: 'Produced ' + amount + ' ' + resource + '!', + timeout: 1000, + }); + }, + + sendNotification(message) { + iziToast.show({ + color: 'green', + message: message, + position: 'bottomCenter', + }); + }, + + sendWarning(message) { + iziToast.show({ + color: 'red', + message: message, + position: 'bottomCenter', + }); + }, + + sendInfo(message) { + iziToast.show({ + color: 'blue', + message: message, + position: 'bottomCenter', + }); } - }, + } });