monkeygg2.github.io/games/incremancer/templates/runesmithmenu.html

<div class="shop" ng-if="zm.sidePanels.runesmith">
  <div class="shop-title">
    <h2>Runesmith</h2>
    <button ng-click="zm.closeSidePanels();">Close</button>
  </div>
  <p>The runesmith enchants your zombies with magical symbols of life and death. These runes can be infused with resources to increase their power.</p>
  <div class="tabs">
    <strong>Amount: </strong>
    <button ng-click="zm.infusionAmount = 1000;zm.infusionMax = false" class="{{zm.infusionMax != true && zm.infusionAmount == 1000 ? 'active' : ''}}">1K</button>
    <button ng-click="zm.infusionAmount = 10000;zm.infusionMax = false" class="{{zzm.infusionMax != true && m.infusionAmount == 10000 ? 'active' : ''}}">10K</button>
    <button ng-click="zm.infusionAmount = 100000;zm.infusionMax = false" class="{{zm.infusionMax != true && zm.infusionAmount == 100000 ? 'active' : ''}}">100K</button>
    <button ng-click="zm.infusionAmount = 1000000;zm.infusionMax = false" class="{{zm.infusionMax != true && zm.infusionAmount == 1000000 ? 'active' : ''}}">1M</button>
    <button ng-click="zm.infusionMax = true" class="{{zm.infusionMax == true ? 'active' : ''}}">Max</button>
  </div>
  <div class="upgrades">
    <div class="upgrade">
      <h4>Rune of Life</h4>
      <p>The rune of life increases your zombies defensive capabilities</p>
      <div class="row blood">
        <div class="col">
            <label>Blood: {{zm.model.persistentData.runes.life.blood|decimal}}</label>
            <label>{{100 * (1 - zm.model.runeEffects.damageReduction)|decimal}}% Damage Reduction</label>
        </div>
        <div class="col">
            <button ng-click="zm.infuseRune('life','blood')" ng-disabled="zm.infusionMax != true && zm.model.persistentData.blood < zm.infusionAmount">{{zm.infuseButtonText()}} Blood</button>
        </div>
      </div>
      <div class="row brains">
        <div class="col">
            <label>Brains: {{zm.model.persistentData.runes.life.brains|decimal}}</label>
            <label>{{100 * zm.model.runeEffects.healthRegen|decimal}}% Health Regen / 5 secs</label>
        </div>
        <div class="col">
            <button ng-click="zm.infuseRune('life','brains')" ng-disabled="zm.infusionMax != true && zm.model.persistentData.brains < zm.infusionAmount">{{zm.infuseButtonText()}} Brains</button>
        </div>
      </div>
      <div class="row bones">
        <div class="col">
            <label>Bones: {{zm.model.persistentData.runes.life.bones|decimal}}</label>
            <label>{{100 * zm.model.runeEffects.damageReflection|decimal}}% Damage Reflection</label>
        </div>
        <div class="col">
            <button ng-click="zm.infuseRune('life','bones')" ng-disabled="zm.infusionMax != true && zm.model.persistentData.bones < zm.infusionAmount">{{zm.infuseButtonText()}} Bones</button>
        </div>
      </div>
      <div class="row blood text-center">
        <label class="sated">Blood Sated: {{zm.shatterPercent(zm.model.persistentData.runes.life)}}%
          <span class="percent" ng-style="{'width':zm.shatterPercent(zm.model.persistentData.runes.life) + '%'}"></span>
        </label>
        <button ng-disabled="zm.model.persistentData.blood < zm.shatterBloodCost(zm.model.persistentData.runes.life)" 
            ng-click="zm.shatterSatiate('life',zm.model.persistentData.runes.life)">Infuse {{zm.shatterBloodCost(zm.model.persistentData.runes.life)|whole}} Blood</button>
      </div>
    </div>
    <div class="upgrade">
      <h4>Rune of Death</h4>
      <p>The rune of death increases your zombies offensive capabilities</p>
      <div class="row blood">
        <div class="col">
            <label>Blood: {{zm.model.persistentData.runes.death.blood|decimal}}</label>
            <label>{{100 * zm.model.runeEffects.attackSpeed|decimal}}% Attack Speed</label>
        </div>
        <div class="col">
            <button ng-click="zm.infuseRune('death','blood')" ng-disabled="zm.infusionMax != true && zm.model.persistentData.blood < zm.infusionAmount">{{zm.infuseButtonText()}} Blood</button>
        </div>
      </div>
      <div class="row brains">
        <div class="col">
            <label>Brains: {{zm.model.persistentData.runes.death.brains|decimal}}</label>
            <label>{{100 * zm.model.runeEffects.critChance|decimal}}% Critical Chance</label>
        </div>
        <div class="col">
            <button ng-click="zm.infuseRune('death','brains')" ng-disabled="zm.infusionMax != true && zm.model.persistentData.brains < zm.infusionAmount">{{zm.infuseButtonText()}} Brains</button>
        </div>
      </div>
      <div class="row bones">
        <div class="col">
            <label>Bones: {{zm.model.persistentData.runes.death.bones|decimal}}</label>
            <label>{{100 * zm.model.runeEffects.critDamage|decimal}}% Critical Damage</label>
        </div>
        <div class="col">
            <button ng-click="zm.infuseRune('death','bones')" ng-disabled="zm.infusionMax != true && zm.model.persistentData.bones < zm.infusionAmount">{{zm.infuseButtonText()}} Bones</button>
        </div>
      </div>
      <div class="row blood text-center">
        <label class="sated">Blood Sated: {{zm.shatterPercent(zm.model.persistentData.runes.death)}}%
          <span class="percent" ng-style="{'width':zm.shatterPercent(zm.model.persistentData.runes.death) + '%'}"></span>
        </label>
        <button ng-disabled="zm.model.persistentData.blood < zm.shatterBloodCost(zm.model.persistentData.runes.death)"
            ng-click="zm.shatterSatiate('death',zm.model.persistentData.runes.death)">Infuse {{zm.shatterBloodCost(zm.model.persistentData.runes.death)|whole}} Blood</button>
      </div>
    </div>
    <div class="upgrade">
      <h4>Rune Shatter</h4>
      <p>When both runes contain enough blood they can be shattered to increase zombie health and damage by 10%. This also increases zombie summoning cost by 1 energy and resets both runes.</p>
      <label class="blood">Shatters: {{zm.model.persistentData.runeshatter}}</label>
      <label class="blood">Effect: {{zm.shatterEffect()|decimal}}% Health/Damage</label>
      <label class="blood">Zombie Summon Cost: {{zm.model.zombieCost|whole}} energy</label>
      <button ng-click="zm.doShatter()" ng-disabled="!zm.canShatter()">Shatter</button>
      <button ng-click="zm.model.autoShatter = !zm.model.autoShatter" class="{{zm.model.autoShatter ? 'active' : ''}}">Auto Shatter {{zm.model.autoShatter ? 'On' : 'Off'}}</button>
    </div>
  </div>
</div>