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.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);