implement base for quests;

index.html

@@ -71,6 +71,24 @@
                     </ul>
                 </div>
             </div>
+
+            <div class="card">
+                <div class="card-header" data-toggle="collapse" href="#collapseQuest" role="button" aria-expanded="true" aria-controls="collapseQuest">
+                    <h3>Quests</h3>
+                </div>
+                <div class="card-body" id="collapseQuest">
+                    <div v-if="currentQuest">
+                        The following items are needed: <br/>
+                        <span v-if="currentQuest.wood > 0"><img class="resource-icon" src="img/wood.png"> {{ currentQuest.wood }}</span>
+                        <span v-if="currentQuest.stone > 0"><img class="resource-icon" src="img/stone.png"> {{ currentQuest.stone }}</span>
+                        <span v-if="currentQuest.iron > 0"><img class="resource-icon" src="img/iron.png"> {{ currentQuest.iron }}</span>
+                        <span v-if="currentQuest.bricks > 0"><img class="resource-icon" src="img/bricks.png"> {{ currentQuest.bricks }}</span>
+                        <br/>
+                        <br/>
+                        <a href="javascript:" class="btn btn-sm btn-success" :disabled="isQuestRedeemable()">Redeem reward ({{ currentQuest.reward }} <img class="resource-icon" src="img/gold.png">)</a>
+                    </div>
+                </div>
+            </div>
         </div>
     </div>
 </div>

js/app.js

@@ -3,8 +3,8 @@ let game = new Vue({
     data: {
         money: 0,
         resources: {
-            wood: 0,
-            stone: 0,
+            wood: 2,
+            stone: 2,
             iron: 0,
             bricks: 0,
             corn: 0
@@ -228,6 +228,73 @@ let game = new Vue({
             if (savedBuildings.length > 0) {
                 this.buildings = savedBuildings;
             }
+        },
+
+        generateQuest() {
+            let possibleAmountsForQuest = [
+                0, 5, 10, 15, 20, 25, 30, 35
+            ];
+            let randomWood = 0;
+            let randomStone = 0;
+            let randomIron = 0;
+            let randomBricks = 0;
+            let randomCorn = 0;
+            let rewardSum = 0;
+
+
+            if (this.resources.wood > 0) {
+                randomWood = this.getRandomElement(possibleAmountsForQuest);
+                rewardSum += (randomWood * 5);
+            }
+
+            if (this.resources.stone > 0) {
+                randomStone = this.getRandomElement(possibleAmountsForQuest);
+                rewardSum += (randomStone * 7);
+            }
+
+            if (this.resources.iron > 0) {
+                randomIron = this.getRandomElement(possibleAmountsForQuest);
+                rewardSum += (randomIron * 15);
+            }
+
+            if (this.resources.bricks > 0) {
+                randomBricks = this.getRandomElement(possibleAmountsForQuest);
+                rewardSum += (randomBricks * 25);
+            }
+
+            if (this.resources.corn > 0) {
+                randomCorn = this.getRandomElement(possibleAmountsForQuest);
+                rewardSum += (randomCorn * 30);
+            }
+
+            if (rewardSum > 0) {
+                this.currentQuest = {
+                    wood: randomWood,
+                    stone: randomStone,
+                    iron: randomIron,
+                    bricks: randomBricks,
+                    corn: randomCorn,
+                    reward: rewardSum
+                };
+            } else {
+                this.currentQuest = null;
+            }
+
+            return this.currentQuest;
+        },
+
+        getRandomElement(possibleValues) {
+            return possibleValues[Math.floor(Math.random() * possibleValues.length)];
+        },
+
+        isQuestRedeemable() {
+            return (
+                this.wood >= this.currentQuest.wood &&
+                this.stone >= this.currentQuest.stone &&
+                this.iron >= this.currentQuest.iron &&
+                this.bricks >= this.currentQuest.bricks &&
+                this.corn >= this.currentQuest.corn
+            );
         }
     },
 });