Browse Source

Add colors for redeemable resources in quests;

master
Nero Ignis 4 years ago
parent
commit
5ff97682df
  1. 31
      index.html
  2. 4
      js/app.js

31
index.html

@ -68,15 +68,30 @@ @@ -68,15 +68,30 @@
<div class="card-body" id="collapseQuest">
<div v-if="currentQuest">
Items needed: <br/>
<span v-if="currentQuest.wood > 0"><img title="wood" class="resource-icon" src="img/wood.png"> {{ currentQuest.wood }}</span>
<span v-if="currentQuest.planks > 0"><img title="wood" class="resource-icon" src="img/planks.png"> {{ currentQuest.planks }}</span>
<span v-if="currentQuest.stone > 0"><img title="stone" class="resource-icon" src="img/stone.png"> {{ currentQuest.stone }}</span>
<span v-if="currentQuest.coal > 0"><img title="coal" class="resource-icon" src="img/coal.png"> {{ currentQuest.coal }}</span>
<span v-if="currentQuest.iron > 0"><img title="iron" class="resource-icon" src="img/iron.png"> {{ currentQuest.iron }}</span>
<span v-if="currentQuest.bricks > 0"><img title="bricks" class="resource-icon" src="img/bricks.png"> {{ currentQuest.bricks }}</span>
<span v-if="currentQuest.corn > 0"><img title="corn" class="resource-icon" src="img/corn.png"> {{ currentQuest.corn }}</span>
<span v-if="currentQuest.wood > 0" :style="'color: ' + getColorForQuestResource(currentQuest.wood, resources.wood)">
<img title="wood" class="resource-icon" src="img/wood.png"> {{ currentQuest.wood }}
</span>
<span v-if="currentQuest.planks > 0" :style="'color: ' + getColorForQuestResource(currentQuest.planks, resources.planks)">
<img title="wood" class="resource-icon" src="img/planks.png"> {{ currentQuest.planks }}
</span>
<span v-if="currentQuest.stone > 0" :style="'color: ' + getColorForQuestResource(currentQuest.stone, resources.stone)">
<img title="stone" class="resource-icon" src="img/stone.png"> {{ currentQuest.stone }}
</span>
<span v-if="currentQuest.coal > 0" :style="'color: ' + getColorForQuestResource(currentQuest.coal, resources.coal)">
<img title="coal" class="resource-icon" src="img/coal.png"> {{ currentQuest.coal }}
</span>
<span v-if="currentQuest.iron > 0" :style="'color: ' + getColorForQuestResource(currentQuest.iron, resources.iron)">
<img title="iron" class="resource-icon" src="img/iron.png"> {{ currentQuest.iron }}
</span>
<span v-if="currentQuest.bricks > 0" :style="'color: ' + getColorForQuestResource(currentQuest.bricks, resources.bricks)">
<img title="bricks" class="resource-icon" src="img/bricks.png"> {{ currentQuest.bricks }}
</span>
<span v-if="currentQuest.corn > 0" :style="'color: ' + getColorForQuestResource(currentQuest.corn, resources.corn)">
<img title="corn" class="resource-icon" src="img/corn.png"> {{ currentQuest.corn }}
</span>
<br/>
<br/>
<a href="javascript:" class="btn btn-sm btn-success" @click="redeemReward()">Redeem reward ({{ currentQuest.reward }} <img class="resource-icon" src="img/gold.png">)</a>
<a href="javascript:" class="btn btn-sm btn-success float-right" @click="redeemReward()">Redeem reward ({{ currentQuest.reward }} <img class="resource-icon" src="img/gold.png">)</a>
</div>
<div v-else>
<a class="btn btn-sm btn-info" @click="generateQuestWithRandomItems()">Get Quest (resources needed)</a>

4
js/app.js

@ -524,6 +524,10 @@ let game = new Vue({ @@ -524,6 +524,10 @@ let game = new Vue({
return requirementList + ' for ' + building.amount + ' ' + this.getResourceIconForBuilding(building);
},
getColorForQuestResource(needed, has) {
return (has >= needed) ? 'lightgreen' : 'red';
},
// Alerts
sendRewardMessage(reward) {
iziToast.show({

Loading…
Cancel
Save