roll20-character-sheets/OverArms/overarms.html

<div class="sheet-container">
  <!-- BACKGROUND PICTURE -->
  <div class="sepia"></div>
  <!-- NAVIGATION CONTROLS -->
  <input type="radio" name="attr_edit" value="0" class="sheet-absolute sheet-tab sheet-editing" checked="checked"/>
  <span>Edit Mode</span>
  <input type="radio" name="attr_edit" value="1" class="sheet-absolute sheet-tab sheet-playing" />
  <span>Play Mode</span>

  <!-- LEFT COLUMN -->
  <div class="sheet-left-column sheet-column">
    <div class="sheet-top-star sheet-star">
      <div class="sheet-star-outline">
        <span class="sheet-star-five"></span>
      </div>
      <div class="sheet-attribute-container sheet-hp">
        <div class="sheet-edit">
          <span class="sheet-attribute-text">HP</span>
          <select name="attr_hp">
            <option value="4">D4</option><option value="6">D6</option><option value="8">D8</option><option value="10">D10</option><option value="12">D12</option>
          </select>
        </div>
        <div class="sheet-play">
          <span class="sheet-attribute-text">HP</span>
          <span class="sheet-attribute-text"><span name="attr_max_hp"></span></span>
          <br>
          <input type="number" class="sheet-always-active" name="attr_current_hp" min="0" />
        </div>
      </div>
      <div class="sheet-attribute-container sheet-int">
        <div class="sheet-edit">
          <span class="sheet-attribute-text">INT</span>
          <select name="attr_int">
            <option value="4">D4</option><option value="6">D6</option><option value="8">D8</option><option value="10">D10</option><option value="12">D12</option>
          </select>
        </div>
        <div class="sheet-play">
          <button
            type="roll"
            class="sheet-attribute-button"
            name="roll_int"
            value="&{template:standard} {{charname=@{character_name}}} {{attribute=INT}} {{die=D@{int}}} {{result=[[1D@{int}]]}}"
          >
            <span class="sheet-attribute-text">INT</span>
            <br>
            <span class="sheet-attribute-text">D<span name="attr_int"></span></span>
          </button>
        </div>
      </div>
      <div class="sheet-attribute-container sheet-str">
        <div class="sheet-edit">
          <span class="sheet-attribute-text">STR</span>
          <select name="attr_str">
            <option value="4">D4</option><option value="6">D6</option><option value="8">D8</option><option value="10">D10</option><option value="12">D12</option>
          </select>
        </div>
        <div class="sheet-play">
          <button
            type="roll"
            class="sheet-attribute-button"
            name="roll_str"
            value="&{template:standard} {{charname=@{character_name}}} {{attribute=STR}} {{die=D@{str}}} {{result=[[1D@{str}]]}}"
          >
            <span class="sheet-attribute-text">STR</span>
            <br>
            <span class="sheet-attribute-text">D<span name="attr_str"></span></span>
          </button>
        </div>
      </div>
      <div class="sheet-attribute-container sheet-cha">
        <div class="sheet-edit">
          <span class="sheet-attribute-text">CHA</span>
          <select name="attr_cha">
            <option value="4">D4</option><option value="6">D6</option><option value="8">D8</option><option value="10">D10</option><option value="12">D12</option>
          </select>
        </div>
        <div class="sheet-play">
          <button
            type="roll"
            class="sheet-attribute-button"
            name="roll_cha"
            value="&{template:standard} {{charname=@{character_name}}} {{attribute=CHA}} {{die=D@{cha}}} {{result=[[1D@{cha}]]}}"
          >
            <span class="sheet-attribute-text">CHA</span>
            <br>
            <span class="sheet-attribute-text">D<span name="attr_cha"></span></span>
          </button>
        </div>
      </div>
      <div class="sheet-attribute-container sheet-dex">
        <div class="sheet-edit">
          <span class="sheet-attribute-text">DEX</span>
          <select name="attr_dex">
            <option value="4">D4</option><option value="6">D6</option><option value="8">D8</option><option value="10">D10</option><option value="12">D12</option>
          </select>
        </div>
        <div class="sheet-play">
          <button
            type="roll"
            class="sheet-attribute-button"
            name="roll_dex"
            value="&{template:standard} {{charname=@{character_name}}} {{attribute=DEX}} {{die=D@{dex}}} {{result=[[1D@{dex}]]}}"
          >
            <span class="sheet-attribute-text">DEX</span>
            <br>
            <span class="sheet-attribute-text">D<span name="attr_dex"></span></span>
          </button>
        </div>
      </div>
    </div>
    <div class="sheet-bottom-star sheet-star">
      <div class="sheet-star-outline">
        <span class="sheet-star-five"></span>
      </div>
      <div class="sheet-attribute-container sheet-ap">
        <div class="sheet-edit">
          <span class="sheet-attribute-text">AP</span>
          <select name="attr_ap">
            <option value="4">D4</option><option value="6">D6</option><option value="8">D8</option><option value="10">D10</option><option value="12">D12</option>
          </select>
        </div>
        <div class="sheet-play">
          <span class="sheet-attribute-text">AP</span>
          <span class="sheet-attribute-text"><span name="attr_max_ap"></span></span>
          <br>
          <input type="number" class="sheet-always-active" name="attr_current_ap" min="0" />
        </div>
      </div>
      <div class="sheet-attribute-container sheet-rng">
        <div class="sheet-edit">
          <span class="sheet-attribute-text">RNG</span>
          <select name="attr_rng">
            <option value="4">D4</option><option value="6">D6</option><option value="8">D8</option><option value="10">D10</option><option value="12">D12</option>
          </select>
        </div>
        <div class="sheet-play">
          <button
            type="roll"
            class="sheet-attribute-button"
            name="roll_rng"
            value="&{template:standard} {{charname=@{character_name}}} {{attribute=RNG}} {{die=D@{rng}}} {{result=[[1D@{rng}]]}}"
          >
            <span class="sheet-attribute-text">RNG</span>
            <br>
            <span class="sheet-attribute-text">D<span name="attr_rng"></span></span>
          </button>
        </div>
      </div>
      <div class="sheet-attribute-container sheet-pwr">
        <div class="sheet-edit">
          <span class="sheet-attribute-text">PWR</span>
          <select name="attr_pwr">
            <option value="4">D4</option><option value="6">D6</option><option value="8">D8</option><option value="10">D10</option><option value="12">D12</option>
          </select>
        </div>
        <div class="sheet-play">
          <button
            type="roll"
            class="sheet-attribute-button"
            name="pwr"
            value="&{template:standard} {{charname=@{character_name}}} {{attribute=PWR}} {{die=D@{pwr}}} {{result=[[1D@{pwr}]]}}"
          >
            <span class="sheet-attribute-text">PWR</span>
            <br>
            <span class="sheet-attribute-text">D<span name="attr_pwr"></span></span>
          </button>
        </div>
      </div>
      <div class="sheet-attribute-container sheet-def">
        <div class="sheet-edit">
          <span class="sheet-attribute-text">DEF</span>
          <select name="attr_def">
            <option value="4">D4</option><option value="6">D6</option><option value="8">D8</option><option value="10">D10</option><option value="12">D12</option>
          </select>
        </div>
        <div class="sheet-play">
          <button
            type="roll"
            class="sheet-attribute-button"
            name="def"
            value="&{template:standard} {{charname=@{character_name}}} {{attribute=DEF}} {{die=D@{def}}} {{result=[[1D@{def}]]}}"
          >
            <span class="sheet-attribute-text">DEF</span>
            <br>
            <span class="sheet-attribute-text">D<span name="attr_def"></span></span>
          </button>
        </div>
      </div>
      <div class="sheet-attribute-container sheet-spd">
        <div class="sheet-edit">
          <span class="sheet-attribute-text">SPD</span>
          <select name="attr_spd">
            <option value="4">D4</option><option value="6">D6</option><option value="8">D8</option><option value="10">D10</option><option value="12">D12</option>
          </select>
        </div>
        <div class="sheet-play">
          <button
            type="roll"
            class="sheet-attribute-button"
            name="spd"
            value="&{template:standard} {{charname=@{character_name}}} {{attribute=SPD}} {{die=D@{spd}}} {{result=[[1D@{spd}]]}}"
          >
            <span class="sheet-attribute-text">SPD</span>
            <br>
            <span class="sheet-attribute-text">D<span name="attr_spd"></span></span>
          </button>
        </div>
      </div>
    </div>
    <div class="sheet-info-container sheet-junction-container">
      <span class="sheet-blue-label">JUNCTION</span>
      <div class="sheet-junction">
        <select name="attr_junction_part_1" class="sheet-always-active">
          <option value="int">INT</option>
          <option value="str">STR</option>
          <option value="cha">CHA</option>
          <option value="dex">DEX</option>
        </select>
        <span class="sheet-blue-label">+</span>
        <select name="attr_junction_part_2" class="sheet-always-active">
          <option value="rng">RNG</option>
          <option value="pwr">PWR</option>
          <option value="def">DEF</option>
          <option value="spd">SPD</option>
        </select>
        <button
          type="roll"
          class="sheet-junction-roll"
          value="@{junction}"
        >
        </button>
      </div>
    </div>
    <div class="sheet-logo"></div>
  </div>

  <!-- RIGHT COLUMN -->
  <div class="sheet-right-column sheet-column">
    <div class="sheet-character-info">
      <div class="sheet-info-container sheet-level">
        <span class="sheet-blue-label">LEVEL</span>
        <div class="sheet-edit">
          <input type="number" name="attr_level" min="0" />
        </div>
        <div class="sheet-play">
          <span class="sheet-handwritten" name="attr_level"></span>
        </div>
      </div>
      <div class="sheet-info-container sheet-character-name">
        <span class="sheet-blue-label">CHARACTER NAME</span>
        <div class="sheet-edit">
          <input type="text" name="attr_character_name" />
        </div>
        <div class="sheet-play">
          <span class="sheet-handwritten" name="attr_character_name"></span>
        </div>
      </div>
      <div class="sheet-info-container sheet-anima-name">
        <span class="sheet-blue-label">ANIMA NAME</span>
        <div class="sheet-edit">
          <input type="text" name="attr_anima_name" />
        </div>
        <div class="sheet-play">
          <span class="sheet-handwritten" name="attr_anima_name"></span>
        </div>
      </div>
      <div class="sheet-info-container sheet-anima-type sheet-large_spacing">
        <span class="sheet-blue-label">ANIMA TYPE</span>
        <div class="sheet-edit">
          <select name="attr_anima_type">
            <option value="Fighter">Fighter</option>
            <option value="Magician">Magician</option>
            <option value="Guardian">Guardian</option>
            <option value="Assassin">Assassin</option>
          </select>
        </div>
        <div class="sheet-play">
          <span class="sheet-handwritten" name="attr_anima_type"></span>
        </div>
      </div>
    </div>
    <div class="sheet-abilities sheet-info-container sheet-large_spacing">
      <span class="sheet-blue-label">ABILITIES</span>
      <div class="sheet-gold">
        <span class="sheet-super-bold">1</span>
        <div class="sheet-edit">
          <input type="text" name="attr_ability_1" />
        </div>
        <div class="sheet-play">
          <span class="sheet-handwritten" name="attr_ability_1"></span>
        </div>
      </div>
      <div class="sheet-gold">
        <span class="sheet-super-bold">2</span>
        <div class="sheet-edit">
          <input type="text" name="attr_ability_2" />
        </div>
        <div class="sheet-play">
          <span class="sheet-handwritten" name="attr_ability_2"></span>
        </div>
      </div>
      <div class="sheet-gold">
        <span class="sheet-super-bold">3</span>
        <div class="sheet-edit">
          <input type="text" name="attr_ability_3" />
        </div>
        <div class="sheet-play">
          <span class="sheet-handwritten" name="attr_ability_3"></span>
        </div>
      </div>
    </div>
    <div class="sheet-moral sheet-info-container sheet-large_spacing">
      <div class="sheet-row sheet-gold">
        <span class="sheet-blue-label">VIRTUE</span>
        <div class="sheet-edit">
          <input type="text" name="attr_virtue" />
        </div>
        <div class="sheet-play">
          <span class="sheet-handwritten" name="attr_virtue"></span>
        </div>
      </div>
      <div class="sheet-row sheet-gold">
        <span class="sheet-blue-label">VICE</span>
        <div class="sheet-edit">
          <input type="text" name="attr_vice" />
        </div>
        <div class="sheet-play">
          <span class="sheet-handwritten" name="attr_vice"></span>
        </div>
      </div>
      <div class="sheet-row sheet-gold">
        <span class="sheet-blue-label">DRIVE</span>
        <div class="sheet-edit">
          <input type="text" name="attr_drive" />
        </div>
        <div class="sheet-play">
          <span class="sheet-handwritten" name="attr_drive"></span>
        </div>
      </div>
    </div>
    <div class="sheet-info sheet-info-container">
      <span class="sheet-blue-label">BIO + APPEARANCE + INVENTORY</span>
      <div class="sheet-edit">
        <textarea class="sheet-bio-text" name="attr_bio"></textarea>
      </div>
      <div class="sheet-play">
        <span class="sheet-handwritten" name="attr_bio"></span>
      </div>
      <span class="sheet-blue-label">STATUS + MONEY</span>
      <div class="sheet-edit">
        <input type="text" name="attr_status" />
      </div>
      <div class="sheet-play">
        <span class="sheet-handwritten" name="attr_status"></span>
      </div>
    </div>
  </div>
</div>

<input type="hidden" name="attr_junction" value="&{template:junction} {{charname=@{character_name}}} {{attribute1=INT}} {{attribute2=RNG}} {{die1=D@{int}}} {{die2=D@{rng}}} {{result=[[1D@{int}+1D@{rng}]]}}">

<!-- ROLL TEMPLATE -->
<rolltemplate class="sheet-rolltemplate-standard">
  <div class="sheet-rolltemplate-container">
      <span class="sheet-attribute-text">{{attribute}} {{die}}</span>
      <span class="sheet-small-star">★</span>
      <div class="sheet-result">{{result}}</div>
      <span class="sheet-handwritten">{{charname}}</span>
  </div>
</rolltemplate>

<rolltemplate class="sheet-rolltemplate-junction">
  <div class="sheet-rolltemplate-container">
      <span class="sheet-attribute-text">{{attribute1}} {{die1}} + {{attribute2}} {{die2}}</span>
      <span class="sheet-small-star">★</span>
      <div class="sheet-result">{{result}}</div>
      <span class="sheet-handwritten">{{charname}}</span>
  </div>
</rolltemplate>

<!-- SHEET WORKER SCRIPTS -->
<script type="text/worker">
  on("change:hp change:ap", eventinfo => {
    getAttrs(["hp", "ap"], v => {
      const update = {};
      const value = eventinfo.newValue * 2;
			if(eventinfo.triggerName === "hp") {
        update.max_hp = value;
        update.current_hp = value;
      }
      if(eventinfo.triggerName === "ap") {
        update.max_ap = value;
        update.current_ap = value;
      }
      setAttrs(update, {silent: true});
		})
  });

  on("change:junction_part_1 change:junction_part_2", eventinfo => {
    getAttrs(["junction_part_1", "junction_part_2", "int", "str", "cha", "dex", "rng", "pwr", "def", "spd"], v => {
      const update = {};
      const attr1 = v.junction_part_1.toUpperCase();
      const attr2 = v.junction_part_2.toUpperCase();
      const die1 = v[v.junction_part_1];
      const die2 = v[v.junction_part_2];
      update.junction = "&{template:junction} {{charname=@{character_name}}} {{attribute1=" + attr1 + "}} {{attribute2=" + attr2 + "}} {{die1=D" + die1 + "}} {{die2=D" + die2 + "}} {{result=[[1D" + die1 + "+1D" + die2 + "]]}}";
      setAttrs(update, {silent: true});
    });
  });
</script>