roll20-character-sheets-tester/Dead-of-Night/Dead_of_Night_2e.html

<div class="wrapper">
  <input class="tabstoggle" type="hidden" name="attr_sheetTab" value="character"/>
  <div class="tabs u-flex">
    <button class="button button--tab" type="action" name="act_character"><span class="button__tab-text u-font-med">Character Sheet</span></button>
    <button class="button button--tab" type="action" name="act_edit"><span class="button__tab-text u-font-med">Modify Stats</span></button>
  </div>
  <div class="tabcharacter">
    <div class="main">
      <div class="skills section">
        <div class="skill">
          <div class="skill__row u-flex u-flex-align-center">
            <div class="skill__column skill__column--left">
              <div class="skill__column-head u-text-right">
                <h3 class="skill__heading">Identify</h3>
              </div>
              <div class="skill__column-body u-text-right">
                <button class="button button--roll" type="roll" name="roll_skill-identify" value="&{template:skill} {{name=Skill Roll}} {{roll=[[[[1d10]] + [[1d10]] + [[@{identify}]]]]}} {{r1=$[[0]]}} {{r2=$[[1]]}} {{attribute= Identify}} {{modifier= +@{identify}}} {{rollTargetDisplay=@{target}}} {{rollTarget=[[@{target}]]}}"><span class="button__text" name="attr_identify"></span></button>
              </div>
            </div>
            <div class="skill__column skill__column--right">
              <div class="skill__column-head">
                <h3 class="skill__heading">Obscure</h3>
              </div>
              <div class="skill__column-body">
                <button class="button button--roll" type="roll" name="roll_skill-obscure" value="&{template:skill} {{name=Skill Roll}} {{roll=[[[[1d10]] + [[1d10]] + [[@{obscure}]]]]}} {{r1=$[[0]]}} {{r2=$[[1]]}} {{attribute= Obscure}} {{modifier= +@{obscure}}} {{rollTargetDisplay=@{target}}} {{rollTarget=[[@{target}]]}}"><span class="button__text" name="attr_obscure"></span></button>
              </div>
            </div>
          </div>
          <fieldset class="skill__row hidebuttons repeating_specs-0">
            <div class="skill--specs u-flex u-flex-align-center">
              <div class="skill__column skill__column--left">
                <div class="skill__column-head u-text-right">
                  <!-- Need the inputs for the roll button to work-->
                  <input class="u-hide" type="text" name="attr_specname"/>
                  <input class="u-hide" type="number" name="attr_specval" value="0"/><span name="attr_specname"></span>
                </div>
              </div>
              <div class="skill__column skill__column--right">
                <button class="button button--roll" type="roll" name="roll_skill-specval" value="&{template:skill} {{name=Specialty Roll}} {{roll=[[[[1d10]] + [[1d10]] + [[@{specval}]]]]}} {{r1=$[[0]]}} {{r2=$[[1]]}} {{attribute= @{specname}}} {{modifier= +@{specval}}} {{rollTargetDisplay=@{target}}} {{rollTarget=[[@{target}]]}}"><span class="button__text" name="attr_specval"></span></button>
              </div>
            </div>
          </fieldset>
        </div>
        <div class="skill">
          <div class="skill__row u-flex u-flex-align-center">
            <div class="skill__column skill__column--left">
              <div class="skill__column-head u-text-right">
                <h3 class="skill__heading">Persuade</h3>
              </div>
              <div class="skill__column-body u-text-right">
                <button class="button button--roll" type="roll" name="roll_skill-persuade" value="&{template:skill} {{name=Skill Roll}} {{roll=[[[[1d10]] + [[1d10]] + [[@{persuade}]]]]}} {{r1=$[[0]]}} {{r2=$[[1]]}} {{attribute= Persuade}} {{modifier= +@{persuade}}} {{rollTargetDisplay=@{target}}} {{rollTarget=[[@{target}]]}}"><span class="button__text" name="attr_persuade"></span></button>
              </div>
            </div>
            <div class="skill__column skill__column--right">
              <div class="skill__column-head">
                <h3 class="skill__heading">Dissuade</h3>
              </div>
              <div class="skill__column-body">
                <button class="button button--roll" type="roll" name="roll_skill-dissuade" value="&{template:skill} {{name=Skill Roll}} {{roll=[[[[1d10]] + [[1d10]] + [[@{dissuade}]]]]}} {{r1=$[[0]]}} {{r2=$[[1]]}} {{attribute= Dissuade}} {{modifier= +@{dissuade}}} {{rollTargetDisplay=@{target}}} {{rollTarget=[[@{target}]]}}"><span class="button__text" name="attr_dissuade"></span></button>
              </div>
            </div>
          </div>
          <fieldset class="skill__row hidebuttons repeating_specs-1">
            <div class="skill--specs u-flex u-flex-align-center">
              <div class="skill__column skill__column--left">
                <div class="skill__column-head u-text-right">
                  <!-- Need the inputs for the roll button to work-->
                  <input class="u-hide" type="text" name="attr_specname"/>
                  <input class="u-hide" type="number" name="attr_specval" value="0"/><span name="attr_specname"></span>
                </div>
              </div>
              <div class="skill__column skill__column--right">
                <button class="button button--roll" type="roll" name="roll_skill-specval" value="&{template:skill} {{name=Specialty Roll}} {{roll=[[[[1d10]] + [[1d10]] + [[@{specval}]]]]}} {{r1=$[[0]]}} {{r2=$[[1]]}} {{attribute= @{specname}}} {{modifier= +@{specval}}} {{rollTargetDisplay=@{target}}} {{rollTarget=[[@{target}]]}}"><span class="button__text" name="attr_specval"></span></button>
              </div>
            </div>
          </fieldset>
        </div>
        <div class="skill">
          <div class="skill__row u-flex u-flex-align-center">
            <div class="skill__column skill__column--left">
              <div class="skill__column-head u-text-right">
                <h3 class="skill__heading">Escape</h3>
              </div>
              <div class="skill__column-body u-text-right">
                <button class="button button--roll" type="roll" name="roll_skill-escape" value="&{template:skill} {{name=Skill Roll}} {{roll=[[[[1d10]] + [[1d10]] + [[@{escape}]]]]}} {{r1=$[[0]]}} {{r2=$[[1]]}} {{attribute= Escape}} {{modifier= +@{escape}}} {{rollTargetDisplay=@{target}}} {{rollTarget=[[@{target}]]}}"><span class="button__text" name="attr_escape"></span></button>
              </div>
            </div>
            <div class="skill__column skill__column--right">
              <div class="skill__column-head">
                <h3 class="skill__heading">Pursue</h3>
              </div>
              <div class="skill__column-body">
                <button class="button button--roll" type="roll" name="roll_skill-pursue" value="&{template:skill} {{name=Skill Roll}} {{roll=[[[[1d10]] + [[1d10]] + [[@{pursue}]]]]}} {{r1=$[[0]]}} {{r2=$[[1]]}} {{attribute= Pursue}} {{modifier= +@{pursue}}} {{rollTargetDisplay=@{target}}} {{rollTarget=[[@{target}]]}}"><span class="button__text" name="attr_pursue"></span></button>
              </div>
            </div>
          </div>
          <fieldset class="skill__row hidebuttons repeating_specs-2">
            <div class="skill--specs u-flex u-flex-align-center">
              <div class="skill__column skill__column--left">
                <div class="skill__column-head u-text-right">
                  <!-- Need the inputs for the roll button to work-->
                  <input class="u-hide" type="text" name="attr_specname"/>
                  <input class="u-hide" type="number" name="attr_specval" value="0"/><span name="attr_specname"></span>
                </div>
              </div>
              <div class="skill__column skill__column--right">
                <button class="button button--roll" type="roll" name="roll_skill-specval" value="&{template:skill} {{name=Specialty Roll}} {{roll=[[[[1d10]] + [[1d10]] + [[@{specval}]]]]}} {{r1=$[[0]]}} {{r2=$[[1]]}} {{attribute= @{specname}}} {{modifier= +@{specval}}} {{rollTargetDisplay=@{target}}} {{rollTarget=[[@{target}]]}}"><span class="button__text" name="attr_specval"></span></button>
              </div>
            </div>
          </fieldset>
        </div>
        <div class="skill">
          <div class="skill__row u-flex u-flex-align-center">
            <div class="skill__column skill__column--left">
              <div class="skill__column-head u-text-right">
                <h3 class="skill__heading">Assault</h3>
              </div>
              <div class="skill__column-body u-text-right">
                <button class="button button--roll" type="roll" name="roll_skill-assault" value="&{template:skill} {{name=Skill Roll}} {{roll=[[[[1d10]] + [[1d10]] + [[@{assault}]]]]}} {{r1=$[[0]]}} {{r2=$[[1]]}} {{attribute= Assault}} {{modifier= +@{assault}}} {{rollTargetDisplay=@{target}}} {{rollTarget=[[@{target}]]}}"><span class="button__text" name="attr_assault"></span></button>
              </div>
            </div>
            <div class="skill__column skill__column--right">
              <div class="skill__column-head">
                <h3 class="skill__heading">Protect</h3>
              </div>
              <div class="skill__column-body">
                <button class="button button--roll" type="roll" name="roll_skill-protect" value="&{template:skill} {{name=Skill Roll}} {{roll=[[[[1d10]] + [[1d10]] + [[@{protect}]]]]}} {{r1=$[[0]]}} {{r2=$[[1]]}} {{attribute= Protect}} {{modifier= +@{protect}}} {{rollTargetDisplay=@{target}}} {{rollTarget=[[@{target}]]}}"><span class="button__text" name="attr_protect"></span></button>
              </div>
            </div>
          </div>
          <fieldset class="skill__row hidebuttons repeating_specs-3">
            <div class="skill--specs u-flex u-flex-align-center">
              <div class="skill__column skill__column--left">
                <div class="skill__column-head u-text-right">
                  <!-- Need the inputs for the roll button to work-->
                  <input class="u-hide" type="text" name="attr_specname"/>
                  <input class="u-hide" type="number" name="attr_specval" value="0"/><span name="attr_specname"></span>
                </div>
              </div>
              <div class="skill__column skill__column--right">
                <button class="button button--roll" type="roll" name="roll_skill-specval" value="&{template:skill} {{name=Specialty Roll}} {{roll=[[[[1d10]] + [[1d10]] + [[@{specval}]]]]}} {{r1=$[[0]]}} {{r2=$[[1]]}} {{attribute= @{specname}}} {{modifier= +@{specval}}} {{rollTargetDisplay=@{target}}} {{rollTarget=[[@{target}]]}}"><span class="button__text" name="attr_specval"></span></button>
              </div>
            </div>
          </fieldset>
        </div>
      </div>
      <div class="notes section">
        <h2 class="u-font-small u-ucase">Notes:</h2>
        <textarea name="attr_notes"></textarea>
      </div>
      <div class="survival section">
        <h2 class="u-font-small u-ucase">Survival Points:</h2>
        <div class="skill__row">
          <input class="u-hide" type="number" name="attr_survival" value="5"/>
          <button class="button button--mod button--mod-sub" type="action" name="act_survivalSub"><span>-</span></button><span class="display-number u-font-large" name="attr_survival"></span>
          <button class="button button--mod button--mod-add" type="action" name="act_survivalAdd"><span>+</span></button>
        </div>
      </div>
      <div class="target section">
        <h2 class="u-font-small u-ucase">Roll Target:</h2>
        <div class="skill__row">
          <input class="u-hide" type="number" name="attr_target" value="15"/>
          <button class="button button--mod button--mod-sub" type="action" name="act_targetSub"><span>-</span></button><span class="display-number u-font-large" name="attr_target"></span>
          <button class="button button--mod button--mod-add" type="action" name="act_targetAdd"><span>+</span></button>
        </div>
      </div>
      <div class="habits section">
        <h2 class="u-font-small u-ucase">Bad Habits:</h2>
        <textarea name="attr_habits"></textarea>
      </div>
    </div>
  </div>
  <div class="tabedit">
    <div class="edit">
      <div class="edit__section">
        <div class="skill">
          <div class="skill__row u-flex u-flex-align-center">
            <div class="skill__column skill__column--left">
              <div class="skill__column-head u-text-right">
                <h3 class="skill__heading">Identify</h3>
              </div>
              <div class="skill__column-body u-text-right">
                <input class="modify-input u-font-large u-text-center" type="number" name="attr_identify" value="1"/>
              </div>
            </div>
            <div class="skill__column skill__column--right">
              <div class="skill__column-head">
                <h3 class="skill__heading">Obscure</h3>
              </div>
              <div class="skill__column-body">
                <input class="modify-input u-font-large u-text-center" type="number" name="attr_obscure" value="1"/>
              </div>
            </div>
          </div>
          <div class="skill__row edit__specs">
            <h3 class="u-font-small u-text-center">Specialties</h3>
            <fieldset class="repeating_specs-0">
              <div class="skill--specs u-flex u-flex-align-center u-flex-justify-center">
                <input class="modify-input" type="text" name="attr_specname"/>
                <input class="modify-input" type="number" name="attr_specval" value="0"/>
              </div>
            </fieldset>
          </div>
        </div>
        <div class="skill">
          <div class="skill__row u-flex u-flex-align-center">
            <div class="skill__column skill__column--left">
              <div class="skill__column-head u-text-right">
                <h3 class="skill__heading">Persuade</h3>
              </div>
              <div class="skill__column-body u-text-right">
                <input class="modify-input u-font-large u-text-center" type="number" name="attr_persuade" value="1"/>
              </div>
            </div>
            <div class="skill__column skill__column--right">
              <div class="skill__column-head">
                <h3 class="skill__heading">Dissuade</h3>
              </div>
              <div class="skill__column-body">
                <input class="modify-input u-font-large u-text-center" type="number" name="attr_dissuade" value="1"/>
              </div>
            </div>
          </div>
          <div class="skill__row edit__specs">
            <h3 class="u-font-small u-text-center">Specialties</h3>
            <fieldset class="repeating_specs-1">
              <div class="skill--specs u-flex u-flex-align-center u-flex-justify-center">
                <input class="modify-input" type="text" name="attr_specname"/>
                <input class="modify-input" type="number" name="attr_specval" value="0"/>
              </div>
            </fieldset>
          </div>
        </div>
        <div class="skill">
          <div class="skill__row u-flex u-flex-align-center">
            <div class="skill__column skill__column--left">
              <div class="skill__column-head u-text-right">
                <h3 class="skill__heading">Escape</h3>
              </div>
              <div class="skill__column-body u-text-right">
                <input class="modify-input u-font-large u-text-center" type="number" name="attr_escape" value="1"/>
              </div>
            </div>
            <div class="skill__column skill__column--right">
              <div class="skill__column-head">
                <h3 class="skill__heading">Pursue</h3>
              </div>
              <div class="skill__column-body">
                <input class="modify-input u-font-large u-text-center" type="number" name="attr_pursue" value="1"/>
              </div>
            </div>
          </div>
          <div class="skill__row edit__specs">
            <h3 class="u-font-small u-text-center">Specialties</h3>
            <fieldset class="repeating_specs-2">
              <div class="skill--specs u-flex u-flex-align-center u-flex-justify-center">
                <input class="modify-input" type="text" name="attr_specname"/>
                <input class="modify-input" type="number" name="attr_specval" value="0"/>
              </div>
            </fieldset>
          </div>
        </div>
        <div class="skill">
          <div class="skill__row u-flex u-flex-align-center">
            <div class="skill__column skill__column--left">
              <div class="skill__column-head u-text-right">
                <h3 class="skill__heading">Assault</h3>
              </div>
              <div class="skill__column-body u-text-right">
                <input class="modify-input u-font-large u-text-center" type="number" name="attr_assault" value="1"/>
              </div>
            </div>
            <div class="skill__column skill__column--right">
              <div class="skill__column-head">
                <h3 class="skill__heading">Protect</h3>
              </div>
              <div class="skill__column-body">
                <input class="modify-input u-font-large u-text-center" type="number" name="attr_protect" value="1"/>
              </div>
            </div>
          </div>
          <div class="skill__row edit__specs">
            <h3 class="u-font-small u-text-center">Specialties</h3>
            <fieldset class="repeating_specs-3">
              <div class="skill--specs u-flex u-flex-align-center u-flex-justify-center">
                <input class="modify-input" type="text" name="attr_specname"/>
                <input class="modify-input" type="number" name="attr_specval" value="0"/>
              </div>
            </fieldset>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="footer u-text-right"><span class="u-block">version 1.01</span></div>
</div>
<rolltemplate class="sheet-rolltemplate-skill">
  <div class="sheet-template-container">
    <div class="sheet-template-header">
      <div class="sheet-title">{{name}}</div>
      <div class="sheet-subtitle">{{attribute}} {{modifier}}</div>
    </div>
    <div class="sheet-template-row">
      <div class="sheet-template-dice">{{#rollTotal() r1 1}}a{{/rollTotal() r1 1}} 
{{#rollTotal() r1 2}}b{{/rollTotal() r1 2}} 
{{#rollTotal() r1 3}}c{{/rollTotal() r1 3}} 
{{#rollTotal() r1 4}}d{{/rollTotal() r1 4}} 
{{#rollTotal() r1 5}}e{{/rollTotal() r1 5}} 
{{#rollTotal() r1 6}}f{{/rollTotal() r1 6}} 
{{#rollTotal() r1 7}}g{{/rollTotal() r1 7}} 
{{#rollTotal() r1 8}}h{{/rollTotal() r1 8}} 
{{#rollTotal() r1 9}}i{{/rollTotal() r1 9}} 
{{#rollTotal() r1 10}}k{{/rollTotal() r1 10}} 
{{#rollTotal() r2 1}}a{{/rollTotal() r2 1}}
{{#rollTotal() r2 2}}b{{/rollTotal() r2 2}}
{{#rollTotal() r2 3}}c{{/rollTotal() r2 3}}
{{#rollTotal() r2 4}}d{{/rollTotal() r2 4}}
{{#rollTotal() r2 5}}e{{/rollTotal() r2 5}}
{{#rollTotal() r2 6}}f{{/rollTotal() r2 6}}
{{#rollTotal() r2 7}}g{{/rollTotal() r2 7}}
{{#rollTotal() r2 8}}h{{/rollTotal() r2 8}}
{{#rollTotal() r2 9}}i{{/rollTotal() r2 9}}
{{#rollTotal() r2 10}}k{{/rollTotal() r2 10}}

      </div>
    </div>{{#^rollLess() roll rollTarget}}
    <div class="sheet-template-footer sheet-template-footer--success">
      <div class="sheet-template-row-head">Target {{rollTargetDisplay}}: Success!</div>
      <div class="sheet-template-total">
        {{roll}}{{#rollTotal() r1 r2}}
        <div class="sheet-template-equal">Roll Match! +1 Survival</div>{{/rollTotal() r1 r2}}
      </div>
    </div>{{/^rollLess() roll rollTarget}}
    {{#rollLess() roll rollTarget}}
    <div class="sheet-template-footer sheet-template-footer--fail">
      <div class="sheet-template-row-head">Target {{rollTargetDisplay}}: Fail!</div>
      <div class="sheet-template-total">{{roll}}</div>
    </div>{{/rollLess() roll rollTarget}}
  </div>
</rolltemplate>
<script type="text/worker">// SHEET-WORKERS
//Tab toggle
const buttonlist = ["character","edit"];
buttonlist.forEach(button => {
    on(`clicked:${button}`, function() {
        setAttrs({
            sheetTab: button
        });
    });
});

// Button Click: Remove a survival point
on("clicked:survivalSub", () => {
    getAttrs(["survival"], function(values) {
        setAttrs({ survival: Math.max(0, parseInt(values.survival)-1) });
    });
});

// Button Click: Add a survival point
on("clicked:survivalAdd", () => {
    getAttrs(["survival"], function(values) {
        setAttrs({ survival: parseInt(values.survival)+1 });
    });
});

// Button Click: Remove a target point
on("clicked:targetSub", () => {
    getAttrs(["target"], function(values) {
        setAttrs({ target: Math.max(0, parseInt(values.target)-1) });
    });
});

// Button Click: Add a target point
on("clicked:targetAdd", () => {
    getAttrs(["target"], function(values) {
        setAttrs({ target: parseInt(values.target)+1 });
    });
});

</script>