roll20-character-sheets-tester/CriancasEnxeridas/criancasenxeridas.html

<div class="main-container flex-column">

  <!-- Header -->
  <div class="header flex-row">

    <h1 data-i18n="game-title">Crianças<br>Enxeridas</h1>

    <div class="flex-column grow">

      <div class="flex-row header-box box-border">
        <span class="main-font" data-i18n="name">Nome:</span>
        <input name="attr_character_name" type="text" title="{@character_name}" />
      </div>

      <div class="flex-row header-box box-border">
        <span class="main-font" data-i18n="archetype">Arquétipo:</span>
        <input name="attr_archetype" type="text" title="{@archetype}" />
      </div>
    </div>

  </div>

  <div class="middle-row">

    <div class="flex-column">
      <!-- Attributes -->
      <div class="attributes box-border">

        <span class="main-font black-title" data-i18n="attributes">Atributos</span>

        <div class="attributes-container">

          <div class="attribute-box">
            <div class="attribute-circle-size circle">
              <input class="attribute-value" type="number" name="attr_charbody" title="{@charbody}" max="13" />
            </div>

            <span class="main-font attribute-label" data-i18n="body">Corpo</span>
            <input type="hidden" class="rollbuttoncontrol" name="attr_woundedcontrol" value="normal" />
            <button type="roll" class="normal-button" name="roll_body_check" title="{@body_check}"
              value="&{template:main} {{charname=@{character_name}}} {{check=@{body}}} {{target=[[15]]}} {{result=[[ ?{ @{advantagedisadvantage} | @{no}, 1d20 | @{advantage}, 2d20kh1 | @{disadvantage}, 2d20kl1 } + @{charbody} ]]}}"></button>
            <button type="roll" class="disadvantage-button" name="roll_body_disadvantage" title="{@body_disadvantage}"
              value="&{template:main} {{charname=@{character_name}}} {{check=@{body}}} {{target=[[15]]}} {{result=[[ 2d20kl1 + @{charbody} ]]}}"></button>

          </div>

          <div class="attribute-separator">
            +
          </div>

          <div class="attribute-box">
            <div class="attribute-circle-size circle">
              <input class="attribute-value" type="number" name="attr_charmind" title="{@charmind}" max="13" />
            </div>

            <span class="main-font attribute-label" data-i18n="mind">Mente</span>
            <input type="hidden" class="rollbuttoncontrol" name="attr_shakencontrol" value="normal" />
            <button type="roll" class="normal-button" name="roll_mind_check" title="{@mind_check}"
              value="&{template:main} {{charname=@{character_name}}} {{check=@{mind}}} {{target=[[15]]}} {{result=[[ ?{ @{advantagedisadvantage} | @{no}, 1d20 | @{advantage}, 2d20kh1 | @{disadvantage}, 2d20kl1 } + @{charmind} ]]}}"></button>
            <button type="roll" class="disadvantage-button" name="roll_mind_disadvantage" title="{@mind_disadvantage}"
              value="&{template:main} {{charname=@{character_name}}} {{check=@{mind}}} {{target=[[15]]}} {{result=[[ 2d20kl1 + @{charmind} ]]}}"></button>

          </div>

          <div class="attribute-separator">
            +
          </div>

          <div class="attribute-box">
            <div class="attribute-circle-size circle">
              <input class="attribute-value" type="number" name="attr_charcharisma" title="{@charcharisma}"
                max="13" />
            </div>

            <span class="main-font attribute-label" data-i18n="charisma">Carisma</span>
            <input type="hidden" class="rollbuttoncontrol" name="attr_ashamedcontrol" value="normal" />
            <button type="roll" class="normal-button" name="roll_charisma_check" title="{@charisma_check}"
              value="&{template:main} {{charname=@{character_name}}} {{check=@{charisma}}} {{target=[[15]]}} {{result= [[ ?{ @{advantagedisadvantage} | @{no}, 1d20 | @{advantage}, 2d20kh1 | @{disadvantage}, 2d20kl1 } + @{charcharisma} ]]}}"></button>
            <button type="roll" class="disadvantage-button" name="roll_charisma_disadvantage" title="{@charisma_disadvantage}"
              value="&{template:main} {{charname=@{character_name}}} {{check=@{charisma}}} {{target=[[15]]}} {{result= [[ 2d20kl1 + @{charcharisma} ]]}}"></button>

          </div>

          <div class="attribute-separator">
            +
          </div>

          <div class="attribute-box">
            <div class="attribute-white-bg attribute-circle-size circle">
              <input class="attribute-value" type="number" name="attr_charsurvival" title="{@charsurvival}"
                max="13" />
            </div>

            <div class="survival-used-box circle">
              <input class="attribute-value survival-used-value" type="number"
                name="attr_charsurvivalused" title="{@charsurvivalused}" />
            </div>

            <span class="main-font attribute-label" data-i18n="survival">Sobrevivência</span>
            <button type="roll" name="roll_survial_check" title="{@survival_check}"
              value="&{template:main} {{charname=@{character_name}}} {{action=@{survivalaction}}} {{text=@{survivalexplanation}}}"></button>

          </div>

          <div class="attribute-separator">
            +
          </div>

          <div class="attribute-box">
            <div class="attribute-circle-size circle">
              <input class="attribute-value" type="number" name="attr_charcuriosity" title="{@charcuriosity}"
                max="13" />
            </div>

            <span class="main-font attribute-label" data-i18n="curiosity">Curiosidade</span>
            <button type="roll" name="roll_curiosity_check" title="{@curiosity_check}"
              value="&{template:main} {{charname=@{character_name}}} {{check=@{curiosity}}} {{rollunder=[[@{charcuriosity}]]}} {{result=[[ ?{ @{advantagedisadvantage} | @{no}, 1d20cs1cf20 | @{advantage}, 2d20kl1cs1cf20 | @{disadvantage}, 2d20kh1cs1cf20 } ]]}}"></button>

          </div>

          <div class="attribute-separator">
            =
          </div>

          <div class="attribute-box">
            <div class="attribute-black-bg circle">
              25
            </div>

            <span class="main-font attribute-label" data-i18n="total">Total</span>
          </div>

        </div>

      </div>

    </div>

    <div class="flex-column grow">
      <!-- Equipments -->
      <div class="section-box">
        <span class="main-font light-title" data-i18n="equipments">Equipamentos</span>

        <fieldset class="repeating_equipments">
          <div class="flex-row repeatable-item">
            <input name="attr_equipment" type="text" data-i18n-placeholder="equipment" placeholder="Equipamento" />
          </div>
        </fieldset>

      </div>
    </div>

    <div class="flex-column grow">
      <!-- Consequences -->
      <div class="section-box">
        <span class="main-font light-title" data-i18n="consequences">Consequências</span>

        <fieldset class="repeating_consequences">
          <div class="flex-row repeatable-item">
            <input name="attr_consequence" type="text" data-i18n-placeholder="consequence"
              placeholder="Consequência" />
          </div>
        </fieldset>

      </div>
    </div>

    <div class="flex-column grow">
      <!-- Notes -->
      <div class="section-box">

        <span class="main-font light-title" data-i18n="notes">Anotações</span>

        <textarea name="attr_notes" title="{@notes}"></textarea>

      </div>

    </div>

  </div>

  <!-- Conditions -->
  <div class="flex-column box-border">

    <span class="main-font black-title" data-i18n="conditions">Condições</span>
    <div class="conditions-row">

      <div class="condition-box">
        <div class="condition-circle-size">
          <input class="condition-checkbox" type="checkbox" name="attr_wounded" title="{@wounded}" />
          <div class="blank-circle condition-circle-size circle"></div>
          <div class="black-circle condition-circle-size circle"></div>
        </div>
        <span class="main-font condition-label" data-i18n="wounded">Ferido</span>
      </div>

      <div class="condition-box">
        <div class="condition-circle-size">
          <input class="condition-checkbox" type="checkbox" name="attr_shaken" title="{@shaken}" />
          <div class="blank-circle condition-circle-size circle"></div>
          <div class="black-circle condition-circle-size circle"></div>
        </div>
        <span class="main-font condition-label" data-i18n="shaken">Abalado</span>
      </div>

      <div class="condition-box">
        <div class="condition-circle-size">
          <input class="condition-checkbox" type="checkbox" name="attr_ashamed" title="{@ashamed}" />
          <div class="blank-circle condition-circle-size circle"></div>
          <div class="black-circle condition-circle-size circle"></div>
        </div>
        <span class="main-font condition-label" data-i18n="ashamed">Envergonhado</span>
      </div>

      <div class="condition-box">
        <div class="condition-circle-size">
          <input class="condition-checkbox" type="checkbox" name="attr_defeated" title="{@defeated}" />
          <div class="blank-circle condition-circle-size circle"></div>
          <div class="black-circle condition-circle-size circle"></div>
        </div>
        <span class="main-font condition-label" data-i18n="defeated">Derrotado</span>
      </div>
    </div>
  </div>

  <div class="main-font  footer">
    <span data-i18n="copyright">Crianças Enxeridas é um jogo escrito por Raphael Lima com o selo Mundos Colidem.</span>
  </div>
</div>

<!-- end of sheet -->

<!-- Roll Templates -->
<rolltemplate class="sheet-rolltemplate-main">
  <div class="template-container">
    <div class="template-row template-header template-label">
      {{charname}}
    </div>
    
    {{#action}}
        <div class="template-row">
            <span class="template-label">{{action}}</span>
            {{#text}}
                <p>{{text}}</p>
            {{/text}}

        </div>
    {{/action}}
        
    {{#check}}
        <div class="template-row">
          <span class="template-label" data-i18n="check">Teste</span>
          {{check}}
        </div>
    {{/check}}
    
    {{#result}}
    
        <div class="template-row">
          <span class="template-label" data-i18n="result">Resultado</span>
          {{result}}
        </div>
        
        {{#rollGreater() result rollunder}}
            <div class="template-row">
                <span class="template-label template-fail" data-i18n="fail">Você Errou!</span>
            </div>  
        {{/rollGreater() result rollunder}}

        {{#^rollGreater() result rollunder}}
            <div class="template-row">
                <span class="template-label template-success" data-i18n="success">Você Acertou!</span>
            </div>
        {{/^rollGreater() result rollunder}}
    
        {{#^rollLess() result target}}
            <div class="template-row">
                <span class="template-label template-success" data-i18n="success">Você Acertou!</span>
            </div>  
        {{/^rollLess() result target}}

        {{#rollLess() result target}}
            <div class="template-row">
                <span class="template-label template-fail" data-i18n="fail">Você Errou!</span>
            </div>
        {{/rollLess() result target}}
        
    
        {{#rollWasCrit() result}}
          <div class="template-row">
            <span class="template-label template-success" data-i18n="critic">Acerto Crítico!</span>
            <span data-i18n="criticexplanation">O grupo pode adicionar um elemento narrativo na cena.</span>
          </div>        
        {{/rollWasCrit() result}}
    
        {{#rollWasFumble() result}}
          <div class="template-row">
            <span class="template-label template-fail" data-i18n="fumble">Erro Crítico!</span>
            <span data-i18n="fumbleexplanation">O narrador pode adicionar uma consequência negativa.</span>
          </div>  
        {{/rollWasFumble() result}}
        
    {{/result}}

  </div>

</rolltemplate>

<!-- Strings translations for Roll Queries-->
<div style="display: none;">
  <span data-i18n="advantagedisadvantage">Possui vantagem ou desvantagem?</span>
  <span data-i18n="no">Não</span>
  <span data-i18n="advantage">Vantagem</span>
  <span data-i18n="disadvantage">Desvantagem</span>
  <span data-i18n="result">Resultado</span>
  <span data-i18n="check">Teste</span>
  <span data-i18n="survivalaction">Gasto um ponto de sobrevivência</span>
  <span data-i18n="survivalexplanation">
Você pode escolher uma das coisas:
- Manter uma ação;
- Encontrar uma pista;
- Rolar os dados outra vez;
- Inserir um elemento narrativo;
- Dizer que tem um "equipamento".</span>
  
</div>

<!--Sheet Workers -->
<script type="text/worker">

  /*config Roll Queries translations */
  on("sheet:opened", function(eventInfo){
      
      setAttrs({
          advantagedisadvantage: getTranslationByKey("advantagedisadvantage"),
          no: getTranslationByKey("no"),
          advantage: getTranslationByKey("advantage"),
          disadvantage: getTranslationByKey("disadvantage"),
          result: getTranslationByKey("result"),
          check: getTranslationByKey("check"),
          body: getTranslationByKey("body"),
          mind: getTranslationByKey("mind"),
          charisma: getTranslationByKey("charisma"),
          survival: getTranslationByKey("survival"),
          curiosity: getTranslationByKey("curiosity"),
          survivalaction: getTranslationByKey("survivalaction"),
          survivalexplanation: getTranslationByKey("survivalexplanation")
      });     
      
  });

  /*keep attributes values at 13 max*/
  on("change:charbody change:charmind change:charcharisma change:charcuriosity change:charsurvival", function(eventInfo) {  
    const maxValue = 13;
    let oldValue = parseInt(eventInfo.previousValue)||0;
    let newValue = parseInt(eventInfo.newValue)||0;
    let attribute = eventInfo.sourceAttribute;
    let changedAttributes = new Object();
    
    changedAttributes[attribute] = maxValue;
    
    if (newValue > maxValue) {
  
      changedAttributes[attribute] = maxValue;
      setAttrs(changedAttributes);
    }
     
  });

  /*controls roll buttons when char has a condition checked*/
  on("change:wounded change:shaken change:ashamed", function(eventInfo) {  
    const disadvantage = "disadvantage";
    const normal = "normal";
    const sourceAttribute = eventInfo.sourceAttribute;
    const newValue = eventInfo.newValue;
    let changedAttributes = new Object();
    let controlToUpdate = sourceAttribute + "control";
    
    changedAttributes[controlToUpdate] = normal;

    switch(newValue) {
      case "on":
        changedAttributes[controlToUpdate] = disadvantage;
        break;
      default:
        changedAttributes[controlToUpdate] = normal;
    }
    
    setAttrs(changedAttributes);
     
  });
  
  
</script>