roll20-character-sheets/DresdenFilesAccelerated/DFA.html

<div class="sheet-title">DRESDEN FILES ACCELERATED</div>
<div class="sheet-outline">
    <!--Character Name-->
    <div class="sheet-container sheet-half">
        <div class="sheet-text-header">CHARACTER NAME</div>
       <div class="sheet-flexrow sheet-top"><input type="text" name="attr_character-name" title="@{character-name}"/></div>
    </div>
    <!--Mantle(s)-->
    <div class="sheet-container sheet-half">
        <div class="sheet-text-header">MANTLES</div>
        <div class="sheet-flexrow">
            <input type="text" class="sheet-mantle" name="attr_mantle-1" title="@{mantle-1}"/>
            <input type="text" class="sheet-mantle" name="attr_mantle-2" title="@{mantle-2}"/>
        </div>
    </div>
    <!--Aspects-->
    <div class="sheet-container sheet-half">
        <div class="sheet-text-header">ASPECTS</div>
        <div class="sheet-text-aspects">High Concept</div>
        <input type="text" class="sheet-text-input" name="attr_high-concept" title="@{high-concept}">
        <div class="sheet-text-aspects">Trouble</div>
        <input type="text"/ name="attr_trouble" title="@{trouble}">
        <div class="sheet-text-aspects">Other Aspects</div>
        <input type="text"/ name="attr_other-aspect-1" title="@{other-aspect-1">
        <input type="text"/ name="attr_other-aspect-2" title="@{other-aspect-2">
        <input type="text"/ name="attr_other-aspect-3" title="@{other-aspect-3">
    </div>
    <!--Approaches. Textboxes to allow GMs to edit approaches for Supporting and Minor NPCs -->
    <div class="sheet-flexrow sheet-half">
        <div class="sheet-container sheet-approaches">
            <div class="sheet-text-header">APPROACHES</div>
            <div class="sheet-top">
                <div class="sheet-flexrow">
                    <button type="roll" class="sheet-button" value="&{template:default} {{name=**@{character-name}**}} {{Flair=[[4df + @{flair}]]}}" name="roll_flair"></button>
                    <input type="number" class="sheet-number" name="attr_flair" title="@{flair}" placeholder="0" />
                    <div class="sheet-text-other">Flair</div>
                </div>
                
                <div class="sheet-flexrow">
                    <button type="roll" class="sheet-button" value="&{template:default} {{name=**@{character-name}**}} {{Focus=[[4df + @{focus}]]}}" name="roll_focus"></button>
                    <input type="number" class="sheet-number" name="attr_focus" title="@{focus}" placeholder="0" />
                    <div class="sheet-text-other">Focus</div>
                </div>
                
                <div class="sheet-flexrow">
                    <button type="roll" class="sheet-button" value="&{template:default} {{name=**@{character-name}**}} {{Force=[[4df + @{force}]]}}" name="roll_force"></button>
                    <input type="number" class="sheet-number" name="attr_force" title="@{force}" placeholder="0" />
                    <div class="sheet-text-other">Force</div>
                </div>
                
                <div class="sheet-flexrow">
                    <button type="roll" class="sheet-button" value="&{template:default} {{name=**@{character-name}**}} {{Guile=[[4df + @{guile}]]}}" name="roll_guile"></button>
                    <input type="number" class="sheet-number" name="attr_guile" title="@{guile}" placeholder="0" />
                    <div class="sheet-text-other">Guile</div>
                </div>
                
                <div class="sheet-flexrow">
                    <button type="roll" class="sheet-button" value="&{template:default} {{name=**@{character-name}**}} {{Haste=[[4df + @{haste}]]}}" name="roll_haste"></button>
                    <input type="number" class="sheet-number" name="attr_haste" title="@{haste}" placeholder="0" />
                    <div class="sheet-text-other">Haste</div>
                </div>
                
                <div class="sheet-flexrow">
                    <button type="roll" class="sheet-button" value="&{template:default} {{name=**@{character-name}**}} {{Intellect=[[4df + @{intellect}]]}}" name="roll_intellect"></button>
                    <input type="number" class="sheet-number" name="attr_intellect" title="@{intellect}" placeholder="0" />
                    <div class="sheet-text-other">Intellect</div>
                </div>
                
                <div class="sheet-flexrow">
                    <button type="roll" class="sheet-button" value="&{template:default} {{name=**@{character-name}**}} {{Mantle=[[4df + @{mantle}]]}}" name="roll_mantle"></button>
                    <input type="number" class="sheet-number" name="attr_mantle" title="@{mantle}" placeholder="0" />
                    <div class="sheet-text-other">Mantle</div>
                </div>
            </div>
        </div>
       <!--Quick reference sheet for the Ladder and Scale--> 
        <div class="sheet-container sheet-third">
            <div class="sheet-text-header">LADDER</div>
            <div class="sheet-text-other">+8 Legendary</div>
            <div class="sheet-text-other">+7 Epic</div>
            <div class="sheet-text-other">+6 Fantastic</div>
            <div class="sheet-text-other">+5 Superb</div>
            <div class="sheet-text-other">+4 Great</div>
            <div class="sheet-text-other">+3 Good</div>
            <div class="sheet-text-other">+2 Fair</div>
            <div class="sheet-text-other">+1 Average</div>
            <div class="sheet-text-other">+0 Mediocre</div>
            <div class="sheet-text-other">-1 Poor</div>
            <div class="sheet-text-other">-2 Terrible</div>
        </div>
        
        <div class="sheet-container sheet-third">
            <div class="sheet-text-header">SCALE</div>
            <div class="sheet-scale">
                <div class="sheet-text-other">Godlike</div>
                <div class="sheet-text-other">Legendary</div>
                <div class="sheet-text-other">Otherworldly</div>
                <div class="sheet-text-other">Supernatural</div>
                <div class="sheet-text-other">Mundane</div>
            </div>
        </div>
    </div>
    <!--Conditions-->
    <div class="sheet-container sheet-half" style="position:relative;">
        <div class="sheet-text-header">STRESS & CONDITIONS</div>
        <input type="checkbox" class="sheet-stress-config" name="stress-config" style="position:absolute;right:0;top:0;"/><span></span>
        <div class="sheet-flexrow">
            <input type="number" class="sheet-number" value="0" disabled="disabled"/>
            <div class="sheet-text-other">Stress</div>
            <div class="sheet-box"><input type="checkbox" class="sheet-checkbox" name="attr_stress-1" title="@{stress-1}"/><span></span></div>
            <div class="sheet-box"><input type="checkbox" class="sheet-checkbox" name="attr_stress-2" title="@{stress-2}"/><span></span></div>
            <div class="sheet-box"><input type="checkbox" class="sheet-checkbox" name="attr_stress-3" title="@{stress-3}"/><span></span></div>
            <div class="sheet-box"><input type="checkbox" class="sheet-checkbox" name="attr_stress-4" title="@{stress-4}"/><span></span></div>
            <div class="sheet-box"><input type="checkbox" class="sheet-checkbox" name="attr_stress-5" title="@{stress-5}"/><span></span></div>
            <div class="sheet-box"><input type="checkbox" class="sheet-checkbox" name="attr_stress-6" title="@{stress-6}"/><span></span></div>
        </div>
        
        <div class="sheet-flexrow">
            <input type="number" class="sheet-number" value="0" disabled="disabled"/>
            <div class="sheet-text-other">Indebted</div>
            <div class="sheet-box"><input type="checkbox" class="sheet-checkbox" name="attr_indebted-1" title="@{indebted-1}"/><span></span></div>
            <div class="sheet-box"><input type="checkbox" class="sheet-checkbox" name="attr_indebted-2" title="@{indebted-2}"/><span></span></div>
            <div class="sheet-box"><input type="checkbox" class="sheet-checkbox" name="attr_indebted-3" title="@{indebted-3}"/><span></span></div>
            <div class="sheet-box"><input type="checkbox" class="sheet-checkbox" name="attr_indebted-4" title="@{indebted-4}"/><span></span></div>
            <div class="sheet-box"><input type="checkbox" class="sheet-checkbox" name="attr_indebted-5" title="@{indebted-5}"/><span></span></div>
        </div>
        
        <div class="sheet-flexrow">
            <input type="number" class="sheet-number" value="0" disabled="disabled"/>
            <input type="text" class="sheet-hover" placeholder="In Peril" name="attr_in-peril-aspect" title="@{in-peril-aspect"/>
            <div class="sheet-box"><input type="checkbox" class="sheet-checkbox" name="attr_in-peril" title="@{in-peril}"/><span></span></div>
        </div>
        
        <div class="sheet-flexrow">
            <input type="number" class="sheet-number" value="0" disabled="disabled"/>
            <input type="text" placeholder="Doomed" name="attr_doomed-aspect" title="@{doomed-aspect"/>
            <div class="sheet-box"><input type="checkbox" class="sheet-checkbox" name="attr_doomed" title="@{doomed}"/><span></span></div>
        </div>
        
        <div class="sheet-stress-tab">
            <fieldset class="repeating_condition">
                <div class="sheet-flexrow" style="height:32px;">
                    <input type="number" class="sheet-number" name="attr_condition-cost" title="@{condition-cost}" placeholder="0" value=0/>
                    <input type="text" class="sheet-hover" placeholder="Other Condition" name="attr_condition-name" style="margin-right:-26px;"/>
                    <span name="attr_condition-tooltip" class="sheet-tooltip"></span>
                    <input type="checkbox" class="sheet-hover-hidden" style="width:28px; height:28px;"><span></span>
                    <textarea placeholder="Power Tooltip" class="sheet-tooltip" name="attr_condition-tooltip" title="@{power-tooltip}"></textarea>
                    <div class="sheet-flexrow">
                        <div class="sheet-box"><input type="checkbox" class="sheet-stress-hidden" name="attr_condition-1-enabled"/><input type="checkbox" class="sheet-checkbox" name="attr_condition-1"/><span></span></div>
                        <div class="sheet-box"><input type="checkbox" class="sheet-stress-hidden" name="attr_condition-2-enabled"/><input type="checkbox" class="sheet-checkbox" name="attr_condition-2"/><span></span></div>
                        <div class="sheet-box"><input type="checkbox" class="sheet-stress-hidden" name="attr_condition-3-enabled"/><input type="checkbox" class="sheet-checkbox" name="attr_condition-3"/><span></span></div>
                        <div class="sheet-box"><input type="checkbox" class="sheet-stress-hidden" name="attr_condition-4-enabled"/><input type="checkbox" class="sheet-checkbox" name="attr_condition-4"/><span></span></div>
                        <div class="sheet-box"><input type="checkbox" class="sheet-stress-hidden" name="attr_condition-5-enabled"/><input type="checkbox" class="sheet-checkbox" name="attr_condition-5"/><span></span></div>
                    </div>
                </div>
            </fieldset>
        </div>
        
        <div class="sheet-stress-tab-config">
            <fieldset class="repeating_condition">
                <div class="sheet-flexrow" style="height:32px;">
                    <input type="number" class="sheet-number" name="attr_condition-cost" title="@{condition-cost}" placeholder="0" />
                    <input type="text" class="sheet-hover" placeholder="Other Condition" name="attr_condition-name" style="margin-right:-26px;"/>
                    <span name="attr_condition-tooltip" class="sheet-tooltip"></span>
                    <input type="checkbox" class="sheet-hover-hidden" style="width:28px; height:28px;"><span></span>
                    <textarea placeholder="Power Tooltip" class="sheet-tooltip" name="attr_condition-tooltip" title="@{power-tooltip}"></textarea>
                    <div class="sheet-flexrow">
                        <div class="sheet-box"><input type="checkbox" class="sheet-checkbox" name="attr_condition-1-enabled"/><span></span></div>
                        <div class="sheet-box"><input type="checkbox" class="sheet-checkbox" name="attr_condition-2-enabled"/><span></span></div>
                        <div class="sheet-box"><input type="checkbox" class="sheet-checkbox" name="attr_condition-3-enabled"/><span></span></div>
                        <div class="sheet-box"><input type="checkbox" class="sheet-checkbox" name="attr_condition-4-enabled"/><span></span></div>
                        <div class="sheet-box"><input type="checkbox" class="sheet-checkbox" name="attr_condition-5-enabled"/><span></span></div>
                    </div>
                </div>
            </fieldset>
        </div>
        
        <div class="sheet-spacer"></div>
        <!--Refresh and Fate Points-->
        <div class="sheet-flexrow">
            <div class="sheet-container sheet-quarter">
                <div class="sheet-text-header">FATE POINTS</div>
                <div class="sheet-fate"><input type="number" class="sheet-number-fate" name="attr_fate-points" title="@{fate-points}" placeholder="0" /></div>
            </div>
            
            <div class="sheet-container sheet-quarter">
                <div class="sheet-text-header">REFRESH</div>
                <div class="sheet-fate"><input type="number" class="sheet-number-fate" name="attr_refresh" title="@{refresh}" value="@{refresh-total}+(@{refresh-spent})" placeholder="0" disabled="true"/></div>
            </div>
            
            <div class="sheet-container sheet-quarter">
                <div class="sheet-text-header">SPENT</div>
                <div class="sheet-fate"><input type="number" class="sheet-number-fate" name="attr_refresh-spent" title="@{refresh-spent}" placeholder="0" readonly="readonly" /></div>
            </div>
            
            <div class="sheet-container sheet-quarter">
                <div class="sheet-text-header">TOTAL</div>
                <div class="sheet-fate"><input type="number" class="sheet-number-fate" name="attr_refresh-total" title="@{refresh-total}" placeholder="0" /></div>
            </div>
        </div>
    </div>
    <!--Stunts-->
    <div class="sheet-container sheet-half">
        <div class="sheet-text-header">STUNTS</div>
        <fieldset class="repeating_stunt">
            <div class="sheet-flexrow" style="height:32px;">
                <input type="number" class="sheet-number" name="attr_stunt-cost" title="@{stunt-cost}" placeholder="0" />
                <input type="text" class="sheet-hover" name="attr_stunt-name" style="margin-right:-26px;"/>
                <span name="attr_power-tooltip" class="sheet-tooltip"></span>
                <input type="checkbox" class="sheet-hover-hidden" style="width:28px; height:28px;"><span></span>
                <textarea placeholder="Power Tooltip" class="sheet-tooltip" name="attr_power-tooltip"></textarea>
            </div>
        </fieldset>
    </div>
</div>

<!--Refresh calculations-->
<script type="text/worker">

on('change:repeating_stunt remove:repeating_stunt', function(eventInfo) {
    getSectionIDs('repeating_stunt', function(idarray) {
        var costIds = idarray.map(function(rowid) { return 'repeating_stunt_' + rowid + '_stunt-cost'; });
        getAttrs(costIds, function(values) {
            var total = i = 0;
            for(; i < costIds.length; i++) {
                total -= parseInt(values[costIds[i]]) || 0;
            }
            
            setAttrs({ 'stuntCost': total });
        });
    });
});

on('change:repeating_condition remove:repeating_condition', function(eventInfo) {
    getSectionIDs('repeating_condition', function(idarray) {
        var costIds = idarray.map(function(rowid) { return 'repeating_condition_' + rowid + '_condition-cost'; });
        getAttrs(costIds, function(values) {
            var total = i = 0;
            for(; i < costIds.length; i++) {
                total -= parseInt(values[costIds[i]]) || 0;
            }
            
            setAttrs({ 'conditionCost': total });
        });
    });
});

on('change:stuntCost change:conditionCost', function(eventInfo) {
    getAttrs(['stuntCost','conditionCost'], function(values) {
        var sum = 0 - values.stuntCost - values.conditionCost;
        
        setAttrs({ 'refresh-spent': sum });
    });
})

</script>