Fix loading bars at loading;

index.html

@@ -93,7 +93,7 @@
                             <div class="float-left">
                                 <img class="building-icon" :src="'img/' + building.icon + '.png'" :alt="building.name + '_icon'">
                             </div>
-                            <strong>{{ building.name }} (Level {{ building.level }})</strong><br>
+                            <strong>{{ building.name }} (Lvl. {{ building.level }})</strong><br>
                             {{ building.amount }} <img class="resource-icon" :src="'img/' + building.resource + '.png'" :alt="building.resource +    '_icon'"> every {{ building.intervalInSeconds }}s<br/>
                             <span v-if="building.hasRequirements" v-html="getRequirementsText(building)"></span>
                             <div class="progress">

js/app.js

@@ -168,6 +168,10 @@ let game = new Vue({
                     if (building.isOwned) {
                         building.loader = 10;
                     }
+
+                    if (building.hasMissingResources) {
+                        building.loader = 100;
+                    }
                 });
 
                 this.buildings = savedBuildings;
@@ -237,7 +241,7 @@ let game = new Vue({
         reloadBuildings() {
             let game = this;
             this.buildings.forEach((building) => {
-                if (building.isOwned) {
+                if (building.isOwned && !building.hasMissingResources) {
                     game.initiateIntervals(building);
                 }
             });
@@ -255,9 +259,12 @@ let game = new Vue({
                         building.requires.corn > game.resources.corn
                     ) {
                         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);
@@ -338,7 +345,7 @@ let game = new Vue({
 
         generateQuestWithRandomItems() {
             let possibleAmountsForQuest = [
-                0, 0, 0, 5, 10, 15, 20, 25, 30, 35
+                0, 0, 0, 0, 5, 10, 15, 20, 25, 30, 35, 5, 10, 15, 20, 25, 30, 35, 50
             ];
 
             let randomWood = 0;
@@ -351,7 +358,6 @@ let game = new Vue({
 
             let rewardSum = 0;
 
-
             if (this.resources.wood > 0) {
                 randomWood = this.getRandomElementForQuestResource(possibleAmountsForQuest);
                 rewardSum += (randomWood * 5);
@@ -390,12 +396,12 @@ let game = new Vue({
             if (rewardSum > 0) {
                 this.currentQuest = {
                     wood: randomWood,
+                    planks: randomPlanks,
                     stone: randomStone,
+                    coal: randomCoal,
                     iron: randomIron,
                     bricks: randomBricks,
                     corn: randomCorn,
-                    coal: randomCoal,
-                    planks: randomPlanks,
                     reward: rewardSum
                 };
             } else {
@@ -465,29 +471,12 @@ let game = new Vue({
         getRequirementsText(building) {
             let requirementList = '<br/>Uses';
 
-            if (building.requires.wood) {
+            requirementList += building.requires.wood ? ' ' + building.requires.wood + ' ' + this.getResourceIcon('wood') : '';
-                requirementList += ' ' + 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') : '';
-            if (building.requires.stone) {
+            requirementList += building.requires.coal ? ' ' + building.requires.coal + ' ' + this.getResourceIcon('coal') : '';
-                requirementList += ' ' + building.requires.stone + ' ' + this.getResourceIcon('stone');
+            requirementList += building.requires.corn ? ' ' + building.requires.corn + ' ' + this.getResourceIcon('corn') : '';
-            }
-
-            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.corn) {
-                requirementList += ' ' + building.requires.corn + ' ' + this.getResourceIcon('corn');
-            }
 
             return requirementList + ' for ' + building.amount + ' ' + this.getResourceIconForBuilding(building);
         },
@@ -506,8 +495,9 @@ let game = new Vue({
         sendResourceMessage(amount, resource) {
             iziToast.show({
                 image: 'img/' + resource + '.png',
+                theme: 'dark',
                 position: 'bottomCenter',
-                message: 'Produced ' + amount + ' ' + resource + '!',
+                message: amount + ' ' + resource,
                 timeout: 1000,
             });
         },