Fix upgrades;

index.html

@@ -107,16 +107,21 @@
                 <div class="card-body" id="collapseOwned">
                     <ul class="list-group">
                         <li class="list-group-item" v-for="building in buildings" v-if="building.isOwned">
-                            <div class="float-right">
+                            <div class="float-right" v-if="building.isUpgradeable">
                                 <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 icon-level-container">
                                 <img class="building-icon" :src="'img/' + building.icon + '.png'" :alt="building.name + '_icon'">
-                                <div class="level-marker">{{ building.level }}</div>
+                                <div class="level-marker">{{ building.level === 10 ? 'X' : building.level }}</div>
                             </div>
+
                             <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">
                                 <div class="progress-bar progress-bar-success text-light" role="progressbar" :style="'width: ' + building.loader + '%;'" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
                                     <span v-if="!building.hasMissingResources">

js/app.js

@@ -28,7 +28,7 @@ let game = new Vue({
                 resource: 'gold',
                 icon: 'medieval_largeCastle',
                 level: 1,
-                maxLevel: 20,
+                maxLevel: 10,
                 isOwned: true,
                 isUpgradeable: true,
                 amount: 100,
@@ -367,11 +367,16 @@ let game = new Vue({
         },
 
         upgradeBuilding(building, first = false) {
-            if (building.level < (building.maxLevel - 1)) {
+            if (building.level < (building.maxLevel)) {
                 building.level++;
+
+                if (building.level === building.maxLevel) {
+                    building.isUpgradeable = false;
+                }
             } else {
-                building.level = 'X';
                 building.isUpgradeable = false;
+                this.sendWarning('Building is already at max-level.')
+                return false;
             }
 
             if (building.priceMultiplicator) {
@@ -379,20 +384,20 @@ let game = new Vue({
                     building.price * building.priceMultiplicator
                 ).toFixed(0);
             } else if (building.pricePerLevel) {
-                building.price = building.pricePerLevel[building.level];
+                building.price = building.pricePerLevel[building.level - 1];
             }
 
             if (first === false) {
                 if (building.amountMultiplicator) {
                     building.amount = building.amount * building.amountMultiplicator;
                 } else if (building.amountPerLevel) {
-                    building.amount = building.amountPerLevel[building.level];
+                    building.amount = building.amountPerLevel[building.level - 1];
                 }
 
                 if (building.intervalMultiplicator) {
                     building.intervalInSeconds = Number(building.intervalInSeconds * building.intervalMultiplicator).toFixed(2);
                 } else if (building.intervalPerLevel) {
-                    building.intervalInSeconds = building.intervalPerLevel[building.level];
+                    building.intervalInSeconds = building.intervalPerLevel[building.level - 1];
                 }
             }