Browse Source

Redesign; add missing Iron;

master
Nero Ignis 4 years ago
parent
commit
997152b643
  1. 59
      index.html
  2. 3
      js/app.js

59
index.html

@ -11,7 +11,7 @@ @@ -11,7 +11,7 @@
<body>
<div id="root" class="container mt-2">
<div class="row" v-if="loaded">
<div class="col-md-12">
<div class="col-sm-6">
<div class="card">
<a class="card-header" data-toggle="collapse" href="#collapseResources" role="button" aria-expanded="true" aria-controls="collapseResources">
<h3>Resources</h3>
@ -22,12 +22,36 @@ @@ -22,12 +22,36 @@
<span v-if="resources.wood > 0"><img class="resource-icon" src="img/wood.png"> {{ resources.wood }}</span>
<span v-if="resources.planks > 0"><img class="resource-icon" src="img/planks.png"> {{ resources.planks }}</span>
<span v-if="resources.stone > 0"><img class="resource-icon" src="img/stone.png"> {{ resources.stone }}</span>
<span v-if="resources.coal > 0"><img class="resource-icon" src="img/coal.png"> {{ resources.coal }}</span>
<span v-if="resources.iron > 0"><img class="resource-icon" src="img/iron.png"> {{ resources.iron }}</span>
<span v-if="resources.bricks > 0"><img class="resource-icon" src="img/bricks.png"> {{ resources.bricks }}</span>
<span v-if="resources.corn > 0"><img class="resource-icon" src="img/corn.png"> {{ resources.corn }}</span>
</div>
</div>
</div>
<div class="col-sm-6">
<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" @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="generateQuest()">Get Quest (resources needed)</a>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card">
<div class="card-header" data-toggle="collapse" href="#collapseOwned" role="button" aria-expanded="true" aria-controls="collapseOwned">
<h3>Owned buildings</h3>
@ -58,8 +82,9 @@ @@ -58,8 +82,9 @@
</ul>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card">
<div class="card-header" data-toggle="collapse" href="#collapseAvailable" role="button" aria-expanded="true" aria-controls="collapseAvailable">
<h3>Available buildings</h3>
@ -80,36 +105,16 @@ @@ -80,36 +105,16 @@
</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" @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="generateQuest()">Get Quest (resources needed)</a>
</div>
</div>
</div>
<div class="col-md-12">
<div class="card">
<div class="card-header" data-toggle="collapse hide" href="#collapseDebug" role="button" aria-expanded="true" aria-controls="collapseDebug">
<h3>Testing & Debugging</h3>
</div>
<div class="card-body" id="collapseDebug">
<a class="btn btn-sm btn-danger" href="" @click="localStorage.removeItem('buildings')">Reset buildings (to reload newly added ones)</a><br/><br/>
<a class="btn btn-sm btn-danger" href="" @click="localStorage.clear()">Reset everything (also coins!)</a><br/><br/>
<a class="btn btn-sm btn-danger" href="" @click="money += 10000">Add 10.000 coins</a><br/><br/>
<a class="btn btn-sm btn-danger" href="javascript:" @click="localStorage.removeItem('buildings')">Reset buildings (to reload newly added ones)</a><br/><br/>
<a class="btn btn-sm btn-danger" href="javascript:" @click="localStorage.clear()">Reset everything (also coins!)</a><br/><br/>
<a class="btn btn-sm btn-danger" href="javascript:" @click="money += 10000">Add 10.000 coins</a><br/><br/>
</div>
</div>
</div>

3
js/app.js

@ -170,6 +170,9 @@ let game = new Vue({ @@ -170,6 +170,9 @@ let game = new Vue({
case 'stone':
this.resources.stone += amount;
break;
case 'iron':
this.resources.iron = Number(this.resources.iron + amount);
break;
case 'bricks':
this.resources.bricks += amount;
break;

Loading…
Cancel
Save