Implement buildings being buildable with resources;

index.html

@@ -107,7 +107,17 @@
                     <ul class="list-group">
                         <li class="list-group-item" v-for="building in buildings" v-if="!building.isOwned">
                             <div class="float-right">
-                                <a href="javascript:" @click="buyBuilding(building)"><i class="fas fa-shopping-basket text-success"></i> {{ building.price }} <img class="resource-icon" src="img/gold.png"> </a>
+                                <a href="javascript:" @click="buyBuilding(building)">
+                                    <template v-if="building.resourcesToBuild">
+                                        <i class="fas fa-hammer text-success"></i>
+                                        <span v-for="(amount, resoureceName) in building.resourcesToBuild">
+                                            {{ amount }} <img class="resource-icon" :src="resources[resoureceName].icon" :title="resources[resoureceName].icon" :alt="resources[resoureceName].icon">
+                                        </span>
+                                    </template>
+                                    <template v-else>
+                                        <i class="fas fa-shopping-basket text-success"></i> {{ building.price }} <img class="resource-icon" src="img/gold.png">
+                                    </template>
+                                </a>
                             </div>
                             <div class="float-left">
                                 <img class="building-icon" :src="'img/' + building.icon + '.png'">

js/app.js

@@ -183,7 +183,11 @@ let game = new Vue({
                 isUpgradeable: true,
                 amount: 5,
                 price: 500,
-                intervalInSeconds: 60,
+                resourcesToBuild: {
+                    wood: 400,
+                    stone: 350
+                },
+                intervalInSeconds: 15,
                 amountPerLevel: [100, 250, 500, 750, 1000, 1500, 2000, 2500, 3000, 5000],
                 pricePerLevel: [500, 1000, 1500, 2000, 2500, 3000, 3500, 4000, 4500, 5000],
                 intervalPerLevel: [15, 25, 30, 45, 60, 90, 90, 120, 120, 120],
@@ -350,6 +354,21 @@ let game = new Vue({
         },
 
         buyBuilding(building) {
+            if (building.resourcesToBuild) {
+                if (this.buildingIsBuildable(building)) {
+                    Object.keys(building.resourcesToBuild).forEach((resourceToBuild) => {
+                        game.resources[resourceToBuild].amount -= building.resourcesToBuild[resourceToBuild];
+                    });
+
+                    building.isOwned = true;
+                    building.price = building.pricePerLevel[0];
+                    building.amount = building.amountPerLevel[0];
+                    building.interval = building.intervalPerLevel[0];
+
+                    this.upgradeBuilding(building, true);
+                    this.saveBuildingsToStorage();
+                }
+            } else {
                 if (this.resources.gold.amount >= building.price) {
                     this.sub(building.price);
                     building.isOwned = true;
@@ -362,6 +381,30 @@ let game = new Vue({
                 } else {
                     this.sendWarning('Not enough gold');
                 }
+            }
+        },
+
+        buildingIsBuildable(building) {
+            let game = this;
+            let resourcesMissing = [];
+
+            Object.keys(building.resourcesToBuild).forEach((resourceToBuild) => {
+                if (building.resourcesToBuild[resourceToBuild] > game.resources[resourceToBuild].amount) {
+                    resourcesMissing.push(resourceToBuild);
+                }
+            });
+
+            if (resourcesMissing.length) {
+                resourcesMissing.forEach((resource) => {
+                    game.sendWarning(
+                        'Not enough ' + resource + ' to build ' + building.name + '!'
+                    );
+                });
+
+                return false;
+            } else {
+                return true;
+            }
         },
 
         buyUpgrade(building) {