MonkeyGG2
56 lines
4.8 KiB
HTML
56 lines
4.8 KiB
HTML
<div class="shop" ng-if="zm.sidePanels.construction">
|
|
<div class="shop-title">
|
|
<h2>Unholy Construction</h2>
|
|
<button ng-click="zm.closeSidePanels();">Close</button>
|
|
</div>
|
|
<div class="tabs">
|
|
<button ng-click="zm.filterConstruction('available');" class="{{zm.currentConstructionFilter == 'available' ? 'active' : ''}}">Available</button>
|
|
<button ng-click="zm.filterConstruction('completed');" class="{{zm.currentConstructionFilter == 'completed' ? 'active' : ''}}">Completed</button>
|
|
<button ng-if="zm.model.autoconstructionUnlocked" ng-click="zm.model.autoconstruction = !zm.model.autoconstruction" class="{{zm.model.autoconstruction ? 'active' : ''}}">{{zm.model.autoconstruction ? 'Auto On' : 'Auto Off'}}</button>
|
|
</div>
|
|
<div class="upgrade current-construction" ng-if="zm.model.persistentData.currentConstruction">
|
|
<h4>Building - {{zm.model.persistentData.currentConstruction.name}}</h4>
|
|
<p>Consuming
|
|
<span ng-if="zm.model.persistentData.currentConstruction.costPerTick.energy" class="energy">{{zm.model.persistentData.currentConstruction.costPerTick.energy|decimal}} energy</span>
|
|
<span ng-if="zm.model.persistentData.currentConstruction.costPerTick.blood" class="blood">{{zm.model.persistentData.currentConstruction.costPerTick.blood|decimal}} blood</span>
|
|
<span ng-if="zm.model.persistentData.currentConstruction.costPerTick.brains" class="brains">{{zm.model.persistentData.currentConstruction.costPerTick.brains|decimal}} brains</span>
|
|
<span ng-if="zm.model.persistentData.currentConstruction.costPerTick.bones" class="bones">{{zm.model.persistentData.currentConstruction.costPerTick.bones|decimal}} bones</span>
|
|
<span ng-if="zm.model.persistentData.currentConstruction.costPerTick.parts" class="parts">{{zm.model.persistentData.currentConstruction.costPerTick.parts|decimal}} parts</span>
|
|
each second
|
|
</p>
|
|
<div class="progress {{zm.model.persistentData.currentConstruction.state == 'building' ? 'active' : 'stopped'}}">
|
|
<div ng-style="{'width':zm.constructionPercent() + '%'}"></div>
|
|
<span>{{zm.constructionPercent()}}%</span>
|
|
</div>
|
|
<p ng-if="!zm.model.persistentData.currentConstruction.shortfall"><strong>Time Remaining: {{zm.model.persistentData.currentConstruction.timeRemaining}}</strong></p>
|
|
<p ng-if="zm.model.persistentData.currentConstruction.shortfall">
|
|
<strong>Production stopped, need more
|
|
<span ng-if="zm.model.persistentData.currentConstruction.shortfall.energy" class="energy">energy</span>
|
|
<span ng-if="zm.model.persistentData.currentConstruction.shortfall.blood" class="blood">blood</span>
|
|
<span ng-if="zm.model.persistentData.currentConstruction.shortfall.brains" class="brains">brains</span>
|
|
<span ng-if="zm.model.persistentData.currentConstruction.shortfall.bones" class="bones">bones</span>
|
|
<span ng-if="zm.model.persistentData.currentConstruction.shortfall.parts" class="parts">parts</span>
|
|
</strong>
|
|
</p>
|
|
<button ng-click="zm.playPauseConstruction();">{{zm.model.persistentData.currentConstruction.state == 'paused' ? 'Resume' : 'Pause'}}</button>
|
|
<button ng-click="zm.cancelConstruction();">Cancel</button>
|
|
</div>
|
|
<div class="upgrades">
|
|
<div ng-repeat="upgrade in zm.upgrades" class="upgrade">
|
|
<h4>{{upgrade.name}}</h4>
|
|
<p>{{upgrade.description}}</p>
|
|
<label ng-if="zm.currentRankConstruction(upgrade) < upgrade.cap">Time to build: {{upgrade.time}} seconds</label>
|
|
<div ng-if="zm.currentRankConstruction(upgrade) < upgrade.cap">
|
|
<label>Total Cost: </label>
|
|
<label ng-if="upgrade.costs.energy" class="energy">{{upgrade.costs.energy|whole}} energy ({{upgrade.costs.energy/upgrade.time|whole}} per sec)</label>
|
|
<label ng-if="upgrade.costs.blood" class="blood">{{upgrade.costs.blood|whole}} blood ({{upgrade.costs.blood/upgrade.time|whole}} per sec)</label>
|
|
<label ng-if="upgrade.costs.brains" class="brains">{{upgrade.costs.brains|whole}} brains ({{upgrade.costs.brains/upgrade.time|whole}} per sec)</label>
|
|
<label ng-if="upgrade.costs.bones" class="bones">{{upgrade.costs.bones|whole}} bones ({{upgrade.costs.bones/upgrade.time|whole}} per sec)</label>
|
|
<label ng-if="upgrade.costs.parts" class="parts">{{upgrade.costs.parts|whole}} parts ({{upgrade.costs.parts/upgrade.time|whole}} per sec)</label>
|
|
</div>
|
|
<label ng-if="zm.constructionLeadsTo(upgrade)">Required for: {{zm.constructionLeadsTo(upgrade)}}</label>
|
|
<p ng-if="zm.currentRankConstruction(upgrade) < upgrade.cap">Current Rank: {{zm.currentRankConstruction(upgrade)}} / {{upgrade.cap}}</p>
|
|
<button ng-click="zm.startConstruction(upgrade);" ng-disabled="zm.model.persistentData.currentConstruction" ng-if="zm.currentRankConstruction(upgrade) < upgrade.cap">Begin Construction</button>
|
|
</div>
|
|
</div>
|
|
</div> |