roll20-character-sheets-tester/See You In Hell/seeyouinhell.html

<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
  href="https://fonts.googleapis.com/css?family=Press+Start+2P&display=swap"
  rel="stylesheet"
/>
<div class="sheet-grid">
  <div class="head-element section" data-i18n-title="logo-see-you-in-hell">
    <span class="sheet-logo-image lang-ru"></span>
  </div>

  <div class="hero-info section">
    <div class="inline-info">
      <label class="input-label" name="attr_charname" data-i18n="name-label">
        Name
      </label>
      <div class="input-wrapper">
        <input
          class="input-name"
          data-i18n-placeholder="character-name-placeholder"
          spellcheck="false"
          type="text"
        />
        <span class="input-underline"></span>
      </div>
    </div>

    <div class="inline-info">
      <label class="input-label" name="attr_concept" data-i18n="concept-label">
        Concept
      </label>
      <div class="input-wrapper">
        <input
          class="input-name"
          data-i18n-placeholder="character-concept-placeholder"
          spellcheck="false"
          type="text"
        />
        <span class="input-underline"></span>
      </div>
    </div>

    <div class="inline-info">
      <label
        class="input-label"
        name="attr_memorable_item"
        data-i18n="memorable-item-label"
      >
        Memorable Item
      </label>
      <div class="input-wrapper">
        <input
          class="input-name"
          data-i18n-placeholder="memorable-item-placeholder"
          spellcheck="false"
          type="text"
        />
        <span class="input-underline"></span>
      </div>
    </div>
  </div>

  <div class="hero-stats">
    <div class="inline-stats">
      <label class="input-label stats-label" data-i18n="wounds-label">
        Wounds
      </label>
      <div class="checkbox-group">
        <label class="checkbox-container">
          <input class="checkbox-input" name="attr_wounds1" type="checkbox" />
          <span class="checkbox-checkmark"></span>
        </label>

        <label class="checkbox-container">
          <input class="checkbox-input" name="attr_wounds2" type="checkbox" />
          <span class="checkbox-checkmark"></span>
        </label>

        <label class="checkbox-container">
          <input class="checkbox-input" name="attr_wounds3" type="checkbox" />
          <span class="checkbox-checkmark"></span>
        </label>

        <label class="checkbox-container">
          <input class="checkbox-input" name="attr_wounds4" type="checkbox" />
          <span class="checkbox-checkmark"></span>
        </label>

        <label class="checkbox-container">
          <input class="checkbox-input" name="attr_wounds5" type="checkbox" />
          <span class="checkbox-checkmark"></span>
        </label>
      </div>
    </div>

    <div class="inline-stats">
      <label class="input-label stats-label" data-i18n="rage-label">
        Rage
      </label>
      <div class="input-button-group">
        <button type="action" name="act_plusrage" class="input-button">
          +
        </button>
        <input type="number" name="attr_rage" value="0" class="number-input" />
        <button type="action" name="act_minusrage" class="input-button">
          -
        </button>
      </div>
    </div>

    <div class="inline-stats">
      <label class="input-label stats-label" data-i18n="tasks-label">
        Completed Tasks
      </label>
      <button type="action" name="act_plustasks" class="input-button">+</button>
      <input type="number" name="attr_tasks" value="0" class="number-input" />
      <button type="action" name="act_minustasks" class="input-button">
        -
      </button>
    </div>
  </div>

  <div class="hero-approaches">
    <div class="inline-approaches-label" data-i18n="approaches-label">
      Approaches
    </div>
    <div class="inline-approaches">
      <button
        type="roll"
        name="roll_blodthirsty"
        value="/roll 1d6 + @{bonusbloodthirsty}d6 + ?{ You have Element that helps?| No, 0|Yes, 1d6}"
        class="approaches-button approaches-danger"
        data-i18n="bloodthirsty-button"
      >
        Bloodthirsty
      </button>
      <label class="approaches-switch">
        <input
          class="approaches-input"
          name="attr_coldbloodedorbloodthirsty"
          type="checkbox"
        />
        <span class="approaches-slider approaches-round"></span>
      </label>
      <button
        type="roll"
        name="roll_coldblooded"
        value="/roll 1d6 + @{bonuscoldblooded}d6 + ?{ You have Element that helps?| No, 0|Yes, 1d6}"
        class="approaches-button approaches-danger"
        data-i18n="cold-blooded-button"
      >
        Cold-Blooded
      </button>
    </div>
    <div class="inline-approaches">
      <button
        type="roll"
        name="roll_confident"
        value="/roll 1d6 + @{bonusconfident}d6 + ?{ You have Element that helps?| No, 0|Yes, 1d6}"
        class="approaches-button approaches-danger"
        data-i18n="confident-button"
      >
        Confident
      </button>
      <label class="approaches-switch">
        <input
          class="approaches-input"
          name="attr_providentorconfident"
          type="checkbox"
          checked="true"
        />
        <span class="approaches-slider approaches-round"></span>
      </label>
      <button
        type="roll"
        name="roll_provident"
        value="/roll 1d6 + @{bonusprovident}d6 + ?{ You have Element that helps?| No, 0|Yes, 1d6}"
        class="approaches-button approaches-danger"
        data-i18n="provident-button"
      >
        Provident
      </button>
    </div>

    <div class="inline-approaches">
      <button
        type="roll"
        name="roll_tough"
        value="/roll 1d6 + @{bonustough}d6 + ?{ You have Element that helps?| No, 0|Yes, 1d6}"
        class="approaches-button approaches-danger"
        data-i18n="tough-button"
      >
        Tough
      </button>
      <label class="approaches-switch">
        <input
          class="approaches-input"
          name="attr_swiftortough"
          type="checkbox"
        />
        <span class="approaches-slider approaches-round"></span>
      </label>
      <button
        type="roll"
        name="roll_swift"
        value="/roll 1d6 + @{bonusswift}d6 + ?{ You have Element that helps?| No, 0|Yes, 1d6}"
        class="approaches-button approaches-danger"
        data-i18n="swift-button"
      >
        Swift
      </button>
    </div>
  </div>
  <div class="hero-elements">
    <div class="inline-approaches-label" data-i18n="elements-label">
      Elements
    </div>
    <div class="inline-elements-container">
      <textarea name="attr_heroelements" data-i18n-placeholder="elements-placeholder" class="elements-textarea" spellcheck="false"></textarea>
    </div>
    
  </div>
  <div class="credits">
    <img
      class="shg-logo-img"
      src="https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/See%20You%20In%20Hell/img/shg_logo_red_solid.png"
    />
    <input type="hidden" name="attr_bonusbloodthirsty" value="1" />
    <input type="hidden" name="attr_bonuscoldblooded" value="0" />
    <input type="hidden" name="attr_bonusconfident" value="0" />
    <input type="hidden" name="attr_bonusprovident" value="1" />
    <input type="hidden" name="attr_bonustough" value="1" />
    <input type="hidden" name="attr_bonusswift" value="0" />
  </div>
</div>

<rolltemplate class="sheet-rolltemplate-syihroll">
  <div class="sheet-template-container">
    <div class="sheet-template-header">{{rollname}}</div>
    <div class="sheet-template-row">Base Dice: {{basedice}}</div>
    <div class="sheet-template-row">Approach Dice: {{approachdice}}</div>
    <div class="sheet-template-row">Element Dice: {{elementdice}}</div>
  </rolltemplate>

  <script type="text/worker">
    // here comes js handlers for scripts and stuff

    on("clicked:plusrage",function(){
      getAttrs(["rage"], function(values){
          let rage = parseInt(values.rage);
          setAttrs({"rage": rage + 1});
      });
    });

    on("clicked:minusrage", function(){
      getAttrs(["rage"], function(values){
        let rage = parseInt(values.rage);
        if(rage > 0){
          setAttrs({"rage": rage - 1})
        }
      })
    });

    on("clicked:plustasks",function(){
      getAttrs(["tasks"], function(values){
          let tasks = parseInt(values.tasks);
          setAttrs({"tasks": tasks + 1});
      });
    });

    on("clicked:minustasks", function(){
      getAttrs(["tasks"], function(values){
        let tasks = parseInt(values.tasks);
        if(tasks > 0){
          setAttrs({"tasks": tasks - 1})
        }
      })
    });

    on("change:coldbloodedorbloodthirsty", function() {
      getAttrs(["coldbloodedorbloodthirsty", "bonusbloodthirsty", "bonuscoldblooded"], function(values){
        if(values.coldbloodedorbloodthirsty == 0){
          setAttrs({"bonusbloodthirsty" : 1});
          setAttrs({"bonuscoldblooded" : 0});
        } else {
          setAttrs({"bonusbloodthirsty" : 0});
          setAttrs({"bonuscoldblooded" : 1});
        }
      })
    });

    on("change:providentorconfident", function() {
      getAttrs(["providentorconfident", "bonusprovident", "bonusconfident"], function(values){
        if(values.providentorconfident == 0){
          setAttrs({"bonusprovident" : 0});
          setAttrs({"bonusconfident" : 1});
        } else {
          setAttrs({"bonusprovident" : 1});
          setAttrs({"bonusconfident" : 0});
        }
      })
    });

    on("change:swiftortough", function() {
      getAttrs(["swiftortough", "bonustough", "bonusswift"], function(values){
        if(values.swiftortough == 0){
          setAttrs({"bonustough" : 1});
          setAttrs({"bonusswift" : 0});
        } else {
          setAttrs({"bonustough" : 0});
          setAttrs({"bonusswift" : 1});
        }
      })
    });
  </script>
</div>