roll20-character-sheets-tester/TailsOfEquestria/sheet.html

<input type="hidden" name="attr_character_sheet" style="display: none;" value="TailsOfEquestria"/>
<div class="top"><img src="http://ninjadivision.com/wp-content/uploads/2017/02/MLP-Website-Header-900x325.jpg"/>
  <div class="mask"></div>
</div>
<div class="main-container">
  <div>
    <div class="bio">
      <div class="labelledUnderlined">
        <label>Pony Name:</label>
        <div class="inner">
          <input type="text" name="attr_character_name"/>
        </div>
      </div>
      <div class="labelledUnderlined">
        <label>Player Name:</label>
        <div class="inner">
          <input type="text" name="attr_player_name"/>
        </div>
      </div>
      <div class="labelledUnderlined">
        <label>Pony Type:</label>
        <div class="inner">
          <input type="text" name="attr_race"/>
        </div>
      </div>
      <div class="labelledUnderlined">
        <label>Level:</label>
        <div class="inner">
          <input type="number" name="attr_level"/>
        </div>
      </div>
      <div class="labelledUnderlined">
        <label>Element of Harmony:</label>
        <div class="inner">
          <select name="attr_elementOfHarmony">
            <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>
            <option value="other">other</option>
          </select>
        </div>
      </div>
    </div>
    <div class="friendshipTokens">
      <h1><span>F</span><span>R</span><span>I</span><span>E</span><span>N</span><span>D</span><span>S</span><span>H</span><span>I</span><span>P</span></h1>
      <input type="number" name="attr_friendshipTokens" value="0"/>
    </div>
  </div>
  <div>
    <div class="stamina">
      <h1>Stamina:</h1>
      <div class="fraction">
        <input type="number" name="attr_stamina"/><span>/</span>
        <input type="number" name="attr_stamina_max"/>
      </div>
    </div>
    <div class="traits">
      <div class="trait body">
        <label>Body</label>
        <button type="roll" value="&amp;{template:toe} {{charName=@{character_name}}} {{attr=body}} {{result=[[@{body}]]}}"></button>
        <select name="attr_body">
          <option value="null" selected="selected">none</option>
          <option value="d4">d4</option>
          <option value="d6">d6</option>
          <option value="d8">d8</option>
          <option value="d10">d10</option>
          <option value="d12">d12</option>
          <option value="d20">d20</option>
        </select>
      </div>
      <div class="trait mind"> 
        <label>Mind</label>
        <button type="roll" value="&amp;{template:toe} {{charName=@{character_name}}} {{attr=mind}} {{result=[[@{mind}]]}}"></button>
        <select name="attr_mind">
          <option value="null" selected="selected">none</option>
          <option value="d4">d4</option>
          <option value="d6">d6</option>
          <option value="d8">d8</option>
          <option value="d10">d10</option>
          <option value="d12">d12</option>
          <option value="d20">d20</option>
        </select>
      </div>
      <div class="trait charm">
        <label>Charm</label>
        <button type="roll" value="&amp;{template:toe} {{charName=@{character_name}}} {{attr=charm}} {{result=[[@{charm}]]}}"></button>
        <select name="attr_charm">
          <option value="null" selected="selected">none</option>
          <option value="d4">d4</option>
          <option value="d6">d6</option>
          <option value="d8">d8</option>
          <option value="d10">d10</option>
          <option value="d12">d12</option>
          <option value="d20">d20</option>
        </select>
      </div>
    </div>
  </div>
  <div class="explodingHooves">
    <h1>Exploding Hoof Dice:</h1>
    <div class="explodingHoof">
      <input type="hidden" name="attr_exploding_hoof_d4" style="display: none;" value="{1d3, floor(1d4/4)*{{0} + 4, 1d5, floor(1d6/6)*{{0} + 6, 1d7, floor(1d8/8)*{{0} + 8, 1d9, floor(1d10/10)*{{0} + 10, 1d11, floor(1d12/12)*{{0} + 12, 1d20}k1}k1}k1}k1}k1}k1"/>
      <button type="roll" value="&amp;{template:toe} {{charName=@{character_name}}} {{attr=exploding_hoof_d4}} {{result=[[@{exploding_hoof_d4}]]}}"></button>
    </div>
    <div class="explodingHoof">
      <input type="hidden" name="attr_exploding_hoof_d6" style="display: none;" value="{1d5, floor(1d6/6)*{{0} + 6, 1d7, floor(1d8/8)*{{0} + 8, 1d9, floor(1d10/10)*{{0} + 10, 1d11, floor(1d12/12)*{{0} + 12, 1d20}k1}k1}k1}k1}k1"/>
      <button type="roll" value="&amp;{template:toe} {{charName=@{character_name}}} {{attr=exploding_hoof_d6}} {{result=[[@{exploding_hoof_d6}]]}}"></button>
    </div>
    <div class="explodingHoof">
      <input type="hidden" name="attr_exploding_hoof_d8" style="display: none;" value="{1d7, floor(1d8/8)*{{0} + 8, 1d9, floor(1d10/10)*{{0} + 10, 1d11, floor(1d12/12)*{{0} + 12, 1d20}k1}k1}k1}k1"/>
      <button type="roll" value="&amp;{template:toe} {{charName=@{character_name}}} {{attr=exploding_hoof_d8}} {{result=[[@{exploding_hoof_d8}]]}}"></button>
    </div>
    <div class="explodingHoof">
      <input type="hidden" name="attr_exploding_hoof_d10" style="display: none;" value="{1d9, floor(1d10/10)*{{0} + 10, 1d11, floor(1d12/12)*{{0} + 12, 1d20}k1}k1}k1"/>
      <button type="roll" value="&amp;{template:toe} {{charName=@{character_name}}} {{attr=exploding_hoof_d10}} {{result=[[@{exploding_hoof_d10}]]}}"></button>
    </div>
    <div class="explodingHoof">
      <input type="hidden" name="attr_exploding_hoof_d12" style="display: none;" value="{1d11, floor(1d12/12)*{{0} + 12, 1d20}k1}k1"/>
      <button type="roll" value="&amp;{template:toe} {{charName=@{character_name}}} {{attr=exploding_hoof_d12}} {{result=[[@{exploding_hoof_d12}]]}}"></button>
    </div>
  </div>
  <div>
    <div class="talents">
      <h1>Talents:</h1>
            <div class="talent talentCutieMark">
              <label>CM:</label>
              <button type="roll" value="&amp;{template:toe} {{charName=@{character_name}}} {{attr=@{talent_cutieMark_name}}} {{result=[[@{talent_cutieMark_equation}]]}} {{notes=@{talent_cutieMark_notes}}}"></button>
              <div class="labelledUnderlined">
                <label></label>
                <div class="inner">
                  <input type="text" name="attr_talent_cutieMark_name"/>
                </div>
              </div>
              <div class="labelledUnderlined">
                <label>Dice:</label>
                <div class="inner">
                  <select name="attr_talent_cutieMark_dice">
                    <option value="null" selected="selected">none</option>
                    <option value="d4">d4</option>
                    <option value="d6">d6</option>
                    <option value="d8">d8</option>
                    <option value="d10">d10</option>
                    <option value="d12">d12</option>
                    <option value="d20">d20</option>
                  </select>
                </div>
              </div>
              <div class="labelledUnderlined">
                <label>Trait</label>
                <div class="inner">
                  <select name="attr_talent_cutieMark_trait">
                    <option value="null" selected="selected">none</option>
                    <option value="body">body</option>
                    <option value="mind">mind</option>
                    <option value="charm">charm</option>
                  </select>
                </div>
              </div>
              <div class="labelledUnderlined">
                <label>Notes:</label>
                <div class="inner">
                  <input type="text" name="attr_talent_cutieMark_notes"/>
                </div>
              </div>
              <input type="hidden" name="attr_talent_cutieMark_equation"/>
            </div>
      <fieldset class="repeating_talents">
              <div class="talent">
                <label>T:</label>
                <button type="roll" value="&amp;{template:toe} {{charName=@{character_name}}} {{attr=@{name}}} {{result=[[@{equation}]]}} {{notes=@{notes}}}"></button>
                <div class="labelledUnderlined">
                  <label></label>
                  <div class="inner">
                    <input type="text" name="attr_name"/>
                  </div>
                </div>
                <div class="labelledUnderlined">
                  <label>Dice:</label>
                  <div class="inner">
                    <select name="attr_dice">
                      <option value="null" selected="selected">none</option>
                      <option value="d4">d4</option>
                      <option value="d6">d6</option>
                      <option value="d8">d8</option>
                      <option value="d10">d10</option>
                      <option value="d12">d12</option>
                      <option value="d20">d20</option>
                    </select>
                  </div>
                </div>
                <div class="labelledUnderlined">
                  <label>Trait</label>
                  <div class="inner">
                    <select name="attr_trait">
                      <option value="null" selected="selected">none</option>
                      <option value="body">body</option>
                      <option value="mind">mind</option>
                      <option value="charm">charm</option>
                    </select>
                  </div>
                </div>
                <div class="labelledUnderlined">
                  <label>Notes:</label>
                  <div class="inner">
                    <input type="text" name="attr_notes"/>
                  </div>
                </div>
                <input type="hidden" name="attr_equation"/>
              </div>
      </fieldset>
    </div>
  </div>
  <div>
    <div class="quirks">
      <h1>Quirks:</h1>
            <div class="quirk quirkMain">
              <label>Main:</label>
              <div class="labelledUnderlined">
                <label></label>
                <div class="inner">
                  <input type="text" name="attr_quirk_main_name"/>
                </div>
              </div>
              <div class="labelledUnderlined">
                <label>Notes</label>
                <div class="inner">
                  <input type="text" name="attr_quirk_main_notes"/>
                </div>
              </div>
            </div>
      <fieldset class="repeating_quirks">
              <div class="quirk">
                <label>Q:</label>
                <div class="labelledUnderlined">
                  <label></label>
                  <div class="inner">
                    <input type="text" name="attr_name"/>
                  </div>
                </div>
                <div class="labelledUnderlined">
                  <label>Notes</label>
                  <div class="inner">
                    <input type="text" name="attr_notes"/>
                  </div>
                </div>
              </div>
      </fieldset>
    </div>
  </div>
  <div>
    <div class="inlineBlock" style="margin-right: 1em; vertical-align: top; width: 48%;">
      <h1>Equipment:</h1>
      <textarea name="attr_equipment" style="height: 4in;"></textarea>
    </div>
    <div class="inlineBlock" style="width: 48%;">
      <h1>Appearance/Cutie Mark:</h1>
      <textarea name="attr_appearance"></textarea>
      <h1>Campaign Notes:</h1>
      <textarea name="attr_campaignNotes"></textarea>
    </div>
  </div>
</div>
<script type="text/worker">/**
 * Forces an update on a list of numerical fields, also making sure that
 * any undefined fields are set to 0.
 * @param {string[]} attrs
 * @param {function} cb
 */
function forceUpdate(attrs, cb) {
  parseAttrs(attrs, values => {
    let tempValues = {};
    _.each(attrs, attr => {
      tempValues[attr] = -9999;
    });
    setAttrs(tempValues);
    setAttrs(values);
  });
}


function onChange(attrs, cb) {
  attrs = _.map(attrs, attr => {
    return 'change:' + attr;
  }).join(' ');
  on(attrs, cb);
}

function onChangeParse(attrs, cb) {
  onChange(attrs, () => {
    parseAttrs(attrs, cb);
  });
}

/**
 * Gets the specified attributes and parses them as an integer or 0.
 */
function parseAttrs(attrs, cb) {
  getAttrs(attrs, function(values) {
    _.each(attrs, function(attr) {
      if(_.isUndefined(values[attr]))
        values[attr] = 0;
      else if(!isNaN(values[attr]))
        values[attr] = parseInt(values[attr]);
    });
    cb(values);
  });
}

function updateCutieMarkTalent() {
  var prefix = 'talent_cutieMark';
  _updateTalents(prefix);
}

function updateTalents() {
  updateCutieMarkTalent();

  getSectionIDs('repeating_talents', ids => {
    _.each(ids, id => {
      var prefix = 'repeating_talents_' + id;
      _updateTalents(prefix);
    });
  });
}

function _updateTalents(prefix) {
  parseAttrs([prefix + '_dice', prefix + '_trait', 'body', 'mind', 'charm'], values => {
    var talentDice = values[prefix + '_dice'];
    var trait = values[prefix + '_trait'];
    var traitDice = values[trait];

    if(talentDice === 'null' || !traitDice)
      setAttrs({
        [prefix + '_equation']: 0
      });
    else {
      var traitDice = values[trait];
      setAttrs({
        [prefix + '_equation']: `{${talentDice},${traitDice}}k1`
      });
    }
  });
}

// Change events

on('change:repeating_talents', evt => {
  updateTalents();
});

onChange(['talent_cutieMark_dice', 'talent_cutieMark_trait'], () => {
  updateCutieMarkTalent();
});

onChange(['body', 'mind', 'charm'], () => {
  updateTalents();
});

on('sheet:opened', () => {
  setAttrs({
    character_sheet: 'TailsOfEquestria v1.1.1'
  });
  updateTalents();
});

</script>
<rolltemplate class="sheet-rolltemplate-toe">
  <table>
    <thead>
      <tr>
        <th>{{charName}} &#x21D2; {{attr}}</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Result {{result}}</td>
      </tr>{{#notes}}
      <tr>
        <td class="notes">
          <div>Notes:</div>
          <div>{{notes}}</div>
        </td>
      </tr>{{/notes}}
    </tbody>
  </table>
</rolltemplate>