diff --git a/css/app.css b/css/app.css index 58b6fa7..f7b56f1 100644 --- a/css/app.css +++ b/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; } \ No newline at end of file diff --git a/index.html b/index.html index 0393940..db6ad8a 100644 --- a/index.html +++ b/index.html @@ -90,10 +90,11 @@
{{ building.price }}
-
+
+
{{ building.level }}
- {{ building.name }} (Lvl. {{ building.level }})
+ {{ building.name }}
{{ building.amount }} every {{ building.intervalInSeconds }}s
diff --git a/js/app.js b/js/app.js index 2cd86f9..2a60b64 100644 --- a/js/app.js +++ b/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);