morestabby

by kimadactyl

HTML

<script src="http://github.com/downloads/SteveSanderson/knockout/knockout-2.1.0.js"></script>
<h2>Before</h2>
<table class="equipment before">
<thead>
  <tr>
    <th>Item</th>
    <th>Int</th>
    <th>IAS</th>
    <th>Crit %</th>
    <th>Crit Dmg</th>
    <th>Min</th>
    <th>Max</th>
  </tr>
</thead>
<tbody data-bind="foreach: items">
  <tr>
    <td data-bind="text: item"></td>
    <td><input data-bind="value: int"></input></td>
    <td><input data-bind="value: ias"></input></td>
    <td><input data-bind="value: critpc"></input></td>
    <td><input data-bind="value: critdmg"></input></td>
    <td><input data-bind="value: min"></input></td>
    <td><input data-bind="value: max"></input></td>
  </tr>
</tbody>
<tfoot>
  <tr>
    <td>TOTAL</td>
    <td data-bind="text: intTotal"></td>
    <td data-bind="text: iasTotal"></td>
    <td data-bind="text: critpcTotal"></td>
    <td data-bind="text: critdmgTotal"></td>
    <td data-bind="text: minTotal"></td>
    <td data-bind="text: maxTotal"></td>
  </tr>   
</tfoot>
</table>
<h2>After</h2>
<div class="after"></div>
<h3>Skills</h3>
Pierce The Veil? <input type='checkbox' data-bind="checked: pierceTheVeil">

<h3>DPS TOTAL</h3> 
<span data-bind="text: dpsTotal"></span></h3>

CSS

body { font-family: Courier; }
td input, th { width: 30px }
h2 { font-size: 1.5em; }
h3 { font-size: 1.3em; }
h2, h3 { margin: 1em 0 0.5em; }

JavaScript

// Class to represent an item in the hero grid


function HeroItem(item, int, ias, critpc, critdmg, min, max) {
    var self = this;
    self.item = item;
    self.int = ko.observable(int);
    self.ias = ko.observable(ias);
    self.critdmg = ko.observable(critdmg);
    self.critpc = ko.observable(critpc);
    self.min = ko.observable(min);
    self.max = ko.observable(max);
}

// Overall viewmodel for this screen, along with initial state


function HeroViewModel() {
    var self = this;

    // Editable data
    self.items = ko.observableArray([
        new HeroItem("Helm", 167, 0, 0, 0, 0, 0),
        new HeroItem("Shoulders", 161, 0, 0, 0, 0, 0),
        new HeroItem("Amulet", 244, 0, 0, 55, 0, 0),
        new HeroItem("Chest", 229, 0, 0, 0, 0, 0),
        new HeroItem("Gloves", 138, 15, 0, 0, 0, 0),
        new HeroItem("Belt", 169, 0, 0, 0, 0, 0),
        new HeroItem("Bracers", 143, 0, 3, 0, 0, 0),
        new HeroItem("Ring 1", 38, 15, 0, 0, 12, 0),
        new HeroItem("Ring 2", 71, 15, 0, 0, 0, 0),
        new HeroItem("Pants", 148, 0, 0, 0, 0, 0),
        new HeroItem("Weapon", 124, 30, 0, 0, 448, 934),
        new HeroItem("Offhand", 66, 0, 0, 0, 71, 279),
        new HeroItem("Boots", 71, 0, 0, 0, 0, 0)
        ]);

    // Column totals
    self.intTotal = ko.computed(function() {
        var total = 0;
        $.each(self.items(), function() {
            total += parseInt(this.int())
        })
        // Base INT - 187
        return total + 187;
    });
    self.iasTotal = ko.computed(function() {
        var astotal = 0;
        var weapontotal = 0;
        $.each(self.items(), function() {
            if (this.item != "Weapon") {
                astotal += parseInt(this.ias());
            }
            else {
                weapontotal = parseInt(this.ias());
            }
        })
        // Attack speed is weapon speed * IAS
        return ((astotal + 100) / 100) * ((weapontotal + 100) / 100);
    });
    self.critdmgTotal =...