roll20-character-sheets/FightingFantasy/FightingFantasy.html

<input type="hidden" class="sheet-tabstoggle" name="attr_sheetTab" value="hero" />
<div class="tab-buttons">
  <button type="action" name="act_hero" data-i18n="Hero">Hero</button>
  <button type="action" name="act_notesAndMonsters" data-i18n="Notes/Monsters">Notes/Monsters</button>

</div>

<div class="sheet-character">
  <div class="main-div">

    <div class="main-top-content">

      <div class="title-and-subtitle">
        <span class="sheet-title" data-i18n="title">Adventure Sheet</span>
        <span class="sheet-subtitle" data-i18n="subtitle">Fighting Fantasy by Steve Jackson and Ian Livingstone</span>

      </div>

      <div>

        <details open>
          <summary data-i18n="hero-info">Hero Info</summary>
          <div class="hero-info">
            <div>
              <label data-i18n="hero-name">Name <input type="text" name="attr_character_name"
                  spellcheck="false" /></label>
            </div>
            <div>
              <label data-i18n="provisions">Provisions <input type="number" name="attr_remaining_provisions"
                  class="text-center">
              </label>
            </div>
            <div>
              <label data-i18n="goldCoins">Gold coins <input type="number" name="attr_gold_coins" class="text-center">
              </label>
            </div>
          </div>

        </details>
      </div>


    </div>

    <div class="hero-stats-details">
      <details open>
        <summary data-i18n="hero-stats">Hero Stats</summary>
        <div class="hero-stats">

          <div class="hero-skill">

            <label data-i18n="skill">
              Skill </label>
            <input type="text" name="attr_characterskill" maxlength="2" />
            <div class="skill-button-wrapper">
              <button type="action" class="skill-button" name="act_skillroll"> <span>f </span></button>
            </div>

          </div>

          <div class="hero-stamina">
            <label data-i18n="stamina">Stamina </label>
            <input type="text" name="attr_characterstamina" maxlength="2" />
          </div>

          <div class="hero-luck">
            <label data-i18n="luck">Luck </label>
            <input type="text" name="attr_characterluck" maxlength="2" />
            <div class="luck-button-wrapper">
              <button type="action" name="act_test" class="luck-button"><span>a</span></button>
            </div>

          </div>

        </div>
      </details>
    </div>
    <hr>

    <div class="sheet-sections">

      <div class="hero-equipments-and-others">

        <div class="equipments">
          <div class="equipments-header">
            <h3 data-i18n="equipments">Equipments/Items </h3>
          </div>

          <fieldset class="repeating_equipments">

            <input type="text" name="attr_equipment" class="attr_equipment" spellcheck="false" />

          </fieldset>
        </div>


        <div class="potions">
          <label class="potions-header" data-i18n="potions">Potions</label>

          <fieldset class="repeating_potions">

            <input type="text" name="attr_potions" class="attr_potions" spellcheck="false" />
          </fieldset>
        </div>


      </div>


      <div class="hero-backstory-and-others">
        <div class="backstory">
          <label class="backstory-header" data-i18n="backstory">
            Backstory

          </label>

        </div>
        <textarea class="backstory-area" name="attr_backstory" spellcheck="false">

        </textarea>
      </div>



    </div>



  </div>
</div>

<div class="sheet-notesAndMonsters">
  <div class="main-monster-div">

    <div class="main-top-content">

      <div class="title-and-subtitle">
        <span class="sheet-title" data-i18n="title">Adventure Sheet</span>
        <span class="sheet-subtitle" data-i18n="subtitle">Fighting Fantasy by Steve Jackson and Ian Livingstone</span>

      </div>

      <div>

        <details open>
          <summary data-i18n="hero-notes">Hero Notes</summary>
          <textarea spellcheck="false" name="attr_notes"></textarea>

        </details>
      </div>




      <div class="monster-ecounters-details">
        <details open>
          <summary data-i18n="monster-encounters">Encounters</summary>

          <fieldset class="repeating_encounters">

            <div class="monster-div">
              <input type="text" data-i18n="monster name" placeholder="monster name here" name="attr_encounters"
                class="attr_encounters monster-name" spellcheck="false">
              <div class="monster-stats">
                <div class="monster-stats-div">
                  <label data-i18n="skill">Skill</label>
                  <input type="text" maxlength="2">
                </div>

                <div class="monster-stats-div">
                  <label data-i18n="stamina">Stamina</label>
                  <input type="text" maxlength="2">
                </div>

                <div class="monster-stats-div">
                  <label data-i18n="attacks">Attacks</label>
                  <input type="text" maxlength="2">
                </div>
              </div>


            </div>

          </fieldset>
        </details>
      </div>

    </div>




  </div>



</div>

<rolltemplate class="sheet-rolltemplate-skill">
  <div class="rolltemplate-wrapper">
    <div class="rolltemplate-testname">
      <div>
        <h2> <span>&#9876; </span>Skill Test <span style="font-family:'Pictos Three'">b</span>
        </h2>
      </div>
      <div class="rolltemplate-result">
        <h4>Result
        </h4>
        <div>{{roll1}}</div>
      </div>

    </div>


</rolltemplate>

<rolltemplate class="sheet-rolltemplate-luckyTest">
  <div class="rolltemplate-wrapper">
    <div class="rolltemplate-testname">

      <h2>{{name}}</h2>
      <div>
        <div class="rolltemplate-result">
          <h4>Result</h4>
          {{roll1}}
        </div>
        <div class="rolltemplate-result">
          <h4> &#9752; Lucky &#9752;</h4>
          {{computed::roll1}}
        </div>
      </div>



    </div>
  </div>

</rolltemplate>


<script type="text/worker">
  const buttonlist = ["hero", "notesAndMonsters"];
buttonlist.forEach(button => {
  on(`clicked:${button}`, function () {
    setAttrs({
      sheetTab: button
    });
  });
});

on('clicked:test', (info) => {
  getAttrs(['characterluck'], (v) => {
    startRoll("&{template:luckyTest} {{name=Lucky Test}} {{roll1=[[2d6]]}}", (results) => {
      const total = results.results.roll1.result
      const lucky = 'Yes, you were lucky';
      const unlucky = 'Oh no, you were unlucky';
      if (total < v.characterluck) {
        finishRoll(
          results.rollId,
          {
            roll1: lucky,
          }
        );
      } else {
        finishRoll(
          results.rollId,
          {
            roll1: unlucky,
          }
        )
      }

    });
  })

});


on('clicked:skillroll', () => {
  getAttrs(['characterskill'], (v) => {
    startRoll("&{template:skill} {{name=Skill Test}} {{roll1=[[2d6 + @{characterskill}]]}}", (results) => {
      const total = results.results.roll1.result
      finishRoll(results.rollId, {
        roll1: total
      });
    })

  })
})
</script>