From 7cb8756adbdee48d9fef1e17ce8d6453be47e57f Mon Sep 17 00:00:00 2001
From: Nero Ignis <neroignis@gmail.com>
Date: Wed, 21 Apr 2021 22:15:59 +0200
Subject: [PATCH] Implement buildings being buildable with resources;

---
 index.html | 12 ++++++++++-
 js/app.js  | 63 +++++++++++++++++++++++++++++++++++++++++++++---------
 2 files changed, 64 insertions(+), 11 deletions(-)

diff --git a/index.html b/index.html
index 8dde473..01c7b23 100644
--- a/index.html
+++ b/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'">
diff --git a/js/app.js b/js/app.js
index c8441aa..b89d6b6 100644
--- a/js/app.js
+++ b/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,17 +354,56 @@ let game = new Vue({
         },
 
         buyBuilding(building) {
-            if (this.resources.gold.amount >= building.price) {
-                this.sub(building.price);
-                building.isOwned = true;
-                building.price = building.pricePerLevel[0];
-                building.amount = building.amountPerLevel[0];
-                building.interval = building.intervalPerLevel[0];
+            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();
+                    this.upgradeBuilding(building, true);
+                    this.saveBuildingsToStorage();
+                }
             } else {
-                this.sendWarning('Not enough gold');
+                if (this.resources.gold.amount >= building.price) {
+                    this.sub(building.price);
+                    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 {
+                    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;
             }
         },