Here is my HTML: <div class="all">
<div class="statsHeader">
<div class="cornerNW"></div>
<div style="width:50px;">
<div class="borderTitle">STATS</div>
</div>
<div class="cornerNE">
<div class="labelLeft">XP Spent:</div>
<div class="xp_fields flowLayout">
<span name="attr_xpSpent"></span>
</div>
</div>
<div class="cornerNE">
<div class="labelLeft">Fortitude</div>
<div class="flowLayout">
<input type="number" class="shortNum" name="attr_fortitude"/>/
<span name="attr_fortitude_max"></span>
</div>
</div>
<div class="cornerNE">
<div class="labelLeft">Willpower</div>
<div class="sheet-flowLayout">
<input type="number" name="attr_willpower"/>/
<span name="attr_willpower_max"></span>
</div>
</div>
<div class="cornerNE">
<div class="labelLeft">Valor</div>
<div class="sheet-flowLayout">
<input type="number" name="attr_valor"/>/
<span name="attr_valor_max"></span>
</div>
</div>
</div>
<div class="tabContainer">
<!--This is just used to reserve space for the tabs' contents, which are asolutely positioned to here.-->
</div>
<div class="tabsFooter">
<div class="cornerSW"></div>
<input type="radio" class="tabRadio" name="tab" id="sheet-tab_special" checked>
<div class="tab">
<label for="sheet-tab_special">S.P.E.C.I.A.L.</label>
</div>
<div class="tabContents special">
<div class="sheet-2colrow">
<div class="sheet-col statusImage">
<input type="radio" name="attr_statusImage" value="healthy" checked>
<img src="<a href="http://th03.deviantart.net/fs70/PRE/i/2015/012/7/d/vault_filly_by_cazra-d8doquo.png" rel="nofollow">http://th03.deviantart.net/fs70/PRE/i/2015/012/7/d/vault_filly_by_cazra-d8doquo.png</a>">
<input type="radio" name="attr_statusImage" value="bloodied">
<img src="<a href="http://neonairgames.net/img/vaultFilly/VaultFilly_bloodied.png" rel="nofollow">http://neonairgames.net/img/vaultFilly/VaultFilly_bloodied.png</a>">
<input type="radio" name="attr_statusImage" value="critical">
<img src="<a href="http://neonairgames.net/img/vaultFilly/VaultFilly_critical.png" rel="nofollow">http://neonairgames.net/img/vaultFilly/VaultFilly_critical.png</a>">
<input type="radio" name="attr_statusImage" value="sidelined">
<img src="<a href="http://neonairgames.net/img/vaultFilly/VaultFilly_sidelined.png" rel="nofollow">http://neonairgames.net/img/vaultFilly/VaultFilly_sidelined.png</a>">
</div>
<div class="sheet-col statsPanel">
<div class="panel">
<h2>General</h2>
<div class="field">
<label>Name</label><span name="attr_character_name"></span>
</div>
<div class="field">
<label>Race</label><input type="text" name="attr_race"/>
</div>
<div class="field">
<label>Guiding Element</label>
<select name="attr_guiding_elem">
<option value="def">Select</option>
<option value="generosity">Generosity</option>
<option value="honesty">Honesty</option>
<option value="kindness">Kindness</option>
<option value="laughter">Laughter</option>
<option value="loyalty">Loyalty</option>
<option value="magic">Magic</option>
</select>
</div>
<div class="field">
<label>Fatal Flaw</label><input type="text" name="attr_flaw">
</div>
<div class="field">
<label>Background Theme</label><input type="text" name="attr_bgTheme">
</div>
</div>
<div class="panel">
<h2>Attributes</h2>
<div class="primaryAttr">
<div class="label">
MIND
</div>
<div>
<input type="number" name="attr_mind" value="1" />
</div>
</div>
<div class="primaryAttr">
<div class="label">
BODY
</div>
<div>
<input type="number" name="attr_body" value="1" />
</div>
</div>
<div class="primaryAttr">
<div class="label">
HEART
</div>
<div>
<input type="number" name="attr_heart" value="1" />
</div>
</div>
</div>
<div class="panel">
<h2>Description</h2>
<textarea name="attr_description" rows="4"></textarea>
</div>
</div>
</div>
</div>
<div class="spacer"></div>
<input type="radio" class="tabRadio" name="tab" id="sheet-tab_skills">
<div class="tab">
<label for="sheet-tab_skills">SKILLS/PERKS</label>
</div>
<div class="tabContents skills">
<div class="sheet-2colrow stretchY relativePos">
<!-- Skills -->
<div class="col stretchY scrollingY overflowX">
<h2>SKILLS</h2>
<div class="panel skillsList">
<h2>MIND</h2>
<div class="table">
<fieldset name="skillsMind" class="repeating_skillsMind"> <!--A div is created for each instance which we can use as a row.-->
<div class="tableRow">
<div>
<input type="text" name="attr_skillM"/>
</div>
<div class="rankBox trained" title="Trained">
<input type="checkbox" name="attr_skillMT" value="1"/>
<div>T</div>
</div>
<div class="rankBox improved" title="Improved">
<input type="checkbox" name="attr_skillMI" value="1"/>
<div>I</div>
</div>
<div class="rankBox greater" title="Greater">
<input type="checkbox" name="attr_skillMG" value="1"/>
<div>G</div>
</div>
<div class="rollSkill">
<input class="skillMod" type="number" name="attr_skillMAdv" value="0" title="Advantages"/>
<input class="skillMod" type="number" name="attr_skillMDis" value="0" title="Drawbacks"/>
<input class="skillMod" type="number" name="attr_skillMMisc" value="0" title="Misc. Modifier"/>
<button type="roll" value="!r @{skillM}"></button>
</div>
</div>
<div class="conditionalMods">
<span>Conditional Modifiers:</span>
<input type="text" name="attr_skillMConds" />
</div>
</fieldset>
</div>
</div>
<div class="panel skillsList">
<h2>BODY</h2>
<div class="table">
<fieldset name="skillsBody" class="repeating_skillsBody"> <!--A div is created for each instance which we can use as a row.-->
<div class="tableRow">
<div>
<input type="text" name="attr_skillB"/>
</div>
<div class="rankBox trained" title="Trained">
<input type="checkbox" name="attr_skillBT" value="1"/>
<div>T</div>
</div>
<div class="rankBox improved" title="Improved">
<input type="checkbox" name="attr_skillBI" value="1"/>
<div>I</div>
</div>
<div class="rankBox greater" title="Greater">
<input type="checkbox" name="attr_skillBG" value="1"/>
<div>G</div>
</div>
<div class="rollSkill">
<input class="skillMod" type="number" name="attr_skillBAdv" value="0" title="Advantages"/>
<input class="skillMod" type="number" name="attr_skillBDis" value="0" title="Drawbacks"/>
<input class="skillMod" type="number" name="attr_skillBMisc" value="0" title="Misc. Modifier"/>
<button type="roll" value="!r @{skillB}"></button>
</div>
</div>
<div class="conditionalMods">
<span>Conditional Modifiers:</span>
<input type="text" name="attr_skillBConds" />
</div>
</fieldset>
</div>
</div>
<div class="panel skillsList">
<h2>HEART</h2>
<div class="table">
<fieldset name="skillsHeart" class="repeating_skillsHeart"> <!--A div is created for each instance which we can use as a row.-->
<div class="tableRow">
<div>
<input type="text" name="attr_skillH"/>
</div>
<div class="rankBox trained" title="Trained">
<input type="checkbox" name="attr_skillHT" value="1"/>
<div>T</div>
</div>
<div class="rankBox improved" title="Improved">
<input type="checkbox" name="attr_skillHI" value="1"/>
<div>I</div>
</div>
<div class="rankBox greater" title="Greater">
<input type="checkbox" name="attr_skillHG" value="1"/>
<div>G</div>
</div>
<div class="rollSkill">
<input class="skillMod" type="number" name="attr_skillHAdv" value="0" title="Advantages"/>
<input class="skillMod" type="number" name="attr_skillHDis" value="0" title="Drawbacks"/>
<input class="skillMod" type="number" name="attr_skillHMisc" value="0" title="Misc. Modifier"/>
<button type="roll" value="!r @{skillH}"></button>
</div>
</div>
<div class="conditionalMods">
<span>Conditional Modifiers:</span>
<input type="text" name="attr_skillHConds" />
</div>
</fieldset>
</div>
</div>
</div>
<!-- Edges -->
<div class="col stretchY scrollingY">
<h2>PERKS</h2>
<div class="panel edgesList">
<h2>Built-in</h2>
<div class="table">
<div class="tableRow">
<div>
Determined
</div>
<div class="rankBox trained" title="Taken">
<input type="checkbox" name="attr_edgeDetermined" value="1"/>
<div>T</div>
</div>
<div class="rankBox improved" title="Improved">
<input type="checkbox" name="attr_edgeDeterminedI" value="1"/>
<div>I</div>
</div>
<div class="rankBox greater" title="Greater">
<input type="checkbox" name="attr_edgeDeterminedG" value="1"/>
<div>G</div>
</div>
</div>
<div class="tableRow">
<div>
Vitality
</div>
<div class="rankBox trained" title="Taken">
<input type="checkbox" name="attr_edgeVitality" value="1"/>
<div>T</div>
</div>
<div class="rankBox improved" title="Improved">
<input type="checkbox" name="attr_edgeVitalityI" value="1"/>
<div>I</div>
</div>
<div class="rankBox greater" title="Greater">
<input type="checkbox" name="attr_edgeVitalityG" value="1"/>
<div>G</div>
</div>
</div>
<div class="tableRow">
<div>
Noble Soul
</div>
<div class="rankBox trained" title="Taken">
<input type="checkbox" name="attr_edgeNobleSoul" value="1"/>
<div>T</div>
</div>
<div class="rankBox improved" title="Improved">
<input type="checkbox" name="attr_edgeNobleSoulI" value="1"/>
<div>I</div>
</div>
<div class="rankBox greater" title="Greater">
<input type="checkbox" name="attr_edgeNobleSoulG" value="1"/>
<div>G</div>
</div>
</div>
</div>
</div>
<div class="panel edgesList">
<h2>Custom</h2>
<div class="table">
<fieldset name="edges" class="repeating_edges"> <!--A div is created for each instance which we can use as a row.-->
<div class="tableRow">
<div>
<input type="text" name="attr_edge"/>
</div>
<div class="rankBox trained" title="Taken">
<input type="checkbox" name="attr_edgeT" value="1"/>
<div>T</div>
</div>
<div class="rankBox improved" title="Improved">
<input type="checkbox" name="attr_edgeI" value="1"/>
<div>I</div>
</div>
<div class="rankBox greater" title="Greater">
<input type="checkbox" name="attr_edgeG" value="1"/>
<div>G</div>
</div>
</div>
</fieldset>
</div>
</div>
</div>
</div>
</div>
<div class="spacer"></div>
<input type="radio" class="tabRadio" name="tab" id="sheet-tab_perks">
<div class="tab">
<label for="sheet-tab_perks">MAGIC</label>
</div>
<div class="tabContents magic">
<div class="stretchY scrollingY">
<div class="spellsList">
<fieldset name="spells" class="repeating_spells">
<div class="panel">
<div style="display: inline-block;">
<div class="rankBox" title="Prepared?">
<input type="checkbox" name="attr_spellPrepared"/>
<div>P</div>
</div>
</div>
<div style="display: inline-block; vertical-align: text-top; width: 90%;">
<h2>
<input type="text" name="attr_spellName" placeholder="Spell name"/>
Lv. <input type="number" name="attr_spellLevel" disabled="true"
value="(@{spellTarget} + @{spellRange} + @{spellDuration} + @{spellEffectsTotal} + @{spellSubjectsTotal})"/>
</h2>
<div class="spellBody">
Target: <select name="attr_spellTarget">
<option value=1>Individual</option>
<option value=2>Group</option>
<option value=4>Area</option>
<option value=8>Mass</option>
</select>
Range: <select name="attr_spellRange">
<option value=1>Contact</option>
<option value=2>Seen</option>
<option value=4>Known</option>
<option value=8>Unknown</option>
</select>
Duration: <select name="attr_spellDuration">
<option value=1>Immediate</option>
<option value=2>Sustained</option>
<option value=4>Temporary</option>
<option value=8>Persistent</option>
</select> <br/>
<div style="display: inline-block;">
Effects:
</div>
<div style="display: inline-block; vertical-align: text-top;">
<input type="hidden" name="attr_spellEffectsTotal" disabled="true"
value="(@{spellAnimate} + @{spellCombine} + @{spellDeceive} + @{spellDiminish} +
@{spellForge} + @{spellModify} + @{spellReveal} + @{spellSeparate})"/>
<table class="layoutTable">
<tr>
<td>
<div class="rankBox">
<input type="checkbox" name="attr_spellAnimate" value="1"/>
<div> </div>
</div> Animate
</td>
<td>
<div class="rankBox">
<input type="checkbox" name="attr_spellCombine" value="1"/>
<div> </div>
</div> Combine
</td>
<td>
<div class="rankBox">
<input type="checkbox" name="attr_spellDeceive" value="1"/>
<div> </div>
</div> Deceive
</td>
<td>
<div class="rankBox">
<input type="checkbox" name="attr_spellDiminish" value="1"/>
<div> </div>
</div> Diminish
</td>
<td>
<div class="rankBox">
<input type="checkbox" name="attr_spellForge" value="1"/>
<div> </div>
</div> Forge
</td>
<td>
<div class="rankBox">
<input type="checkbox" name="attr_spellModify" value="1"/>
<div> </div>
</div> Modify
</td>
<td>
<div class="rankBox">
<input type="checkbox" name="attr_spellReveal" value="1"/>
<div> </div>
</div> Reveal
</td>
<td>
<div class="rankBox">
<input type="checkbox" name="attr_spellSeparate" value="1"/>
<div> </div>
</div> Separate
</td>
</tr>
</table>
</div> <br/>
<div style="display: inline-block;">
Subjects:
</div>
<div style="display: inline-block; vertical-align: text-top;">
<input type="hidden" name="attr_spellSubjectsTotal" disabled="true"
value="(@{spellAir} + @{spellAnimal} + @{spellBody} + @{spellConstruct} + @{spellEarth} +
@{spellEnergy} + @{spellForce} + @{spellHeat} + @{spellLight} + @{spellMagic} +
@{spellMind} + @{spellPlant} + @{spellShadow} + @{spellSound} + @{spellSpace} +
@{spellTime} + @{spellWater} + @{spellWeather})"/>
<table class="layoutTable">
<tr>
<td>
<div class="rankBox">
<input type="checkbox" name="attr_spellAir" value="1"/>
<div> </div>
</div> Air
</td>
<td>
<div class="rankBox">
<input type="checkbox" name="attr_spellAnimal" value="1"/>
<div> </div>
</div> Animal
</td>
<td>
<div class="rankBox">
<input type="checkbox" name="attr_spellBody" value="1"/>
<div> </div>
</div> Body
</td>
<td>
<div class="rankBox">
<input type="checkbox" name="attr_spellConstruct" value="1"/>
<div> </div>
</div> Construct
</td>
<td>
<div class="rankBox">
<input type="checkbox" name="attr_spellEarth" value="1"/>
<div> </div>
</div> Earth
</td>
<td>
<div class="rankBox">
<input type="checkbox" name="attr_spellEnergy" value="1"/>
<div> </div>
</div> Energy
</td>
<td>
<div class="rankBox">
<input type="checkbox" name="attr_spellForce" value="1"/>
<div> </div>
</div> Force
</td>
<td>
<div class="rankBox">
<input type="checkbox" name="attr_spellHeat" value="1"/>
<div> </div>
</div> Heat
</td>
<td>
<div class="rankBox">
<input type="checkbox" name="attr_spellLight" value="1"/>
<div> </div>
</div> Light
</td>
<td>
<div class="rankBox">
<input type="checkbox" name="attr_spellMagic" value="1"/>
<div> </div>
</div> Magic
</td>
</tr>
<tr>
<td>
<div class="rankBox">
<input type="checkbox" name="attr_spellMind" value="1"/>
<div> </div>
</div> Mind
</td>
<td>
<div class="rankBox">
<input type="checkbox" name="attr_spellPlant" value="1"/>
<div> </div>
</div> Plant
</td>
<td>
<div class="rankBox">
<input type="checkbox" name="attr_spellShadow" value="1"/>
<div> </div>
</div> Shadow
</td>
<td>
<div class="rankBox">
<input type="checkbox" name="attr_spellSound" value="1"/>
<div> </div>
</div> Sound
</td>
<td>
<div class="rankBox">
<input type="checkbox" name="attr_spellSpace" value="1"/>
<div> </div>
</div> Space
</td>
<td>
<div class="rankBox">
<input type="checkbox" name="attr_spellTime" value="1"/>
<div> </div>
</div> Time
</td>
<td>
<div class="rankBox">
<input type="checkbox" name="attr_spellWater" value="1"/>
<div> </div>
</div> Water
</td>
<td>
<div class="rankBox">
<input type="checkbox" name="attr_spellWeather" value="1"/>
<div> </div>
</div> Weather
</td>
</tr>
</table>
</div> <!-- End effects and subjects -->
<textarea name="attr_spellDescription" rows="3" placeholder="Spell description"></textarea>
</div> <!-- End spellBody -->
</div>
</div> <!-- End panel -->
</fieldset>
</div>
</div>
</div>
<div class="spacer"></div>
<input type="radio" class="tabRadio" name="tab" id="sheet-tab_inventory">
<div class="tab">
<label for="sheet-tab_inventory">INVENTORY</label>
</div>
<div class="tabContents inventory">
<div class="panel">
<div class="field caps">
<label>Caps</label>
<input type="number" name="attr_caps">
</div>
<label>Equipped</label>
<textarea rows="6" name="attr_equipped"></textarea>
<label>Inventory</label>
<textarea rows="12" name="attr_inventory"></textarea>
</div>
</div>
<div class="spacer"></div>
<input type="radio" class="tabRadio" name="tab" id="sheet-tab_general">
<div class="tab">
<label for="sheet-tab_general">GENERAL</label>
</div>
<div class="tabContents general">
<div class="panel">
<div class="sheet-2colrow">
<div class="sheet-col">
<label>Notes</label>
<textarea rows="20" name="attr_notes"></textarea>
</div>
<div class="sheet-col">
<label>Special Talent/Signature Move</label>
<textarea rows="10" name="attr_notes2"></textarea>
<label>Pet/Companion</label>
<textarea rows="10" name="attr_pet"></textarea>
</div>
</div>
</div>
</div>
<div class="cornerSE"></div>
</div>
</div>
<span name='attr_debug' style="display:none;"></span>
<script type="text/worker">
var Asem = function(initCount, cb) {
this.count = initCount;
this.cb = cb;
this.hasFired = false;
};
_.extend(Asem.prototype, {
signal: function() {
this.count--;
if(this.count <= 0 && !this.hasFired) {
this.hasFired = true;
this.cb();
}
},
wait: function() {
this.count++;
}
});
/**
* Gets the specified attributes and parses them as an integer or 0.
*/
function parseAttrs(attrs, cb) {
getAttrs(attrs, function(values) {
_.each(attrs, function(attr) {
values[attr] = parseInt(values[attr]) || 0;
});
cb(values);
});
}
function updateFortMax() {
parseAttrs(['body', 'heart', 'edgeVitality', 'edgeVitalityI', 'edgeVitalityG', 'fortitudeOtherMods'], function(values) {
var fortMax = 10*values.body +
5*(values.heart + values.edgeVitality + values.edgeVitalityI + values.edgeVitalityG) +
values.fortitudeOtherMods;
setAttrs({
fortitude_max: fortMax
});
});
}
function updateWillMax() {
parseAttrs(['mind', 'heart', 'edgeDetermined', 'edgeDeterminedI', 'edgeDeterminedG', 'willpowerOtherMods'], function(values) {
var willMax = 10*values.mind +
5*(values.heart + values.edgeDetermined + values.edgeDeterminedI + values.edgeDeterminedG) +
values.willpowerOtherMods;
setAttrs({
willpower_max: willMax
});
});
}
function updateValorMax() {
parseAttrs(['heart', 'edgeNobleSoul', 'edgeNobleSoulI', 'edgeNobleSoulG'], function(values) {
var valorMax = values.heart + values.edgeNobleSoul + values.edgeNobleSoulI + values.edgeNobleSoulG;
setAttrs({
valor_max: valorMax
});
});
}
function updateHealthGraphic() {
parseAttrs(['fortitude', 'fortitude_max', 'willpower', 'willpower_max'], function(values) {
if(values.fortitude_max === 0 || values.willpower_max === 0) {
setAttrs({
statusImage: 'healthy'
});
}
else {
var alpha = Math.min(values.fortitude/values.fortitude_max, values.willpower/values.willpower_max);
if(alpha > 0.5) {
setAttrs({
statusImage: 'healthy'
});
}
else if(alpha > 0.25) {
setAttrs({
statusImage: 'bloodied'
});
}
else if(alpha > 0) {
setAttrs({
statusImage: 'critical'
});
}
else {
setAttrs({
statusImage: 'sidelined'
});
}
}
});
}
function updateXpSpent() {
var xpSpent = 0;
var asem = new Asem(1, function() {
setAttrs({
xpSpent: xpSpent
});
});
// Mind skill training
getSectionIDs('repeating_skillsMind', function(ids) {
_.each(ids, function(id) {
var baseAttr = 'repeating_skillsMind_' + id +'_';
parseAttrs([baseAttr + 'skillMT', baseAttr + 'skillMI', baseAttr + 'skillMG'], function(values) {
xpSpent += 5*values[baseAttr + 'skillMT'] + 10*values[baseAttr + 'skillMI'] + 15*values[baseAttr + 'skillMG'];
asem.signal();
});
asem.wait();
})
asem.signal();
});
asem.wait();
// Body skill training
getSectionIDs('repeating_skillsBody', function(ids) {
_.each(ids, function(id) {
var baseAttr = 'repeating_skillsBody_' + id +'_';
parseAttrs([baseAttr + 'skillBT', baseAttr + 'skillBI', baseAttr + 'skillBG'], function(values) {
xpSpent += 5*values[baseAttr + 'skillBT'] + 10*values[baseAttr + 'skillBI'] + 15*values[baseAttr + 'skillBG'];
asem.signal();
});
asem.wait();
})
asem.signal();
});
asem.wait();
// Heart skill training
getSectionIDs('repeating_skillsHeart', function(ids) {
_.each(ids, function(id) {
var baseAttr = 'repeating_skillsHeart_' + id +'_';
parseAttrs([baseAttr + 'skillHT', baseAttr + 'skillHI', baseAttr + 'skillHG'], function(values) {
xpSpent += 5*values[baseAttr + 'skillHT'] + 10*values[baseAttr + 'skillHI'] + 15*values[baseAttr + 'skillHG'];
asem.signal();
});
asem.wait();
})
asem.signal();
});
asem.wait();
// Built-in Edges
parseAttrs(['edgeDetermined', 'edgeDeterminedI', 'edgeDeterminedG',
'edgeVitality', 'edgeVitalityI', 'edgeVitalityG',
'edgeNobleSoul', 'edgeNobleSoulI', 'edgeNobleSoulG'], function(values) {
xpSpent += 5*values.edgeDetermined + 10*values.edgeDeterminedI + 15*values.edgeDeterminedG;
xpSpent += 5*values.edgeVitality + 10*values.edgeVitalityI + 15*values.edgeVitalityG;
xpSpent += 5*values.edgeNobleSoul + 10*values.edgeNobleSoulI + 15*values.edgeNobleSoulG;
asem.signal();
});
asem.wait();
// Custom edges
getSectionIDs('repeating_edges', function(ids) {
_.each(ids, function(id) {
var baseAttr = 'repeating_edges_' + id + '_';
parseAttrs([baseAttr + 'edgeT', baseAttr + 'edgeI', baseAttr + 'edgeG'], function(values) {
setAttrs({
debug: JSON.stringify(values)
});
xpSpent += 5*values[baseAttr + 'edgeT'] + 10*values[baseAttr + 'edgeI'] + 15*values[baseAttr + 'edgeG'];
asem.signal();
});
asem.wait();
});
asem.signal();
});
asem.wait();
asem.signal();
}
on('change:body change:heart change:edgeVitality change:edgeVitalityI change:edgeVitalityG change:fortitudeOtherMods', function() {
updateFortMax();
});
on('change:mind change:heart change:edgeDetermined change:edgeDeterminedI change:edgeDeterminedG', function() {
updateWillMax();
});
on('change:heart change:edgeNobleSoul change:edgeNobleSoulI change:edgeNobleSoulG', function() {
updateValorMax();
});
on('change:fortitude change:fortitude_max change:willpower change:willpower_max', function() {
updateHealthGraphic();
});
on('change:repeating_skillsMind:skillMT change:repeating_skillsMind:skillMI change:repeating_skillsMind:skillMG ' +
'change:repeating_skillsBody:skillBT change:repeating_skillsBody:skillBI change:repeating_skillsBody:skillBG ' +
'change:repeating_skillsHeart:skillHT change:repeating_skillsHeart:skillHI change:repeating_skillsHeart:skillHG ' +
'change:edgeDetermined change:edgeDeterminedI change:edgeDeterminedG ' +
'change:edgeVitality change:edgeVitalityI change:edgeVitalityG ' +
'change:edgeNobleSoul change:edgeNobleSoulI change:edgeNobleSoulG ' +
'change:repeating_edges:edgeT change:repeating_edges:edgeI change:repeating_edges:edgeG', function() {
updateXpSpent();
});
on('sheet:opened', function() {
updateFortMax();
updateWillMax();
updateValorMax();
updateXpSpent();
});
</script>
<rolltemplate class="sheet-rolltemplate-skillcheck">
<table>
<thead>
<tr>
<th>
{{charName}} -> {{skillName}}
</th>
</tr>
</thead>
<tbody>
<tr>
{{#untrained}}
<td class="skillcheck-untrained">Untrained</td>
{{/untrained}}
{{#trained}}
<td class="skillcheck-trained">Trained</td>
{{/trained}}
{{#improved}}
<td class="skillcheck-improved">Improved</td>
{{/improved}}
{{#greater}}
<td class="skillcheck-greater">Greater</td>
{{/greater}}
</tr>
<tr>
<td>Result: {{result}}</td>
</tr>
{{#notes}}
<tr>
<td>
<div>Notes:</div>
<div>{{notes}}</div>
</td>
</tr>
{{/notes}}
</tbody>
</table>
</rolltemplate>
