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

Dragon Age RPG

Author: Pytheas

Slug: dragonage

Type: GameCharacter

System: Dragon Age RPG

DST Source Code

HTML Template

<div class="wrapper csx">
        <div class="uiContainer">
          <div class="formatBar">
            <button type="button" class="boldButton" title="Bold (Ctrl+B)"></button>
            <button type="button" class="italicButton" title="Italic (Ctrl+I)"></button>
            <button type="button" class="underlineButton" title="Underline (Ctrl+U)"></button>
            <button type="button" class="indentButton" title="Indent (Ctrl+Tab)"></button>
          </div>
        </div>

        <div class='da_head'>
          <div class='da_header_text'>
            <div class="name">
                <span class="dsf dsf_name readonly"></span>
            </div>
            <div class='player_campaign'>
              <span>Played by </span><span class="dsf dsf_player readonly"></span>
              <span> in </span><span class="dsf dsf_campaign readonly"></span>
            </div>
          </div>
        </div>
        <div class="da_tabs">
          <div class="tab tab_crunch">Main</div>
          <div class="tab tab_talents">Powers &amp; Talents</div>
          <div class="tab tab_spells">Spells</div>
          <div class="tab tab_equipment">Equipment</div>
          <div class="tab tab_background">Background</div>
          <div class="tab tab_credits">Credits</div>
        </div>

        <div class="da_tabcontent page page_crunch">
          <!-- Start left column -->
          <div class="da_left">
            <!-- Appearnce -->
            <div class="appearance da_section">
              <span class="da_section_title">Appearance</span>
              <div class="da_portrait"><span class="dsf dsf_avatar_image readonly"></span></div>
              <div class="appearance_basics">
                <div class="appearance_header sub_header">
                  <span>Height</span>
                  <span>Weight</span>
                </div>
                <div class="da_content">
                  <div class="appearance_basics_values">
                    <span class="dsf dsf_height"></span>
                    <span class="dsf dsf_weight"></span>
                  </div>
                </div>
                <div class="feature_header sub_header">
                  <span class="appearance_features">Features</span>
                </div>
                <div class="da_content">
                  <div class="appearance_values"></div>
                  <span class="dsf dsf_features appearance_features"></span>
                </div>
              </div>
            </div>

          <!-- Ability scores and focuses -->
          <div class="ability_scores da_section">
            <span class="da_section_title">Ability Scores</span>
            <div class="ability_score_header sub_header">
              <span class="ability_ability_header">Ability</span>
              <span class="ability_primary_header">Primary</span>
              <span class="ability_focuses_header">Focuses</span>
              <span class="ability_rating_header">Rating</span>
            </div>
            <div class="da_content">
              <div class="ability_score communication row">
                <div class="ability_score_name"><span>Communication</span></div>
                <span class="dsf ability_score_primary dsf_communication_primary checkbox readonly readonly"></span>
                <span class="dsf ability_score_focuses dsf_communication_focuses"></span>
                <span class="dsf ability_score_rating dsf_communication"></span>
              </div>
              <div class="ability_score constitution row">
                  <div class="ability_score_name"><span>Constitution</span></div>
                <span class="dsf ability_score_primary dsf_constitution_primary checkbox readonly"></span>
                <span class="dsf ability_score_focuses dsf_constitution_focuses"></span>
                <span class="dsf ability_score_rating dsf_constitution"></span>
              </div>
              <div class="ability_score cunning row">
                <div class="ability_score_name"><span>Cunning</span></div>
                <span class="dsf ability_score_primary dsf_cunning_primary checkbox readonly"></span>
                <span class="dsf ability_score_focuses dsf_cunning_focuses"></span>
                <span class="dsf ability_score_rating dsf_cunning"></span>
              </div>
              <div class="ability_score dexterity row">
                  <div class="ability_score_name"><span>Dexterity</span></div>
                <span class="dsf ability_score_primary dsf_dexterity_primary checkbox readonly"></span>
                <span class="dsf ability_score_focuses dsf_dexterity_focuses"></span>
                <span class="dsf ability_score_rating dsf_dexterity"></span>
                <span class="dexterity_actual hidden"></span>
              </div>
              <div class="ability_score magic row">
                  <div class="ability_score_name"><span>Magic</span></div>
                <span class="dsf ability_score_primary dsf_magic_primary checkbox readonly"></span>
                <span class="dsf ability_score_focuses dsf_magic_focuses"></span>
                <span class="dsf ability_score_rating dsf_magic"></span>
              </div>
              <div class="ability_score perception row">
                  <div class="ability_score_name"><span>Perception</span></div>
                <span class="dsf ability_score_primary dsf_perception_primary checkbox readonly"></span>
                <span class="dsf ability_score_focuses dsf_perception_focuses"></span>
                <span class="dsf ability_score_rating dsf_perception"></span>
              </div>
              <div class="ability_score strength row">
                  <div class="ability_score_name"><span>Strength</span></div>
                <span class="dsf ability_score_primary dsf_strength_primary checkbox readonly"></span>
                <span class="dsf ability_score_focuses dsf_strength_focuses"></span>
                <span class="dsf ability_score_rating dsf_strength"></span>
              </div>
              <div class="ability_score willpower row">
                  <div class="ability_score_name"><span>Willpower</span></div>
                <span class="dsf ability_score_primary dsf_willpower_primary checkbox readonly"></span>
                <span class="dsf ability_score_focuses dsf_willpower_focuses"></span>
                <span class="dsf ability_score_rating dsf_willpower"></span>
              </div>
            </div>
          </div>
        </div> <!-- end left column -->

        <!-- Start right column -->
        <div class="da_right">
          <!-- Basic character info -->
          <div class="basic_info da_section">
            <span class="da_section_title">Basic Info</span>
            <div class="basic_info_header sub_header">
              <span>Race</span>
              <span>Class</span>
              <span>Background</span>
              <span>Level</span>
            </div>
            <div class="da_content">
              <div class="basic_values">
                <span class="dsf dsf_race"></span>
                <span class="dsf dsf_class"></span>
                <span class="dsf dsf_background"></span>
                <div class='level'>
                  <span class="dsf dsf_level"></span>
                  <span class="dsf dsf_xp"></span>
                </div>
              </div>
            </div>
            <div class="language_header sub_header">
              <span>Languages</span>
            </div>
            <div class="da_content">
              <div class="language_values">
                <span class="dsf dsf_languages"></span>
              </div>
            </div>
          </div>

          <!-- Combat stats -->
          <div class="combat_stats da_section">
            <span class="da_section_title">Combat Stats</span>
            <div class="combat_stats_header sub_header">
              <span>Speed</span>
              <span>Defense</span>
              <span>Health</span>
              <span>Mana</span>
            </div>
            <div class="combat_stats_values">
              <span class="dsf dsf_speed"></span>
              <span class="dsf dsf_defense"></span>
              <span class="dsf dsf_health"></span>
              <span class="dsf dsf_mana"></span>
            </div>
          </div>

          <!-- Armor -->
          <div class="armor da_section">
            <span class="da_section_title">Armor &amp; Shield</span>
            <div class="armor_header sub_header">
              <span>Armor Type</span>
              <span>AP</span>
              <span>Penalty</span>
              <span class="da_trained">Trained</span>
            </div>
            <div class="da_content">
              <div class="armor_values">
                <span class="dsf dsf_armor_type"></span>
                <span class="dsf dsf_armor_ap"></span>
                <span class="dsf dsf_armor_penalty"></span>
                <span class="dsf dsf_armor_trained checkbox readonly"></span>
              </div>
            </div>
            <div class="shield_header sub_header">
              <span>Shield Type</span>
              <span>Bonus</span>
              <span class="da_trained">Trained</span>
            </div>
            <div class="da_content">
                <div class="shield_values">
                  <span class="dsf dsf_shield_type"></span>
                  <span class="dsf dsf_shield_bonus"></span>
                  <span class="dsf dsf_shield_trained checkbox readonly"></span>
                </div>
              </div>
          </div>

          <!-- Movement ranges -->
          <div class="movement da_section">
            <span class="da_section_title">Movement Ranges</span>
            <div class="movement_header sub_header">
              <span>Move</span>
              <span>Charge</span>
              <span>Run</span>
            </div>
            <div class="da_content">
              <div class="movement_values_yrd">
                <span class="dsf dsf_move_yrd"></span>
                <span class="dsf dsf_charge_yrd"></span>
                <span class="dsf dsf_run_yrd"></span>
              </div>
              <div class="movement_values_sq">
                <span class="dsf dsf_move_sq"></span>
                <span class="dsf dsf_charge_sq"></span>
                <span class="dsf dsf_run_sq"></span>
              </div>
            </div>
          </div>

          <!-- Melee weapons -->
          <div class="melee_weapons da_section">
              <span class="da_section_title">Melee Weapons</span>
              <div class="melee_header sub_header">
                <span class="da_wide">Weapon</span>
                <span>Attack</span>
                <span>Damage</span>
                <span class="trash"></span>
					      <span class="add addto_melee" title="Add Melee Weapon"></span>
              </div>
              <ul class="group list list_melee">
                <li class="proto item">
                  <div class="handle"><div></div></div>
                  <span class="edit dslf dslf_melee_weapon_name melee_weapon_name da_wide" defaultString="Weapon"></span>
                  <span class="edit dslf dslf_melee_weapon_attack melee_weapon_attack"></span>
                  <span class="edit dslf dslf_melee_weapon_damage melee_weapon_damage"></span>
                </li>
                <li class="item">
                  <div class="handle"><div></div></div>
                  <span class="edit dslf dslf_melee_weapon_name melee_weapon_name da_wide" defaultString="Weapon"></span>
                  <span class="edit dslf dslf_melee_weapon_attack melee_weapon_attack"></span>
                  <span class="edit dslf dslf_melee_weapon_damage melee_weapon_damage"></span>
                </li>
                <span class="oldfields hidden">
                  [{"melee_weapon_name":"melee_weapon_name"},{"melee_weapon_attack":"melee_weapon_attack"}, {"melee_weapon_damage":"melee_weapon_damage"}]
                </span>
                <span class="dsf dsf_melee hidden readonly"></span>
              </ul>
              <div class="weapon_group_header sub_header">
                  <span>Weapon Groups</span>
              </div>
              <div class="da_content">
                <div class="weapon_groups">
                  <span class="dsf dsf_weapon_groups"></span>
                </div>
              </div>
          </div>
        </div> <!-- End right column -->

        <!-- Ranged weapons -->
      <div class="ranged_weapons da_section">
        <span class="da_section_title">Ranged Weapons</span>
        <div class="ranged_header sub_header">
          <span class="da_wide">Weapon</span>
          <span class="da_narrow">Attack</span>
          <span class="da_narrow">Damage</span>
          <span class="da_narrow">Short Range</span>
          <span class="da_narrow">Long Range</span>
          <span>Reload Time</span>
          <span class="trash"></span>
          <span class="add addto_ranged" title="Add Ranged Weapon"></span>
        </div>
        <ul class="group list list_ranged">
          <li class="proto item">
            <div class="handle"><div></div></div>
            <span class="edit dslf dslf_ranged_weapon_name ranged_weapon_name da_wide" defaultString="Weapon"></span>
            <span class="edit dslf dslf_ranged_weapon_attack ranged_weapon_attack da_narrow"></span>
            <span class="edit dslf dslf_ranged_weapon_damage ranged_weapon_damage da_narrow"></span>
            <span class="edit dslf dslf_ranged_weapon_short ranged_weapon_short da_narrow"></span>
            <span class="edit dslf dslf_ranged_weapon_long ranged_weapon_long da_narrow"></span>
            <span class="edit dslf dslf_ranged_weapon_reload ranged_weapon_reload"></span>
          </li>
          <li class="item">
            <div class="handle"><div></div></div>
            <span class="edit dslf dslf_ranged_weapon_name ranged_weapon_name da_wide" defaultString="Weapon"></span>
            <span class="edit dslf dslf_ranged_weapon_attack ranged_weapon_attack da_narrow"></span>
            <span class="edit dslf dslf_ranged_weapon_damage ranged_weapon_damage da_narrow"></span>
            <span class="edit dslf dslf_ranged_weapon_short ranged_weapon_short da_narrow"></span>
            <span class="edit dslf dslf_ranged_weapon_long ranged_weapon_long da_narrow"></span>
            <span class="edit dslf dslf_ranged_weapon_reload ranged_weapon_reload"></span>
          </li>
          <span class="oldfields hidden">
            [{"ranged_weapon_name":"ranged_weapon_name"},
            {"ranged_weapon_attack":"ranged_weapon_attack"},
            {"ranged_weapon_damage":"ranged_weapon_damage"},
            {"ranged_weapon_short":"ranged_weapon_short"},
            {"ranged_weapon_long":"ranged_weapon_long"},
            {"ranged_weapon_reload":"ranged_weapon_reload"}]
          </span>
          <span class="dsf dsf_ranged hidden readonly"></span>
        </ul>
      </div>
    </div>
    <div class="da_tabcontent page page_talents">
      <div class="specialization da_section">
        <span class="da_section_title">Specializations</span>
        <div class="specialization_header sub_header">
          <span>Name</span>
          <span class="da_narrow">J</span>
          <span class="da_narrow">M</span>
          <span class="da_wide">Description</span>
          <span class="trash"></span>
          <span class="add addto_specialization" title="Add Specialization"></span>
        </div>
        <ul class="group list list_specialization">
          <li class="proto item">
            <div class="handle"><div></div></div>
            <span class="edit dslf dslf_specialization_name specialization_name" defaultString="Specialization"></span>
            <span class="edit dslf dslf_specialization_journeyman specialization_journeyman check readonly"></span>
            <span class="edit dslf dslf_specialization_master specialization_master check readonly"></span>
            <span class="edit dslf dslf_specialization_description specialization_description da_wide"></span>
          </li>
          <li class="item">
            <div class="handle"><div></div></div>
            <span class="edit dslf dslf_specialization_name specialization_name" defaultString="Specialization"></span>
            <span class="edit dslf dslf_specialization_journeyman specialization_journeyman check readonly"></span>
            <span class="edit dslf dslf_specialization_master specialization_master check readonly"></span>
            <span class="edit dslf dslf_specialization_description specialization_description da_wide"></span>
          </li>
          <span class="oldfields hidden">
            [{"specialization_name":"specialization_name"},
            {"specialization_journeyman":"specialization_journeyman"},
            {"specialization_master":"specialization_master"},
            {"specialization_description":"specialization_description"}]
          </span>
          <span class="dsf dsf_specialization hidden readonly"></span>
        </ul>
      </div>
      <div class="talent da_section">
          <span class="da_section_title">Talents</span>
          <div class="talent_header sub_header">
            <span>Name</span>
            <span class="da_narrow">J</span>
            <span class="da_narrow">M</span>
            <span class="da_wide">Description</span>
            <span class="trash"></span>
            <span class="add addto_talent" title="Add Talent"></span>
          </div>
          <ul class="group list list_talent">
            <li class="proto item">
              <div class="handle"><div></div></div>
              <span class="edit dslf dslf_talent_name talent_name" defaultString="Talent"></span>
              <span class="edit dslf dslf_talent_journeyman talent_journeyman check readonly"></span>
              <span class="edit dslf dslf_talent_master talent_master check readonly"></span>
              <span class="edit dslf dslf_talent_description talent_description da_wide"></span>
            </li>
            <li class="item">
              <div class="handle"><div></div></div>
              <span class="edit dslf dslf_talent_name talent_name" defaultString="Talent"></span>
              <span class="edit dslf dslf_talent_journeyman talent_journeyman check readonly"></span>
              <span class="edit dslf dslf_talent_master talent_master check readonly"></span>
              <span class="edit dslf dslf_talent_description talent_description da_wide"></span>
            </li>
            <span class="oldfields hidden">
              [{"talent_name":"talent_name"},
              {"talent_journeyman":"talent_journeyman"},
              {"talent_master":"talent_master"},
              {"talent_description":"talent_description"}]
            </span>
            <span class="dsf dsf_talent hidden readonly"></span>
          </ul>
        </div>
        <div class="power da_section">
          <span class="da_section_title">Powers</span>
          <div class="power_header sub_header">
            <span>Name</span>
            <span class="da_wide">Description</span>
            <span class="trash"></span>
            <span class="add addto_power" title="Add Power"></span>
          </div>
          <ul class="group list list_power">
            <li class="proto item">
              <div class="handle"><div></div></div>
              <span class="edit dslf dslf_power_name power_name" defaultString="Power"></span>
              <span class="edit dslf dslf_power_description power_description da_wide"></span>
            </li>
            <li class="item">
              <div class="handle"><div></div></div>
              <span class="edit dslf dslf_power_name power_name" defaultString="Power"></span>
              <span class="edit dslf dslf_power_description power_description da_wide"></span>
            </li>
            <span class="oldfields hidden">
              [{"power_name":"power_name"},
              {"power_description":"power_description"}]
            </span>
            <span class="dsf dsf_power hidden readonly"></span>
          </ul>
        </div>
    </div>
    <div class="da_tabcontent page page_spells">
      <div class="spell_wrapper">
        <div class="spell_power_display">
          <div class="spell_power_value">
            <span class="spell_power_value"></span>
          </div>
          <div class="spell_power_control spell_power_control_label">
            <span class="spell_focus_label">Focus</span>
          </div>
          <div class="spell_power_control spell_power_control_values">
            <span class="dsf dsf_blood_magic_focus spell_power_focus checkbox readonly"></span>
            <span class="dsf dsf_blood_magic_extra spell_power_extra checkbox readonly"></span>
          </div>
        </div>
        <div class="blood_magic da_section">
          <span class="da_section_title">Blood Magic Spells</span>
          <div class="blood_magic_header sub_header">
            <span>Name</span>
            <span>Type</span>
            <span class="da_narrow">Cost</span>
            <span>Cast Time</span>
            <span class="da_narrow">TN</span>
            <span>Test</span>
            <span class="trash"></span>
            <span class="add addto_blood_magic" title="Add Spell"></span>
          </div>
          <ul class="group list list_blood_magic">
            <li class="proto item">
                <div class="handle"><div></div></div>
                <span class="edit dslf dslf_blood_magic_name blood_magic_name" defaultString="Spell"></span>
                <span class="edit dslf dslf_blood_magic_type blood_magic_type"></span>
                <span class="edit dslf dslf_blood_magic_cost blood_magic_cost da_narrow"></span>
                <span class="edit dslf dslf_blood_magic_time blood_magic_time"></span>
                <span class="edit dslf dslf_blood_magic_tn blood_magic_tn da_narrow"></span>
                <span class="edit dslf dslf_blood_magic_test blood_magic_test"></span>
            </li>
            <li class="item">
                <div class="handle"><div></div></div>
                <span class="edit dslf dslf_blood_magic_name blood_magic_name" defaultString="Spell"></span>
                <span class="edit dslf dslf_blood_magic_type blood_magic_type"></span>
                <span class="edit dslf dslf_blood_magic_cost blood_magic_cost da_narrow"></span>
                <span class="edit dslf dslf_blood_magic_time blood_magic_time"></span>
                <span class="edit dslf dslf_blood_magic_tn blood_magic_tn da_narrow"></span>
                <span class="edit dslf dslf_blood_magic_test blood_magic_test"></span>
            </li>
            <span class="oldfields hidden">
              [{"blood_magic_name":"blood_magic_name"},
              {"blood_magic_type":"blood_magic_type"},
              {"blood_magic_cost":"blood_magic_cost"},
              {"blood_magic_time":"blood_magic_time"},
              {"blood_magic_tn":"blood_magic_tn"},
              {"blood_magic_test":"blood_magic_test"}]
            </span>
            <span class="dsf dsf_blood_magic hidden readonly"></span>
          </ul>
        </div>
      </div>

      <div class="spell_wrapper">
        <div class="spell_power_display">
          <div class="spell_power_value">
            <span class="spell_power_value"></span>
          </div>
          <div class="spell_power_control spell_power_control_label">
            <span class="spell_focus_label">Focus</span>
          </div>
          <div class="spell_power_control spell_power_control_values">
            <span class="dsf dsf_creation_magic_focus spell_power_focus checkbox readonly"></span>
            <span class="dsf dsf_creation_magic_extra spell_power_extra checkbox readonly"></span>
          </div>
        </div>
        <div class="creation_magic da_section">
          <span class="da_section_title">Creation Magic Spells</span>
          <div class="creation_magic_header sub_header">
            <span>Name</span>
            <span>Type</span>
            <span class="da_narrow">Cost</span>
            <span>Cast Time</span>
            <span class="da_narrow">TN</span>
            <span>Test</span>
            <span class="trash"></span>
            <span class="add addto_creation_magic" title="Add Spell"></span>
          </div>
          <ul class="group list list_creation_magic">
            <li class="proto item">
                <div class="handle"><div></div></div>
                <span class="edit dslf dslf_creation_magic_name creation_magic_name" defaultString="Spell"></span>
                <span class="edit dslf dslf_creation_magic_type creation_magic_type"></span>
                <span class="edit dslf dslf_creation_magic_cost creation_magic_cost da_narrow"></span>
                <span class="edit dslf dslf_creation_magic_time creation_magic_time"></span>
                <span class="edit dslf dslf_creation_magic_tn creation_magic_tn da_narrow"></span>
                <span class="edit dslf dslf_creation_magic_test creation_magic_test"></span>
            </li>
            <li class="item">
                <div class="handle"><div></div></div>
                <span class="edit dslf dslf_creation_magic_name creation_magic_name" defaultString="Spell"></span>
                <span class="edit dslf dslf_creation_magic_type creation_magic_type"></span>
                <span class="edit dslf dslf_creation_magic_cost creation_magic_cost da_narrow"></span>
                <span class="edit dslf dslf_creation_magic_time creation_magic_time"></span>
                <span class="edit dslf dslf_creation_magic_tn creation_magic_tn da_narrow"></span>
                <span class="edit dslf dslf_creation_magic_test creation_magic_test"></span>
            </li>
            <span class="oldfields hidden">
              [{"creation_magic_name":"creation_magic_name"},
              {"creation_magic_type":"creation_magic_type"},
              {"creation_magic_cost":"creation_magic_cost"},
              {"creation_magic_time":"creation_magic_time"},
              {"creation_magic_tn":"creation_magic_tn"},
              {"creation_magic_test":"creation_magic_test"}]
            </span>
            <span class="dsf dsf_creation_magic hidden readonly"></span>
          </ul>
        </div>
      </div>

      <div class="spell_wrapper">
        <div class="spell_power_display">
          <div class="spell_power_value">
            <span class="spell_power_value"></span>
          </div>
          <div class="spell_power_control spell_power_control_label">
            <span class="spell_focus_label">Focus</span>
          </div>
          <div class="spell_power_control spell_power_control_values">
            <span class="dsf dsf_entropy_magic_focus spell_power_focus checkbox readonly"></span>
            <span class="dsf dsf_entropy_magic_extra spell_power_extra checkbox readonly"></span>
          </div>
        </div>
        <div class="entropy_magic da_section">
          <span class="da_section_title">Entropy Magic Spells</span>
          <div class="entropy_magic_header sub_header">
            <span>Name</span>
            <span>Type</span>
            <span class="da_narrow">Cost</span>
            <span>Cast Time</span>
            <span class="da_narrow">TN</span>
            <span>Test</span>
            <span class="trash"></span>
            <span class="add addto_entropy_magic" title="Add Spell"></span>
          </div>
          <ul class="group list list_entropy_magic">
            <li class="proto item">
                <div class="handle"><div></div></div>
                <span class="edit dslf dslf_entropy_magic_name entropy_magic_name" defaultString="Spell"></span>
                <span class="edit dslf dslf_entropy_magic_type entropy_magic_type"></span>
                <span class="edit dslf dslf_entropy_magic_cost entropy_magic_cost da_narrow"></span>
                <span class="edit dslf dslf_entropy_magic_time entropy_magic_time"></span>
                <span class="edit dslf dslf_entropy_magic_tn entropy_magic_tn da_narrow"></span>
                <span class="edit dslf dslf_entropy_magic_test entropy_magic_test"></span>
            </li>
            <li class="item">
                <div class="handle"><div></div></div>
                <span class="edit dslf dslf_entropy_magic_name entropy_magic_name" defaultString="Spell"></span>
                <span class="edit dslf dslf_entropy_magic_type entropy_magic_type"></span>
                <span class="edit dslf dslf_entropy_magic_cost entropy_magic_cost da_narrow"></span>
                <span class="edit dslf dslf_entropy_magic_time entropy_magic_time"></span>
                <span class="edit dslf dslf_entropy_magic_tn entropy_magic_tn da_narrow"></span>
                <span class="edit dslf dslf_entropy_magic_test entropy_magic_test"></span>
            </li>
            <span class="oldfields hidden">
              [{"entropy_magic_name":"entropy_magic_name"},
              {"entropy_magic_type":"entropy_magic_type"},
              {"entropy_magic_cost":"entropy_magic_cost"},
              {"entropy_magic_time":"entropy_magic_time"},
              {"entropy_magic_tn":"entropy_magic_tn"},
              {"entropy_magic_test":"entropy_magic_test"}]
            </span>
            <span class="dsf dsf_entropy_magic hidden readonly"></span>
          </ul>
        </div>
      </div>
      <div class="spell_wrapper">
          <div class="spell_power_display">
            <div class="spell_power_value">
              <span class="spell_power_value"></span>
            </div>
            <div class="spell_power_control spell_power_control_label">
              <span class="spell_focus_label">Focus</span>
            </div>
            <div class="spell_power_control spell_power_control_values">
              <span class="dsf dsf_primal_magic_focus spell_power_focus checkbox readonly"></span>
              <span class="dsf dsf_primal_magic_extra spell_power_extra checkbox readonly"></span>
            </div>
          </div>
          <div class="primal_magic da_section">
            <span class="da_section_title">Primal Magic Spells</span>
            <div class="primal_magic_header sub_header">
              <span>Name</span>
              <span>Type</span>
              <span class="da_narrow">Cost</span>
              <span>Cast Time</span>
              <span class="da_narrow">TN</span>
              <span>Test</span>
              <span class="trash"></span>
              <span class="add addto_primal_magic" title="Add Spell"></span>
            </div>
            <ul class="group list list_primal_magic">
              <li class="proto item">
                  <div class="handle"><div></div></div>
                  <span class="edit dslf dslf_primal_magic_name primal_magic_name" defaultString="Spell"></span>
                  <span class="edit dslf dslf_primal_magic_type primal_magic_type"></span>
                  <span class="edit dslf dslf_primal_magic_cost primal_magic_cost da_narrow"></span>
                  <span class="edit dslf dslf_primal_magic_time primal_magic_time"></span>
                  <span class="edit dslf dslf_primal_magic_tn primal_magic_tn da_narrow"></span>
                  <span class="edit dslf dslf_primal_magic_test primal_magic_test"></span>
              </li>
              <li class="item">
                  <div class="handle"><div></div></div>
                  <span class="edit dslf dslf_primal_magic_name primal_magic_name" defaultString="Spell"></span>
                  <span class="edit dslf dslf_primal_magic_type primal_magic_type"></span>
                  <span class="edit dslf dslf_primal_magic_cost primal_magic_cost da_narrow"></span>
                  <span class="edit dslf dslf_primal_magic_time primal_magic_time"></span>
                  <span class="edit dslf dslf_primal_magic_tn primal_magic_tn da_narrow"></span>
                  <span class="edit dslf dslf_primal_magic_test primal_magic_test"></span>
              </li>
              <span class="oldfields hidden">
                [{"primal_magic_name":"primal_magic_name"},
                {"primal_magic_type":"primal_magic_type"},
                {"primal_magic_cost":"primal_magic_cost"},
                {"primal_magic_time":"primal_magic_time"},
                {"primal_magic_tn":"primal_magic_tn"},
                {"primal_magic_test":"primal_magic_test"}]
              </span>
              <span class="dsf dsf_primal_magic hidden readonly"></span>
            </ul>
          </div>
        </div>

        <div class="spell_wrapper">
            <div class="spell_power_display">
              <div class="spell_power_value">
                <span class="spell_power_value"></span>
              </div>
              <div class="spell_power_control spell_power_control_label">
                <span class="spell_focus_label">Focus</span>
              </div>
              <div class="spell_power_control spell_power_control_values">
                <span class="dsf dsf_spirit_magic_focus spell_power_focus checkbox readonly"></span>
                <span class="dsf dsf_spirit_magic_extra spell_power_extra checkbox readonly"></span>
              </div>
            </div>
            <div class="spirit_magic da_section">
              <span class="da_section_title">Spirit Magic Spells</span>
              <div class="spirit_magic_header sub_header">
                <span>Name</span>
                <span>Type</span>
                <span class="da_narrow">Cost</span>
                <span>Cast Time</span>
                <span class="da_narrow">TN</span>
                <span>Test</span>
                <span class="trash"></span>
                <span class="add addto_spirit_magic" title="Add Spell"></span>
              </div>
              <ul class="group list list_spirit_magic">
                <li class="proto item">
                    <div class="handle"><div></div></div>
                    <span class="edit dslf dslf_spirit_magic_name spirit_magic_name" defaultString="Spell"></span>
                    <span class="edit dslf dslf_spirit_magic_type spirit_magic_type"></span>
                    <span class="edit dslf dslf_spirit_magic_cost spirit_magic_cost da_narrow"></span>
                    <span class="edit dslf dslf_spirit_magic_time spirit_magic_time"></span>
                    <span class="edit dslf dslf_spirit_magic_tn spirit_magic_tn da_narrow"></span>
                    <span class="edit dslf dslf_spirit_magic_test spirit_magic_test"></span>
                </li>
                <li class="item">
                    <div class="handle"><div></div></div>
                    <span class="edit dslf dslf_spirit_magic_name spirit_magic_name" defaultString="Spell"></span>
                    <span class="edit dslf dslf_spirit_magic_type spirit_magic_type"></span>
                    <span class="edit dslf dslf_spirit_magic_cost spirit_magic_cost da_narrow"></span>
                    <span class="edit dslf dslf_spirit_magic_time spirit_magic_time"></span>
                    <span class="edit dslf dslf_spirit_magic_tn spirit_magic_tn da_narrow"></span>
                    <span class="edit dslf dslf_spirit_magic_test spirit_magic_test"></span>
                </li>
                <span class="oldfields hidden">
                  [{"spirit_magic_name":"spirit_magic_name"},
                  {"spirit_magic_type":"spirit_magic_type"},
                  {"spirit_magic_cost":"spirit_magic_cost"},
                  {"spirit_magic_time":"spirit_magic_time"},
                  {"spirit_magic_tn":"spirit_magic_tn"},
                  {"spirit_magic_test":"spirit_magic_test"}]
                </span>
                <span class="dsf dsf_spirit_magic hidden readonly"></span>
              </ul>
            </div>
          </div>
    </div>
    <div class="da_tabcontent page page_equipment">
      <div class="da_left">
        <div class="money da_section">
          <span  class="da_section_title">Money</span>
          <div class="money_header sub_header">
            <span>Gold</span>
            <span>Silver</span>
            <span>Copper</span>
          </div>
          <div class="da_content">
            <span class="dsf dsf_gold_coins">0</span>
            <span class="dsf dsf_silver_coins">0</span>
            <span class="dsf dsf_copper_coins">0</span>
          </div>
        </div>
      </div>
      <div class="da_right">
        <div class="exchange_rate da_section">
          <span class="da_section_title">Exchange Rate</span>
          <div class="da_content">
            <span>1 gp = 100 sp = 10,000 cp</span>
          </div>
        </div>
      </div>

      <div class="equipment da_section">
        <span class="da_section_title">Equipment</span>
        <div class="equipment_header sub_header">
          <span>Item</span>
          <span>Location</span>
          <span class="da_narrow">Weight</span>
          <span class="da_narrow">Value</span>
          <span class="da_narrow">Quantity</span>
          <span class="da_wide">Notes</span>
          <span class="trash"></span>
          <span class="add addto_equipment" title="Add Equipment"></span>
        </div>
        <ul class="group list list_equipment">
          <li class="proto item">
            <div class="handle"><div></div></div>
            <span class="edit dslf dslf_equipment_item equipment_item" defaultString="Item"></span>
            <span class="edit dslf dslf_equipment_location equipment_location"></span>
            <span class="edit dslf dslf_equipment_weight equipment_weight da_narrow"></span>
            <span class="edit dslf dslf_equipment_value equipment_value da_narrow"></span>
            <span class="edit dslf dslf_equipment_quantity equipment_quantity da_narrow"></span>
            <span class="edit dslf dslf_equipment_notes equipment_notes da_wide"></span>
          </li>
          <li class="item">
            <div class="handle"><div></div></div>
            <span class="edit dslf dslf_equipment_item equipment_item" defaultString="Item"></span>
            <span class="edit dslf dslf_equipment_location equipment_location"></span>
            <span class="edit dslf dslf_equipment_weight equipment_weight da_narrow"></span>
            <span class="edit dslf dslf_equipment_value equipment_value da_narrow"></span>
            <span class="edit dslf dslf_equipment_quantity equipment_quantity da_narrow"></span>
            <span class="edit dslf dslf_equipment_notes equipment_notes da_wide"></span>
          </li>
          <span class="oldfields hidden">
            [{"equipment_item":"equipment_item"},
            {"equipment_location":"equipment_location"},
            {"equipment_weight":"equipment_weight"},
            {"equipment_value":"equipment_value"},
            {"equipment_quantity":"equipment_quantity"},
            {"equipment_notes":"equipment_notes"}]
          </span>
          <span class="dsf dsf_equipment hidden readonly"></span>
        </ul>
      </div>
    </div>

    <div class="da_tabcontent page page_background">
      <div class="da_left">
        <div class="goals da_section">
          <span class="da_section_title">Goals</span>
          <span class="dsf dsf_goals"></span>
        </div>
      </div>
      <div class="da_right">
        <div class="ties da_section">
            <span class="da_section_title">Ties</span>
            <span class="dsf dsf_ties"></span>
        </div>
      </div>
      <div class="biography da_section">
          <span class="da_section_title">Biography</span>
          <span class="dsf dsf_bio readonly"></span>
      </div>
    </div>
    <div class="da_tabcontent page page_credits">
      <p>
        This character sheet for the <a href="https://greenronin.com/dragonagerpg/">Dragon Age RPG</a> was created by
        <span class="dsf dsf_dst_author readonly">Author</span>. It uses the 
        <a href="https://github.com/ChainsawXIV/DST">DST modules</a>
        by <a href="https://www.obsidianportal.com/profile/ChainsawXIV">ChainsawXIV</a>.
        The souce for this sheet is available from
        <a href="https://github.com/humburg/dragon_age_dst">GitHub</a>.
      </p>
      <p>
        Dragon Age RPG is Copyright &copy; 2000 – 2018 Green Ronin Publishing, LLC. All Rights Reserved.
      </p>
      <p>
        Dragon art by Bioware (used without permission).
      </p>
      <p>
          <a href="https://icons8.com">Icon pack by Icons8</a>
      </p>
    </div>

    <div class="extension_storage hidden"></div>
  </div>

CSS

/****************************
* This is the CSS for the DST.
* Copy and paste this directly into the CSS textarea on obsidianportal.com
*****************************/
/* Google Fonts */
@import url('https://fonts.googleapis.com/css?family=IM+Fell+English+SC|Cinzel|Crimson+Text');

/* Chainsaw's modules */
@import url('https://chainsawxiv.github.io/DST/common/css/csx_dd4e_common.css');
@import url('https://chainsawxiv.github.io/DST/common/css/csx_check.css');

/* Common CSS classes */
.ds_dragonage .hidden {
  display: none!important;
}

.ds_dragonage.editable span.dsf {
  cursor: pointer;
}

.ds_dragonage span.dsf.dsf_name,
.ds_dragonage span.dsf.dsf_avatar_image {
  cursor: auto;
}


/* Two column layout */
.ds_dragonage .da_left {
  width: 365px;
  float: left;
  padding-right: 5px;
}

.ds_dragonage .da_right {
  margin-left: 365px;
  padding-left: 5px;
}

.ds_dragonage div.dsf,
.ds_dragonage div.dslf,
.ds_dragonage span {
  font-family: 'IM Fell English SC', serif;
}

.ds_dragonage .da_section {
  margin-bottom: 10px;
  border: 1px solid #810207;
  border-top-left-radius: 11px;
  border-top-right-radius: 11px;
  overflow: hidden;
}

.ds_dragonage .da_section .da_content {
  display: inline-block;
  font-weight: normal;
  font-size: small;
  vertical-align: middle;
  width: 100%;
}

.ds_dragonage .da_section .da_content .dsf,
.ds_dragonage .da_section .sub_header span
{
  display: inline-block;
  text-align: center;
}

.ds_dragonage .da_section {
  background-color: #ffffff;
}

.ds_dragonage .da_section .da_content div.row:nth-of-type(odd){
  background-color: #e0beb1;
}

.ds_dragonage span.da_section_title {
  display: block;
  width: 100%;
  height: 1.1em;
  font-weight: bold;
  text-align: center;
  font-family: 'Cinzel', serif;
  font-size: larger;
  color: white;
  background-color: #810207;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  padding-top: 0.05em;
}

.ds_dragonage .da_section div.sub_header {
  background-color: black;
  color: white;
  font-size: medium;
  font-weight: normal;
  text-align: left;
  padding-top: 2px;
  overflow: hidden;
}

.ds_dragonage .da_section .dsf {
  font-size: small;
}

/* Buttons to extend lists */
.ds_dragonage .sub_header span.add,
.ds_dragonage .sub_header span.trash {
  display: none!important;
}

.ds_dragonage.editable .sub_header span.add,
.ds_dragonage.editable .sub_header span.trash {
  display: inline-block!important;
  width: 15px!important;
  height: 15px!important;
  filter: brightness(150%);
}

/* Dynamic list elements */
.ds_dragonage .list {
  margin-top: 0;
  width: 100%;
  font-size: small;
}

.ds_dragonage .list .item div.edit{
  padding-top: 2px;
}

.ds_dragonage .list li.item:nth-last-of-type(odd){
  background-color: #e0beb1;
}

.ds_dragonage .list .item span {
  text-align: center;
}

/* Styling checkboxes */
.ds_dragonage .csx .check {
  text-align: center;
  margin: 0;
}

.ds_dragonage .csx .check .checkBorder {
  display: none;
  background-image:none;  
}

.ds_dragonage .csx .check .checkOff {
  background-image: url(https://github.com/humburg/dragon_age_dst/blob/master/docs/img/icons8-unchecked-checkbox-13.png?raw=true);
  background-size: 13px;
  background-position: 0;
  background-repeat: no-repeat;
  transition-property: box-shadow;
  transition-duration: 0.3s;
}

.ds_dragonage.editable .csx .edit.check .checkOff:hover {
  background-image: url(https://github.com/humburg/dragon_age_dst/blob/master/docs/img/icons8-unchecked-checkbox-13.png?raw=true);
  background-size: 13px;
  background-position: 0;
  background-repeat: no-repeat;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6);
  transition-property: box-shadow;
  transition-duration: 0.3s;
}

.ds_dragonage .csx .check .checkOn {
  background-image: url(https://github.com/humburg/dragon_age_dst/blob/master/docs/img/icons8-tick-box-13.png?raw=true);
  background-size: 13px;
  background-position: 0;
  background-repeat: no-repeat;
  transition-property: box-shadow;
  transition-duration: 0.3s;
}

.ds_dragonage.editable .csx .edit.check .checkOn:hover {
  background-image: url(https://github.com/humburg/dragon_age_dst/blob/master/docs/img/icons8-tick-box-13.png?raw=true);
  background-size: 13px;
  background-position: 0;
  background-repeat: no-repeat;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6);
  transition-property: box-shadow;
  transition-duration: 0.3s;
}

.ds_dragonage input[type=checkbox] {
  display: inline-block;
  width: 13px;
  height: 13px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  -o-appearance:none;
  outline: 0;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  margin-left: auto;
  margin-right: auto;
  margin-top: 1px;
  margin-bottom: 1px;
  transition-property: box-shadow;
  transition-duration: 0.3s;
}

.ds_dragonage.editable input[type=checkbox] {
  cursor: pointer;
}

.ds_dragonage input[type=checkbox]:not(:checked) {
  background-image: url(https://github.com/humburg/dragon_age_dst/blob/master/docs/img/icons8-unchecked-checkbox-13.png?raw=true);
}

.ds_dragonage input[type=checkbox]:checked {
  background-image: url(https://github.com/humburg/dragon_age_dst/blob/master/docs/img/icons8-tick-box-13.png?raw=true);
}

.ds_dragonage.editable input[type=checkbox]:hover{
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6);
  transition-property: box-shadow;
  transition-duration: 0.3s;
}

/* links */
.ds_dragonage a {
  color: black;
  text-decoration: none;
}

.ds_dragonage a:hover {
  text-decoration: underline;
}

.ds_dragonage a:active {
  color: #810207;
}

/****************************
* Tabbed interface
*****************************/
.ds_dragonage .da_tabs {
  overflow: hidden;
  background-color: black;
  width: 100%;
  margin-bottom: 5px;
}

/* Style the buttons that are used to open the tab content */
.ds_dragonage .da_tabs div,
.ds_dragonage .da_tabs .tab.tab_crunch:not(.active) {
  background-color: inherit;
  display: inline-block;
  float: none;
  padding: 5px 16px;
  transition: 0.3s;
  color: white;
  font-family: 'IM Fell English SC', serif;
  font-size: large;
  width: auto;
  height: 1.2em;
  position: relative;
}

/* Change background color of buttons on hover */
.ds_dragonage .da_tabs div:hover {
  background-color: #e0beb1;
  color: black;
  width: auto;
  height: 1.2em;
  float: none;
}

/* Create an active/current tablink class */
.ds_dragonage .da_tabs div.active {
  background-color: #810207;
  color: white;
  width: auto;
  height: 1.2em;
  float: none;
  position: relative;
  padding: 5px 16px;
}

/****************************
* Header
*****************************/
.ds_dragonage div.da_head {
  width: 100%;
  height: 180px;
  background-image: url(https://github.com/humburg/dragon_age_dst/blob/master/docs/img/dragon-age-logo.jpg?raw=true);
  background-repeat: no-repeat;
  background-position: right;
  background-color: white;
  position: relative;
}

.ds_dragonage .da_head .da_header_text {
  position: absolute;
  bottom: 20px;
}

.ds_dragonage .da_head .name {
  font-size: x-large;
}

.ds_dragonage .dsf_campaign {
  font-style: italic;
}

/****************************
* Appearance
*****************************/
.ds_dragonage .da_portrait,
.ds_dragonage .da_portrait img {
  display: inline-block;
  width: 150px;
}

.ds_dragonage .appearance_basics {
  display: inline-block;
  vertical-align: top;
  width: 205px;
}

.ds_dragonage .appearance .da_content .dsf,
.ds_dragonage .appearance .sub_header span {
  width: 100px;
}

.ds_dragonage .appearance .da_content .dsf.appearance_features,
.ds_dragonage .appearance .sub_header span.appearance_features {
  width: 200px;
}

.ds_dragonage .feature_header {
  margin-top: 5px;
}
/****************************
* Basic Info
*****************************/
.ds_dragonage .basic_info .da_content .dsf,
.ds_dragonage .basic_info .sub_header span,
.ds_dragonage .basic_info .da_content .level
{
  width: 85px;
}

.ds_dragonage .basic_info .da_content .level {
  float: right;
  text-align: center;
}

.ds_dragonage .basic_info .da_content .dsf_xp
{
  display: inline-block;
  width: auto;
}

.ds_dragonage .basic_info .da_content .dsf_level {
  display: inline-block;
  width: auto;
  padding-right: 3px;
}
.ds_dragonage .dsf_xp:before {
  content: " ("
}

.ds_dragonage .dsf_xp:after {
  content: " xp)"
}

.ds_dragonage .basic_info .language_header span,
.ds_dragonage .basic_info .language_values .dsf {
  width: 400px;
}

/****************************
* Ability Scores
*****************************/

.ds_dragonage .ability_score_header {
  overflow: hidden;
}
.ds_dragonage .ability_scores .da_content .ability_score div,
.ds_dragonage .ability_scores .da_content .ability_score span,
.ds_dragonage .ability_score_header span {
  display: inline-block;
  width: 125px;
}

.ds_dragonage .ability_scores .da_content .ability_score .row {
  width: 100%;
}

.ds_dragonage .ability_scores .ability_primary_header,
.ds_dragonage .da_content .ability_score_primary.dsf.checkbox {
  width: 50px;
  text-align: center;
}

.ds_dragonage .da_content div.ability_score_rating.dsf,
.ds_dragonage .da_content span.ability_score_rating.dsf,
.ds_dragonage .ability_scores .ability_rating_header {
  width: 50px;
}

.ds_dragonage .da_content .ability_score_focuses,
.ds_dragonage span.ability_focuses_header {
  width: 120px;
}

.ds_dragonage .da_content .ability_score_name {
  width: 118px;
  padding-left: 2px;
  font-weight: normal;
  text-align: left;
}

/****************************
* Combat Stats
*****************************/
.ds_dragonage .combat_stats {
  display: block;
}

.ds_dragonage .combat_stats_header span,
.ds_dragonage .combat_stats_values .dsf {
  display: inline-block;
  width: 85px;
}

.ds_dragonage .combat_stats_values {
  text-align: center;
}

/****************************
* Armor & Shield
*****************************/
.ds_dragonage .armor {
  overflow: hidden;
}

.ds_dragonage .armor_header span {
  display: block;
  float: left;
  width: 100px;
}

.ds_dragonage .shield_header span {
  display: block;
  float: left;
  width: 150px;
}

.ds_dragonage .shield_header span.da_trained,
.ds_dragonage .armor_header span.da_trained {
  float: right;
  width: 55px;
}

.ds_dragonage .shield_values,
.ds_dragonage .armor_values {
  overflow: hidden;
}

.ds_dragonage .armor_values .dsf{
  display: block;
  width: 100px;
  float: left;
  text-align: center;
}

.ds_dragonage .shield_values .dsf{
  display: block;
  width: 150px;
  float: left;
  text-align: center;
}

.ds_dragonage .shield_values .checkbox,
.ds_dragonage .armor_values .checkbox {
  width: 55px;
  float: right;
  text-align: center;
 }

/****************************
* Movement
*****************************/
.ds_dragonage .movement {
  display: block;
}

.ds_dragonage .movement_header span {
  display: block;
  float: left;
  width: 119px;
}

.ds_dragonage .movement_values_yrd {
  overflow: hidden;
}

.ds_dragonage .movement_values_yrd .dsf {
  display: block;
  float: left;
  width: 119px;
  text-align: center;
}

.ds_dragonage .movement_values_yrd .dsf:after {
  content: " yrd"
}
.ds_dragonage .movement_values_sq {
  overflow: hidden;
}

.ds_dragonage .movement_values_sq .dsf {
  display: block;
  float: left;
  width: 119px;
  text-align: center;
}

.ds_dragonage .movement_values_sq .dsf:after {
  content: " squares"
}

/****************************
* Melee Weapons
*****************************/
.ds_dragonage.editable .melee_header {
  padding-left: 14px;
}

.ds_dragonage .melee_header span,
.ds_dragonage .list_melee .item .edit {
  display: inline-block;
  width: 70px;
  text-align: center;
}

.ds_dragonage .melee_header .da_wide {
  width: 165px;
  height: 1em;
}

.ds_dragonage .list_melee .item .da_wide{
  display: inline-block;
  width: 165px;
}

.ds_dragonage .melee_weapons div.weapon_group_header {
  text-align: center;
  width: 100%;
}
.ds_dragonage .da_section .da_content .weapon_groups {
  padding-top: 5px;
  display: inline-block;
  width: 100%;
}

.ds_dragonage .weapon_groups .dsf {
  width: 100%;
}

/****************************
* Ranged Weapons
*****************************/
.ds_dragonage .ranged_weapons {
  width: 100%;
}

.ds_dragonage.editable .ranged_header {
  padding-left: 14px;
}
.ds_dragonage .ranged_header span,
.ds_dragonage .list_ranged .item .edit {
  display: inline-block;
  width: 120px;
  text-align: center;
}

.ds_dragonage .ranged_header .da_wide,
.ds_dragonage .list_ranged .item .da_wide {
  width: 185px;
}

.ds_dragonage .ranged_header .da_narrow,
.ds_dragonage .list_ranged .item .da_narrow {
  width: 90px;
}

.ds_dragonage .ranged_weapon_values {
  overflow: hidden;
}

.ds_dragonage .ranged_weapon_values {
  display: block;
  float: left;
  text-align: center;
  width: 130px;
}

/****************************
* Specializations & Talents
*****************************/
.ds_dragonage .page_talents .da_section,
.ds_dragonage .page_talents .da_section .da_section_title {
  width: 100%;
}

.ds_dragonage.editable .page_talents .sub_header{
  padding-left: 14px;
}

.ds_dragonage .page_talents .sub_header {
  display: inline-block;
  width: 100%;
}

.ds_dragonage .page_talents .sub_header span,
.ds_dragonage .page_talents .dslf {
  display: inline-block;
  float: none;
  text-align: center;
  width: 192px;
}

.ds_dragonage .specialization_header span.da_narrow,
.ds_dragonage .csx .specialization .list .item span.check,
.ds_dragonage .talent_header span.da_narrow,
.ds_dragonage .csx .talent .list .item span.check {
  width: 20px;
}

.ds_dragonage .specialization_header span.da_wide,
.ds_dragonage .specialization .list .item div.dslf.da_wide,
.ds_dragonage .talent_header span.da_wide,
.ds_dragonage .talent .list .item div.dslf.da_wide {
  width: 432px;
}


/****************************
* Powers
*****************************/
.ds_dragonage .power span.da_wide,
.ds_dragonage .power .dslf.da_wide {
  width: 480px;
}

/****************************
* Spells
*****************************/
.ds_dragonage .page_spells .spell_wrapper {
  position: relative;
}

.ds_dragonage .page_spells .da_section,
.ds_dragonage .page_spells .da_section span.da_section_title {
  width: 100%;
}

.ds_dragonage.editable .page_spells .sub_header {
  padding-left: 14px;
}
.ds_dragonage .page_spells .sub_header span,
.ds_dragonage .page_spells .dslf {
  display: block;
  float: left;
  text-align: center;
  width: 145px;
}

.ds_dragonage .page_spells span.da_narrow,
.ds_dragonage .page_spells .dslf.da_narrow {
  width: 50px;
}

/* Spell power */
.ds_dragonage div.spell_power_display {
  position: absolute;
  top: -8px;
  left: -5px;
}

.ds_dragonage div.spell_power_value {
  display: table;
  border-radius: 50%;
  height: 43px;
  width: 43px;
  background-color: #e0beb1;
  border: 4px solid #810207;
  text-align: center;
  background-image: url(https://github.com/humburg/dragon_age_dst/blob/master/docs/img/power.png?raw=true);
  background-repeat: no-repeat;
  background-size: 90%;
  background-position: center;
}

.ds_dragonage span.spell_power_value {
  display: table-cell;
  font-size: xx-large;
  font-family: 'Cinzel', serif;
  font-weight: bold;
  vertical-align: middle;
}

.ds_dragonage .spell_power_control {
  position: absolute;
  background-color: transparent;
  text-align: center;
  color: white;
  left: 650px;
  top: 12px;
}

.ds_dragonage .spell_power_control_values {
  left: 690px;
  top: 13px;
  width: 50px;
}

.ds_dragonage .spell_power_control_values input[type=checkbox] {
  filter: invert(1);
}


/* Background */
.ds_dragonage .page_background .dsf {
  width: 100%;
  min-height: 200px;
}

.ds_dragonage .page_background .biography{
  width: 100%;
}

/* Equipment */
.ds_dragonage .page_equipment .exchange_rate .da_content {
  text-align: center;
}

.ds_dragonage .page_equipment .money .sub_header span,
.ds_dragonage .page_equipment .money .da_content .dsf {
  width: 118px;
}

.ds_dragonage .page_equipment .equipment {
  width: 100%;
}

.ds_dragonage.editable .page_equipment .equipment .sub_header {
  padding-left: 14px;
}


.ds_dragonage .page_equipment .equipment .sub_header span,
.ds_dragonage .page_equipment .equipment .dslf {
  width: 130px;
  text-align: center;
}

.ds_dragonage .page_equipment .equipment .sub_header span.da_narrow,
.ds_dragonage .page_equipment .equipment .dslf.da_narrow {
  width: 60px;
}

.ds_dragonage .page_equipment .equipment .sub_header span.da_wide,
.ds_dragonage .page_equipment .equipment .dslf.da_wide {
  width: 225px;
}

JavaScript

/*
 * This is the javascript specific to the minimal4e DST
 * In this example, we're using some javascript to update the ability modifiers when someone changes their
 * level or their ability score.
 *
 * The key is to use the callback functions to catch the right events.
 * Read the top comments in characters.js to get a better idea of how the callbacks work.
 *
 * Copy and paste this directly into the javascript textarea on obsidianportal.com
 */

/* Global options for Chainsaw's modules */
csx_opts = {
	'defaultFieldValue':'???',
	'defaultContext': '',
	'isEditable': false
};

function csx_callback(which, context){
  // Provide default context
	if (context == undefined)
    context = csx_opts.defaultContext;
  switch(which){
    case 'edit':
      csx_edit(context);
      // Enable automatic updates
      var edit_fields = context.querySelectorAll('.dsf,.edit');
      var classes;
      var container_id;
      for (var i = 0; i < edit_fields.length; i++){
        classes = edit_fields[i].classList;
        for(var j=0; j < classes.length; j++){
          if(classes[j].startsWith('dsf_')){
            edit_fields[i].field_name = classes[j].replace('dsf_', '');
          }
          else if(classes[j].startsWith('dslf_')){
            edit_fields[i].field_name = classes[j].replace('dslf_', '');
          }
        }
        container_id = $(edit_fields[i]).closest('.ds_dragonage')[0].id;
        edit_fields[i].update = function(){dragonage_dataChange({'fieldValue':this.value(),
                                                                 'fieldName':this.field_name,
                                                                 'containerId':container_id,
                                                                 'isEditable':csx_opts.isEditable});};
      }
      break;
    case 'list':
      csx_list(context);
      var lists = context.querySelectorAll('.list');
      for(var i = 0; i < lists.length; i++){
        lists[i].itemAdded = function(item){
          csx_callback('edit', item);
          csx_callback('check', item);
        }
      }
      break;
    case 'check':
      csx_check(context);
      break;
    case 'tab':
      csx_tab(context);
      break;
  }
}

function include_script(source, type){
  var includes = document.createElement('script');
  includes.type = 'text/javascript';
  includes.src = source;
  includes.onload = function(){
    // Callback to use what you just loaded
    csx_callback(type, csx_opts.defaultContext);
  };
  document.body.appendChild(includes);
}

function dragonage_dataPreLoad(options) {
  // Called just before the data is loaded.
  options['context'] = '#' + options['containerId'];
  csx_opts['defaultContext'] = document.getElementById(options.containerId);
  csx_opts['isEditable'] = options.isEditable;
  window.chars = aisleten.characters;
  window.chars.jeditablePlaceholder = csx_opts.defaultFieldValue;
}

function dragonage_dataPostLoad(options) {
  // Called just after the data is loaded.
  options['context'] = '#' + options['containerId'];
  csx_opts['defaultContext'] = document.getElementById(options.containerId);
  csx_opts['isEditable'] = options.isEditable;

  // Ensure Dex based calculations are up to date
  if(jQuery(options['context'] + ' .dsf_dexterity').html()){
    dragonage_apply_armor_penalty(options);
  }

  // Ensure Speed based calculations are up to date
  if(!jQuery(options['context'] + ' .dsf_speed').html()){
    jQuery(options['context'] + ' .dsf_speed').html(dragonage_speed(options));
    dragonage_speed_update(options);
  }

  // Ensure magic calculations are up to date
  if(jQuery(options['context'] + ' .dsf_magic').html()){
    dragonage_update_magic(options);
  }

  // Import Chainsaw's javascript
  include_script('https://chainsawxiv.github.io/DST/common/js/csx_list.js', 'list');
  include_script('https://chainsawxiv.github.io/DST/common/js/csx_check.js', 'check');
  include_script('https://chainsawxiv.github.io/DST/common/js/csx_edit.js', 'edit');
  include_script('https://chainsawxiv.github.io/DST/common/js/csx_tab.js', 'tab');
}

function dragonage_dataPreSave(options) {
  // Called just before the data is saved to the server.
  options['context'] = '#' + options['containerId'];
  csx_opts['defaultContext'] = document.getElementById(options.containerId);
  csx_opts['isEditable'] = options.isEditable;

  // Prepare Chainsaw's modules for saving
  // Default the context if not set
  var context = csx_opts.defaultContext;

  // Bake everything down to its field values
  var edits = context.querySelectorAll('.dsf:not(.readonly),.edit');
  for (var i = 0; i < edits.length; i++){
    edits[i].unrender();
  }

  var lists = context.querySelectorAll('.list');
  for (var i = 0; i < lists.length; i++){
    lists[i].unrender();
  }
}

function dragonage_dataChange(options) {
  // Called immediately after a data value is changed.
  options['context'] = '#' + options['containerId'];
  csx_opts['defaultContext'] = document.getElementById(options.containerId);
  csx_opts['isEditable'] = options.isEditable;

  var field = options['fieldName'];
  var val = options['fieldValue'];

  if(field == 'dexterity') {
    dragonage_dexterity_update(options);
  }

  if(field == 'magic' || field.endsWith('_magic_focus') || field.endsWith('_magic_extra')){
    dragonage_update_magic(options);
  }

  if(field == 'speed') {
    dragonage_speed_update(options);
  }

  if(field == 'armor_penalty') {
    dragonage_dexterity_update(options);
  }

  if(field == 'armor_trained') {
    dragonage_dexterity_update(options);
  }

  if(field == 'shield_bonus') {
    jQuery('.dsf_defense').html(dragonage_defense(options))
  }

  if(field == 'shield_trained'){
    jQuery('.dsf_defense').html(dragonage_defense(options))
  }

}

/* Computing derived stats */
function dragonage_dexterity_update(options) {
  dragonage_apply_armor_penalty(options);
  jQuery(options['context'] + ' .dsf_speed').html(dragonage_speed(options));
  dragonage_speed_update(options);
  jQuery(options['context'] + ' .dsf_defense').html(dragonage_defense(options))
}

function dragonage_speed_update(options) {
  var context = options['context'];
  jQuery(context + ' .dsf_move_yrd').html(dragonage_move_distance(context));
  jQuery(context + ' .dsf_charge_yrd').html(dragonage_charge_distance(context));
  jQuery(context + ' .dsf_run_yrd').html(dragonage_run_distance(context));
  jQuery(context + ' .dsf_move_sq').html(dragonage_move_squares(context));
  jQuery(context + ' .dsf_charge_sq').html(dragonage_charge_squares(context));
  jQuery(context + ' .dsf_run_sq').html(dragonage_run_squares(context));
}

function dragonage_update_magic(options){
  var spell_power = jQuery(options['context'] + ' .spell_power_display');
  for(var i = 0; i < spell_power.length; i++){
    dragonage_update_spell_power(spell_power[i], options);
  }
}

function dragonage_update_spell_power(container, options){
  var magic = parseInt(jQuery(options['context'] + ' .dsf_magic').html());
  var focus = parseInt($(container).find('.spell_power_focus input').val()) * 2 +
              parseInt($(container).find('.spell_power_extra input').val());
  $(container).find('span.spell_power_value').html(10 + magic + focus);
}

 /* The armor penalty is never positive but this is ambiguous in the book.
     Some people may prefer to specify a positive number so we flip the sign if necessary.
  */
function dragonage_armor_penalty(penalty_type){
  var penalty = 0;

  // Armor penalty applies to Dex if untrained but only speed if trained.
  // Check here to avoid applying the penalty to speed twice in the untrained case.
  if(penalty_type == 'speed' && jQuery('.dsf_armor_trained input').val() == "0" ||
     penalty_type == 'dex' && jQuery('.dsf_armor_trained input').val() == "1"){
    return 0;
  }

  if(jQuery('.dsf_armor_penalty').html()){
    penalty = parseInt(jQuery('.dsf_armor_penalty').html());
  }
  if(penalty > 0){
    penalty = -1 * penalty;
  }
  return penalty;
}

function dragonage_apply_armor_penalty(options){
  var context = options['context'];
  var dex = jQuery(context + ' .dsf_dexterity').html();
    if(dex){
      dex = parseInt(dex);
      var penalty = dragonage_armor_penalty('dex');
      if(penalty != 0 && jQuery(context + ' .dsf_armor_trained input').val() == "0"){
        dex = dex + penalty;
      }
      jQuery(context + ' span.dexterity_actual').html(dex);
    }
}

/* Compute Defense value */
function dragonage_shield_bonus(options){
  var context = options['context'];
  var bonus = jQuery(context + ' .dsf_shield_bonus').html();
  if(bonus){
    bonus = parseInt(bonus);
    if(bonus > 0 && jQuery(context + ' .dsf_shield_trained input').val() == "0"){
      bonus = 1;
    }
  }
  return bonus;
}

function dragonage_defense(options){
  var context = options['context'];
  var dex = parseInt(jQuery(context + ' span.dexterity_actual').html());
  return 10 + dex + dragonage_shield_bonus(options);
}

/* Speed and movement distance calculations. */
function dragonage_speed(options) {
  var context = options['context'];

  var base_speed = 10;
  var dex = parseInt(jQuery(context + ' .dexterity_actual').html());
  var penalty = dragonage_armor_penalty('speed');

  var race = jQuery(context + ' .dsf_race').html();
  if(race.toLowerCase() == 'dwarf'){
    base_speed = 8;
  }
  else if(race.toLowerCase() == 'elf') {
    base_speed = 12;
  }
  return base_speed + dex + penalty;
}

function dragonage_move_distance(context) {
  var speed = parseInt(jQuery(context + ' .dsf_speed').html());
  return speed;
}

function dragonage_charge_distance(context) {
  var speed = parseInt(jQuery(context + ' .dsf_speed').html());
  return Math.floor(speed/2.0);
}

function dragonage_run_distance(context) {
  var speed = parseInt(jQuery(context + ' .dsf_speed').html());
  return speed*2;
}

function dragonage_move_squares(context) {
  return Math.floor(dragonage_move_distance(context)/2.0);
}

function dragonage_charge_squares(context) {
  return Math.floor(dragonage_charge_distance(context)/2.0);
}

function dragonage_run_squares(context) {
  return Math.floor(dragonage_run_distance(context)/2.0);
}

Back

Dragon Age RPG

Create Your Campaign

Just One More Step

Just A Little More Info

Use a Social Account