Obsidian Portal - Campaign websites for Dungeons and Dragons and other tabletop RPGs

Mouseguard 2e

Slug: mg2e

Type: GameCharacter

System: Mouse Guard

DST Source Code

Note: This is the latest, unapproved DST code. Only the DST author can use an unapproved DST, and even then only they can see it. If it's a new DST, then it's invisible to everyone else. If modifying a previously approved DST, then everyone else uses the most recent approved version.

HTML Template

<div class="wrapper csx ds_sts"><div class="sts"><link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css"> <div class="id"><div class="image"><span class="dsf dsf_avatar_image readonly"></span></div> <div class="id_info"><h2 class="header me">ID</h2> <div class="values"><div class="left"><div class="name titl"><div class="f_label">Name</div> <div class="input"><span class=" dsf dsf_name readonly basicText"><input aria-label="null" type="text"></span></div></div> <div class="description_field tatl"><div class="f_label">
        Description
    </div> <div class="input"><span class=" dsf dsf_description_field readonly textarea"><textarea aria-label="null"></textarea></span></div></div></div> <div class="right"><div class="refresh titl"><div class="f_label">Refresh</div> <div class="input"><span class=" dsf dsf_refresh readonly basicText"><input aria-label="null" type="text"></span></div></div> <div class="fate_points titl"><div class="f_label">Fate Points</div> <div class="input"><span class=" dsf dsf_fate_points readonly basicText"><input aria-label="null" type="text"></span></div></div></div></div></div></div> <h2 class="header me">Aspects</h2> <div class="aspects"><div class="aspect tisel"><div class="f_label"><span class=" dsf dsf_sheet_title aspect_name dsf dsf_concept_label basicText readonly basicText"><input aria-label="null" type="text"></span></div> <div class="desc"><span class=" dsf dsf_concept readonly basicText"><input aria-label="null" type="text"></span></div></div> <div class="aspect tisel"><div class="f_label"><span class=" dsf dsf_sheet_title aspect_name dsf dsf_trouble_label basicText readonly basicText"><input aria-label="null" type="text"></span></div> <div class="desc"><span class=" dsf dsf_trouble readonly basicText"><input aria-label="null" type="text"></span></div></div> <div class="aspect tisel"><div class="f_label"><span class=" dsf dsf_sheet_title aspect_name dsf dsf_your_adventure_label basicText readonly basicText"><input aria-label="null" type="text"></span></div> <div class="desc"><span class=" dsf dsf_your_adventure readonly basicText"><input aria-label="null" type="text"></span></div></div> <div class="aspect tisel"><div class="f_label"><span class=" dsf dsf_sheet_title aspect_name dsf dsf_crossing_paths_label basicText readonly basicText"><input aria-label="null" type="text"></span></div> <div class="desc"><span class=" dsf dsf_crossing_paths readonly basicText"><input aria-label="null" type="text"></span></div></div> <div class="aspect tisel"><div class="f_label"><span class=" dsf dsf_sheet_title aspect_name dsf dsf_crossing_paths_again_label basicText readonly basicText"><input aria-label="null" type="text"></span></div> <div class="desc"><span class=" dsf dsf_crossing_paths_again readonly basicText"><input aria-label="null" type="text"></span></div></div> <div class="aspect tisel"><div class="f_label"><span class=" dsf dsf_sheet_title aspect_name dsf dsf_aspect_06_label basicText readonly basicText"><input type="text" aria-label="aspect 06 description"></span></div> <div class="desc"><span class=" dsf dsf_aspect_06 readonly basicText"><input aria-label="null" type="text"></span></div></div> <div class="aspect tisel" style="display: none;"><div class="f_label"><span class=" dsf dsf_sheet_title aspect_name dsf dsf_aspect_07_label basicText readonly basicText"><input type="text" aria-label="aspect 07 description"></span></div> <div class="desc"><span class=" dsf dsf_aspect_07 readonly basicText"><input aria-label="null" type="text"></span></div></div> <div class="aspect tisel" style="display: none;"><div class="f_label"><span class=" dsf dsf_sheet_title aspect_name dsf dsf_aspect_08_label basicText readonly basicText"><input type="text" aria-label="aspect 08 description"></span></div> <div class="desc"><span class=" dsf dsf_aspect_08 readonly basicText"><input aria-label="null" type="text"></span></div></div> <div class="aspect tisel" style="display: none;"><div class="f_label"><span class=" dsf dsf_sheet_title aspect_name dsf dsf_aspect_09_label basicText readonly basicText"><input type="text" aria-label="aspect 09 description"></span></div> <div class="desc"><span class=" dsf dsf_aspect_09 readonly basicText"><input aria-label="null" type="text"></span></div></div> <div class="aspect tisel" style="display: none;"><div class="f_label"><span class=" dsf dsf_sheet_title aspect_name dsf dsf_aspect_10_label basicText readonly basicText"><input type="text" aria-label="aspect 10 description"></span></div> <div class="desc"><span class=" dsf dsf_aspect_10 readonly basicText"><input aria-label="null" type="text"></span></div></div> <div class="aspect tisel" style="display: none;"><div class="f_label"><span class=" dsf dsf_sheet_title aspect_name dsf dsf_aspect_11_label basicText readonly basicText"><input type="text" aria-label="aspect 11 description"></span></div> <div class="desc"><span class=" dsf dsf_aspect_11 readonly basicText"><input aria-label="null" type="text"></span></div></div> <div class="aspect tisel" style="display: none;"><div class="f_label"><span class=" dsf dsf_sheet_title aspect_name dsf dsf_aspect_12_label basicText readonly basicText"><input type="text" aria-label="aspect 12 description"></span></div> <div class="desc"><span class=" dsf dsf_aspect_12 readonly basicText"><input aria-label="null" type="text"></span></div></div> <div class="aspect tisel" style="display: none;"><div class="f_label"><span class=" dsf dsf_sheet_title aspect_name dsf dsf_aspect_13_label basicText readonly basicText"><input type="text" aria-label="aspect 13 description"></span></div> <div class="desc"><span class=" dsf dsf_aspect_13 readonly basicText"><input aria-label="null" type="text"></span></div></div> <div class="aspect tisel" style="display: none;"><div class="f_label"><span class=" dsf dsf_sheet_title aspect_name dsf dsf_aspect_14_label basicText readonly basicText"><input type="text" aria-label="aspect 14 description"></span></div> <div class="desc"><span class=" dsf dsf_aspect_14 readonly basicText"><input aria-label="null" type="text"></span></div></div> <div class="aspect tisel" style="display: none;"><div class="f_label"><span class=" dsf dsf_sheet_title aspect_name dsf dsf_aspect_15_label basicText readonly basicText"><input type="text" aria-label="aspect 15 description"></span></div> <div class="desc"><span class=" dsf dsf_aspect_15 readonly basicText"><input aria-label="null" type="text"></span></div></div> <div class="aspect_showAdd"><button value="" class="action button_aspect_show">Add Aspect</button> <button value="" class="action button_aspect_hide">Hide Unused Aspects</button></div></div> <h2 class="header me">Skills</h2> <div class="skills big"><div class="skill-type fantastic"><div class="f_label"><span class="skill_name dsf dsf_skill_6_label readonly">Fantastic (+6)</span></div> <div title="Fantastic (+6)" class="holder"><div class="skill active"><span class=" dsf dsf_skill_fantastic_00 readonly basicText"><input aria-label="null" type="text"></span></div><div class="skill inactive"><span class=" dsf dsf_skill_fantastic_01 readonly basicText"><input aria-label="null" type="text"></span></div><div class="skill inactive"><span class=" dsf dsf_skill_fantastic_02 readonly basicText"><input aria-label="null" type="text"></span></div><div class="skill inactive"><span class=" dsf dsf_skill_fantastic_03 readonly basicText"><input aria-label="null" type="text"></span></div><div class="skill inactive"><span class=" dsf dsf_skill_fantastic_04 readonly basicText"><input aria-label="null" type="text"></span></div></div></div> <div class="skill-type fantastic"><div class="f_label"><span class="skill_name dsf dsf_skill_5_label readonly">Superb (+5)</span></div> <div title="Superb (+5)" class="holder"><div class="skill active"><span class=" dsf dsf_skill_superb_00 readonly basicText"><input aria-label="null" type="text"></span></div><div class="skill inactive"><span class=" dsf dsf_skill_superb_01 readonly basicText"><input aria-label="null" type="text"></span></div><div class="skill inactive"><span class=" dsf dsf_skill_superb_02 readonly basicText"><input aria-label="null" type="text"></span></div><div class="skill inactive"><span class=" dsf dsf_skill_superb_03 readonly basicText"><input aria-label="null" type="text"></span></div><div class="skill inactive"><span class=" dsf dsf_skill_superb_04 readonly basicText"><input aria-label="null" type="text"></span></div></div></div> <div class="skill-type fantastic"><div class="f_label"><span class="skill_name dsf dsf_skill_4_label readonly">Great (+4)</span></div> <div title="Great (+4)" class="holder"><div class="skill active"><span class=" dsf dsf_skill_great_00 readonly basicText"><input aria-label="null" type="text"></span></div><div class="skill inactive"><span class=" dsf dsf_skill_great_01 readonly basicText"><input aria-label="null" type="text"></span></div><div class="skill inactive"><span class=" dsf dsf_skill_great_02 readonly basicText"><input aria-label="null" type="text"></span></div><div class="skill inactive"><span class=" dsf dsf_skill_great_03 readonly basicText"><input aria-label="null" type="text"></span></div><div class="skill inactive"><span class=" dsf dsf_skill_great_04 readonly basicText"><input aria-label="null" type="text"></span></div></div></div> <div class="skill-type fantastic"><div class="f_label"><span class="skill_name dsf dsf_skill_3_label readonly">Good (+3)</span></div> <div title="Good (+3)" class="holder"><div class="skill active"><span class=" dsf dsf_skill_good_00 readonly basicText"><input aria-label="null" type="text"></span></div><div class="skill active"><span class=" dsf dsf_skill_good_01 readonly basicText"><input aria-label="null" type="text"></span></div><div class="skill inactive"><span class=" dsf dsf_skill_good_02 readonly basicText"><input aria-label="null" type="text"></span></div><div class="skill inactive"><span class=" dsf dsf_skill_good_03 readonly basicText"><input aria-label="null" type="text"></span></div><div class="skill inactive"><span class=" dsf dsf_skill_good_04 readonly basicText"><input aria-label="null" type="text"></span></div></div></div> <div class="skill-type fantastic"><div class="f_label"><span class="skill_name dsf dsf_skill_2_label readonly">Fair (+2)</span></div> <div title="Fair (+2)" class="holder"><div class="skill active"><span class=" dsf dsf_skill_fair_00 readonly basicText"><input aria-label="null" type="text"></span></div><div class="skill active"><span class=" dsf dsf_skill_fair_01 readonly basicText"><input aria-label="null" type="text"></span></div><div class="skill active"><span class=" dsf dsf_skill_fair_02 readonly basicText"><input aria-label="null" type="text"></span></div><div class="skill inactive"><span class=" dsf dsf_skill_fair_03 readonly basicText"><input aria-label="null" type="text"></span></div><div class="skill inactive"><span class=" dsf dsf_skill_fair_04 readonly basicText"><input aria-label="null" type="text"></span></div></div></div> <div class="skill-type fantastic"><div class="f_label"><span class="skill_name dsf dsf_skill_1_label readonly">Average (+1)</span></div> <div title="Average (+1)" class="holder"><div class="skill active"><span class=" dsf dsf_skill_average_00 readonly basicText"><input aria-label="null" type="text"></span></div><div class="skill active"><span class=" dsf dsf_skill_average_01 readonly basicText"><input aria-label="null" type="text"></span></div><div class="skill active"><span class=" dsf dsf_skill_average_02 readonly basicText"><input aria-label="null" type="text"></span></div><div class="skill active"><span class=" dsf dsf_skill_average_03 readonly basicText"><input aria-label="null" type="text"></span></div><div class="skill inactive"><span class=" dsf dsf_skill_average_04 readonly basicText"><input aria-label="null" type="text"></span></div></div></div> <div class="skill_showAdd"><button value="" class="action button_skill_show">Add Skills</button> <button value="" class="action button_skill_hide">Hide Unused Skills</button></div></div> <h2 class="header me">Stunts</h2> <div class="stunts"><div class="stunt tisel"><div class="f_label"><span class=" dsf dsf_stunt_01_name  readonly textarea"><textarea aria-label="null" style="overflow: hidden; overflow-wrap: break-word; resize: horizontal; height: 46px;"></textarea></span></div> <div class="desc"><span class=" dsf dsf_stunt_01_description  readonly textarea"><textarea aria-label="null" style="overflow: hidden; overflow-wrap: break-word; resize: horizontal; height: 46px;"></textarea></span></div></div><div class="stunt tisel"><div class="f_label"><span class=" dsf dsf_stunt_02_name  readonly textarea"><textarea aria-label="null" style="overflow: hidden; overflow-wrap: break-word; resize: horizontal; height: 46px;"></textarea></span></div> <div class="desc"><span class=" dsf dsf_stunt_02_description  readonly textarea"><textarea aria-label="null" style="overflow: hidden; overflow-wrap: break-word; resize: horizontal; height: 46px;"></textarea></span></div></div><div class="stunt tisel"><div class="f_label"><span class=" dsf dsf_stunt_03_name  readonly textarea"><textarea aria-label="null" style="overflow: hidden; overflow-wrap: break-word; resize: horizontal; height: 46px;"></textarea></span></div> <div class="desc"><span class=" dsf dsf_stunt_03_description  readonly textarea"><textarea aria-label="null" style="overflow: hidden; overflow-wrap: break-word; resize: horizontal; height: 65px;"></textarea></span></div></div><div class="stunt tisel"><div class="f_label"><span class=" dsf dsf_stunt_04_name  readonly textarea"><textarea aria-label="null" style="overflow: hidden; overflow-wrap: break-word; resize: horizontal; height: 46px;"></textarea></span></div> <div class="desc"><span class=" dsf dsf_stunt_04_description  readonly textarea"><textarea aria-label="null" style="overflow: hidden; overflow-wrap: break-word; resize: horizontal; height: 46px;"></textarea></span></div></div><div class="stunt tisel"><div class="f_label"><span class=" dsf dsf_stunt_05_name  readonly textarea"><textarea aria-label="null" style="overflow: hidden; overflow-wrap: break-word; resize: horizontal; height: 46px;"></textarea></span></div> <div class="desc"><span class=" dsf dsf_stunt_05_description  readonly textarea"><textarea aria-label="null" style="overflow: hidden; overflow-wrap: break-word; resize: horizontal; height: 46px;"></textarea></span></div></div><div class="stunt tisel" style="display: none;"><div class="f_label"><span class=" dsf dsf_stunt_06_name  readonly textarea"><textarea aria-label="null" style="overflow: hidden; overflow-wrap: break-word; resize: horizontal;"></textarea></span></div> <div class="desc"><span class=" dsf dsf_stunt_06_description  readonly textarea"><textarea aria-label="null" style="overflow: hidden; overflow-wrap: break-word; resize: horizontal;"></textarea></span></div></div><div class="stunt tisel" style="display: none;"><div class="f_label"><span class=" dsf dsf_stunt_07_name  readonly textarea"><textarea aria-label="null" style="overflow: hidden; overflow-wrap: break-word; resize: horizontal;"></textarea></span></div> <div class="desc"><span class=" dsf dsf_stunt_07_description  readonly textarea"><textarea aria-label="null" style="overflow: hidden; overflow-wrap: break-word; resize: horizontal;"></textarea></span></div></div><div class="stunt tisel" style="display: none;"><div class="f_label"><span class=" dsf dsf_stunt_08_name  readonly textarea"><textarea aria-label="null" style="overflow: hidden; overflow-wrap: break-word; resize: horizontal;"></textarea></span></div> <div class="desc"><span class=" dsf dsf_stunt_08_description  readonly textarea"><textarea aria-label="null" style="overflow: hidden; overflow-wrap: break-word; resize: horizontal;"></textarea></span></div></div><div class="stunt tisel" style="display: none;"><div class="f_label"><span class=" dsf dsf_stunt_09_name  readonly textarea"><textarea aria-label="null" style="overflow: hidden; overflow-wrap: break-word; resize: horizontal;"></textarea></span></div> <div class="desc"><span class=" dsf dsf_stunt_09_description  readonly textarea"><textarea aria-label="null" style="overflow: hidden; overflow-wrap: break-word; resize: horizontal;"></textarea></span></div></div><div class="stunt tisel" style="display: none;"><div class="f_label"><span class=" dsf dsf_stunt_10_name  readonly textarea"><textarea aria-label="null" style="overflow: hidden; overflow-wrap: break-word; resize: horizontal;"></textarea></span></div> <div class="desc"><span class=" dsf dsf_stunt_10_description  readonly textarea"><textarea aria-label="null" style="overflow: hidden; overflow-wrap: break-word; resize: horizontal;"></textarea></span></div></div><div class="stunt tisel" style="display: none;"><div class="f_label"><span class=" dsf dsf_stunt_11_name  readonly textarea"><textarea aria-label="null" style="overflow: hidden; overflow-wrap: break-word; resize: horizontal;"></textarea></span></div> <div class="desc"><span class=" dsf dsf_stunt_11_description  readonly textarea"><textarea aria-label="null" style="overflow: hidden; overflow-wrap: break-word; resize: horizontal;"></textarea></span></div></div><div class="stunt tisel" style="display: none;"><div class="f_label"><span class=" dsf dsf_stunt_12_name  readonly textarea"><textarea aria-label="null" style="overflow: hidden; overflow-wrap: break-word; resize: horizontal;"></textarea></span></div> <div class="desc"><span class=" dsf dsf_stunt_12_description  readonly textarea"><textarea aria-label="null" style="overflow: hidden; overflow-wrap: break-word; resize: horizontal;"></textarea></span></div></div><div class="stunt tisel" style="display: none;"><div class="f_label"><span class=" dsf dsf_stunt_13_name  readonly textarea"><textarea aria-label="null" style="overflow: hidden; overflow-wrap: break-word; resize: horizontal;"></textarea></span></div> <div class="desc"><span class=" dsf dsf_stunt_13_description  readonly textarea"><textarea aria-label="null" style="overflow: hidden; overflow-wrap: break-word; resize: horizontal;"></textarea></span></div></div><div class="stunt tisel" style="display: none;"><div class="f_label"><span class=" dsf dsf_stunt_14_name  readonly textarea"><textarea aria-label="null" style="overflow: hidden; overflow-wrap: break-word; resize: horizontal;"></textarea></span></div> <div class="desc"><span class=" dsf dsf_stunt_14_description  readonly textarea"><textarea aria-label="null" style="overflow: hidden; overflow-wrap: break-word; resize: horizontal;"></textarea></span></div></div><div class="stunt tisel" style="display: none;"><div class="f_label"><span class=" dsf dsf_stunt_15_name  readonly textarea"><textarea aria-label="null" style="overflow: hidden; overflow-wrap: break-word; resize: horizontal;"></textarea></span></div> <div class="desc"><span class=" dsf dsf_stunt_15_description  readonly textarea"><textarea aria-label="null" style="overflow: hidden; overflow-wrap: break-word; resize: horizontal;"></textarea></span></div></div> <div class="stunt_showAdd"><button value="" class="action button_stunt_show">Add Stunt</button> <button value="" class="action button_stunt_hide">Hide Unused Stunts</button></div></div> <h2 class="header me">Extras</h2> <div><div class="extra"><span class=" dsf dsf_undefined readonly textarea"><textarea style="overflow: hidden; overflow-wrap: break-word; resize: horizontal; height: 46px;"></textarea></span></div> <div class="hurtings"><div class="stresses"><h2 class="header me">Physical Stress (Physique)</h2> <div class="hurt_group physical"><div class="physical"><div class="group"><span class="dsf dsf_physical_stress01 readonly check" title="Click to toggle"><div class="label">1</div> <div aria-label="1" tabindex="0" role="checkbox" class="checkMark square checkOff"></div></span></div> <div class="activator"><span class="dsf dsf_physical_stress01_active readonly check" title="Click to toggle"><div class="label">On: </div> <div aria-label="On: " tabindex="0" role="checkbox" class="checkMark checkOn small"></div></span></div></div> <div class="physical"><div class="group"><span class="dsf dsf_physical_stress02 readonly check" title="Click to toggle"><div class="label">2</div> <div aria-label="2" tabindex="0" role="checkbox" class="checkMark square checkOff"></div></span></div> <div class="activator"><span class="dsf dsf_physical_stress02_active readonly check" title="Click to toggle"><div class="label">On: </div> <div aria-label="On: " tabindex="0" role="checkbox" class="checkMark checkOff small"></div></span></div></div> <div class="physical"><div class="group"><span class="dsf dsf_physical_stress03 readonly check" title="Click to toggle"><div class="label">3</div> <div aria-label="3" tabindex="0" role="checkbox" class="checkMark square checkOn"></div></span></div> <div class="activator"><span class="dsf dsf_physical_stress03_active readonly check" title="Click to toggle"><div class="label">On: </div> <div aria-label="On: " tabindex="0" role="checkbox" class="checkMark checkOff small"></div></span></div></div> <div class="physical"><div class="group"><span class="dsf dsf_physical_stress04 readonly check" title="Click to toggle"><div class="label">4</div> <div aria-label="4" tabindex="0" role="checkbox" class="checkMark square checkOff"></div></span></div> <div class="activator"><span class="dsf dsf_physical_stress04_active readonly check" title="Click to toggle"><div class="label">On: </div> <div aria-label="On: " tabindex="0" role="checkbox" class="checkMark checkOff small"></div></span></div></div></div> <h2 class="header me">Mental Stress (Will)</h2> <div class="hurt_group mental"><div class="mental"><div class="group"><span class="dsf dsf_mental_stress01 readonly check" title="Click to toggle"><div class="label">1</div> <div aria-label="1" tabindex="0" role="checkbox" class="checkMark checkOff square"></div></span></div> <div class="activator"><span class="dsf dsf_mental_stress01_active readonly check" title="Click to toggle"><div class="label">On: </div> <div aria-label="On: " tabindex="0" role="checkbox" class="checkMark checkOn small"></div></span></div></div> <div class="mental"><div class="group"><span class="dsf dsf_mental_stress02 readonly check" title="Click to toggle"><div class="label">2</div> <div aria-label="2" tabindex="0" role="checkbox" class="checkMark checkOff square"></div></span></div> <div class="activator"><span class="dsf dsf_mental_stress02_active readonly check" title="Click to toggle"><div class="label">On: </div> <div aria-label="On: " tabindex="0" role="checkbox" class="checkMark checkOff small"></div></span></div></div> <div class="mental"><div class="group"><span class="dsf dsf_mental_stress03 readonly check" title="Click to toggle"><div class="label">3</div> <div aria-label="3" tabindex="0" role="checkbox" class="checkMark checkOff square"></div></span></div> <div class="activator"><span class="dsf dsf_mental_stress03_active readonly check" title="Click to toggle"><div class="label">On: </div> <div aria-label="On: " tabindex="0" role="checkbox" class="checkMark checkOff small"></div></span></div></div> <div class="mental"><div class="group"><span class="dsf dsf_mental_stress04 readonly check" title="Click to toggle"><div class="label">4</div> <div aria-label="4" tabindex="0" role="checkbox" class="checkMark checkOff square"></div></span></div> <div class="activator"><span class="dsf dsf_mental_stress04_active readonly check" title="Click to toggle"><div class="label">On: </div> <div aria-label="On: " tabindex="0" role="checkbox" class="checkMark checkOff small"></div></span></div></div></div></div> <div class="consequences"><h2 class="header me">Consequences</h2> <div class="consequence"><div class="big_num_label"><span class=" dsf dsf_mild_label readonly basicText"><input type="text" value="2"></span></div> <div class="new tisel"><div class="f_label"><span class=" dsf dsf_mild_title readonly textarea"><textarea aria-label="descAria" style="overflow: hidden; overflow-wrap: break-word; resize: horizontal; height: 46px;">Mild</textarea></span></div> <div class="desc"><span class=" dsf dsf_mild readonly textarea"><textarea aria-label="labelAria" style="overflow: hidden; overflow-wrap: break-word; resize: horizontal; height: 46px;"></textarea></span></div></div></div> <div class="consequence"><div class="big_num_label"><span class=" dsf dsf_moderate_label readonly basicText"><input type="text" value="4"></span></div> <div class="new tisel"><div class="f_label"><span class=" dsf dsf_moderate_title readonly textarea"><textarea aria-label="descAria" style="overflow: hidden; overflow-wrap: break-word; resize: horizontal; height: 46px;">Moderate</textarea></span></div> <div class="desc"><span class=" dsf dsf_moderate readonly textarea"><textarea aria-label="labelAria" style="overflow: hidden; overflow-wrap: break-word; resize: horizontal; height: 46px;"></textarea></span></div></div></div> <div class="consequence"><div class="big_num_label"><span class=" dsf dsf_severe_label readonly basicText"><input type="text" value="6"></span></div> <div class="new tisel"><div class="f_label"><span class=" dsf dsf_severe_title readonly textarea"><textarea aria-label="descAria" style="overflow: hidden; overflow-wrap: break-word; resize: horizontal; height: 46px;">Severe</textarea></span></div> <div class="desc"><span class=" dsf dsf_severe readonly textarea"><textarea aria-label="labelAria" style="overflow: hidden; overflow-wrap: break-word; resize: horizontal; height: 46px;"></textarea></span></div></div></div> <div class="consequence" style="display: none;"><div class="big_num_label"><span class=" dsf dsf_extra_01_label readonly basicText"><input type="text" value="2"></span></div> <div class="new tisel"><div class="f_label"><span class=" dsf dsf_extra_01_title readonly textarea"><textarea aria-label="descAria" style="overflow: hidden; overflow-wrap: break-word; resize: horizontal;">Extra</textarea></span></div> <div class="desc"><span class=" dsf dsf_extra_01 readonly textarea"><textarea aria-label="labelAria" style="overflow: hidden; overflow-wrap: break-word; resize: horizontal;"></textarea></span></div></div></div> <div class="consequence" style="display: none;"><div class="big_num_label"><span class=" dsf dsf_extra_02_label readonly basicText"><input type="text" value="2"></span></div> <div class="new tisel"><div class="f_label"><span class=" dsf dsf_extra_02_title readonly textarea"><textarea aria-label="descAria" style="overflow: hidden; overflow-wrap: break-word; resize: horizontal;">Extra</textarea></span></div> <div class="desc"><span class=" dsf dsf_extra_02 readonly textarea"><textarea aria-label="labelAria" style="overflow: hidden; overflow-wrap: break-word; resize: horizontal;"></textarea></span></div></div></div> <div class="consequence" style="display: none;"><div class="big_num_label"><span class=" dsf dsf_extra_03_label readonly basicText"><input type="text" value="2"></span></div> <div class="new tisel"><div class="f_label"><span class=" dsf dsf_extra_03_title readonly textarea"><textarea aria-label="descAria" style="overflow: hidden; overflow-wrap: break-word; resize: horizontal;">Extra</textarea></span></div> <div class="desc"><span class=" dsf dsf_extra_03 readonly textarea"><textarea aria-label="labelAria" style="overflow: hidden; overflow-wrap: break-word; resize: horizontal;"></textarea></span></div></div></div> <div class="consequence_showAdd"><button value="" class="action button_consequence_show">Add Consequence</button> <button value="" class="action button_consequence_hide">Hide Unused Consequences</button></div></div></div></div> <h2 class="header me">Backstory</h2></div></div>

CSS

.sts .header {
  -webkit-clip-path: polygon(10px 0, 100% 0, 100% 75%, calc(100% - 10px) 100%, 0 100%, 0% 25%);
  clip-path: polygon(10px 0, 100% 0, 100% 75%, calc(100% - 10px) 100%, 0 100%, 0% 25%);
  color: #fff;
  padding: 5px 10px;
  background-color: #000;
  margin: 16px 0 8px 0;
  font-size: 1rem;
}

.sts .dsf.basicText {
  width: 100%;
  height: 100%;
  border: none;
  margin: 0;
  padding: 0;
  background: transparent;
  display: flex;
}
.sts .dsf.basicText input {
  width: 100%;
  height: 100%;
  border: 1px solid #b3b3b3;
  background-color: rgba(50, 50, 50, 0.15);
  box-sizing: border-box;
  margin: 0;
}

.sts .skill {
  flex-grow: 1;
  min-width: 7em;
  margin: 4px 3px;
}
.sts .skills .f_label {
  margin-top: 4px;
}
.sts .skill.inactive .dsf input {
  padding: .5em;
  line-height: 1em;
  height: 100%;
}
.sts .skill.inactive .dsf input {
  border: 1px solid #333;
}
.sts .skill.active .dsf input {
  border: 1px solid #ccc;
}
.sts .skill .dsf {
  width: 100%;
  padding: 0;
  height: 2em;
}

.sts .skills .skill-type {
  position: relative;
  top: 0px;
  left: 0px;
  display: flex;
}
.sts .container {
  margin: 5px;
}
.sts div {
  background: none;
}
.sts .skills .f_label {
  width: 8em;
  min-width: 8em;
  text-align: right;
}
.sts .skills .holder {
  text-align: right;
  flex-grow: 5;
  min-width: 7em;
  display: flex;
}
@media screen and (max-width: 1000px) {
.sts .skill-type {
    margin-top: 1.5em;
}
.sts .skill-type:first-child {
    margin-top: 0;
}
.sts .skills .holder {
    flex-wrap: wrap;
}
.sts .skills .f_label {
    text-align: left;
}
.sts .skills .holder .skill {
    min-width: calc(100% - 6px);
    margin: 3px .5em;
    flex-wrap: wrap;
}
}

.sts button {
  display: inline-block;
  position: relative;
  background: #e81d81;
  color: #fff;
  padding: .5em;
  font-weight: bold;
  border-radius: 6px;
  border: 1px solid #000;
}

.sts .showAdd {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  flex: 1;
}

.sts .container {
  margin: 5px;
}
.sts div {
  background: none;
}
.sts .skill .f_label {
  width: 8em;
  min-width: 8em;
  text-align: right;
}
.sts .skill .holder {
  text-align: right;
  flex-grow: 4;
  min-width: 7em;
}

.sts .dsf input, .sts .dsf textarea, .sts .dsf button, .sts .dsf select {
  padding: 3px;
  font-weight: bold;
  text-align: left;
  font-size: .95rem;
  background-color: #fff;
  font-family: 'Montserrat', sans-serif !important;
}
.sts div.f_label .dsf.basicText input:hover {
  border: 1px solid #ccc;
}
.sts div.f_label .dsf.basicText input {
  background: #fff;
  border: 1px solid #fff;
}

.sts .dsf.textarea {
  width: 100%;
  height: 100%;
  min-height: 20px;
  display: flex;
}
.sts .dsf.textarea textarea {
  width: 100%;
  height: 100%;
  min-height: 100%;
  background-color: rgba(50, 50, 50, 0.15);
  border: 1px solid #b3b3b3;
  box-sizing: border-box;
  margin: 0;
}

@media only screen and (max-width: 850px) {
.sts .tisel {
    display: block;
    width: 100%;
}
}
@media only screen and (max-width: 851px) {
.sts .tisel {
    display: block;
    width: 100%;
}
}
.sts .tisel {
  border: 1px solid #000;
  padding: 0;
  margin-bottom: 4px;
  width: 100%;
  display: flex;
  flex-flow: wrap;
}
.sts .tisel div.f_label,
.sts .tisel div.input,
.sts .tisel div.input > span.dsf {
  width: 100%;
  text-align: left;
}
.sts .tisel div.f_label {
  padding: 0;
  font-size: .95em;
  line-height: 1.25em;
}
.sts .tisel div.desc {
  min-width: 10em;
  flex-grow: 1;
}
.sts .tisel div.f_label {
  background: #fff;
  width: 13em;
}
.sts .tisel div.f_label textarea {
  background: #fff;
  border: 1px solid #fff;
}
.sts .tisel div.f_label textarea:hover {
  border-color: #ccc;
}
@media only screen and (max-width: 700px) {
div.desc span,
  div.f_label span {
    width: 100%;
    min-height: 100%;
}
div.desc,
  div.f_label {
    min-height: 100%;
}
}
@media only screen and (max-width: 701px) {
div.f_label {
    padding-right: 0;
}
div.desc,
  div.f_label {
    width: 100%;
    text-align: left;
    min-height: inherit;
}
div.desc span,
  div.f_label span {
    min-height: inherit;
}
}

.stunt div.desc {
  min-width: 10em;
  flex-grow: 1;
}
.stunt div.f_label {
  width: 13em;
}
.stunt div.desc span,
.stunt div.f_label span {
  width: 100%;
}
@media all and (max-width: 31em) {
.stunt div.desc,
  .stunt div.f_label,
  .stunt div.activator {
    width: 100%;
}
}

.sts .extra {
  width: 100%;
}

.sts .dsf .checkMark {
  border: 1px solid #333;
  width: 10px;
  height: 10px;
  background-color: #fafafa;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
  padding: 9px;
  border-radius: 10px;
  display: inline-block;
  position: relative;
}
.sts .dsf .checkMark.small {
  padding: .4rem;
  margin-bottom: -.1rem;
}
.sts .dsf .checkMark.square {
  border-radius: 0;
}
.sts .dsf .checkMark.checkOn {
  background-color: #666;
}
.sts .dsf .checkMark.inactive {
  background-color: #e9ecee;
  border: 1px solid #adb8c0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05), inset 15px 10px -12px rgba(255, 255, 255, 0.1);
  color: #99a1a7;
}


.hurt_group .activator {
    padding-left: .9rem;
}
.hurt_group .group {
    font-size: 2rem;
    font-weight: bold;
    padding-right: 0.5rem;
    padding-left: 1rem;
}

.sts .big_num_label,
.sts .big_num_label .dsf.basicText input {
  font-size: 2rem;
  font-weight: bold;
  background: #fff;
  max-width: 3rem;
  width: auto;
  text-align: right;
  border: none;
  padding-right: 0.5rem;
}

.sts {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 1em;
  color: #232323;
  margin: 10px;
}
.sts span {
  display: inline-block;
  position: relative;
}
.dsf .label {
  display: inline-block;
}
.sts .consequence {
  border: none;
  background: rgba(50, 50, 50, 0.15);
  margin-bottom: 4px;
  width: 100%;
  display: flex;
}
.sts .consequence div.desc {
  border: 2px solid #ccc;
}
.sts .consequence div.f_label {
  border: 2px solid #ccc;
  background: #fff;
}
.sts .consequence div.desc span,
.sts .consequence div.f_label span {
  width: 100%;
}
.sts .consequences {
  display: block;
}
.sts .consequence {
  width: 100%;
}
@media only screen and (max-width: 800px) {
.sts .consequence div.editable,
  .sts .consequence div.desc,
  .sts .consequence div.f_label {
    width: 100%;
}
}
@media only screen and (min-width: 801px) {
.sts .consequence {
    display: flex;
}
.sts .consequence div.f_label {
    width: 8rem;
}
.sts .consequence div.desc {
    width: calc(100% - 13em);
}
}

.sts {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 1em;
  color: #232323;
  margin: 10px;
}
.sts span {
  display: inline-block;
  position: relative;
}
.dsf .label {
  display: inline-block;
}
.sts .hurtings {
  display: flex;
}
@media only screen and (max-width: 600px) {
.sts .hurtings {
    display: block;
}
.sts .hurtings .consequences {
    width: 100%;
    margin-bottom: 0;
}
.sts .hurtings .stresses {
    width: 100%;
}
}
@media only screen and (min-width: 601px) {
.sts .hurtings .consequences {
    flex-direction: column;
    display: flex;
    width: calc(100% - 20rem - 10px);
}
.sts .hurtings .stresses {
    width: 20rem;
    margin-right: 10px;
}
}
.sts .hurtings .hurt_group {
  flex-grow: 1;
  display: flex;
  min-width: 10em;
}
.sts .hurtings .hurt {
  flex-basis: 3.5em;
  margin-left: 1em;
  margin-right: 1em;
}
.sts .hurtings .hurt .group {
  position: relative;
  padding: 0px;
  margin: 5px 5px;
  width: 100%;
  height: 20px;
}
.sts .hurtings .hurt .value {
  position: absolute;
  top: 0;
  left: 0;
}
.sts .hurtings .hurt .value .dsf {
  position: absolute;
  top: 0;
  left: 0;
  line-height: 10px;
}
.sts .hurtings .hurt .f_label {
  width: 5px;
  font-weight: bold;
  font-size: 2em;
  position: relative;
  top: -15px;
  left: -0.7em;
  z-index: 1;
}
.sts .hurtings .hurt .activator {
  text-align: center;
  width: 100%;
  margin-left: -1em;
  margin-right: 1em;
}


.sts .tatl {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  flex: 1;
  border: 1px solid #333;
}
@media only screen and (max-width: 850px) {
.sts .tatl {
    display: block;
    width: 100%;
}
}
@media only screen and (max-width: 851px) {
.sts .tatl {
    display: block;
    width: 100%;
}
}
.sts .tatl div.f_label,
.sts .tatl div.input,
.sts .tatl div.input > span.dsf {
  width: 100%;
  text-align: left;
}
.sts .tatl div.f_label {
  padding: .25em 3px;
  font-size: .95em;
  height: 1.75em;
  line-height: 1.25em;
}
.sts .tatl div.input {
  height: calc(100% - 1.7em);
}

.sts .titl {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  flex: 1;
  border: 1px solid #333;
}
@media only screen and (max-width: 850px) {
.sts .titl {
    display: block;
    width: 100%;
}
}
@media only screen and (max-width: 851px) {
.sts .titl {
    display: block;
    width: 100%;
}
}
.sts .titl div.f_label,
.sts .titl div.input,
.sts .titl div.input > span.dsf {
  width: 100%;
  text-align: left;
}
.sts .titl div.f_label {
  padding: 0.25em 3px;
  font-size: 0.95em;
  height: 1.75em;
  line-height: 1.25em;
}
.sts .titl div.input {
  height: calc(100% - 1.65em);
}

.sts .id .name,
.sts .id .description {
  border: 1px solid #333;
  margin-bottom: 8px;
}
.sts .id .name {
  max-height: 4em;
}

.sts .id .refresh,
.sts .id .fate_points {
  border: 1px solid #333;
}
.sts .id .refresh {
  margin-bottom: 8px;
}
.sts .id .right > div > .f_label {
  width: 100%;
}
@media only screen and (max-width: 849px) {
.sts .id .right .refresh .input,
  .sts .id .right .fate_points .input {
    font-size: 2em;
    font-weight: bold;
}
.sts .right div.f_label,
  .sts .right div.input > span.dsf input {
    height: calc(1.75rem + 10px);
}
.sts .right div.input > span input {
    font-size: 2rem !important;
}
}
@media only screen and (min-width: 851px) {
.sts .id .right div.input span {
    height: 2.2em;
    font-size: 2em;
    margin: 0;
    padding: 0;
}
.sts .id .right div.input span input {
    font-size: 2rem !important;
}
}

.sts .id .image span {
  margin: 0 0 0 0;
}
.sts .id .image .dsf_avatar_image img {
  max-width: 100%;
  height: auto;
}
.sts .id .image span {
  width: calc(100% - 16px);
}
.sts .id .dsf_avatar_image {
  margin: 0 3px 3px 3px;
  order: 3;
}
.sts .id img {
  min-width: 200px;
  min-height: 200px;
  background-color: #e81d81;
}

.sts .id .left,
.sts .id .right {
  margin-bottom: 8px;
}
.sts .id .id_info {
  overflow: auto;
}
.sts .id .f_label {
  padding: 3px;
  font-weight: bold;
  text-align: right;
  font-size: 0.95em;
  background-color: #fff;
  max-height: 1.75em;
}
@media only screen and (max-width: 850px) {
.sts .id .right {
    width: 100%;
    margin-bottom: 0;
}
.sts .id .left {
    width: 100%;
}
}
@media only screen and (min-width: 851px) {
.sts .id {
    display: flex;
    flex-flow: wrap;
    width: 100%;
}
.sts .id .values {
    display: flex;
    flex-flow: wrap;
    width: 100%;
}
.sts .id .id_info {
    width: calc(100% - 206px);
}
.sts .id .id_info .values {
    display: flex;
    flex-flow: wrap;
}
.sts .id h2 {
    margin-top: 0;
}
.sts .id .image {
    order: 2;
    padding-left: 6px;
}
.sts .id .right {
    width: 7em;
}
.sts .id .right > div {
    min-width: 100%;
}
.sts .id .left {
    flex-direction: column;
    min-width: 15em;
    display: flex;
    width: calc(100% - 7em - 6px);
    margin-right: 6px;
}
}

#dynamic_sheet_values {
  display: block;
  unicode-bidi: embed;
  font-family: monospace;
  white-space: pre;
}

.sts {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 1em;
  color: #232323;
  margin: 10px;
}
.sts span {
  display: inline-block;
  position: relative;
}
.dsf .label {
  display: inline-block;
}
.sts *,
.sts *:before,
.sts *:after {
  box-sizing: border-box;
}

Javascript

/*!
	autosize 4.0.2
	license: MIT
	http://www.jacklmoore.com/autosize
*/
(function (global, factory) {
	if (typeof define === "function" && define.amd) {
		define(['module', 'exports'], factory);
	} else if (typeof exports !== "undefined") {
		factory(module, exports);
	} else {
		var mod = {
			exports: {}
		};
		factory(mod, mod.exports);
		global.autosize = mod.exports;
	}
})(this, function (module, exports) {
	'use strict';

	var map = typeof Map === "function" ? new Map() : function () {
		var keys = [];
		var values = [];

		return {
			has: function has(key) {
				return keys.indexOf(key) > -1;
			},
			get: function get(key) {
				return values[keys.indexOf(key)];
			},
			set: function set(key, value) {
				if (keys.indexOf(key) === -1) {
					keys.push(key);
					values.push(value);
				}
			},
			delete: function _delete(key) {
				var index = keys.indexOf(key);
				if (index > -1) {
					keys.splice(index, 1);
					values.splice(index, 1);
				}
			}
		};
	}();

	var createEvent = function createEvent(name) {
		return new Event(name, { bubbles: true });
	};
	try {
		new Event('test');
	} catch (e) {
		// IE does not support `new Event()`
		createEvent = function createEvent(name) {
			var evt = document.createEvent('Event');
			evt.initEvent(name, true, false);
			return evt;
		};
	}

	function assign(ta) {
		if (!ta || !ta.nodeName || ta.nodeName !== 'TEXTAREA' || map.has(ta)) return;

		var heightOffset = null;
		var clientWidth = null;
		var cachedHeight = null;

		function init() {
			var style = window.getComputedStyle(ta, null);

			if (style.resize === 'vertical') {
				ta.style.resize = 'none';
			} else if (style.resize === 'both') {
				ta.style.resize = 'horizontal';
			}

			if (style.boxSizing === 'content-box') {
				heightOffset = -(parseFloat(style.paddingTop) + parseFloat(style.paddingBottom));
			} else {
				heightOffset = parseFloat(style.borderTopWidth) + parseFloat(style.borderBottomWidth);
			}
			// Fix when a textarea is not on document body and heightOffset is Not a Number
			if (isNaN(heightOffset)) {
				heightOffset = 0;
			}

			update();
		}

		function changeOverflow(value) {
			{
				// Chrome/Safari-specific fix:
				// When the textarea y-overflow is hidden, Chrome/Safari do not reflow the text to account for the space
				// made available by removing the scrollbar. The following forces the necessary text reflow.
				var width = ta.style.width;
				ta.style.width = '0px';
				// Force reflow:
				/* jshint ignore:start */
				ta.offsetWidth;
				/* jshint ignore:end */
				ta.style.width = width;
			}

			ta.style.overflowY = value;
		}

		function getParentOverflows(el) {
			var arr = [];

			while (el && el.parentNode && el.parentNode instanceof Element) {
				if (el.parentNode.scrollTop) {
					arr.push({
						node: el.parentNode,
						scrollTop: el.parentNode.scrollTop
					});
				}
				el = el.parentNode;
			}

			return arr;
		}

		function resize() {
			if (ta.scrollHeight === 0) {
				// If the scrollHeight is 0, then the element probably has display:none or is detached from the DOM.
				return;
			}

			var overflows = getParentOverflows(ta);
			var docTop = document.documentElement && document.documentElement.scrollTop; // Needed for Mobile IE (ticket #240)

			ta.style.height = '';
			ta.style.height = ta.scrollHeight + heightOffset + 'px';

			// used to check if an update is actually necessary on window.resize
			clientWidth = ta.clientWidth;

			// prevents scroll-position jumping
			overflows.forEach(function (el) {
				el.node.scrollTop = el.scrollTop;
			});

			if (docTop) {
				document.documentElement.scrollTop = docTop;
			}
		}

		function update() {
			resize();

			var styleHeight = Math.round(parseFloat(ta.style.height));
			var computed = window.getComputedStyle(ta, null);

			// Using offsetHeight as a replacement for computed.height in IE, because IE does not account use of border-box
			var actualHeight = computed.boxSizing === 'content-box' ? Math.round(parseFloat(computed.height)) : ta.offsetHeight;

			// The actual height not matching the style height (set via the resize method) indicates that 
			// the max-height has been exceeded, in which case the overflow should be allowed.
			if (actualHeight < styleHeight) {
				if (computed.overflowY === 'hidden') {
					changeOverflow('scroll');
					resize();
					actualHeight = computed.boxSizing === 'content-box' ? Math.round(parseFloat(window.getComputedStyle(ta, null).height)) : ta.offsetHeight;
				}
			} else {
				// Normally keep overflow set to hidden, to avoid flash of scrollbar as the textarea expands.
				if (computed.overflowY !== 'hidden') {
					changeOverflow('hidden');
					resize();
					actualHeight = computed.boxSizing === 'content-box' ? Math.round(parseFloat(window.getComputedStyle(ta, null).height)) : ta.offsetHeight;
				}
			}

			if (cachedHeight !== actualHeight) {
				cachedHeight = actualHeight;
				var evt = createEvent('autosize:resized');
				try {
					ta.dispatchEvent(evt);
				} catch (err) {
					// Firefox will throw an error on dispatchEvent for a detached element
					// https://bugzilla.mozilla.org/show_bug.cgi?id=889376
				}
			}
		}

		var pageResize = function pageResize() {
			if (ta.clientWidth !== clientWidth) {
				update();
			}
		};

		var destroy = function (style) {
			window.removeEventListener('resize', pageResize, false);
			ta.removeEventListener('input', update, false);
			ta.removeEventListener('keyup', update, false);
			ta.removeEventListener('autosize:destroy', destroy, false);
			ta.removeEventListener('autosize:update', update, false);

			Object.keys(style).forEach(function (key) {
				ta.style[key] = style[key];
			});

			map.delete(ta);
		}.bind(ta, {
			height: ta.style.height,
			resize: ta.style.resize,
			overflowY: ta.style.overflowY,
			overflowX: ta.style.overflowX,
			wordWrap: ta.style.wordWrap
		});

		ta.addEventListener('autosize:destroy', destroy, false);

		// IE9 does not fire onpropertychange or oninput for deletions,
		// so binding to onkeyup to catch most of those events.
		// There is no way that I know of to detect something like 'cut' in IE9.
		if ('onpropertychange' in ta && 'oninput' in ta) {
			ta.addEventListener('keyup', update, false);
		}

		window.addEventListener('resize', pageResize, false);
		ta.addEventListener('input', update, false);
		ta.addEventListener('autosize:update', update, false);
		ta.style.overflowX = 'hidden';
		ta.style.wordWrap = 'break-word';

		map.set(ta, {
			destroy: destroy,
			update: update
		});

		init();
	}

	function destroy(ta) {
		var methods = map.get(ta);
		if (methods) {
			methods.destroy();
		}
	}

	function update(ta) {
		var methods = map.get(ta);
		if (methods) {
			methods.update();
		}
	}

	var autosize = null;

	// Do nothing in Node.js environment and IE8 (or lower)
	if (typeof window === 'undefined' || typeof window.getComputedStyle !== 'function') {
		autosize = function autosize(el) {
			return el;
		};
		autosize.destroy = function (el) {
			return el;
		};
		autosize.update = function (el) {
			return el;
		};
	} else {
		autosize = function autosize(el, options) {
			if (el) {
				Array.prototype.forEach.call(el.length ? el : [el], function (x) {
					return assign(x, options);
				});
			}
			return el;
		};
		autosize.destroy = function (el) {
			if (el) {
				Array.prototype.forEach.call(el.length ? el : [el], destroy);
			}
			return el;
		};
		autosize.update = function (el) {
			if (el) {
				Array.prototype.forEach.call(el.length ? el : [el], update);
			}
			return el;
		};
	}

	exports.default = autosize;
	module.exports = exports['default'];
});
/**
 * Filter form field outputs
 * escape('Escaping&,<,>,",\',`, ,!,@,$,%,(,),=,+,{,},[,and]isalmostenough')
 * (based on character list from
 * https://wonko.com/post/html-escaping)
 * @param {string} input The original string
 * @return {string} The filtered string
 */
function csxFieldEscape(input) {
    if(! input ){ return ''; }
    input = input.replace(/</g, '&lt;');
    input = input.replace(/>/g, '&gt;');
    input = input.replace(/"/g, '&quot;');
    input = input.replace(/'/g, "&#x27;");
    input = input.replace(/`/g, '&#x60;');
    input = input.replace(/ /g, '&#x20;');
    input = input.replace(/!/g, '&#x21;');
    input = input.replace(/@/g, '&#x40;');
    input = input.replace(/\$/g, '&#x24;');
    input = input.replace(/%/g, '&#x25;');
    input = input.replace(/\(/g, '&#x28;');
    input = input.replace(/\)/g, '&#x29;');
    input = input.replace(/=/g, '&#x3D;');
    input = input.replace(/\+/g, '&#x2B;');
    input = input.replace(/{/g, '&#x7B;');
    input = input.replace(/}/g, '&#x7D;');
    input = input.replace(/\[/g, '&#x5B;');
    input = input.replace(/\]/g, '&#x5D;');
    input = input.replace(/&/g, '&amp;');
    input = input.replace(/(&amp;)+(lt;|gt;|quot;|#x27;|#x60;|#x20;|#x21;|#x40;|#x24;|#x25;|#x28;|#x29;|#x3D;|#x2B;|#x7B;|#x7D;|#x5B;|#x5D;|amp;)/g, '&$2');
    return input;
}
sheet_opts = {
	defaultTab : 'stats',
    slug : 'sts',
    localOrProd: 'prod'
};
var localOrProd = sheet_opts.localOrProd;
var localPath = '/DST/common/images/';
var prodPath = 'https://chainsawxiv.github.io/DST/common/images/';
path = prodPath;
if(localOrProd == 'local'){
    path = localPath;
}

// Global Options
var csx_opts = {
'uiContainer': function(){return document;},
'defaultFieldValue':'Click to edit',
'imagePath':path,
'preloadFiles':[
],

};

var firstParentWithClass = function(node,className){
    while (node.parentNode){
        node = node.parentNode;
        if (node.className){
            if (node.className.match(className))
                return node;
        }
    }
    return false;
}
var ic = {};
var ia = {};
var fieldOpts = {
    'pips' : 	{	// Set the pixel threshold for each pip
        'pipThresholds':  [0,14,28,42,56,73,87,101,115,129,146,160],
        'pipWidth' : 15.0,
        'pipRadius' : 6.0,
        'pipStrokeColor' : '#000', //'#19110E';
        'pipStrokeThickness' : 0.6
    },
}
	// Text Input Control
	ic.basicText = {
		renderInput: function(element, isEditable){
			var value = element.innerText;
			//<input :aria-label="this.label" type="text" :value="defaultText"/>
			var label = element.getAttribute('aria-label');
			var value = element.innerText;
			var mark = document.createElement('input');
			mark.setAttribute('aria-label', label);
			mark.setAttribute('type', 'text');
			if(isEditable == false){
				mark.setAttribute('readonly', 'readonly');
			}
			mark.value = value;
			element.innerHTML = '';
			element.appendChild(mark);
			element.removeAttribute('aria-label');
		},
		renderValue:function(element){
			var input = element.querySelector('input');
			var value = input.value;
			var ariaLabel = input.getAttribute('aria-label');
			element.innerHTML = value;
			element.setAttribute('aria-label', ariaLabel);
		},
		unrender: function(element){
			this.renderValue(element);
		},
		render : function(element){
			if(element.querySelector('input') === null){
				this.renderInput(element, csx_opts.isEditable);
			}
		},
		// On Update event function, typicaly overriden
		update : function(){},
	}
	
	


	ic.check = {
		renderFromValue: function(element){
			var valueCache = Number(element.innerHTML);
			// Replace the contents with the appropriate check image
			var status = (this.value(element, valueCache) == 1) ? 'checkOn' : 'checkOff';
			
			var mark = document.createElement('div');
			mark.className = 'checkMark ' + status;
			var border = document.createElement('div');
			border.className = 'checkBorder';
			element.innerHTML = '';
			mark.appendChild(border);
			element.appendChild(mark);

			// Add listener to new element
			if(csx_opts.isEditable == true){
				// Activate the element's pips interface
				element.addEventListener('click', 
					function(e){
						this.click(element);
					}.bind(this)
				, false);
				
				// Set the element's alt text
				if (!element.title)
					element.title = 'Click to toggle';
			}
		},
		renderFromCode: function(element){
			// Add listener to new element
			if(csx_opts.isEditable == true){
				// Activate the element's pips interface
				element.addEventListener('click', 
					function(e){
						this.click(element);
					}.bind(this)
				, false);
				
				// Set the element's alt text
				if (!element.title)
					element.title = 'Click to toggle';
			}
		},
		// Gets the field value 
		value: function(element, valueCache){
			// Return the cached value if it exists
			if(valueCache != null){
				return valueCache;
			}
			var check = element.querySelector('.checkMark');
			if(!check){return 0;}
			valueCache = this.status(check);
			return valueCache;
			
		},
		// Converts the associated span element's contents 
		render: function(element){
			if(element.querySelector('.checkMark') === null){
				this.renderFromValue(element);
			}
			else{
				this.renderFromCode(element);
			}
		},
		// Converts the associated span element's contents to a text value
		unrender: function(element){
			var value = this.value(element);
			// Replace the contents with the appropriate value string
			element.innerHTML = value;
		
		},
		// Click event handler
		click: function(element){
			var check = element.querySelector('.checkMark');
			console.log("click")
			check.classList.toggle('checkOn');
			check.classList.toggle('checkOff');
			
		},

		status : function(element){
			var classes = element.classList;
			var valueCache = false;
			if(classes.contains('checkOn')){ 
				valueCache = 1;
			}
			else if(classes.contains('checkOff')){
				valueCache = 0; 
				
			}
			return valueCache;
		},

		toggleStatus: function(value){
			if(value == 0){ return 1;}
			else{ return 0;}
		},

		// On Update event function, typicaly overriden
		update: function(element){
		
		}

	};

// General Editing Control

ic.edit = function(context){

	function escape(string){
		//string = string.replace(/\\/g,'\\\&#92;');
		//string = string.replace(/"/g,'\\\&quot;');
		string = string.replace(/</g,'&lt;');
		return string;
	}
	
	function unescape(string){
		string = string.replace(/&lt;/g,'<');
		string = string.replace(/&gt;/g,'>');
		//string = string.replace(/\\"/g,'"');
		//string = string.replace(/\&quot;/g,'"');
		//string = string.replace(/\&#92;/g,'\\');
		return string;
	}

	// Just unescape if not editing
	if (!csx_opts.isEditable){
		var editFields = context.querySelectorAll('.dsf:not(.readonly),.edit:not(.readonly)');
		for (var i = 0; i < editFields.length; i++)
			editFields[i].innerHTML = unescape(editFields[i].innerHTML);
		return;
	}
	
	// Default the context if not set
	if (!context) context = document;
	
	// Convert each editable field
	var editFields = context.querySelectorAll('.dsf,.edit');
	for (var i = 0; i < editFields.length; i++){
	
		var baseField = editFields[i];
		
		// Don't do anything to read only fields
		if (baseField.className.match(/readonly/))
			continue;
			
		// Replace the field span with a div if it's not
		// Here instead of render so events attach to the new div
		var field = baseField;
		if (baseField.tagName == 'SPAN'){
			var field = document.createElement('div');
			field.className = baseField.className;
			field.innerHTML = baseField.innerHTML;
			field.style.left = baseField.style.left;
			field.style.top = baseField.style.top;
			field.style.width = baseField.style.width;
			field.style.textAlign = baseField.style.textAlign;
			field.old_value = '';
			baseField.parentNode.insertBefore(field,baseField);
			baseField.parentNode.removeChild(baseField);
		}
		
		// Set the default text value for blank fields
		if (baseField.attributes['defaultString']){
			field.defaultValue = baseField.attributes['defaultString'].value;
			field.setAttribute('defaultString',baseField.attributes['defaultString'].value);
		}
		else
			field.defaultValue = csx_opts.defaultFieldValue;
		
		// Returns the text edited into the field
		field.value = function(){
			
			// Return nothing if the field is defaulted
			if (this.innerHTML == this.defaultValue)
				return '';
			// Otherwise return the actual content
			else
				return this.innerHTML;
			
		}
		
		// Populates editable fields with default values
		field.render = function(){
		
			this.innerHTML = unescape(this.innerHTML);
		
			// Set default value if the field is blank
			if (this.innerHTML == csx_opts.defaultFieldValue || this.innerHTML == '')
				this.innerHTML = this.defaultValue;

			// Activate the field for editing
			this.enable();
		
		}
		
		// Strips the default value away if needed
		field.unrender = function(){
			
			if (this.innerHTML == this.defaultValue)
				this.innerHTML = '';
				
			// Replace this with a span if it's not
			if (this.tagName != 'SPAN'){
				var span = document.createElement('span');
				span.className = this.className;
				span.innerHTML = escape(this.innerHTML);
				this.parentNode.insertBefore(span,this);
				this.parentNode.removeChild(this);
			}
			
		}
		
		// Attaches required events and sets values
		field.enable = function(){
		
			// Set title and cursor mode
			this.title = 'Click and type to edit';

			// Make the content editable
			this.contentEditable = true; // *** This is hella slow in FF for some reason

			// Assign the required events to the field
			this.addEventListener('focus', this.activate, false);
			this.addEventListener('blur', this.deactivate, false);
			this.allowBlur = true;
			
		}
		
		// Select content and show edit interface on focus
		field.activate = function(e){
			this.old_value = this.innerHTML;

			var fieldName = getFieldName(this);
			aisleten.characters.bindField(fieldName,sheet_opts.slug,csx_opts.containerId);
			
			// Shade the field
			this.className += ' activeField';

			// Disable the element's title
			this.titleStore = this.title;
			this.title = '';
			
			function getFieldName(fieldVar){
				var classList = fieldVar.classList;
				var fieldName = '';
				for(var i=0; i<classList.length; i++){
					if(classList[i].search("dsf_") !== -1 || classList[i].search("dslf_") !== -1){
						var fieldName = '';
						fieldName = classList[i].replace("dsf_", '');
						fieldName = classList[i].replace("dslf_", '');
						return fieldName;
					}
				}
			}
		}
		
		// Called when the field loses focus, hide editing interface
		field.deactivate = function(){
		
			if(!this.allowBlur)
				return;
				
			
			// Default the text if empty
			if(this.innerHTML == '' || this.innerHTML == '<br>')
				this.innerHTML = this.defaultValue;
			
			// Unshade the field
			this.className = this.className.replace(/ activeField/g,'');
			
			// Enable the element's title
			this.title = this.titleStore;
			
			if(this.old_value != this.innerHTML){
				this.update();
			}
		}
		
		// Called when the content changes, typically overridden
		field.update = function(){
		
		}
		
		// Selects all the text in the field
		field.select = function(){
		
			var range = document.createRange();
			range.selectNodeContents(this);
			var selection = window.getSelection();
			selection.removeAllRanges();
			selection.addRange(range);
			
		}
		

		// Ready the field for use
		field.render();
		
	}
	
}

// Dynamic List Control

ic.listSetup = function(context, addItemCallback){
	
	// Default the context if not set
	if (!context) context = document;

    // Initialize globals
    var mover = null;
    var onHandle = false;
	var methods = ic.listMethods;
	
    // Convert each list
	var lists = context.querySelectorAll('.list');
	for (var listIndex = 0; listIndex < lists.length; listIndex++){
		// Callback function for post-add processing
		methods.itemAdded(lists[listIndex], context);
		
		
		
		// Apply dragability to each item on the list
		if (csx_opts.isEditable){
			var items = lists[listIndex].querySelectorAll('li.item');
			for (var itemIndex = 0; itemIndex < items.length; itemIndex++)
				methods.makeDragable(items[itemIndex]);
		}
		// Load any existing saved data
		//lists[listIndex].load();
		
	}
	
	// Convert each add button
	var addButtons = context.querySelectorAll('.add');
	for (var addIndex = 0; addIndex < addButtons.length; addIndex++){
		methods.addButton(context, addButtons[addIndex]);
	}
	
	// Convert each trash drop
	var trashBins = context.querySelectorAll('.trash');
	for (var trashIndex = 0; trashIndex < trashBins.length; trashIndex++){
	
		// Set up the trash drop point
		var trash = trashBins[trashIndex];
		trash.title = 'Drag here to delete';

		// Style the trash drop point as the item moves over it
		trash.addEventListener('dragenter', function (e) {
			this.className += ' over';
			return false;
		}, false);
		trash.addEventListener('dragover', function (e) {
			// Cancel removal of styling class after leaving an element
			// if it was internal to the draggable item itself
			window.clearTimeout(this.leaveTimer);
			
			// Cancel the default behavior of the drag
			if (e.preventDefault) e.preventDefault();
			return false;
		}, false);
		trash.addEventListener('dragleave', function () {
			// Schedule styling class cleanup if not canceled
			var leaveTarget = this;
			this.leaveTimer = window.setTimeout(function(){
				leaveTarget.className = leaveTarget.className.replace(/[\s]*over/g,'');
			}, 5);
		}, false);
		
		// Remove the item being moved if dropped in the trash
		trash.addEventListener('drop', function (e) {
			// Remove the moving item itself
			mover.parentNode.removeChild(mover);
			
			// Remove the styling class from the trash
			this.className = this.className.replace(/[\s]*over/g,'');
			
			// Stop the default events from occuring
			if (e.stopPropagation) e.stopPropagation();
			return false;
		}, false);
	
	}
}

ic.listMethods = {
	addButton: function(context, element){
		var button = element;
		var listName = button.className.match(/addto_([\w\d]+)/)[1];
		
		if (!button.title)
			button.title = 'Add list item';

		button.listOwner = context.querySelector('.list_' + listName);
		button.addEventListener('mouseup', function (e) {
			var element = e.path[0];

			this.addItem(element, context);
		}.bind(this));
	},
	
	// Utility function to get an element's page height
	getOffset: function(element){
		var offsetX = 0;
		var offsetY = 0;
		while (element && !isNaN(element.offsetTop)){
			//offsetX += element.offsetLeft - element.scrollLeft;
			//offsetY += element.offsetTop - element.scrollTop;
			offsetX += element.offsetLeft;
			offsetY += element.offsetTop;
			element = element.offsetParent;
		}
		return {'x':offsetX,'y':offsetY};
	},
	
	// Utility function for finding the owning list
	getOwningList: function (node){
		while (node.parentNode){
			node = node.parentNode;
			if (node.className){
				if (node.className.match(/list_/))
					return node;
			}
		}
		return false;
	},
	
	// Core function to load list data from JSON string
	render:function(element, context, listData){
		// Add the contents of the object to the list
		for (var itemIndex = 0; itemIndex < listData.length; itemIndex++){
			this.addItem(element, context, listData[itemIndex]);
		}
	},

	// Core function to extract and save list data
	unrender: function(element){
		// Walk the list harvesting data into an object
		var listData = [];
		var items = element.querySelectorAll('li.item');
		for (var itemIndex = 0; itemIndex < items.length; itemIndex++){
			if (!items[itemIndex].className.match(/proto/)){
				var itemData = {};
				var fields = items[itemIndex].querySelectorAll('.dslf');
				for (var fieldIndex = 0; fieldIndex < fields.length; fieldIndex++){
					var fieldName = fields[fieldIndex].className.match(/dslf_([\w\d_]+)/)[1];
					var fieldValue = fields[fieldIndex].innerHTML;
					itemData[fieldName] = fieldValue;
				}
				listData[listData.length] = itemData;
			}
		}
		
		// Stringify the object and put it to the save field
		var listName = element.className.match(/list_([\w\d_]+)/)[1];
		var dataString = JSON.stringify(listData);
		element.querySelector('.dsf_' + listName).innerHTML = dataString;
	},

	// Core function to add an item to the list
	addItem: function(element, context, data){
		// Clone the embeded prototype as a basis
		var proto = this.getProtoFromAddEl(element, context);
		var rowContainer = this.getRowContainerFromAddEl(element, context);
		var newItem = proto.cloneNode(true);
		
		// Initialize the new item
		newItem.className = newItem.className.replace(/proto/g,'');
		// Inject any provided data into the item
		var fields = newItem.querySelectorAll('.dsf');
		for (var fieldIndex = 0; fieldIndex < fields.length; fieldIndex++){
			fields[fieldIndex].className = fields[fieldIndex].className.replace(/_proto/g,'');
		}
		if (data){
			for (var fieldIndex = 0; fieldIndex < fields.length; fieldIndex++){
				var fieldName = fields[fieldIndex].className.match(/dsf_([\w\d_]+)/)[1];
				if (fieldName in data)
					fields[fieldIndex].innerHTML = data[fieldName];
			}
		}

		// Put it right in the list if there are no columns
		rowContainer.appendChild(newItem);
		
		this.makeDragable(newItem);
		this.itemAdded(newItem);
		aisleten.characters.bindAllFields(sheet_opts.slug,csx_opts.containerId);

	},
	itemAdded : function(context){
		aisleten.characters.bindAllFields(sheet_opts.slug,csx_opts.containerId);
		csxRenderMethods.renderFields('render', context);
	},
	getProtoFromAddEl: function(element, context){
		var parts = csxParts;
		var identifier = parts.getIdentifier(element, "addto_");
		var result = context.querySelector("."+identifier+'_row.proto');
		return result;
	},

	getRowContainerFromAddEl: function(element, context){
		var parts = csxParts;
		var identifier = parts.getIdentifier(element, "addto_");
		var result = context.querySelector(".list_"+identifier);
		return result;
	},

	// Core function to clear the list of pre-existing data
	clear: function(element){
		var items = element.querySelectorAll('li.item');
		for (var itemIndex = 0; itemIndex < items.length; itemIndex++){
			if (!items[itemIndex].className.match(/proto/)){
				element.removeChild(items[itemIndex]);
			}
		}
	},
		
			


	// Core function to make an item dragable
	makeDragable: function(element){
		element.draggable = true;
		var methods = this;
		// Prevent drag when interacting with editable text
		var textFields = element.querySelectorAll('[contentEditable=true]');
		for (var fieldIndex = 0; fieldIndex < textFields.length; fieldIndex++){
			textFields[fieldIndex].addEventListener('mousedown', function(e){
				this.parentNode.draggable = false;
				this.addEventListener('mouseup', function(e){
					this.parentNode.draggable = true;
				}, false);
				this.addEventListener('mouseout', function(e){
					this.parentNode.draggable = true;
				}, false);
			}, false);
		}
		
		// Designate to higher scope when mousing a drag handle
		var dragHandle = element.querySelector('.handle');
		dragHandle.title = 'Drag to rearrange list';
		dragHandle.addEventListener('mousedown', function (e) {
			onHandle = true;
			var handle = this;
			
			this.mouseup = function(e){
				onHandle = false;
				handle.clearEvents();
			}
			this.addEventListener('mouseup', this.mouseup, false);
			
			this.mouseout = function(e){
				this.handleTimeout = window.setTimeout(function(){
					onHandle = false;
					handle.clearEvents();
				},5);
			}
			this.addEventListener('mouseout', this.mouseout, false);
			
			this.mouseover = function(e){
				window.clearTimeout(handle.handleTimeout);
			}
			this.addEventListener('mouseover', this.mouseover, false);
			
			this.clearEvents = function(){
				this.removeEventListener('mouseup',this.mouseup);
				this.removeEventListener('mouseout',this.mouseout);
				this.removeEventListener('mouseover',this.mouseover);
			};
			
		}, false);
		
		// Apply event listener for when draging begins
		element.addEventListener('dragstart', function (e) {
			// Do nothing unless we're grabbing the handle
			if (onHandle) {
			
				// Declare the action being taken
				e.dataTransfer.effectAllowed = 'move';
				e.dataTransfer.setData('Text', this.id);
				
				// Flag the item in motion up in scope
				mover = this;
			
				// Apply styling class to the thing moving
				this.className += ' source';
				
				// Put the parent in the context
				var parentList = methods.getOwningList(this);
				
				// Highlight all the trash drops
				var trash = document.querySelectorAll('.trash');
				for (var trashIdx = 0; trashIdx < trash.length; trashIdx++){
					trash[trashIdx].className += ' active';
				}
				
				// Disable all contentEditables in the list
				var edits = parentList.querySelectorAll('[contentEditable=true]');
				for(var fieldIndex = 0; fieldIndex < edits.length; fieldIndex++)
					edits[fieldIndex].contentEditable = false;
				
				// Apply the cleanup event handler
				this.addEventListener('dragend', function (e) {
				
					// Mark us as off the drag handle
					onHandle = false;
					
					// Remove grab handle events
					this.querySelector('.handle').clearEvents();
					
					// Remove events from the rest of the list
					var listItems = parentList.querySelectorAll('li.item');
					for (var itemIndex = 0; itemIndex < listItems.length; itemIndex++){
						var li = listItems[itemIndex];
						li.removeEventListener('dragenter', li.dragenterFunc, false);
						li.removeEventListener('dragover', li.dragoverFunc, false);
						li.removeEventListener('dragleave', li.dragleaveFunc, false);
						li.removeEventListener('drop', li.dropFunc, false);
					}

					// Strip styling classes
					this.className = this.className.replace(/[\s]*source/g,'');
					
					// Un-highlight all the trash drops
					var trash = document.querySelectorAll('.trash');
					for (var trashIdx = 0; trashIdx < trash.length; trashIdx++){
						trash[trashIdx].className = trash[trashIdx].className.replace(/[\s]*active/g,'');
					}
					
					// Remove this event handler
					this.ondragend = false;
					
					// Autobalance the list if enabled
					if (parentList.autoBalance())
						parentList.balanceColumns();
					
					// Reenable editing by the power of closures
					for(var fieldIndex = 0; fieldIndex < edits.length; fieldIndex++)
						edits[fieldIndex].contentEditable = true;
				}, false);
				
				var owner = methods.getOwningList(this);
				var listItems = owner.querySelectorAll('li.item');
				for (var itemIndex = 0; itemIndex < listItems.length; itemIndex++){
				
					var li = listItems[itemIndex];
				
					// Style potential drop targets as they're moved over
					li.dragUpdateFunc = function (e) {
						// Prevent response from the origenal item in the list
						if(this == mover) return false;
						
						// Apply styling class to potential drop targets
						var offset = methods.getOffset(this);
						var verticalPosition = (e.pageY - offset.y) / this.offsetHeight;
						if (verticalPosition < 0.5){
							this.className = this.className.replace(/[\s]*over-below/g,'');
							this.className += ' over-above';
						}
						else{
							this.className = this.className.replace(/[\s]*over-above/g,'');
							this.className += ' over-below';
						}
						return false;
					};
					li.dragenterFunc = function (e) {
						this.dragUpdateFunc(e);
					}
					li.addEventListener('dragenter', li.dragenterFunc, false);
					li.dragoverFunc = function (e) {
						// Cancel removal of styling class after leaving an element
						// if it was internal to the draggable item itself
						window.clearTimeout(this.leaveTimer);
						
						// Update the styling for above / below insertion
						this.dragUpdateFunc(e);
						
						// Cancel the default behavior of the drag
						if (e.preventDefault) e.preventDefault();
						return false;
					};
					li.addEventListener('dragover', li.dragoverFunc, false);
					li.dragleaveFunc = function (e) {
						// Schedule styling class cleanup if not canceled
						var leaveTarget = this;
						this.leaveTimer = window.setTimeout(function(){
							leaveTarget.className = leaveTarget.className.replace(/[\s]*over-above/g,'');
							leaveTarget.className = leaveTarget.className.replace(/[\s]*over-below/g,'');
						}, 5);
					};
					li.addEventListener('dragleave', li.dragleaveFunc, false);
					
					// Apply event listeners for dropping the item
					li.dropFunc = function (e) {
						// Prevent response if dropping on itself
						if (this == mover) return;
						
						// Insert the moved item above or below the target
						var offset = methods.getOffset(this);
						var verticalPosition = (e.pageY - offset.y) / this.offsetHeight;
						if (verticalPosition < 0.5)
							this.parentNode.insertBefore(mover,this);
						else{
							if (this.nextSibling)
								this.parentNode.insertBefore(mover,this.nextSibling);
							else
								this.parentNode.appendChild(mover);
						}
						
						// Remove the styling class from the target
						this.className = this.className.replace(/[\s]*over-above/g,'');
						this.className = this.className.replace(/[\s]*over-below/g,'');
						
						// Stop the default events from occuring
						if (e.stopPropagation) e.stopPropagation();
						return false;
					};
					li.addEventListener('drop', li.dropFunc, false);
				
				}
				
			}
			else {
				e.preventDefault();
			}
		}, false);
	
	}		
}

// Initial setup
ic.pipsSetup = function(context){

	// Default the context if not set
	if (!context) context = document;
	
	// Convert each pips field
	var pipsFields = context.querySelectorAll('.pips');
	for (var i = 0; i < pipsFields.length; i++){
	
		var element = pipsFields[i];
		methods = ic.pipsMethods();

		// Skip list item prototype fields
		if (element.parentNode.className.match(/proto/))
			continue;
		
		// Convert the field value to pips display
		methods.render(element);
				
	}
}

// Methods
ic.pipsMethods = {

	range: function(rangeCache, className){
		// Return cached value if it exists
		if(rangeCache != null)
			return rangeCache;

		// Get the range from the class, cache, and return
		var range = className.match(/pipsRange_[\d]+/)[0].substring(10);
		rangeCache = range;
		return range;
	
	},

	// Gets the current field value from text or image
	value: function(element, valueCache){

		// Return the cached value if it exists
		if(valueCache != null)
			return valueCache.toString();
		
		// Get the value from the text content, cache, and return
		var value = element.innerHTML;

		// Catch and fix rare cases of HTML being saved instead of a number
		if(isNaN(value)){
			var pips = element.querySelectorAll( '.pipOn' );
			if(pips)
				value = pips.length;
			else
				value = 0;
		}
	
		if (element.innerHTML == '') value = 0;
		return value.toString();
		
	},
	
	// Converts the content to their visual representation
	render: function(element, valueCache){
		// Skip hidden fields
		var allowEdit = true;
		var value = this.value(element, valueCache);
		if (value){
			if (value.match(/[\s]*hidden/)){
				allowEdit = false;
				if (csx_opts.isEditable)
					element.style.opacity = '0.1';
				else{
					element.innerHTML = '';
					return;
				}
			}
		}
		
		// Skip fields with a value of -1
		var intVal = parseInt(this.value(element, valueCache));
		if (intVal == -1)
			return;
			
		// Replace the contents with the appropriate pips
		var border = document.createElement('div');
		border.className = 'pipBorder';
		
		this.innerHTML = '';

		var range = this.range(this.rangeCache, element.className);
		while (element.firstChild) {
			element.removeChild(element.firstChild);
		}
		for (var i = range - 1; i >= 0; i--){
			var pip = document.createElement('div');
				pip.value = range - i;
				pip.className = 'pip';
				pip.className += (pip.value <= intVal) ? ' pipOn' : ' pipOff';
				pip.style.right = fieldOpts.pips.pipThresholds[i] + 'px';
				pip.appendChild(border.cloneNode(false));
				
			if (allowEdit && csx_opts.isEditable){
				pip.addEventListener('click', function(e){
					console.log('run pip click listener function')
					var children = e.path[2].children;
					var indexOfClicked = Array.prototype.indexOf.call(children, e.path[1]);
					var value = indexOfClicked + 1;
					this.click(element, value);
				}.bind(this), false);
			}
			element.appendChild(pip);
			
		}

		// Activate the pips
		if (allowEdit && csx_opts.isEditable){
			element.title = 'Click to set value';
			element.style.cursor = 'pointer';
		}
	
	},
	
	// Converts the value back from image to text
	unrender: function(element){
		// Replace the contents with the appropriate value string
		element.innerHTML = this.value(element);
	
	},
	
	// Click event handler for the pips interface
	click: function(element, clickedValue){
		// If the user clicks the current score, they probably want to reduce by one
		if (clickedValue == this.value(element))
			valueCache = clickedValue - 1;
		else
			valueCache = clickedValue;

		// Rerender the pips
		this.render(element, valueCache);
				
		// Invoke the update event handler
		this.update(element);
				
		// Then we're done
		return;
				
	},

	update: function(element){}

};
		
	// Page Tab Control
	ic.tabs = function(context){
	
		// Default the context if not set
		if (!context) context = document;
		
		// Convert each tab
		var tabs = context.querySelectorAll('.tab');
		for (var i = 0; i < tabs.length; i++){
			var tab = tabs[i];
			
			// Gets the name of the page associated with the tab
			tab.page = function(){
			
				// Return the cached value if it exists
				if(this.pageCache != null)
					return this.pageCache;
			
				// Get the value from the text content, cache, and return
				var value = this.className.match(/tab_([\w]+)/)[1];
				this.pageCache = value;
				return value;
				
			};
			
			// Register the click event
			tab.addEventListener('click', function(){
				this.click();
			}, false);
	
			// Click event handler for the tabs interface
			tab.click = function(){
				var pageName = this.page();
				this.activate(pageName);
			};
			
			// Switch the active tab and sheet page
			tab.activate = function(pageName){
			
				// Default the page name if the named one doesn't exist
				var tab = context.querySelector('.tab.tab_' + pageName);
				if(!tab)
					pageName = sheet_opts.defaultTab;
			
				// Remember the active tab across sessions
				var storageKey = window.location.hostname + window.location.pathname + "#lastPage"
				if(localStorage)
					localStorage[storageKey] = pageName;
				
				// Clear active class from current tab and page
				var activeTab = context.querySelectorAll('.tab.active');
				for (var i = 0; i < activeTab.length; i++)
					activeTab[i].className = activeTab[i].className.replace(/[\s]*active/g,'');
				
				var activePage = context.querySelectorAll('.page.active');
				for (var i = 0; i < activePage.length; i++)
					activePage[i].className = activePage[i].className.replace(/[\s]*active/g,'');
				
				// Make the proper page and tab active
				activeTab = context.querySelector('.tab.tab_' + pageName);
				activeTab.className += ' active';
				
				activePage = context.querySelector('.page.page_' + pageName);
				activePage.className += ' active';
			};
			
			// Go back to the most recent tab if available
			if(localStorage){
				var storageKey = window.location.hostname + window.location.pathname + "#lastPage"
				if(localStorage[storageKey])
					tab.activate(localStorage[storageKey]);
				else
					tab.activate(sheet_opts.defaultTab);
			}
			else
				tab.activate(sheet_opts.defaultTab);
		}
	
	}
	// Text Input Control
	ic.textarea = {
		renderInput: function(element, isEditable){
			var value = element.innerText;
			var label = element.getAttribute('aria-label');
			var textarea = document.createElement('textarea');
			textarea.setAttribute('aria-label', label);
			if(isEditable == false){
				textarea.setAttribute('readonly', 'readonly');
			}
			textarea.value = value;
			element.innerHTML = '';
			element.appendChild(textarea);
			element.removeAttribute('aria-label');
		},
		renderValue:function(element){
			var textarea = element.querySelector('textarea');
			var value = textarea.value;
			var ariaLabel = textarea.getAttribute('aria-label');
			element.innerHTML = value;
			element.setAttribute('aria-label', ariaLabel);
		},
		unrender: function(element){
			this.renderValue(element);
		},
		render : function(element){
			if(element.querySelector('textarea') === null){
				this.renderInput(element, csx_opts.isEditable);
			}
		},
		// On Update event function, typicaly overriden
		update : function(){},
	}
	
	

// Tooltip Control
ic.tip = function(context){

    // Default the context if not set
    if (!context) context = document;
    
    // Create the tool tip element of needed
    var tipBox = csx_opts.uiContainer.querySelector('.tipBox');
    if (!tipBox.eventsAttached){
        
        // Hide the tip box when it loses focus
        tipBox.querySelector('.tipArea').addEventListener('blur', function(e){
            this.parentNode.parentNode.activeField.hide();
        }, false);	
        
        // Flag the tip box as having been configured
        tipBox.eventsAttached = true;
        
    }
    
    // Convert each tip field
    var tipFields = context.querySelectorAll('.tip');
    for (var i = 0; i < tipFields.length; i++){
        
        tipFields[i].show = function(e){
            
            // Provide a quick connection to the tip field
            tipBox.activeField = this;
            
            // Initialize the floater and contents
            var tipArea = tipBox.querySelector('.tipArea');
            if (this.innerHTML != '')
                tipArea.innerHTML = this.innerHTML;
            else
                tipArea.innerHTML = csx_opts.defaultFieldValue;
            tipArea.allowBlur = true;

            // Reveal the floater and focus
            tipBox.style.display = 'block';
            tipArea.focus();
            
            // Highlight the item
            this.parentNode.className += ' highlight';
            
            // Position the tip near the mouse
            this.move(e);
        }
        
        tipFields[i].move = function(e){
        
            // Get wrapper offset
            var wrapper = tipBox.parentNode.parentNode;
            var element = wrapper;
            var containerX = 0;
            var containerY = 0;
            while (element.offsetParent){
                containerX += element.offsetLeft;
                containerY += element.offsetTop;
                element = element.offsetParent;
            }
        
            // Calculate the tip's new position
            var posX = Math.min(wrapper.offsetWidth - tipBox.offsetWidth, (e.pageX - containerX) + 30);
            var posY = (e.pageY - containerY) + 30;
            
            // Position the box
            tipBox.style.left = posX + 'px';
            tipBox.style.top = posY + 'px';
            
        }
        
        tipFields[i].hide = function(e){
        
            // Stop here if focus was lost to the edit controls
            var tipArea = tipBox.querySelector('.tipArea');
            if(!tipArea.allowBlur)
                return;
                
            // Write the tip box content back to the tip field
            if (tipArea.innerHTML != csx_opts.defaultFieldValue)
                tipBox.activeField.innerHTML = tipArea.innerHTML;
            // Don't store the default value
            else
                tipBox.activeField.innerHTML = '';
            
            // Remove the highlight
            this.parentNode.className = this.parentNode.className.replace(/ highlight/g,'');
            
            // Hide the tip box
            tipBox.style.display = 'none';
            
        }
        
        // Enable click to edit in sheet editing mode
        if (csx_opts.isEditable){
        
            // On hover show edit prompt
            tipFields[i].title = "Click to edit tool tip";
            
            // On click open editing interface
            tipFields[i].addEventListener('click', function(e){
                this.show(e);
            }, false);			
        
        }
        // Use mouse over and track mouse for view mode
        else{
        
            // Assign a link down to the tip
            tipFields[i].parentNode.tooltip = tipFields[i];
        
            // Only show tool tips if they have content
            if (tipFields[i].innerHTML != ''){
            
                // On enter show the tip
                tipFields[i].parentNode.addEventListener('mouseover', function(e){
                    this.tooltip.show(e);
                }, false);
                
                // On move move the tip
                tipFields[i].parentNode.addEventListener('mousemove', function(e){
                    this.tooltip.move(e);
                }, false);
                
                // On leave hide the tip
                tipFields[i].parentNode.addEventListener('mouseout', function(e){
                    this.tooltip.hide(e);
                }, false);
                
            }
        }
    
    }

}
var csxParts = {
    getContainer: function(spanElement){
        var classes = spanElement.classList;
        var containerClass = false;
        var container = false;
        containerClass = this.getIdentifier(spanElement, 'dsf_');
        if(containerClass !== false){
            var container = spanElement.closest(containerClass);
        }
        return container;
    },

    getIdentifier: function(element, prefix){
        var classes = element.classList;
		for(var i=0; i<classes.length; i++){
			if(classes[i].search(prefix) != -1){
                return classes[i].replace(prefix, '');
            }
        }
        return false;
    }
};
var csxRender = function(renderOrUnrender, context){
    console.log("CSXRENDER");
    csxRenderMethods.renderFields(renderOrUnrender, context);
    ic.listSetup(context);
}

var csxRenderMethods = {
    renderFields: function(renderOrUnrender, context){
        var types = ['textarea', 'basicText', 'check'];
        for(var i=0; i<types.length; i++){
            csxRenderMethods.renderType(renderOrUnrender, types[i], context);
        }
    },
    renderType: function(renderOrUnrender, type, context){
         // The type class should be in the span
         var parts = csxParts;
         var fields = context.querySelectorAll('.'+type);
         var methodVar = ic[type];

         for (var i = 0; i < fields.length; i++){
            var spanElement = fields[i];
            var container = parts.getContainer(spanElement);
            if (container && container.className.match(/proto/))
                continue;
            if(renderOrUnrender == 'unrender'){
                methodVar.unrender(spanElement, container);
            }
            else{
                methodVar.render(spanElement, container);
            }
         }       
    }

}
function csx_sheet_dataPostLoad(data){
    if(data.slug == 'sts'){
        console.log('csx_sheet_dataPostLoad - sts');
        csx_dataPostLoad(data);
        csx_call_interactions();
    }
    else if(data.slug == 'mg2e'){
        console.log('csx_sheet_dataPostLoad - mg2e');
        csx_dataPostLoad(data);
        csx_call_interactions();
    }
}
function csx_call_interactions(){
    ia.sheetShowHideLabelDescRows.hideUnused();
    ia.sheetShowHideLabelDescRows.addShowListeners();
    ia.sheetShowHideLabelDescRows.addHideListeners();
    ia.resize.autoGrowSel(".ds_"+sheet_opts.slug+' .tisel textarea');
    ia.resize.autoGrowSel(".ds_"+sheet_opts.slug+' .extra textarea');
    ia.resize.autoGrowSel(".ds_"+sheet_opts.slug+' .stunts textarea');
    ia.resize.autoGrowSel(".ds_"+sheet_opts.slug+' .consequence textarea');
    ia.sheetHighlightActiveSkills.setup();
}
function csx_sheet_dataPreSave(){
    console.log('csx_sheet_dataPreSave');
    return csx_dataPreSave();
}
function sts_dataPostLoad(data){
    return csx_sheet_dataPostLoad(data);
}
function mg2e_dataPostLoad(data){
    console.log('mg2e_dataPostLoad');
    return csx_sheet_dataPostLoad(data);
}
function sts_dataPreSave(){
    console.log('sts_dataPreSave');
    return csx_sheet_dataPreSave();
}

function mg2e_dataPreSave(){
    console.log('mg2e_dataPreSave');
    return csx_sheet_dataPreSave()
}
// Master Startup
function csx_dataPostLoad(data){
	csx_opts.defaultContext = document.getElementById(data.containerId);	
	csx_opts.uiContainer = csx_opts.defaultContext.querySelector('.uicontainer');
	csx_opts.isEditable = data.isEditable;

	// Fix container properties
	firstParentWithClass(csx_opts.defaultContext,'dynamic_sheet_container').style.overflow = 'visible';
	//csx_firstParentWithClass(csx_opts.defaultContext,'main-content-container').style.minWidth = '853px';
	
	// Set up the editing interface
		// Provide default context
	context = csx_opts.defaultContext;

	// Provide default context
	if (context == undefined){
		context = csx_opts.defaultContext;
	}
	// Do setup for interfaces
	csxRender('render', context);
	ic.tabs(context);
	csx_opts.containerId = (document.querySelector('.dynamic_sheet')).id;
	
	
	// Preload rollover images 
	// Deferred to prevent blocking
	window.setTimeout(function(){
		if (document.images){
			for (var i = 0; i < csx_opts.preloadFiles.length; i++){
				var img = new Image();
				img.src = csx_opts.imagePath + csx_opts.preloadFiles[i];
			}
		}
	},500);

	// Initialize accordions
	ia.makeAccordion.setup(true);
}

// Shutdown Before Save
function csx_dataPreSave(){
	// Default the context if not set
	var context = csx_opts.defaultContext;
	csxRender('unrender', context);
		
}


ia.makeAccordion = {
    setup: function(hasSelector){
        var accContainers = document.querySelectorAll('div[class*="Wrap_id"]');
        for(var j=0; j<accContainers.length; j++){
            var accElem = accContainers[j];
            var accHD = accElem.querySelectorAll('div .title');
            for (var i = 0; i < accHD.length; i++) {
                this.toggleItem(accHD[i], hasSelector);
                accHD[i].addEventListener('click', function(element){
                    this.toggleItem(element, hasSelector);
                }.bind(this, accHD[i]));
            }
        }
    },
    toggleItem: function(element, hasSelector) {
        if(hasSelector){
            var parentNode = element.parentNode.parentNode;
        }
        else{
            var parentNode = element.parentNode;
        }
        var itemClass = parentNode.classList;
        hadFlag = false;
        for(var i=0; i<itemClass.length; i++){
            if(itemClass[i] == 'open'){
                parentNode.classList.replace('open', 'closed');
                hadFlag = true;
                break; 
            }
            if(itemClass[i] == 'closed'){
                parentNode.classList.replace('closed', 'open');
                hadFlag = true;
                break;
            }
        }
        if(hadFlag == false){
            parentNode.classList.add('closed');
        }
    }
}

ia.resize = {
   autoGrowSel: function(sel){
      var els = document.querySelectorAll(sel);
      autosize(els);
   }
   
}

ia.showHideLabelDescRows = {
    hideUnusedLabelDescRow: function (items, minCt){
        for(var i=0; i<items.length; i++){
            var item = items[i];
            var titleEl = item.querySelector('.f_label input');
            if(titleEl === null){
                titleEl = item.querySelector('.desc textarea');
                title = titleEl.value;
            }
            else{
                title = titleEl.value;
            }
            var descEl = item.querySelector('.desc input');
            if(descEl === null){
                descEl = item.querySelector('.desc textarea');
                desc = descEl.value;
            }
            else{
                desc = descEl.value;
            }
            var isHidden = item.style.getPropertyValue("display") == "none";
            var isEmpty = (title == '' && desc == '');
            if(isEmpty  == false){item.removeAttribute( 'style' )}
            if(isEmpty && isHidden == false && i > minCt - 1){
                item.style.display = "none";
            }  
        }
    },
    showAdditionalItem: function (items){
        for(var i=0; i<items.length; i++){
            var item = items[i];
            var isHidden = item.style.getPropertyValue("display") == "none";
            if(isHidden){
             item.removeAttribute( 'style' );
             return true;   
            }
        }
    }
}

ia.sheetHighlightActiveSkills = {
   getSkillBreakpt: function(){
      return 1000;
   },
   setActive: function(el, minCt, i){
      var classIsActive = el.classList.contains('active');
      var input = el.querySelector('input');
      if(input === 'null'){
         input = el.querySelector('textarea');
      }
      var shouldBeActive = false;
      var isEmpty = (input.value == '');
      if(!isEmpty || i < minCt){ 
         var shouldBeActive = true;
      }  
      if(classIsActive && ! shouldBeActive){
         this.deactivateSkill(el);
      }
      else if(!classIsActive && shouldBeActive){
         this.activateSkill(el);
      }
   },
   setup: function(){
      this.breakptClass();
      // Initial setup
      this.setActiveAll(true);
   } ,
   setActiveAll: function(init){
      if(typeof init == "undefined"){init = false;}
      var skillTypes = document.querySelectorAll(".skill-type");
      for(var i=0; i<skillTypes.length; i++){
         var skillType = skillTypes[i];
         var skills = skillType.querySelectorAll(".skill");
         for(var j=0; j<skills.length; j++){
            var skill = skills[j];
            if(init){
               skill.addEventListener('blur', function (event) {
                  this.setActive(skill, 1, i);
               });
            }
            this.setActive(skill, 1, j);
         }
      }
   },
   breakptClass:function(){
      if(window.innerWidth<ia.sheetHighlightActiveSkills.getSkillBreakpt()){
         document.querySelector('.skills').classList.add('smol')
         document.querySelector('.skills').classList.remove('big')
      }
      else{
         document.querySelector('.skills').classList.add('big')
         document.querySelector('.skills').classList.remove('smol')
      }
      window.onresize = function(){
         if(window.innerWidth<ia.sheetHighlightActiveSkills.getSkillBreakpt()){
            document.querySelector('.skills').classList.add('smol')
            document.querySelector('.skills').classList.remove('big')
         }
         else{
            document.querySelector('.skills').classList.add('big')
            document.querySelector('.skills').classList.remove('smol')
         }
      };
   },
   showAdditionalSkills: function (){
      var skillTypes = document.querySelectorAll(".skill-type");
      for(var i=0; i<skillTypes.length; i++){
         var skillType = skillTypes[i];
         var skills = skillType.querySelectorAll(".skill");
         for(var j=0; j<skills.length; j++){
            var skill = skills[j];
            var isHidden = skill.classList.contains('inactive');
            if(isHidden){
             this.activateSkill(skill);
             break;   
            }
         }
      }
   },
   hideUnusedSkills: function(){
      this.setActiveAll();
   },
   activateSkill: function(el){
      el.classList.add('active');
      el.classList.remove('inactive');
   },
   deactivateSkill: function(el){
      el.classList.add('inactive');
      el.classList.remove('active');
   }
}

ia.sheetShowHideLabelDescRows = {
    addShowListeners: function(){
        var button = document.querySelector('.stunt_showAdd button.button_stunt_show');
        button.addEventListener('click', function (event) {
            ia.sheetShowHideLabelDescRows.showStunt();
        });
        var button = document.querySelector('.aspect_showAdd button.button_aspect_show');
        button.addEventListener('click', function (event) {
            ia.sheetShowHideLabelDescRows.showAspect();
        });
        var button = document.querySelector('.consequence_showAdd button.button_consequence_show');
        button.addEventListener('click', function (event) {
            ia.sheetShowHideLabelDescRows.showConsequence();
        });
        var button = document.querySelector('.skill_showAdd button.button_skill_show');
        button.addEventListener('click', function (event) {
            ia.sheetHighlightActiveSkills.showAdditionalSkills();
        });
    },
    addHideListeners: function(){
        var button = document.querySelector('.stunt_showAdd button.button_stunt_hide');
        button.addEventListener('click', function (event) {
            ia.sheetShowHideLabelDescRows.hideUnusedStunts();
        });
        var button = document.querySelector('.aspect_showAdd button.button_aspect_hide');
        button.addEventListener('click', function (event) {
            ia.sheetShowHideLabelDescRows.hideUnusedAspects();
        });
        var button = document.querySelector('.consequence_showAdd button.button_consequence_hide');
        button.addEventListener('click', function (event) {
            ia.sheetShowHideLabelDescRows.hideUnusedConsequences();
        });
        var button = document.querySelector('.skill_showAdd button.button_skill_hide');
        button.addEventListener('click', function (event) {
            ia.sheetHighlightActiveSkills.hideUnusedSkills();
        });
    },
    hideUnusedConsquenceRows: function (items, minCt){
        for(var i=0; i<items.length; i++){
            var item = items[i];
            var title = item.querySelector('.f_label input');
            if(title === null){title = item.querySelector('.f_label textarea')}
            var titlespan = item.querySelector('.f_label span');
            var desc = item.querySelector('.desc input');
            if(desc === null){desc = item.querySelector('.desc textarea')}
            var isHidden = item.style.getPropertyValue("display") == "none";
            var classList = titlespan.classList;
            var isExtra = false;
            for(var j=0; j<classList.length; j++){
                var itemj = classList[j];
                if(itemj.includes('dsf_extra_')){
                    isExtra = true;
                    break;
                }
            }
            var isEmpty = (desc.value == '' && (title.value == '' || isExtra));
            if(isEmpty  == false){item.removeAttribute( 'style' )}
            if(isEmpty && isHidden == false && i > minCt - 1){
                item.style.display = "none";
            }  
        }
    },
    hideUnused: function(){
        this.hideUnusedAspects();
        this.hideUnusedStunts();
        this.hideUnusedConsequences();
    },
    showAspect: function(){
        var aspects = document.querySelectorAll('.aspects .aspect');
        ia.showHideLabelDescRows.showAdditionalItem(aspects);    
    },
    showStunt: function(){
        var stunts = document.querySelectorAll('.stunts .stunt');
        ia.showHideLabelDescRows.showAdditionalItem(stunts);    
    },
    showSkills: function(){
        ia.sheetHighlightActiveSkills.showAdditionalSkills();    
    },
    showConsequence: function(){
        var consequences = document.querySelectorAll('.consequences .consequence');
        ia.showHideLabelDescRows.showAdditionalItem(consequences);    
    },
    hideUnusedAspects: function(){
        var aspects = document.querySelectorAll('.aspects .aspect');
        ia.showHideLabelDescRows.hideUnusedLabelDescRow(aspects,1);
    },
    hideUnusedStunts: function(){
        var stunts = document.querySelectorAll('.stunts .stunt');
        ia.showHideLabelDescRows.hideUnusedLabelDescRow(stunts,1);
    },
    hideUnusedConsequences: function(){
        var consequences = document.querySelectorAll('.consequences .consequence');
        ia.sheetShowHideLabelDescRows.hideUnusedConsquenceRows(consequences,3);
    }
}
console.log("STS LOADED");

Back

Mouseguard 2e

Create Your Campaign

Just One More Step

Just A Little More Info

Use a Social Account