roll20-character-sheets/Feast_of_Legends/feast_of_legends.html

<div class="main">

<!-- LOGO SECTION -->
  <div class="logo section"> <span> Sheet Version:1.1 </span> </div>

<!-- NAME SECTION -->
  <div class="name section">
    <div class="section-small flex-center">
      <label>NAME: </label>
      <input name="attr_character_name" type="text">
    </div>
    <div class="section-small flex-center">
      <label>ORDER: </label>
      <input name="attr_order" type="text">
    </div>
  </div>

<!-- MAIN STAT SECTION -->

  <div class="stats section">

    <div>
      <button name="roll_init" type="roll" value="&{template:default} {{name=Initiative}} {{Result=[[d20]]}} &{tracker}"><span>Initiative</span></button>
    </div>

    <div class="stat-block flex-center">
      <label>STRENGTH</label>
      <input name="attr_strength" type="number" value="">
      <span name="attr_strength_bonus"></span>
      <button name="roll_strength" type="roll" value="&{template:default} {{name=Strength}} {{Result=[[d20+(@{strength_bonus})]]}}"></button>
    </div>

    <div class="stat-block flex-center">
      <label>INTELLIGENCE</label>
      <input name="attr_intelligence" type="number" value="">
      <span name="attr_intelligence_bonus"></span>
      <button name="roll_intelligence" type="roll" value="&{template:default} {{name=Intelligence}} {{Result=[[d20+(@{intelligence_bonus})]]}}"></button>
    </div>

    <div class="stat-block flex-center">
      <label>CHARM</label>
      <input name="attr_charm" type="number" value="">
      <span name="attr_charm_bonus"></span>
      <button name="roll_charm" type="roll" value="&{template:default} {{name=Charm}} {{Result=[[d20+(@{charm_bonus})]]}}"></button>
    </div>

    <div class="stat-block flex-center">
      <label>ARCANA</label>
      <input name="attr_arcana" type="number" value="">
      <span name="attr_arcana_bonus"></span>
      <button name="roll_arcana" type="roll" value="&{template:default} {{name=Arcana}} {{Result=[[d20+(@{arcana_bonus})]]}}"></button>
    </div>

    <div class="stat-block flex-center">
      <label>GRACE</label>
      <input name="attr_grace" type="number" value="">
      <span name="attr_grace_bonus"></span>
      <button name="roll_grace" type="roll" value="&{template:default} {{name=Grace}} {{Result=[[d20+(@{grace_bonus})]]}}"></button>
    </div>

    <div class="stat-block flex-center">
      <label>DEFENSE</label>
      <input name="attr_defense"       type="number" value="10">
      <input name="attr_defense_bonus" type="number" value="">
    </div>

    <div class="stat-block flex-center">
      <label>HIT POINTS</label>
      <input name="attr_hit_points"     type="number" value="">
      <input name="attr_hit_points_max" type="number" value="">
    </div>
  </div>

<!-- RESISTANCE/WEAKNESS/ADVANTAGE SECTION -->
  <div class="resistance section flex-center">
    <div>
      <label>Resistance/</label>
      <label>Weakness</label>
      <hr>
      <label>Advantage/</label>
      <label>Disadvantage</label>
    </div>
    <div>
      <input name="attr_resistance1" type="text">
      <input name="attr_resistance2" type="text">
      <input name="attr_resistance3" type="text">
      <input name="attr_resistance4" type="text">
      <input name="attr_resistance5" type="text">
    </div>
  </div>

<!-- BIO SECTION -->
  <div class="bio section flex-center flex-middle flex-down">
    <label>Bio</label>
    <textarea name="attr_bio" placeholder="Bio"></textarea>
  </div>

<!-- GOLD SECTION-->
  <div class="gold section flex-center">
    <label>Gold:</label>
    <input name="attr_gold" type="number" value="10">
  </div>

<!-- LOAD SECTION -->
  <div class="load section flex-center flex-middle flex-down">
    <label>Load</label>
    <span>
      <input name="attr_attack_name" type="text" placeholder="Attack/Weapon Name"> 
      <input name="attr_attack_bonus" type="number" value=""> 
      <input name="attr_attack_damage" type="text" value="1d6" class="small">
      <button name="roll_attack" type="roll" value="&{template:default} {{name=@{attack_name}}} {{Attack=[[d20+(@{attack_bonus})]]}} {{Damage=[[@{attack_damage}]]}}" class ="small"></button>
    </span>
    <span>
      <input name="attr_attack2_name" type="text" placeholder="Attack/Weapon Name"> 
      <input name="attr_attack2_bonus" type="number" value=""> 
      <input name="attr_attack2_damage" type="text" value="1d6" class="small">
      <button name="roll_attack2" type="roll" value="&{template:default} {{name=@{attack2_name}}} {{Attack=[[d20+(@{attack2_bonus})]]}} {{Damage=[[@{attack2_damage}]]}}" class ="small"></button>
    </span>
    <textarea name="attr_load" placeholder="Load"></textarea>
  </div>

<!-- SKILLED WITH SECTION -->
  <div class="skilled section flex-center">
    <label>Skilled with: </label>
    <input name="attr_skilled_with" type="text">
  </div>

<!-- ORDER SKILL SECTION -->
  <div class="order-skills section flex-center flex-down">
    <label>Order Skills</label>
    <textarea name="attr_order_skills" placeholder="Order Skills"></textarea>
  </div>

</div>

<input name="attr_strength_bonus" type="hidden" value="0">
<input name="attr_intelligence_bonus" type="hidden" value="0">
<input name="attr_charm_bonus" type="hidden" value="0">
<input name="attr_arcana_bonus" type="hidden" value="0">
<input name="attr_grace_bonus" type="hidden" value="0">


<!-- ---------------------------SHEET WORKERS----------------- -->

<script type="text/worker">

const int = score => parseInt(score, 10) || 0;

// Auto-calculates & updates 'Stat Bonus' based on changes to corresponding 'Base Stat',
// according to the table on page 5 of the Rulebook.
// If the Base stat is less than 1, the sheet sets the bonus to "-2"

const stats = ["strength", "intelligence", "charm", "arcana", "grace"];
stats.forEach(stat => {
    on(`change:${stat}`, () => {
        getAttrs([stat], values => {
            const stat_base = int(values[stat]);
            console.log(stat_base);
            let stat_bonus = 0;
            if (stat_base >= 17) stat_bonus = "+4";
            else if (stat_base >= 16) stat_bonus = "+3";
            else if (stat_base >= 13) stat_bonus = "+2";
            else if (stat_base >= 9) stat_bonus = "+1";
            else if (stat_base >= 7) stat_bonus = "0";
            else if (stat_base >= 5) stat_bonus = "-1";
            else if (stat_base >= 1) stat_bonus = "-2";
            else stat_bonus = "-2";
            
            setAttrs({
                [`${stat}_bonus`]: stat_bonus
            });
        });
    });
});

</script>