cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmlicon-personicon-teamoctocatpop-outspinnerstartv

yyWLXw

A Pen By Captain Anonymous

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <h1><a href="#home">Diablo 3 Barbarian Breakpoint Calculator</a></h1>

<form id="breakpoint-calc">
  <table>
  <tr>
    <th>Weapon speed</th>
    <td><input type="text" id="wspd" size="3" value="1.391" placeholder="wspd"></td>
  </tr><tr>
    <th>Gogok</th>
    <td>Active? <input type="checkbox" checked="checked" id="gog" value="0.15"> (15 stacks)</td>
  </tr><tr>
    <th>Pain Enhancer</th>
    <td>Active? <input type="checkbox" checked="checked" id="pe" value="1">
    Enemies affected? <select id="pe_value">
      <option value="0.03">1</option>
      <option value="0.06">2</option>
      <option value="0.09">3</option>
      <option value="0.12">4</option>
      <option value="0.15">5</option>
      <option value="0.18">6</option>
      <option value="0.21">7</option>
      <option value="0.24">8</option>
      <option value="0.27">9</option>
      <option value="0.30">10</option>
      <option value="0.33">11</option>
      <option value="0.36">12</option>
      <option value="0.39">13</option>
      <option value="0.42">14</option>
      <option value="0.45">15</option>
      <option value="0.48">16</option>
      <option value="0.51">17</option>
      <option value="0.54">18</option>
      <option value="0.57">19</option>
      <option value="0.60">20</option>
      <option value="0.75">25</option>
      <option value="0.90">30</option>
    </select></td>
  </tr><tr>
    <th>Sum of aps on gear or other sources</th>
    <td><input type="text" id="gear" size="3" value="67">% (dual wield 15, berserker 25, paragon 10, enchantress 3)</td>
  </tr><tr>
    <th>Bul-Kathos's Oath</th>
    <td>Active? <input type="checkbox" checked="checked" id="bko" value="1.30"></td>
  </tr><tr>
    <th>Tasker and Theo</th>
    <td>Active? <input type="checkbox" id="tnt" value="1">
    Value <select id="tnt_value">
      <option value="0.40">40%</option>
      <option value="0.41">41%</option>
      <option value="0.42">42%</option>
      <option value="0.43">43%</option>
      <option value="0.44">44%</option>
      <option value="0.45">45%</option>
      <option value="0.46">46%</option>
      <option value="0.47">47%</option>
      <option value="0.48">48%</option>
      <option value="0.49">49%</option>
      <option value="0.50">50%</option>
    </select></td>
  </tr><tr>
    <th class="tright" colspan="2"><button>Calculate</button></th>
  </tr>
  </table>

</form>

<div id="result"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
            
          
!
            
                * {
    box-sizing:border-box;
    font-family:inherit;
    color:inherit;
    font-size:inherit;
    margin:0;
    padding:0;
  }

  html {
    font-family:arial,sans-serif;
    font-size:87.5%;
    background:#eeeeea;
    height:100%;
  }

  body {
    padding:1em;
    height:100%;
    box-shadow:0 0 5em rgba(0,0,0,0.3) inset;
  }

  h1 {
    font-size:1.5em;
    margin-bottom:0.75em;
  }

  h1 a {
    color:red;
    text-decoration:none;
  }

  form {
  }

  table {
    background:#eeeeea;
    box-shadow:0 0.1em 0.3em rgba(0,0,0,0.15),0 0 1em rgba(0,0,0,0.1) inset;
    overflow:hidden;
    margin-bottom:1em;
    border:1px solid rgba(0,0,0,0.2);
    border-top-color:white;
    border-spacing:0;
    border-collapse:separate;
    border-top-color:white;
    border-left-color:white;
    border-radius:1em;
  }

  table th {
    background:rgba(0,0,0,0.05);
    box-shadow:0 0 1em rgba(0,0,0,0.1) inset;
    padding:0.5em 0.75em;
    text-align:left;
    border:1px solid rgba(0,0,0,0.2);
    border-top-color:white;
    border-left-color:white;
    font-weight:600;
  }

  table td {
    padding:0.5em 1em;
    box-shadow:0 0 1em rgba(0,0,0,0.1) inset;
    border:1px solid rgba(0,0,0,0.2);
    border-top-color:white;
    border-left-color:white;
  }

  button,
  select,
  input[type=text] {
    padding:0.1em 0.5em;
  }

  button {
    cursor:pointer;
  }

  input[type=checkbox] {
  }

  h3 {
    margin-bottom:1em;
    color:maroon;
  }

  #tnt-gloves {
    background:transparent url(http://media.blizzard.com/d3/icons/items/large/unique_gloves_003_x1_demonhunter_male.png) center center no-repeat;
    background-size:auto 4em;
    width:4em;
    height:4em;
    position:relative;
    margin:-1em;
  }

  #bko-sword {
    /*background:transparent url(http://media.blizzard.com/d3/icons/items/large/unique_mighty_1h_010_x1_demonhunter_male.png) center center no-repeat;*/
    background:transparent url(http://media.blizzard.com/d3/icons/items/large/unique_mighty_1h_011_x1_demonhunter_male.png) center center no-repeat;    
    background-size:auto 4em;
    width:4em;
    height:4em;
    position:relative;
    margin:-1em;
  }
  
  table img {
    width:2em;
    height:2em;
    display:block;
  }

  .tright {
    text-align:right;
  }
            
          
!
            
                //data
  var data = {}

  //ww breakpoints
  data.ww_breakpoints = [];
  var tps_temp = 0.0;
  var idx = 0;
  for (var i=70000; i <= 999999; i++) {
    var aps = i/100000;
    var tps = 60/Math.floor(20/aps);
    if(tps != tps_temp) {
      data.ww_breakpoints[idx] = {"aps":aps,"tps":tps}
      tps_temp = tps;
      idx++;
    }
  }

  //wwdd breakpoints
  data.wwdd_breakpoints = [];
  var tps_temp = 0.0;
  var idx = 0;
  for (var i=70000; i <= 999999; i++) {
    var aps = i/100000;
    var tps = 60/Math.floor(30/aps);
    if(tps != tps_temp) {
      data.wwdd_breakpoints[idx] = {"aps":aps,"tps":tps}
      tps_temp = tps;
      idx++;
    }
  }

  //cota breakpoints
  data.cota_breakpoints = [];
  var tps_temp = 0.0;
  var idx = 0;
  for (var i=70000; i <= 999999; i++) {
    var aps = i/100000;
    var tps = 60/Math.floor(60/aps);
    var tps_test = Math.ceil(60/tps/6);
    if(tps_test != tps_temp) {
      data.cota_breakpoints[idx] = {"aps":aps,"tps":tps}
      tps_temp = tps_test;
      idx++;
    }
  }

  console.log(data);

  $(function() {

    var $wspd = $("#wspd");
    var $bko = $("#bko");
    var $gog = $("#gog");
    var $pe = $("#pe");
    var $pe_value = $("#pe_value");
    var $gear = $("#gear");
    var $tnt = $("#tnt");
    var $tnt_value = $("#tnt_value");
    var $result = $("#result");

    $("#breakpoint-calc").submit(function(event) {
      event.preventDefault();
      if(!$.isNumeric($wspd.val())) {
        $wspd.val("1.0");
      }
      var wspd = parseFloat($wspd.val());
      if(wspd<0.7) {
        $wspd.val("0.7");
        wspd = parseFloat($wspd.val());
      }
      //tasker and theo
      var tnt = parseFloat(1.0);
      if($tnt.prop("checked")) {
        tnt = tnt+parseFloat($tnt_value.val());
      }
      //bul kathos oath
      var bko = parseFloat(1.0);
      if($bko.prop("checked")) {
        bko = parseFloat($bko.val());
      }
      var apsbuffs = parseFloat(0.0);
      //apsbuffs+gogok
      if($gog.prop("checked")) {
        apsbuffs = apsbuffs+parseFloat($gog.val());
      }
      //apsbuffs+pe
      if($pe.prop("checked")) {
        apsbuffs = apsbuffs+parseFloat($pe_value.val());
      }
      //apsbuffs+gear
      if(!$.isNumeric($gear.val())) {
        $gear.val("0");
      }
      var gear = parseFloat($gear.val())/100;
      if(gear<0) {
        $gear.val("0");
        gear = 0.0;
      }
      apsbuffs = apsbuffs+gear;

      var aps = wspd*(1+apsbuffs);

      var ww_tps = 0.0;
      var ww_aps_missing = 0.0;
      var wwdd_tps = 0.0;
      var wwdd_aps_missing = 0.0;
      var cota_tps = 0.0;
      var cota_aps_missing = 0.0;
      //petaps
      var cota_aps = aps*tnt;
      //wwaps
      var ww_aps = aps*bko;

      var ww_done_yet = false;
      $.each(data.ww_breakpoints,function(idx,row) {
        if(ww_aps >= row.aps) {
          ww_tps = row.tps
        }
        if(ww_aps < row.aps && !ww_done_yet) {
          ww_aps_missing = (row.aps-ww_aps)/bko;
          ww_done_yet = true;
        }
      });

      var wwdd_done_yet = false;
      $.each(data.wwdd_breakpoints,function(idx,row) {
        if(ww_aps >= row.aps) {
          wwdd_tps = row.tps
        }
        if(ww_aps < row.aps && !wwdd_done_yet) {
          wwdd_aps_missing = (row.aps-ww_aps)/bko;
          wwdd_done_yet = true;
        }
      });

      var cota_done_yet = false;
      $.each(data.cota_breakpoints,function(idx,row) {
        if(cota_aps >= row.aps) {
          cota_tps = row.tps
        }
        if(cota_aps < row.aps && !cota_done_yet) {
          cota_aps_missing = (row.aps-cota_aps)/tnt;
          cota_done_yet = true;
        }
      });
      
      

      $result.html("<h3>Result APS</h3><table><tr><th><img src=\"http://media.blizzard.com/d3/icons/skills/64/monk_passive_fleetfooted.png\"></th><th>Sum of APS buffs</th><td>"+Math.round(apsbuffs*100)+"%</td></tr><tr><th><img src=\"http://media.blizzard.com/d3/icons/skills/64/monk_passive_seizetheinitiative.png\"></th><th>Attacks per second</th><td>"+(aps.toString().substr(0,8))+"</td></tr><tr><th><div id=\"bko-sword\"></div></th><th>Attacks per second incl. BKO</th><td>"+(ww_aps.toString().substr(0,8))+"</td></tr><tr><th><div id=\"tnt-gloves\"></div></th><th>Attacks per second incl. T&T</th><td>"+(cota_aps.toString().substr(0,8))+"</td></tr></table><h3>Result TPS</h3><table><tr><th><img src=\"http://media.blizzard.com/d3/icons/skills/64/barbarian_whirlwind.png\"></th><th>Whirlwind ticks per second</th><td>"+(ww_tps.toString().substr(0,6))+"</td><th><img src=\"http://media.blizzard.com/d3/icons/items/large/dye_18_demonhunter_male.png\"></th><th>Missing aps for next breakpoint</th><td>"+(ww_aps_missing.toString().substr(0,6))+"</td></tr><tr><th><img src=\"http://media.blizzard.com/d3/icons/skills/64/barbarian_whirlwind.png\"></th><th>Whirlwind dust devil ticks per second</th><td>"+(wwdd_tps.toString().substr(0,6))+"</td><th><img src=\"http://media.blizzard.com/d3/icons/items/large/dye_18_demonhunter_male.png\"></th><th>Missing aps for next breakpoint</th><td>"+(wwdd_aps_missing.toString().substr(0,6))+"</td></tr><tr><th><img src=\"http://media.blizzard.com/d3/icons/skills/64/barbarian_calloftheancients.png\"></th><th>CotA attacks per second</th><td>"+(cota_tps.toString().substr(0,6))+"</td><th><img src=\"http://media.blizzard.com/d3/icons/items/large/dye_18_demonhunter_male.png\"></th><th>Missing aps for next breakpoint</th><td>"+(cota_aps_missing.toString().substr(0,6))+"</td></tr></table>");

    });

  });
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console