Quest-Generation overhaul;

index.html

@@ -94,7 +94,7 @@
                         <a href="javascript:" class="btn btn-sm btn-success float-right" @click="redeemReward()">Redeem reward ({{ currentQuest.reward }} <img class="resource-icon" src="img/gold.png">)</a>
                     </div>
                     <div v-else>
-                        <a class="btn btn-sm btn-info" @click="generateQuestWithRandomItems()">Get Quest (resources needed)</a>
+                        <a class="btn btn-sm btn-info" @click="generateQuestWithRandomItems()"><i class="fas fa-question"></i> Get a new quest</a>
                     </div>
                 </div>
             </div>

js/app.js

@@ -12,6 +12,15 @@ let game = new Vue({
             coal: 0,
             planks: 0
         },
+        hadResource: {
+            wood: false,
+            stone: false,
+            iron: false,
+            bricks: false,
+            corn: false,
+            coal: false,
+            planks: false
+        },
         storageNames: null,
         buildings: [
             {
@@ -139,6 +148,7 @@ let game = new Vue({
         this.storageNames = {
             lastVersion: 'lastVersion',
             resources: 'resources' + this.version,
+            hadResource: 'hadResource' + this.version,
             buildings: 'buildings' + this.version,
             currentQuest: 'currentQuest' + this.version
         }
@@ -146,6 +156,7 @@ let game = new Vue({
         this.checkVersion();
 
         this.checkBuildings();
+        this.loadHadResourceFromStorage();
         this.loadResourcesFromStorage();
         this.currentQuest = JSON.parse(localStorage.getItem(this.storageNames.currentQuest));
 
@@ -153,6 +164,8 @@ let game = new Vue({
         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);
 
@@ -163,6 +176,7 @@ let game = new Vue({
             localStorage.setItem(this.storageNames.lastVersion, this.version);
         },
 
+        // Check if buildings-array is outdated
         checkBuildings() {
             let savedBuildings = JSON.parse(localStorage.getItem(this.storageNames.buildings));
 
@@ -174,6 +188,7 @@ let game = new Vue({
             }
         },
 
+        // Save buildings with progress -> has to resetted while in beta via version
         saveBuildingsToStorage() {
             localStorage.setItem(this.storageNames.buildings, JSON.stringify(this.buildings));
         },
@@ -196,6 +211,7 @@ let game = new Vue({
             }
         },
 
+        // Save resources a user has
         saveResourcesToStorage() {
             localStorage.setItem(this.storageNames.resources, JSON.stringify(this.resources));
         },
@@ -208,42 +224,65 @@ let game = new Vue({
             }
         },
 
+        // 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 = Number(this.resources.iron + amount);
+                    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();
         },
 
@@ -252,10 +291,7 @@ let game = new Vue({
             return this.saveResourcesToStorage();
         },
 
-        getFormattedNumber(value) {
+        // Buying & upgrading buildings + checks + interval-generators
-            return value.toLocaleString('de-DE');
-        },
-
         reloadBuildings() {
             let vue = this;
 
@@ -303,21 +339,6 @@ let game = new Vue({
             this.loadedIntervals.push(building.intervalEarnID, building.intervalLoadingID);
         },
 
-        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;
-            }
-        },
-
         buyBuilding(building) {
             if (this.resources.gold >= building.price) {
                 this.sub(building.price);
@@ -386,7 +407,24 @@ let game = new Vue({
             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
             ];
@@ -401,37 +439,37 @@ let game = new Vue({
 
             let rewardSum = 0;
 
-            if (this.resources.wood > 0) {
+            if (this.hadResource.wood > 0) {
                 randomWood = this.getRandomElementForQuestResource(possibleAmountsForQuest);
                 rewardSum += (randomWood * 5);
             }
 
-            if (this.resources.stone > 0) {
+            if (this.hadResource.stone > 0) {
                 randomStone = this.getRandomElementForQuestResource(possibleAmountsForQuest);
                 rewardSum += (randomStone * 7);
             }
 
-            if (this.resources.iron > 0) {
+            if (this.hadResource.iron > 0) {
                 randomIron = this.getRandomElementForQuestResource(possibleAmountsForQuest);
                 rewardSum += (randomIron * 200);
             }
 
-            if (this.resources.bricks > 0) {
+            if (this.hadResource.bricks > 0) {
                 randomBricks = this.getRandomElementForQuestResource(possibleAmountsForQuest);
                 rewardSum += (randomBricks * 25);
             }
 
-            if (this.resources.corn > 0) {
+            if (this.hadResource.corn > 0) {
                 randomCorn = this.getRandomElementForQuestResource(possibleAmountsForQuest);
                 rewardSum += (randomCorn * 30);
             }
 
-            if (this.resources.coal > 0) {
+            if (this.hadResource.coal > 0) {
                 randomCoal = this.getRandomElementForQuestResource(possibleAmountsForQuest);
                 rewardSum += (randomCoal * 10);
             }
 
-            if (this.resources.planks > 0) {
+            if (this.hadResource.planks > 0) {
                 randomPlanks = this.getRandomElementForQuestResource(possibleAmountsForQuest);
                 rewardSum += (randomPlanks * 5);
             }
@@ -503,6 +541,10 @@ let game = new Vue({
         },
 
         // Templating
+        getFormattedNumber(value) {
+            return value.toLocaleString('de-DE');
+        },
+
         getResourceIconForBuilding(building) {
             return this.getResourceIcon(building.resource);
         },
@@ -536,6 +578,8 @@ let game = new Vue({
                 message: 'You got a reward of ' + reward + ' gold!',
                 position: 'bottomCenter',
                 timeout: 1500,
+                transitionIn: 'boundInRight',
+                transitionInMobile: 'boundInRight'
             });
         },
 
@@ -546,6 +590,8 @@ let game = new Vue({
                 position: 'bottomCenter',
                 message: amount + ' ' + resource,
                 timeout: 1000,
+                transitionIn: 'boundInRight',
+                transitionInMobile: 'boundInRight'
             });
         },
 
@@ -554,6 +600,8 @@ let game = new Vue({
                 color: 'green',
                 message: message,
                 position: 'bottomCenter',
+                transitionIn: 'boundInRight',
+                transitionInMobile: 'boundInRight'
             });
         },
 
@@ -563,6 +611,8 @@ let game = new Vue({
                 message: message,
                 position: 'topCenter',
                 timeout: 7000,
+                transitionIn: 'boundInRight',
+                transitionInMobile: 'boundInRight'
             });
         },
 
@@ -571,6 +621,8 @@ let game = new Vue({
                 color: 'red',
                 message: message,
                 position: 'bottomCenter',
+                transitionIn: 'boundInRight',
+                transitionInMobile: 'boundInRight'
             });
         },
 
@@ -579,6 +631,8 @@ let game = new Vue({
                 color: 'blue',
                 message: message,
                 position: 'bottomCenter',
+                transitionIn: 'boundInRight',
+                transitionInMobile: 'boundInRight'
             });
         }
     }