New level-marker;

css/app.css

@@ -14,4 +14,19 @@
 
 .progress {
     margin-top: 1em;
+}
+
+.icon-level-container {
+    position: relative;
+    text-align: center;
+}
+
+.level-marker {
+    position: absolute;
+    bottom: -13px;
+    right: 10px;
+    font-size: 2.5em;
+    -webkit-text-stroke: 1px white;
+    -webkit-text-fill-color: gold;
+    font-family: Arial, serif;
 }

index.html

@@ -90,10 +90,11 @@
                             <div class="float-right">
                                 <a href="javascript:" @click="buyUpgrade(building)"><i class="fas fa-arrow-up text-success"></i> {{ building.price }} <img class="resource-icon" src="img/gold.png"> </a>
                             </div>
-                            <div class="float-left">
+                            <div class="float-left icon-level-container">
                                 <img class="building-icon" :src="'img/' + building.icon + '.png'" :alt="building.name + '_icon'">
+                                <div class="level-marker">{{ building.level }}</div>
                             </div>
-                            <strong>{{ building.name }} (Lvl. {{ building.level }})</strong><br>
+                            <strong>{{ building.name }}</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

@@ -1,12 +1,7 @@
-const storage = {
-    resources: 'resources',
-    buildings: 'buildings',
-    currentQuest: 'currentQuest'
-};
-
 let game = new Vue({
     el: '#root',
     data: {
+        version: 0.5,
         resources: {
             gold: 0,
             wood: 0,
@@ -17,6 +12,7 @@ let game = new Vue({
             coal: 0,
             planks: 0
         },
+        storageNames: null,
         buildings: [
             {
                 name: 'Bank',
@@ -137,6 +133,12 @@ let game = new Vue({
         loadedIntervals: []
     },
     created() {
+        this.storageNames = {
+            resources: 'resources' + this.version,
+            buildings: 'buildings' + this.version,
+            currentQuest: 'currentQuest' + this.version
+        }
+
         this.checkBuildings();
         this.loadResourcesFromStorage();
         this.currentQuest = JSON.parse(localStorage.getItem('currentQuest'));
@@ -239,10 +241,11 @@ let game = new Vue({
         },
 
         reloadBuildings() {
-            let game = this;
+            let vue = this;
+
             this.buildings.forEach((building) => {
                 if (building.isOwned && !building.hasMissingResources) {
-                    game.initiateIntervals(building);
+                    vue.initiateIntervals(building);
                 }
             });
         },
@@ -251,12 +254,7 @@ let game = new Vue({
             building.intervalEarnID = setInterval(() => {
                 if (building.requires) {
                     if (
-                        building.requires.wood > game.resources.wood ||
-                        building.requires.stone > game.resources.stone ||
-                        building.requires.iron > game.resources.iron ||
-                        building.requires.bricks > game.resources.bricks ||
-                        building.requires.coal > game.resources.coal ||
-                        building.requires.corn > game.resources.corn
+                        game.buildingHasEnoughResourcesToStart(building)
                     ) {
                         building.hasMissingResources = true;
                         game.sendWarning(building.name + ' has stopped production of ' + building.resource + ' due to missing resources.')
@@ -274,20 +272,36 @@ let game = new Vue({
                 }
             }, building.intervalInSeconds * 1000);
 
-            building.intervalLoadingID = setInterval(() => {
-                if (building.loader < 100) {
-                    building.loader += 10;
-                } else {
-                    building.loader = 10;
-                }
-
-                game.$forceUpdate()
-            }, building.intervalInSeconds / 10 * 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);
         },
 
+        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);