RF Calculator

Calculates damage by Righteous Fire

by Puddster

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div data-role="cards" class="container">
  <div class="row">
    <div class="col-xs-6 smallCard">
      <span class="input-group">
        <label for="lifeText" class="input-group-addon">Life:</label>
        <input type="text" id="lifeText" class="form-control" />
        </span>
    </div>
    <div class="col-xs-6 smallCard">
      <span class="input-group">
        <label for="esText" class="input-group-addon">E.S.</label>
        <input type="text" id="esText" class="form-control" />
      </span>
    </div>
  </div>



  <div data-role="addMod" class="largeCard btn">
    <i class="glyphicon glyphicon-plus"></i>&nbsp;Add Modifier
  </div>
</div>

<div class="largeCard totals">
  <div class="row">
    <div class="col-xs-6">
      Total Dps: <span data-role="totalDps">0</span>
    </div>
    <div class="col-xs-4">
      <textarea rows="1" data-role="jsonString" class="form-control"></textarea>
    </div>
    <div class="col-xs-2">
      <button data-role="jsonLoad" class="hidden btn btn-default pull-right">
        Load Example
      </button>
    </div>
  </div>
</div>

CSS

.totals {
  position: fixed;
  bottom: 0px;
  padding: 15px;
  width: 90%;
  z-index: 100;
  background: #FFF;
}

.smallCard {
  display: inline;
  width: 45%;
  border: 1px solid black;
  border-radius: 5px;
  padding: 15px;
  margin: 5px;
}

.largeCard {
  width: 90%;
  border: 1px solid black;
  border-radius: 5px;
  padding: 15px;
  margin: 15px;
}

[data-role="addMod"] {
  margin-bottom: 115px;
}

.container {
  padding: 15px;
}

JavaScript

"use strict"
var gData, example = JSON.parse('{"baseLife":"9906","baseEs":"738","dps":76000,"increases":[{"modName":"Elementalist - Golem","modType":"1","value":"30"},{"modName":"Golem","modType":"1","value":"20"},{"modName":"Jewel 1","modType":"1","value":"12"},{"modName":"Jewel 2","modType":"1","value":"11"},{"modName":"Jewel 3","modType":"1","value":"11"},{"modName":"Fire damage passive","modType":"1","value":"8"},{"modName":"Fire damage passive","modType":"1","value":"8"},{"modName":"Arsonist Passive","modType":"1","value":"24"},{"modName":"Jewel 4","modType":"1","value":"12"},{"modName":"Jewel 5","modType":"1","value":"11"},{"modName":"Jewel 6","modType":"1","value":"10"},{"modName":"Doryanis Catalyst - Implicit","modType":"1","value":"10"},{"modName":"Doryanis Catalust - Explicit","modType":"1","value":"97"},{"modName":"Kaoms Heart","modType":"1","value":"30"},{"modName":"Elemental Focus - Quality","modType":"1","value":"10"},{"modName":"Increased Area of Effect - Quality","modType":"1","value":"10"}],"mores":[{"modName":"Elementalist - Penetration","modType":"2","value":"5"},{"modName":"Elemental Equalibrium","modType":"2","value":"50"},{"modName":"Elemental Focus","modType":"2","value":"48"},{"modName":"Flamability","modType":"2","value":"44"}]}');
$(document).ready(function() {
  $('body')
    .on('blur', 'select, input', function() {
      updateTotals();
    })
    .on('change', '[data-role="jsonString"]', function() {
      loadJson();
    })
    .on('click', '[data-role="addMod"]', function() {
      AddModifier(this);
    });
});



function updateTotals() {
  var cards = $('[data-role="cards"]'),
    data = {
      baseLife: $(cards).find('#lifeText').val(),
      baseEs: $(cards).find('#esText').val(),
      dps: 0,
      increases: [],
      mores: []
    };

  $('[data-role="card"]').each(function(i, el) {
    var card = $(el),
      item = {
        modName: $(card).find('[data-role="modName"]').val(),
        modType:...