roll20-character-sheets/Troika/Troika.html

<!-- === SHEET ===  -->
<div class="sheet-main">
    <!-- Name and Background -->
    <div class="sheet-linea">
        <div class="columna" style="width: 50%;">
            <h3>Name</h3>
            <textarea name="attr_name" class="sheet-name"/></textarea>
        </div>

        <div class="columna" style="width: 50%;">
            <h3>Background</h3>
            <textarea name="attr_background" class="sheet-name"/></textarea>
        </div>
    </div>

    <!-- Special -->
    <div class="linea">
        <h3>Special</h3>
        <textarea name="attr_special"></textarea>
    </div>

    <div class="linea">
      <!-- Habilidades -->
      <div class="columna skills">
        <div class="linea"style="position:relative;">
            <div class="columna" style="width: 485px;">
                <h3>Advanced Skills & Spells</h3>    
            </div>
            <div class="columna" style="position: absolute; bottom: 0; margin-left:7px">
                Rank + Skill = Total
            </div>
            
        </div>

        <fieldset class="repeating_skills">
            <div class="linea" style="margin-bottom: 10px">
              <div class="columna">
                <button 
                    title="Under" 
                    type="roll" 
                    name="roll_SkillUnder" 
                    value="&{template:default} {{name=@{skillName} (Roll under)}} {{Result=[[2d6cs>10cf<0]]}}"> <!-- disable critical success and failure-->
                </button>
                <button 
                    title="Versus" 
                    type="roll" 
                    name="roll_SkillVersus" 
                    value="&{template:default} {{name=@{skillName} (Roll versus)}} {{Result=[[2d6cs>10cf<0+@{skillTotal}]]}}"><!-- disable critical success and failure-->
                </button>
                <input type="text" class="skill-name" name="attr_skillName"/>&nbsp;&nbsp;
                <input type="text" class="short" name="attr_skillRank"/> +
                <input type="text" class="short" name="attr_skillValue" readonly/> =
                <input type="text" class="short" name="attr_skillTotal"/>
              </div>
            </div>
        </fieldset>
        
      </div>

      <!-- Stats -->
      <div class="columna" style="margin-left:30px;text-align:center;">
        <!-- skill -->
        <div class="linea" style="margin-bottom: 10px">
            <h3>Skill</h3>
            <input type="text" class="stats-input" name="attr_skill"/>
        </div>
        <!-- stamina -->
        <div class="linea">
            <h3>Stamina</h3>
            <div class="linea" style="margin-bottom: 10px">
                <div class="columna">
                    <div>Max</div>
                    <input type="text" class="stats-input" name="attr_stamina"/>        
                </div>
                <div class="columna">
                    <div>Current</div>
                    <input type="text" class="stats-input" name="attr_staminaCurrent"/>
                </div>
            </div>
        </div>
        <!-- luck -->
        <div class="linea" style="margin-bottom: 10px">
            <h3>Luck</h3>
            <div class="linea">
                <div class="columna">
                    <div>Max</div>
                    <input type="text" class="stats-input" name="attr_luck"/>        
                </div>
                <div class="columna">
                    <div>Current</div>
                    <input type="text" class="stats-input" name="attr_luckCurrent"/>
                </div>
                <div class="columna">
                    <button 
                        title="Luck roll under" 
                        type="roll" 
                        name="roll_LuckUnder" 
                        value="&{template:default} {{name=Luck (Roll under)}} {{Result=[[2d6cs>10cf<0]]}}"
                        style="position:relative; bottom:-18px;">
                    </button>
                </div>
            </div>
        </div>

        
      </div>
    </div>

    <hr>
    <!-- Weapons -->
    <div class="linea">
        <div class="columna" style="width:58%">
            <h3>Weapons</h3>
        </div>
        <div class="columna" style="width:42%; text-align: center; position: relative;">
            <div style="position: relative; bottom:-10px;">
                Damage
            </div>
        </div>
    </div>
    
    <fieldset class="repeating_weapons">
        <div class="linea" style="margin-bottom:10px;">
            <div class="columna">
                <button 
                    title="Damage" 
                    type="roll" 
                    name="roll_Damage" 
                    value="&{template:default} {{name=Damage for @{weapon}}} {{ Check Weapon Damage cell [[1d6+?{Modifier|0}]] }}"
                    style="position:relative; bottom: -17px;">
                </button>
                
            </div>
            <div class="columna" style="width:54%; position:relative;">
                <input type="text" name="attr_weapon" class="weapon-input"/>
            </div>
            <div class="columna">
                <!-- daños -->
                <div class="linea">
                    <!-- daño1 -->
                    <div class="columna" style="margin-left:15px">
                        <div style="text-align: center;">1</div>
                        <input class="short" type="text" name="attr_weaponDamage1"/>
                    </div>
                    <!-- daño2 -->
                    <div class="columna"style="margin-left:15px">
                        <div style="text-align: center;">2</div>
                        <input class="short" type="text" name="attr_weaponDamage2"/>
                    </div>
                    <!-- daño3 -->
                    <div class="columna"style="margin-left:15px">
                        <div style="text-align: center;">3</div>
                        <input class="short" type="text" name="attr_weaponDamage3"/>
                    </div>
                    <!-- daño4 -->
                    <div class="columna"style="margin-left:15px">
                        <div style="text-align: center;">4</div>
                        <input class="short" type="text" name="attr_weaponDamage4"/>
                    </div>
                    <!-- daño5 -->
                    <div class="columna"style="margin-left:15px">
                        <div style="text-align: center;">5</div>
                        <input class="short" type="text" name="attr_weaponDamage5"/>
                    </div>
                    <!-- daño6 -->
                    <div class="columna"style="margin-left:15px">
                        <div style="text-align: center;">6</div>
                        <input class="short" type="text" name="attr_weaponDamage6"/>
                    </div>
                    <!-- daño7 -->
                    <div class="columna"style="margin-left:15px">
                        <div style="text-align: center;">7+</div>
                        <input class="short" type="text" name="attr_weaponDamage7"/>
                    </div>
                    
                </div>
            </div>
        </div>
    </fieldset>
    

    <hr>
    <!-- inventory -->
    <div class="linea" style="margin-bottom:10px;">
        <div class="columna">
            <h3>Inventory</h3>    
        </div>
        <div class="columna">
            <button 
                title="Inventory roll" 
                type="roll" 
                name="roll_Inventory" 
                value="&{template:default} {{name=Inventory}} {{Result=[[2d6cs>10cf<0]]}}">
            </button>
        </div>
    </div>
    
    <div class="linea" style="margin-bottom:10px;">
        <div class="columna" style="width: 50%;">
            <div class="linea">
                <span class="inventory-label">
                1
                </span>
                <input type="text" name="attr_inventory1" class="inventory-input"/>    
            </div>
            <div class="linea">
                <span class="inventory-label">
                2
                </span>
                <input type="text" name="attr_inventory2" class="inventory-input"/>    
            </div>
            <div class="linea">
                <span class="inventory-label">
                3
                </span>
                <input type="text" name="attr_inventory3" class="inventory-input"/>    
            </div>
            <div class="linea">
                <span class="inventory-label">
                4
                </span>
                <input type="text" name="attr_inventory4" class="inventory-input"/>    
            </div>
            <div class="linea">
                <span class="inventory-label">
                5
                </span>
                <input type="text" name="attr_inventory5" class="inventory-input"/>    
            </div>
            <div class="linea">
                <span class="inventory-label">
                6
                </span>
                <input type="text" name="attr_inventory6" class="inventory-input"/>    
            </div>            
        </div>
        <div class="columna" style="width: 50%;">
            <div class="linea">
                <span class="inventory-label">
                7
                </span>
                <input type="text" name="attr_inventory7" class="inventory-input"/>    
            </div>
            <div class="linea">
                <span class="inventory-label">
                8
                </span>
                <input type="text" name="attr_inventory8" class="inventory-input"/>    
            </div>
            <div class="linea">
                <span class="inventory-label">
                9
                </span>
                <input type="text" name="attr_inventory9" class="inventory-input"/>    
            </div>
            <div class="linea">
                <span class="inventory-label">
                10
                </span>
                <input type="text" name="attr_inventory10" class="inventory-input"/>    
            </div>
            <div class="linea">
                <span class="inventory-label">
                11
                </span>
                <input type="text" name="attr_inventory11" class="inventory-input"/>    
            </div>
            <div class="linea" style="position: relative;">
                <span class="inventory-label">
                12
                </span>
                <input type="text" name="attr_inventory12" class="inventory-input"/>    
            </div>
        </div>
    </div>
    
    <div class="linea">
        <div class="columna" style="width:50%;">
            <h4>Wearing</h4>
            <textarea name="attr_inventory_wearing" style="width:350px;"/></textarea>
        </div>
        <div class="columna" style="width:50%;">
            <h4>Monies</h4>
            <textarea name="attr_inventory_monies" style="width:350px; height:50px"/></textarea>
            
            <!-- provisions -->
            <div class="linea">
                <h4>Provisions</h4>
                <div>
                    <input type="checkbox" name="attr_provision1" id="attr_provision1" />
                    <label for="attr_provision1"> </label>    
                </div>
                
                <div>
                    <input type="checkbox" name="attr_provision2" id="attr_provision2" />
                    <label for="attr_provision2"> </label>    
                </div>
                
                <div>
                    <input type="checkbox" name="attr_provision3" id="attr_provision3" />
                    <label for="attr_provision3"> </label>    
                </div>
                
                <div>
                    <input type="checkbox" name="attr_provision4" id="attr_provision4" />
                    <label for="attr_provision4"> </label>    
                </div>
                
                <div>
                    <input type="checkbox" name="attr_provision5" id="attr_provision5" />
                    <label for="attr_provision5"> </label>    
                </div>
                
                <div>
                    <input type="checkbox" name="attr_provision6" id="attr_provision6" />
                    <label for="attr_provision6"> </label>    
                </div>
                
                <div>
                    <input type="checkbox" name="attr_provision7" id="attr_provision7" />
                    <label for="attr_provision7"> </label>    
                </div>
                 <br>        
                <div>
                    <input type="checkbox" name="attr_provision8" id="attr_provision8" />
                    <label for="attr_provision8"> </label>    
                </div>  
                
                <div>
                    <input type="checkbox" name="attr_provision9" id="attr_provision9" />
                    <label for="attr_provision9"> </label>    
                </div> 
                
                <div>
                    <input type="checkbox" name="attr_provision10" id="attr_provision10" />
                    <label for="attr_provision10"> </label>    
                </div> 
                
                <div>
                    <input type="checkbox" name="attr_provision11" id="attr_provision11" />
                    <label for="attr_provision11"> </label>    
                </div> 
                
                <div>
                    <input type="checkbox" name="attr_provision12" id="attr_provision12" />
                    <label for="attr_provision12"> </label>    
                </div> 
                
                <div>
                    <input type="checkbox" name="attr_provision13" id="attr_provision13" />
                    <label for="attr_provision13"> </label>    
                </div> 
                
                <div>
                    <input type="checkbox" name="attr_provision14" id="attr_provision14" />
                    <label for="attr_provision14"> </label>    
                </div> 
            </div>            
            
        </div>
    </div>

</div>

<!-- === WORKERS ===  -->
<script type="text/worker">
    on("change:skill", function(eventinfo){
        var skill = parseInt(eventinfo.newValue) || 0;
        var output = {};
        getSectionIDs("repeating_skills", function (idarray) {
            idarray.forEach(function (id) {
                let selector = "repeating_skills_" + id + "_skillValue";
                output[selector] = skill;
            })
            setAttrs(output);
        });
    });
    
    on("change:repeating_skills:skillRank", function (eventInfo){
        var output = {};
        getAttrs(["repeating_skills_skillRank","skill"], function(values){
            output["repeating_skills_skillTotal"] = Number(values.repeating_skills_skillRank) + Number(values.skill);
            setAttrs(output);
        })    
    });
    
    on("change:repeating_skills:skillValue", function (eventInfo){
        var output = {};
        getAttrs(["repeating_skills_skillRank","skill"], function(values){
            output["repeating_skills_skillTotal"] = Number(values.repeating_skills_skillRank) + Number(values.skill);
            setAttrs(output);
        })    
    });

</script>