roll20-character-sheets/Karyu Densetsu/karyu.html

<div class="main-container">

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

    <div class="logo grow">
      <img width="400px" height="177px"
        src="https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Karyu%20Densetsu/img/logo.png" />
    </div>

    <div class="flex-column grow">

      <div class="header-row">
        <span class="label secondary-font" data-i18n="name">Nome</span>
        <input name="attr_character_name" type="text" title="@{character_name}" />
      </div>

      <div class="header-row">
        <span class="label secondary-font" data-i18n="concept">Conceito</span>
        <input name="attr_conceito" type="text" title="@{conceito}" />
      </div>

      <div class="header-grid">
        <span class="label secondary-font" data-i18n="aura">Aura</span>
        <input type="number" name="attr_aura" title="@{aura}" value="1" />

        <span class="label secondary-font" data-i18n="sync">Sincronização</span>
        <input type="number" name="attr_sinx" title="@{sinx}" value="0" />

        <span class="label secondary-font" data-i18n="karma">Karma</span>
        <input type="number" name="attr_karma" title="@{karma}" value="0" />

        <span class="label secondary-font" data-i18n="nagen">Nagen</span>
        <input type="number" name="attr_nagen" title="@{nagen}" value="0" />
      </div>


    </div>

  </div>

  <!-- Tab navigation -->
  <div class="tab-panel">

    <div class="flex-row">
      <button type="action" name="act_profile" data-i18n="profile">Perfil</button>
      <button type="action" name="act_techniques" data-i18n="techniques">Técnicas</button>
      <button type="action" name="act_equipments" data-i18n="equipments">Equipamentos</button>
    </div>

    <div class="repeatable-row-box">
      <span class="box-title main-font" data-i18n="injuries">Feridas</span>
      <div class="flex-row injury">
        <input type="checkbox" name="attr_injury" />
        <input type="checkbox" name="attr_injury1" />
        <input type="checkbox" name="attr_injury2" />
        <input type="checkbox" name="attr_injury3" />
        <input type="checkbox" name="attr_injury4" />
      </div>
    </div>

    <div class="repeatable-row-box vigor">
      <span class="box-title main-font" data-i18n="vigor_bar" title="Aura + Força + Vontade"
        data-i18n-title="vigorformula">Barra de Vigor</span>
      <div class="flex-row">
        <div class="repeatable-row-box">
          <span class="label secondary-font" data-i18n="max">Máx</span>
          <input type="number" disabled=true value="@{aura}+@{for}+@{von}+@{VigMod}" name="attr_VigMax"
            title="@{VigMax}">
        </div>

        <div class="repeatable-row-box">
          <span class="label secondary-font" data-i18n="current">Atual</span>
          <input type="number" value="0" name="attr_VigAtual" title="@{VigAtual}">
        </div>

        <div class="repeatable-row-box">
          <span class="label secondary-font" data-i18n="mod">Mod</span>
          <input type="number" name="attr_VigMod" value="0" title="@{VigMod}" />
        </div>
      </div>
    </div>

  </div>
  <input type='hidden' class='tabcontrol' name='attr_tabcontrol' value='profile' />

  <!-- Profile Tab -->
  <div class="profiletab">

    <!-- Middle -->
    <div class="middle">

      <!-- Middle column 1-->
      <div class="middle-column">

        <div class="box flex-column">

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

          <div class="attributes-grid">

            <span class="label secondary-font" data-i18n="agility">Agilidade</span>
            <input name="attr_agi" type="number" title="@{agi}" value="0" />
            <button type="roll" class="roll-button" name="roll_agicheck" title="@{agicheck}"
              value="/r { (?{@{advantagedisadvantage}|0}+@{agi})d6s+?{@{syncdice}|0}d10s }kh2+?{@{techoccupation}|0|1|2|3}"></button>

            <span class="label secondary-font" data-i18n="strength">Força</span>
            <input name="attr_for" type="number" title="@{for}" value="0" />
            <button type="roll" class="roll-button" name="roll_forcheck" title="@{forcheck}"
            value="/r { (?{@{advantagedisadvantage}|0}+@{for})d6s+?{@{syncdice}|0}d10s }kh2+?{@{techoccupation}|0|1|2|3}"></button>

            <span class="label secondary-font" data-i18n="instinct">Instinto</span>
            <input name="attr_ins" type="number" title="@{ins}" value="0" />
            <button type="roll" class="roll-button" name="roll_inscheck" title="@{inscheck}"
            value="/r { (?{@{advantagedisadvantage}|0}+@{ins})d6s+?{@{syncdice}|0}d10s }kh2+?{@{techoccupation}|0|1|2|3}"></button>

            <span class="label secondary-font" data-i18n="presence">Presença</span>
            <input name="attr_pre" type="number" title="@{pre}" value="0" />
            <button type="roll" class="roll-button" name="roll_precheck" title="@{precheck}"
            value="/r { (?{@{advantagedisadvantage}|0}+@{pre})d6s+?{@{syncdice}|0}d10s }kh2+?{@{techoccupation}|0|1|2|3}"></button>

            <span class="label secondary-font" data-i18n="reason">Razão</span>
            <input name="attr_raz" type="number" title="@{raz}" value="0" />
            <button type="roll" class="roll-button" name="roll_razcheck" title="@{razcheck}"
            value="/r { (?{@{advantagedisadvantage}|0}+@{raz})d6s+?{@{syncdice}|0}d10s }kh2+?{@{techoccupation}|0|1|2|3}"></button>

            <span class="label secondary-font" data-i18n="will">Vontade</span>
            <input name="attr_von" type="number" title="@{von}" value="0" />
            <button type="roll" class="roll-button" name="roll_voncheck" title="@{voncheck}"
            value="/r { (?{@{advantagedisadvantage}|0}+@{von})d6s+?{@{syncdice}|0}d10s }kh2+?{@{techoccupation}|0|1|2|3}"></button>

          </div>
        </div>

        <div class="box flex-column">
          <span class="box-title main-font" data-i18n="occupations">Ocupações</span>

          <div class="occupations-grid">

            <span class="label secondary-font" data-i18n="artist">Artista</span>
            <select name="attr_artista" title="@{artista}">
              <option value="0">0</option>
              <option value="1">1</option>
              <option value="2">2</option>
              <option value="3">3</option>
            </select>

            <span class="label secondary-font" data-i18n="athlete">Atleta</span>
            <select name="attr_atleta" title="@{atleta}">
              <option value="0">0</option>
              <option value="1">1</option>
              <option value="2">2</option>
              <option value="3">3</option>
            </select>

            <span class="label secondary-font" data-i18n="scientist">Cientista</span>
            <select name="attr_cientista" title="@{cientista}">
              <option value="0">0</option>
              <option value="1">1</option>
              <option value="2">2</option>
              <option value="3">3</option>
            </select>

            <span class="label secondary-font" data-i18n="diplomat">Diplomata</span>
            <select name="attr_diplomata" title="@{diplomata}">
              <option value="0">0</option>
              <option value="1">1</option>
              <option value="2">2</option>
              <option value="3">3</option>
            </select>

            <span class="label secondary-font" data-i18n="engineer">Engenheiro</span>
            <select name="attr_engen" title="@{engen}">
              <option value="0">0</option>
              <option value="1">1</option>
              <option value="2">2</option>
              <option value="3">3</option>
            </select>

            <span class="label secondary-font" data-i18n="medic">Médico</span>
            <select name="attr_med" title="@{med}">
              <option value="0">0</option>
              <option value="1">1</option>
              <option value="2">2</option>
              <option value="3">3</option>
            </select>

            <span class="label secondary-font" data-i18n="mystic">Místico</span>
            <select name="attr_mistico" title="@{mistico}">
              <option value="0">0</option>
              <option value="1">1</option>
              <option value="2">2</option>
              <option value="3">3</option>
            </select>

            <span class="label secondary-font" data-i18n="pilot">Piloto</span>
            <select name="attr_piloto" title="@{piloto}">
              <option value="0">0</option>
              <option value="1">1</option>
              <option value="2">2</option>
              <option value="3">3</option>
            </select>

            <span class="label secondary-font" data-i18n="cheater">Trapaceiro</span>
            <select name="attr_trapaceiro" title="@{trapaceiro}">
              <option value="0">0</option>
              <option value="1">1</option>
              <option value="2">2</option>
              <option value="3">3</option>
            </select>

            <span class="label secondary-font" data-i18n="watchful">Vigilante</span>
            <select name="attr_vigilante" title="@{vigilante}">
              <option value="0">0</option>
              <option value="1">1</option>
              <option value="2">2</option>
              <option value="3">3</option>
            </select>

          </div>
        </div>

        <div class="box flex-column trumps">

          <span class="box-title main-font" data-i18n="trumps">Trunfos</span>

          <input type="text" name="attr_trunfo1nome" data-i18n-placeholder="trump1" placeholder="Trunfo 1"
            title="@{trunfo1nome}" />
          <textarea name="attr_trunfo1" title="@{trunfo1}" data-i18n-placeholder="trump1-description"
            placeholder="Descrição do Trunfo" rows="10" cols="40"></textarea>
          <input type="text" name="attr_trunfo2nome" data-i18n-placeholder="trump2" placeholder="Trunfo 2"
            title="@{trunfo2nome}" />
          <textarea name="attr_trunfo2" title="@{trunfo2}" data-i18n-placeholder="trump2-description"
            placeholder="Descrição do Trunfo" rows="10" cols="40"></textarea>

        </div>

      </div>

      <!-- Middle column 2 -->
      <div class="middle-column">

        <div class="box flex-column">

          <span class="box-title main-font" data-i18n="fighting_style">Estilo de Luta</span>
          <input type="text" name="attr_nomestilo" data-i18n-placeholder="style_name" placeholder="Nome do Estilo" />

          <div class="style-grid">
            <span class="label secondary-font" data-i18n="grappling">Agarrão</span>
            <div class="style-icon grappling-icon"></div>
            <select name="attr_agarrao" title="@{agarrao}">
              <option value="0">0</option>
              <option value="1">1</option>
              <option value="2">2</option>
              <option value="3">3</option>
            </select>

            <span class="label secondary-font" data-i18n="blow">Golpe</span>
            <div class="style-icon blow-icon"></div>
            <select name="attr_golpe" title="@{golpe}">
              <option value="0">0</option>
              <option value="1">1</option>
              <option value="2">2</option>
              <option value="3">3</option>
            </select>

            <span class="label secondary-font" data-i18n="combo">Combo</span>
            <div class="style-icon combo-icon"></div>
            <select name="attr_combo" title="@{combo}">
              <option value="0">0</option>
              <option value="1">1</option>
              <option value="2">2</option>
              <option value="3">3</option>
            </select>

            <span class="label secondary-font" data-i18n="projectile">Projétil</span>
            <div class="style-icon projectile-icon"></div>
            <select name="attr_projetil" title="@{projetil}">
              <option value="0">0</option>
              <option value="1">1</option>
              <option value="2">2</option>
              <option value="3">3</option>
            </select>

            <span class="label secondary-font" data-i18n="block">Bloqueio</span>
            <div class="style-icon block-icon"></div>
            <select name="attr_bloqueio" title="@{bloqueio}">
              <option value="0">0</option>
              <option value="1">1</option>
              <option value="2">2</option>
              <option value="3">3</option>
            </select>

            <span class="label secondary-font" data-i18n="evasion">Evasão</span>
            <div class="style-icon evasion-icon"></div>
            <select name="attr_evasao" title="@{evasao}">
              <option value="0">0</option>
              <option value="1">1</option>
              <option value="2">2</option>
              <option value="3">3</option>
            </select>

          </div>
        </div>

        <div class="box flex-column">
          <span class="box-title main-font" data-i18n="threshold">Limiar</span>
          <div class="threshold-grid">
            <span class="label secondary-font" data-i18n="canalizing" title="Aura + 2"
              data-i18n-title="canalizingformula">Canalização</span>
            <input type="number" disabled=true value="@{aura}+@{CanMod}+2" name="attr_Can" title="@{Can}">
            <span class="label secondary-font" data-i18n="mod">Mod</span>
            <input type="number" name="attr_CanMod" value="0" title="@{CanMod}" />

            <span class="label secondary-font" data-i18n="defense"
              title="Aura + Agilidade + Razão ou Instinto (o que for maior) + Evasão" data-i18n-title="defenseformula">Defesa</span>
            <input type="number" disabled=true value="@{aura}+@{def_aux}+@{agi}+@{evasao}+@{DefMod}" name="attr_Def"
              title="@{Def}">
            <input type="hidden" name="attr_def_aux" value="0" />
            <span class="label secondary-font" data-i18n="mod">Mod</span>
            <input type="number" name="attr_DefMod" value="0" title="@{DefMod}" />

            <span class="label secondary-font" data-i18n="protection" title="Aura + Força + Bloqueio"
              data-i18n-title="protectionformula">Proteção</span>
            <input type="number" disabled=true value="@{aura}+@{for}+@{bloqueio}+@{ProtMod}" name="attr_Prot"
              title="@{Prot}">
            <span class="label secondary-font" data-i18n="mod">Mod</span>
            <input type="number" name="attr_ProtMod" value="0" title="@{ProtMod}" />

          </div>

        </div>

        <div class="box flex-column paths">
          <span class="box-title main-font" data-i18n="paths">Caminhos</span>

          <input type="text" name="attr_caminho1" title="@{caminho1}" data-i18n-placeholder="pathname"
            placeholder="Nome do caminho" class="paths-margin" />

          <div class="flex-row paths-margin">
            <input type="text" name="attr_caminho1.1" title="@{caminho1.1}" data-i18n-placeholder="pathevent"
              placeholder="Evento do caminho" />
            <input type="checkbox" name="attr_caminho_chk1" title="@{caminho_chk1}" />
          </div>

          <div class="flex-row paths-margin">
            <input type="text" name="attr_caminho1.2" title="@{caminho1.2}" data-i18n-placeholder="pathevent"
              placeholder="Evento do caminho" />
            <input type="checkbox" name="attr_caminho_chk2" title="@{caminho_chk2}" />
          </div>

          <div class="flex-row paths-margin">
            <input type="text" name="attr_caminho1.3" title="@{caminho1.3}" data-i18n-placeholder="pathevent"
              placeholder="Evento do caminho" />
            <input type="checkbox" name="attr_caminho_chk3" title="@{caminho_chk3}" />
          </div>

          <input type="text" name="attr_reviravolta" data-i18n-placeholder="turnaround" placeholder="Reviravolta" />
        </div>

        <div class="box flex-column">

          <span class="box-title main-font" data-i18n="bonds">Laços</span>

          <fieldset class="repeating_bonds">

            <div class="repeatable-item">
              <div class="flex-row">
                <input class="row-item-margin" type="text" name="attr_bondname" data-i18n-placeholder="bond"
                  placeholder="Laço" title="@{bondname}">
                <input type=checkbox name="attr_bondname_select" title="@{bondname_select}">
              </div>
            </div>

          </fieldset>

        </div>

      </div>

    </div>

    <div class="box flex-column">

      <span class="box-title main-font" data-i18n="notes">Anotações</span>
      <textarea name="attr_notes" title="@{notes}"></textarea>

    </div>

  </div>

  <!-- Techniques Tab -->
  <div class='techniquestab'>
    <div class="box flex-column">
      <span class="box-title main-font" data-i18n="techniques">Técnicas</span>

      <fieldset class="repeating_techs">

        <div class="repeatable-item">

          <div class="repeatable-row">

            <input class="row-item-margin" type="text" name="attr_tech" data-i18n-placeholder="technique_name"
              placeholder="Nome da Técnica" title="@{tech}" />

            <div class="repeatable-row-box">
              <span class="label secondary-font" data-i18n="type">Tipo</span>
              <select name="attr_skilltype" title="@{skilltype}">
                <option value="none"></option>
                <option value="agarrao" selected="selected" data-i18n="grapple">Agarrão</option>
                <option value="block" data-i18n="block">Bloqueio</option>
                <option value="combo" data-i18n="combo">Combo</option>
                <option value="evasion" data-i18n="evasion">Evasão</option>
                <option value="blow" data-i18n="blow">Golpe</option>
                <option value="projectile" data-i18n="projectile">Projétil</option>
              </select>
            </div>

            <div class="repeatable-row-box">
              <span class="label secondary-font" data-i18n="element">Elemento</span>
              <select name="attr_skillelement" title="@{skillelement}">
                <option value="water" selected="selected" data-i18n="water">Água</option>
                <option value="air" data-i18n="air">Ar</option>
                <option value="fire" data-i18n="fire">Fogo</option>
                <option value="earth" data-i18n="earth">Terra</option>
                <option value="ether" data-i18n="ether">Éter</option>
              </select>
            </div>

            <div class="repeatable-row-box">
              <span class="label secondary-font" data-i18n="nagen">Nagen</span>
              <input type="number" title="@{nagen}" name="attr_nagen" value="0">
            </div>

            <div class="repeatable-row-box">
              <span class="label secondary-font" data-i18n="damage">Dano</span>
              <input type="number" title="@{damage}" name="attr_damage" value="0">
            </div>

          </div>

          <div class="technique-row">
            <input class="row-item-margin" type="checkbox" name="attr_ougi" title="@{ougi}">
            <span class="label secondary-font row-item-margin" data-i18n="ougi">Ougi</span>
            <input type="text" data-i18n-placeholder="ougi_effect" placeholder="Efeito do Ougi" name="attr_ougieffect"
              title="@{ougieffect}">
          </div>

          <div class="technique-row">
            <span class="label secondary-font row-item-margin" data-i18n="upgrades">Upgrades</span>
            <input type="text" data-i18n-placeholder="upgrades_list" placeholder="Lista de upgrades"
              name="attr_upgrades" title="@{upgrades}">
          </div>


          <textarea name="attr_skilldescription" data-i18n-placeholder="description" placeholder="Descrição"></textarea>

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

  <!-- Equipment Tab-->
  <div class='equipmentstab'>
    <div class="box flex-column">
      <span class="box-title main-font" data-i18n="equipment">Equipamento</span>

      <fieldset class="repeating_equipments">

        <div class="repeatable-item">
          <div class="repeatable-row">
            <input class="row-item-margin" type="text" name="attr_equipment" data-i18n-placeholder="equipment"
              placeholder="Equipamento" title="@{equipment}">
          </div>

          <textarea name="attr_equipmentdescription" title="@{equipmentdescription}" data-i18n-placeholder="description"
            placeholder="Descrição"></textarea>
        </div>

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


  <!-- Footer -->
  <div class="footer">
    <span data-i18n="copyright">Karyu Densetsu é um jogo escrito por Nina Bichara e Thiago Rosa.</span>
  </div>

</div>

<!-- end of sheet -->

<!-- Strings translations for Roll Queries-->
<div style="display: none;">
  <span data-i18n="advantagedisadvantage">Vantagem/Desvantagem</span>
  <span data-i18n="syncdice">Dados de Sincronização</span>
  <span data-i18n="techoccupation">Técnica ou Ocupação</span>
</div>

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

  const buttonlist = ["profile","techniques", "equipments"];
  
  /*config tabs control */
  buttonlist.forEach(button => {
      on(`clicked:${button}`, function() {
          setAttrs({
              tabcontrol: button
          });
      });
  });

  function updateDefenseHiddenAttribute() {
    getAttrs(["raz", "ins"], function(values) {
      let higherValue = parseInt(values.raz)||0;
      let instinct =  parseInt(values.ins)||0;
      
      if (instinct > higherValue) {
        higherValue = instinct;
      }

      setAttrs({
        def_aux: higherValue
      });

    });
  }

  /*Sets de defense hidden attribute to the higher value between Reason and Instinct*/
  on("change:raz change:ins", function(eventInfo) {

    updateDefenseHiddenAttribute();
  });

  /*config Roll Queries translations */
  on("sheet:opened", function(eventInfo){
      
      setAttrs({
          advantagedisadvantage: getTranslationByKey("advantagedisadvantage"),
          syncdice: getTranslationByKey("syncdice"),
          techoccupation: getTranslationByKey("techoccupation")
      });     
      
  });
  
  /*updates defense threshold when the sheet is opened. This was made to fix this value on old sheets.*/
  on('sheet:opened',function(){
    
    updateDefenseHiddenAttribute();
  });
  
</script>