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

kallak_PF2e

Author: Kallak

Slug: kallak_PF2e

System: Pathfinder RPG 2e

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="sheet-container">
	<div class="sheet-notes"><!-- NOTES -->
		Attention!<br>
		This sheet works best with character images that are portrait-oriented rectangles.<br>
		Areas shaded in blue require your input. Areas in white are labels or auto-calculated values.
	</div>
	<div class="grid-1"><!-- SHEET TOP -->
		<div class="portrait"><!--PORTRAIT -->
			<div class="character-name">
				<div class="dsf dsf_name readonly"></div>
				<span class="portrait-label">Played by:</span>
				<div class="dsf dsf_player readonly">[NPC]</div>
			</div>
			<div class="dsf dsf_avatar_image"></div>
		</div>
		<div class="basic-info"><!-- BASIC INFO -->
			<div class="area-header">Basic Info</div>
			<div class="basic-info-grid">
				<div class="input ancestry">
					<div class="input-label">Ancestry and Heritage</div>
					<div class="dsf dsf_ancestry_and_heritage"></div>
				</div>
				<div class="input background">
					<div class="input-label">Background</div>
					<div class="dsf dsf_background"></div>
				</div>
				<div class="input size">
					<div class="input-label">Size</div>
					<div class="dsf dsf_size"></div>
				</div>
				<div class="input class">
					<div class="input-label">Class</div>
					<div class="dsf dsf_class"></div>
				</div>
				<div class="input alignment">
					<div class="input-label">Alignment</div>
					<div class="dsf dsf_alignment"></div>
				</div>
				<div class="input deity">
					<div class="input-label">Deity</div>
					<div class="dsf dsf_deity"></div>
				</div>
				<div class="input traits">
					<div class="input-label">Traits</div>
					<div class="dsf dsf_traits"></div>
				</div>
				<div class="input languages">
					<div class="input-label">Languages</div>
					<div class="dsf dsf_languages"></div>
				</div>
			</div>
		</div>
	</div>
	<div class="grid-tabs"><!-- TABS -->
		<div class="tab tab-1" onclick="kallak_PF2e_tabClick(1);">Statistics</div>
		<div class="tab tab-2" onclick="kallak_PF2e_tabClick(2);">Feats</div>
		<div class="tab tab-3" onclick="kallak_PF2e_tabClick(3);">Actions</div>
		<div class="tab tab-4" onclick="kallak_PF2e_tabClick(4);">Spells</div>
		<div class="tab tab-5" onclick="kallak_PF2e_tabClick(5);">Inventory</div>
		<div class="tab tab-6" onclick="kallak_PF2e_tabClick(6);">About</div>
	</div>
	<div class="page page-1"><!-- STATS -->
		<div class="grid-3">
			<div class="csx"><!-- ABILITY SCORES & CLASS DC -->
				<div class="area-header">Ability Scores</div>
				<div class="ability-label-grid">
					<div class="ability-label-ability">Ability</div>
					<div class="ability-label-score">Score</div>
					<div class="ability-label-mod">Mod</div>
					<div class="ability-label-key">Key</div>
				</div>
				<div class="ability-score-grid">
					<div class="grey-back"></div>
					<div class="attr-label">Strength</div>
					<div></div>
					<div class="abil-score">
						<div class="dsf dsf_str"></div>
					</div>
					<div class="abil-mod">
						<div class="dsf dsf_str_mod readonly"></div>
					</div>
					<span class="dsf dsf_str_key check readonly group_key"></span>
				</div>
				<div class="ability-score-grid">
					<div class="grey-back"></div>
					<div class="attr-label">Dexterity</div>
					<div class="abil-score">
						<div class="dsf dsf_dex"></div>
					</div>
					<div class="abil-mod">
						<div class="dsf dsf_dex_mod readonly"></div>
					</div>
					<span class="dsf dsf_dex_key check readonly group_key"></span>
				</div>
				<div class="ability-score-grid">
					<div class="grey-back"></div>
					<div class="attr-label">Constitution</div>
					<div class="abil-score">
						<div class="dsf dsf_con"></div>
					</div>
					<div class="abil-mod">
						<div class="dsf dsf_con_mod readonly"></div>
					</div>
					<span class="dsf dsf_con_key check readonly group_key"></span>
				</div>
				<div class="ability-score-grid">
					<div class="grey-back"></div>
					<div class="attr-label">Intelligence</div>
					<div class="abil-score">
						<div class="dsf dsf_int"></div>
					</div>
					<div class="abil-mod">
						<div class="dsf dsf_int_mod readonly"></div>
					</div>
					<span class="dsf dsf_int_key check readonly group_key"></span>
				</div>
				<div class="ability-score-grid">
					<div class="grey-back"></div>
					<div class="attr-label">Wisdom</div>
					<div class="abil-score">
						<div class="dsf dsf_wis"></div>
					</div>
					<div class="abil-mod">
						<div class="dsf dsf_wis_mod readonly"></div>
					</div>
					<span class="dsf dsf_wis_key check readonly group_key"></span>
				</div>
				<div class="ability-score-grid">
					<div class="grey-back"></div>
					<div class="attr-label">Charisma</div>
					<div class="abil-score">
						<div class="dsf dsf_cha"></div>
					</div>
					<div class="abil-mod">
						<div class="dsf dsf_cha_mod readonly"></div>
					</div>
					<span class="dsf dsf_cha_key check readonly group_key"></span>
				</div>
				<div class="area-header">Class DC</div>
				<div class="dc-label-grid">
					<div>Total</div>
					<div>Base</div>
					<div>Key</div>
					<div>T</div>
					<div>E</div>
					<div>M</div>
					<div>L</div>
					<div>Item</div>
				</div>
				<div class="dc-grid">
					<div class="grey-back"></div>
					<div class="dc-total">1</div>
					<div class="base-10">2</div>
					<div class="dc-key">3</div>
					<div class="teml-container">4</div>
					<div class="dc-item">5</div>
				</div>
			</div>
			<div>
				<div class="area-header">Armor Class</div>
				x
				<div class="area-header">Saving Throws</div>
				x
			</div>
			<div>
				<div class="area-header">Hit Points</div>
				x
				<div class="area-header">Perception</div>
				x
			</div>
		</div>
		<div class="grid-2">
			<div>
				<div class="area-header">Speed</div>
				x
				<div class="area-header">Weapon & Armor Proficiencies</div>
				x
				<div class="area-header">Melee & Ranged Strikes</div>
				x
			</div>
			<div>
				<div class="area-header">Skills</div>
				x
			</div>
		</div>
	</div>
	<div class="page page-2" style="display:none"><!-- FEATS -->
		<div class="grid-2">
			<div>
				<div class="area-header">Ancestral Feats and Abilities</div>
				<div class="entry">
					<div class="dsf dsf_ancestry_feats_1"></div>
					<div class="entry-label">Special 1st</div>
				</div>
				<div class="entry">
					<div class="dsf dsf_ancestry_feats_2"></div>
					<div class="entry-label">Heritage 1st</div>
				</div>
				<div class="entry">
					<div class="dsf dsf_ancestry_feats_3"></div>
					<div class="entry-label">Feat 1st</div>
				</div>
				<div class="entry">
					<div class="dsf dsf_ancestry_feats_4"></div>
					<div class="entry-label">Feat 5th</div>
				</div>
				<div class="entry">
					<div class="dsf dsf_ancestry_feats_5"></div>
					<div class="entry-label">Feat 9th</div>
				</div>
				<div class="entry">
					<div class="dsf dsf_ancestry_feats_6"></div>
					<div class="entry-label">Feat 13th</div>
				</div>
				<div class="entry">
					<div class="dsf dsf_ancestry_feats_7"></div>
					<div class="entry-label">Feat 17th</div>
				</div>
				<div class="area-header">Skill Feats</div>
				<div class="entry">
					<div class="dsf dsf_skill_feats_1"></div>
					<div class="entry-label">Background</div>
				</div>
				<div class="entry">
					<div class="dsf dsf_skill_feats_2"></div>
					<div class="entry-label">2nd</div>
				</div>
				<div class="entry">
					<div class="dsf dsf_skill_feats_3"></div>
					<div class="entry-label">4th</div>
				</div>
				<div class="entry">
					<div class="dsf dsf_skill_feats_4"></div>
					<div class="entry-label">6th</div>
				</div>
				<div class="entry">
					<div class="dsf dsf_skill_feats_5"></div>
					<div class="entry-label">8th</div>
				</div>
				<div class="entry">
					<div class="dsf dsf_skill_feats_6"></div>
					<div class="entry-label">10th</div>
				</div>
				<div class="entry">
					<div class="dsf dsf_skill_feats_7"></div>
					<div class="entry-label">12th</div>
				</div>
				<div class="entry">
					<div class="dsf dsf_skill_feats_8"></div>
					<div class="entry-label">14th</div>
				</div>
				<div class="entry">
					<div class="dsf dsf_skill_feats_9"></div>
					<div class="entry-label">16th</div>
				</div>
				<div class="entry">
					<div class="dsf dsf_skill_feats_10"></div>
					<div class="entry-label">18th</div>
				</div>
				<div class="entry">
					<div class="dsf dsf_skill_feats_11"></div>
					<div class="entry-label">20th</div>
				</div>
				<div class="area-header">General Feats</div>
				<div class="entry">
					<div class="dsf dsf_general_feats_1"></div>
					<div class="entry-label">3rd</div>
				</div>
				<div class="entry">
					<div class="dsf dsf_general_feats_2"></div>
					<div class="entry-label">7th</div>
				</div>
				<div class="entry">
					<div class="dsf dsf_general_feats_3"></div>
					<div class="entry-label">11th</div>
				</div>
				<div class="entry">
					<div class="dsf dsf_general_feats_4"></div>
					<div class="entry-label">15th</div>
				</div>
				<div class="entry">
					<div class="dsf dsf_general_feats_5"></div>
					<div class="entry-label">19th</div>
				</div>
			</div>
			<div>
				<div class="area-header">Class Feats and Abilities</div>
				<div class="entry">
					<div class="dsf dsf_class_feats_1"></div>
					<div class="entry-label">Feature 1st</div>
				</div>
				<div class="entry">
					<div class="dsf dsf_class_feats_2"></div>
					<div class="entry-label">Feature 1st</div>
				</div>
				<div class="entry">
					<div class="dsf dsf_class_feats_3"></div>
					<div class="entry-label">Feat 1st</div>
				</div>
				<div class="entry">
					<div class="dsf dsf_class_feats_4"></div>
					<div class="entry-label">Feat 2nd</div>
				</div>
				<div class="entry">
					<div class="dsf dsf_class_feats_5"></div>
					<div class="entry-label">Feature 3rd</div>
				</div>
				<div class="entry">
					<div class="dsf dsf_class_feats_6"></div>
					<div class="entry-label">Feat 4th</div>
				</div>
				<div class="entry">
					<div class="dsf dsf_class_feats_7"></div>
					<div class="entry-label">Feature 5th</div>
				</div>
				<div class="entry">
					<div class="dsf dsf_class_feats_8"></div>
					<div class="entry-label">Feat 6th</div>
				</div>
				<div class="entry">
					<div class="dsf dsf_class_feats_9"></div>
					<div class="entry-label">Feature 7th</div>
				</div>
				<div class="entry">
					<div class="dsf dsf_class_feats_10"></div>
					<div class="entry-label">Feat 8th</div>
				</div>
				<div class="entry">
					<div class="dsf dsf_class_feats_11"></div>
					<div class="entry-label">Feature 9th</div>
				</div>
				<div class="entry">
					<div class="dsf dsf_class_feats_12"></div>
					<div class="entry-label">Feat 10th</div>
				</div>
				<div class="entry">
					<div class="dsf dsf_class_feats_13"></div>
					<div class="entry-label">Feature 11th</div>
				</div>
				<div class="entry">
					<div class="dsf dsf_class_feats_14"></div>
					<div class="entry-label">Feat 12th</div>
				</div>
				<div class="entry">
					<div class="dsf dsf_class_feats_15"></div>
					<div class="entry-label">Feature 13th</div>
				</div>
				<div class="entry">
					<div class="dsf dsf_class_feats_16"></div>
					<div class="entry-label">Feat 14th</div>
				</div>
				<div class="entry">
					<div class="dsf dsf_class_feats_17"></div>
					<div class="entry-label">Feature 15th</div>
				</div>
				<div class="entry">
					<div class="dsf dsf_class_feats_18"></div>
					<div class="entry-label">Feat 16th</div>
				</div>
				<div class="entry">
					<div class="dsf dsf_class_feats_19"></div>
					<div class="entry-label">Feature 17th</div>
				</div>
				<div class="entry">
					<div class="dsf dsf_class_feats_20"></div>
					<div class="entry-label">Feat 18th</div>
				</div>
				<div class="entry">
					<div class="dsf dsf_class_feats_21"></div>
					<div class="entry-label">Feature 19th</div>
				</div>
				<div class="entry">
					<div class="dsf dsf_class_feats_22"></div>
					<div class="entry-label">Feat 20th</div>
				</div>
				<div class="area-header">Bonus Feats</div>
				<div class="entry">
					<div class="dsf dsf_bonus_feats_1"></div>
					<div class="entry-label">Bonus</div>
				</div>
				<div class="entry">
					<div class="dsf dsf_bonus_feats_2"></div>
					<div class="entry-label">Bonus</div>
				</div>
			</div>
		</div>
	</div>
	<div class="page page-3" style="display:none"><!-- ACTIONS -->
		<div class="grid-2">
			<div class="csx"><!-- ACTIONS AND ACTIVITIES -->
				<div class="area-header">Actions and Activities</div>
				<div class="sheet-notes-2">
					<span class="interface trash"></span>
					<span class="interface add addto_actions" title="Add Action or Activity"></span>
				</div>
				<ul class="group list list_actions">
					<li class="proto item">
						<div class="action-container">
							<div class="handle"><div></div></div>
							<div class="handle-space"></div>
							<div class="action-label">Name</div>
							<div class="dsf dslf dslf_action_name"></div>
							<div class="action-icons">
								<div class="action-checkbox">
									<span class="dsf dslf dslf_action_one checkbox readonly check"></span>
								</div>
								<div class="one-action"></div>
								<div class="action-checkbox">
									<span class="dsf dslf dslf_action_two checkbox readonly check"></span>
								</div>
								<div class="two-action"></div>
								<div class="action-checkbox">
									<span class="dsf dslf dslf_action_three checkbox readonly check"></span>
								</div>
								<div class="three-action"></div>
							</div>
							<div class="input action-traits">
								<div class="input-label">Traits</div>
								<div class="dsf dslf dslf_action_traits"></div>
							</div>
							<div class="input action-page">
								<div class="input-label">Book & Page</div>
								<div class="dsf dslf dslf_action_page"></div>
							</div>
							<div class="input action-description">
								<div class="input-label">Description</div>
								<div class="dsf dslf dslf_action_description"></div>
							</div>
						</div>
					</li>
					<span class="oldfields hidden">[{"action":"action_name","action_one":"action_one", "action_two":"action_two","action_three":"action_three","action_traits":"action_traits","action_page":"action_page","action_description":"action_description"}]</span>
					<span class="dsf dsf_actions readonly hidden"></span>
				</ul>
			</div>
			<div class="csx"><!-- FREE ACTIONS AND REACTIONS -->
				<div class="area-header">Free Actions and Reactions</div>
				<div class="sheet-notes-2">
					<span class="interface trash"></span>
					<span class="interface add addto_reactions" title="Add Reaction or Free Action"></span>
				</div>
				<ul class="group list list_reactions">
					<li class="proto item">
						<div class="action-container">
							<div class="handle"><div></div></div>
							<div class="handle-space"></div>
							<div class="action-label">Name</div>
							<div class="dsf dslf dslf_reaction_name"></div>
							<div class="action-icons">
								<div class="action-checkbox">
									<span class="dsf dslf dslf_reaction_free checkbox readonly check"></span>
								</div>
								<div class="free-action"></div>
								<div class="action-checkbox">
									<span class="dsf dslf dslf_reaction_reaction checkbox readonly check"></span>
								</div>
								<div class="reaction"></div>
								<div class="action-checkbox"></div>
								<div></div>
							</div>
							<div class="input action-traits">
								<div class="input-label">Traits</div>
								<div class="dsf dslf dslf_reaction_traits"></div>
							</div>
							<div class="input action-page">
								<div class="input-label">Book & Page</div>
								<div class="dsf dslf dslf_reaction_page"></div>
							</div>
							<div class="input action-description">
								<div class="input-label">Trigger/Description</div>
								<div class="dsf dslf dslf_reaction_description"></div>
							</div>
						</div>
					</li>
					<span class="oldfields hidden">[{"reaction":"reaction_name","reaction_free":"reaction_free", "reaction_reaction":"reaction_reaction","reaction_traits":"reaction_traits","reaction_page":"reaction_page","reaction_description":"reaction_description"}]</span>
					<span class="dsf dsf_reactions readonly hidden"></span>
				</ul>
			</div>
		</div>
	</div>
	<div class="page page-4" style="display:none"><!-- SPELLS -->
		<div class="grid-3">
			<div>
				<div class="area-header">Magical Tradition</div>
			</div>
			<div>
				<div class="area-header">Spell Attack Roll</div>
			</div>
			<div>
				<div class="area-header">Spell DC</div>
			</div>
		</div>
	</div>
	<div class="page page-5" style="display:none"><!-- INVENTORY -->
		<div class="grid-2">
			<div>
				<div class="area-header">Encumbrance</div>
			</div>
			<div>
				<div class="area-header">Currency</div>
				<div class="currency-grid">
					<div class="input2">
						<div class="dsf dsf_currency_cp"></div>
						<div class="input-label">CP</div>
					</div>
					<div class="input2">
						<div class="dsf dsf_currency_sp"></div>
						<div class="input-label">SP</div>
					</div>
					<div class="input2">
						<div class="dsf dsf_currency_gp"></div>
						<div class="input-label">GP</div>
					</div>
					<div class="input2">
						<div class="dsf dsf_currency_pp"></div>
						<div class="input-label">PP</div>
					</div>
				</div>
				<div class="input currency-notes">
					<div class="input-label">Notes</div>
					<div class="dsf dsf_currency_notes"></div>
				</div>
			</div>
		</div>
		<div class="area-header">Inventory</div>
	</div>
	<div class="page page-6" style="display:none"><!-- ABOUT -->
		<div class="grid-4">
			<div><!-- PERSONALITY -->
				<div class="area-header">Personality</div>
				<div class="personality">
					<div class="input">
						<div class="input-label">Attitude</div>
						<div class="dsf dsf_attitude"></div>
					</div>
					<div class="input">
						<div class="input-label">Beliefs</div>
						<div class="dsf dsf_beliefs"></div>
					</div>
					<div class="input">
						<div class="input-label">Likes</div>
						<div class="dsf dsf_likes"></div>
					</div>
					<div class="input">
						<div class="input-label">Dislikes</div>
						<div class="dsf dsf_dislikes"></div>
					</div>
					<div class="input">
						<div class="input-label">Catchphrases</div>
						<div class="dsf dsf_catchphrases"></div>
					</div>
				</div>
			</div>
			<div><!-- PHYSICAL DETAILS -->
				<div class="area-header">Physical Details</div>
				<div class="physical-details-grid">
					<div class="input ethnicity">
						<div class="input-label">Ethnicity</div>
						<div class="dsf dsf_ethnicity"></div>
					</div>
					<div class="input nationality">
						<div class="input-label">Nationality</div>
						<div class="dsf dsf_nationality"></div>
					</div>
					<div class="input birthplace">
						<div class="input-label">Birthplace</div>
						<div class="dsf dsf_birthplace"></div>
					</div>
					<div class="input height">
						<div class="input-label">Height</div>
						<div class="dsf dsf_height"></div>
					</div>
					<div class="input weight">
						<div class="input-label">Weight</div>
						<div class="dsf dsf_weight"></div>
					</div>
					<div class="input age">
						<div class="input-label">Age</div>
						<div class="dsf dsf_age"></div>
					</div>
					<div class="input sex">
						<div class="input-label">Sex or Gender</div>
						<div class="dsf dsf_gender"></div>
					</div>
				</div>
			</div>
		</div>
		<div class="area-header">Campaign Notes</div>
		<div class="campaign-notes-grid">
			<div class="input notes">
				<div class="input-label">Notes</div>
				<div class="dsf dsf_notes"></div>
			</div>
			<div class="input allies">
				<div class="input-label">Allies</div>
				<div class="dsf dsf_allies"></div>
			</div>
			<div class="input enemies">
				<div class="input-label">Enemies</div>
				<div class="dsf dsf_enemies"></div>
			</div>
			<div class="input organizations">
				<div class="input-label">Organizations</div>
				<div class="dsf dsf_organizations"></div>
			</div>
		</div>
		<div>
			<div class="area-header">Appearance</div>
			<div class="dsf dsf_appearance"></div>
			<div class="area-header">Character Biography</div>
			<div class="sheet-notes">
				Please use the Biography textfield below to insert the character's biography.
			</div>
			<div class="dsf dsf_bio"></div>
		</div>
	</div>
	<div class="footer"><!-- FOOTER -->
		<div class="dsf dsf_campaign readonly"></div>
		- A Pathfinder 2nd Edition Campaign
		<br>
		Character Sheet Template by:
		<div class="dsf dsf_dst_author readonly"></div>
	</div>
</div>

CSS

@import url(https://chainsawxiv.github.io/DST/common/css/csx_pathfinder_common.css);
.ds_kallak_PF2e .sheet-container {
	background-color: white;
	width: 100%;
}
/* SHEET NOTES */
.ds_kallak_PF2e .sheet-notes {
	display:none;
	border:1px solid red;
	border-radius:6px;
	box-shadow:3px 3px 3px #cccccc;
	text-align:center;
	font-size:16px;
	font-style:italic;
	margin-bottom:10px;
	font-variant: small-caps;
}
.ds_kallak_PF2e .sheet-notes-2 {
	display:none;
	border:1px solid black;
	box-shadow:1px 1px 1px #cccccc;
	text-align:center;
	font-size:16px;
	font-style:italic;
	margin-bottom:6px;
	height:20px;
	padding-top:3px;
}
.ds_kallak_PF2e.editable .sheet-notes,
.ds_kallak_PF2e.editable .sheet-notes-2 {
	display: block;
}
/* GRID STRUCTURES */
.ds_kallak_PF2e .grid-1 {
	display: grid;
	grid-template-columns: calc(33.33% - 3px) calc(66.66% - 2px);
	grid-gap: 6px;
	margin-bottom: 6px;
}
.ds_kallak_PF2e .grid-2 {
	display: grid;
	grid-template-columns: calc(50% - 3px) calc(50% - 3px);
	grid-gap: 6px;
	margin-bottom: 6px;
}
.ds_kallak_PF2e .grid-3 {
	display: grid;
	grid-template-columns: calc(33.33% - 3px) calc(33.33% - 4px) calc(33.33% - 4px);
	grid-gap: 6px;
	margin-bottom: 6px;
}
.ds_kallak_PF2e .grid-4 {
	display: grid;
	grid-template-columns: calc(66.66% - 1px) calc(33.33% - 4px);
	grid-gap: 6px;
	margin-bottom: 6px;
}
.ds_kallak_PF2e .grid-tabs {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
	margin-bottom: 6px;
}
/* TABS SETUP */
.ds_kallak_PF2e .tab {
	cursor: pointer;
	text-align: center;
	border-style: solid;
	border-width: 1px 1px 0px 1px;
	border-color: black;
	border-radius: 6px 6px 0px 0px;
	font-size: 18px;
	font-variant: small-caps;
}
.ds_kallak_PF2e .tab-1 {
}
.ds_kallak_PF2e .tab-2,
.ds_kallak_PF2e .tab-3,
.ds_kallak_PF2e .tab-4,
.ds_kallak_PF2e .tab-5,
.ds_kallak_PF2e .tab-6 {
	background-color: #cccccc;
	border-bottom: 1px solid black;
}
/* PAGE SETUP */
.ds_kallak_PF2e .page-1 {
}
.ds_kallak_PF2e .page-2,
.ds_kallak_PF2e .page-3,
.ds_kallak_PF2e .page-4,
.ds_kallak_PF2e .page-5,
.ds_kallak_PF2e .page-6 {
	display: none;
}
/* CHARACTER PORTRAIT */
.ds_kallak_PF2e .portrait {
	border-radius: 6px;
	overflow: hidden;
	position: relative;
	vertical-align: bottom;
	min-height: 48px;
}
.ds_kallak_PF2e .character-name {
	float: left;
	font-size: 14px;
	position: absolute;
	bottom: 0px;
	background-color: rgba(0, 0, 0, .6);
	color: white;
	width: 100%;
	text-align: center;
	border-radius: 6px;
}
.ds_kallak_PF2e .character-name a {
	color: white;
}
.ds_kallak_PF2e .dsf_name {
	font-size: 18px;
}
.ds_kallak_PF2e .portrait-label,
.ds_kallak_PF2e .dsf_player {
		font-variant: small-caps;
		font-size: 12px;
		display: inline;
		vertical-align: top;
}
/* BASIC INFO SECTION*/
.ds_kallak_PF2e .basic-info {
	align-self: end;
}
.ds_kallak_PF2e .basic-info-grid {
	display: grid;
	grid-gap: 3px;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
	grid-template-rows: 36px 36px 36px;
}
.ds_kallak_PF2e .ancestry {
	grid-area: 1/1/span 6/7;
}
.ds_kallak_PF2e .background {
	grid-area: 1/7/span 6/13;
}
.ds_kallak_PF2e .size {
	grid-area: 2/1/span 3/4;
}
.ds_kallak_PF2e .class {
	grid-area: 2/4/span 9/13;
}
.ds_kallak_PF2e .alignment {
	grid-area: 3/1/span 4/5;
}
.ds_kallak_PF2e .deity {
	grid-area: 3/5/span 4/9;
}
.ds_kallak_PF2e .traits{
	grid-area: 3/9/span 4/13;
}
.ds_kallak_PF2e .languages {
	grid-area: 4/1/span 12/13;
}
/* ABILITY SCORES*/
.ds_kallak_PF2e .ability-score-grid {
	display: grid;
	grid-template-columns: 123px 1fr 32px 32px 12px;
	grid-template-rows: 3px 3px 12px 3px 3px;
	grid-column-gap: 6px;
	margin-bottom: 6px;
}
.ds_kallak_PF2e .ability-label-grid div,
.ds_kallak_PF2e .dc-label-grid {
	font-size: 10px;
	font-variant: small-caps;
	line-height: 12px;
}
.ds_kallak_PF2e .ability-label-ability {
	grid-area: 1/1/2/2;
	margin-left: 6px;
	padding-left: 4px;
}
.ds_kallak_PF2e .ability-label-score {
	grid-area: 1/3/2/4;
	margin-left: -3px;
}
.ds_kallak_PF2e .ability-label-mod {
	grid-area: 1/4/2/5;
}
.ds_kallak_PF2e .ability-label-key {
	grid-area: 1/5/2/6;
	margin-left: -8px;
}
.ds_kallak_PF2e .ability-score-grid .attr-label {
	grid-area: 1/1/6/2;
	border: 1px solid black;
	height: 22px;
	line-height: 22px;
	font-size: 16px;
	background-color: white;
	padding: 0px 3px;
	font-variant: small-caps;
	box-shadow: 1px 1px 1px #cccccc;
	margin-left: 6px;
}
.ds_kallak_PF2e .ability-score-grid .abil-score {
	grid-area: 1/3/6/4;
	border: 1px solid black;
	background-color: white;
}
.ds_kallak_PF2e .ability-score-grid .abil-mod {
	grid-area: 1/4/6/5;
	border: 1px solid black;
	background-color: white;
}
.ds_kallak_PF2e .ability-score-grid .check {
	grid-area: 3/6/4/5;
	position: relative;
	top: 0px;
}
.ds_kallak_PF2e .grey-back {
	grid-area: 2/1/2/7;
	height:16px;
	border:1px solid black;
	background-color:#cccccc;
}
.ds_kallak_PF2e .abil-score .dsf,
.ds_kallak_PF2e .abil-mod .dsf {
	text-align: center;
	font-size: 16px;
	line-height: 22px;
}
.ds_kallak_PF2e .ability-label-grid {
	display: grid;
	grid-template-columns: 123px 1fr 32px 32px 12px;
	grid-column-gap: 6px;
}
/* CLASS DC*/
.ds_kallak_PF2e .dc-label-grid {
	display: grid;
}
.ds_kallak_PF2e .dc-grid {
	display: grid;
	grid-template-columns: 6px 32px 6px 1fr 6px 32px 6px 32px 6px 48px 6px 32px 6px;
	grid-template-rows: 3px 3px 12px 3px 3px;
}
.ds_kallak_PF2e .dc-grid .dc-total {
	grid-area: 1/2/6/3;
	border: 1px solid black;
	background-color: white;
}
.ds_kallak_PF2e .dc-grid .base-10 {
	grid-area: 1/6/6/7;
	border: 1px solid black;
	background-color: white;
}
.ds_kallak_PF2e .dc-grid .dc-key {
	grid-area: 1/8/6/9;
	border: 1px solid black;
	background-color: white;
}
.ds_kallak_PF2e .dc-grid .teml-container {
	grid-area: 1/10/6/11;
}
.ds_kallak_PF2e .dc-grid .dc-item {
	grid-area: 1/12/6/13;
	border: 1px solid black;
	background-color: white;
}
.ds_kallak_PF2e .dc-grid .grey-back {
	grid-area: 2/1/2/14;
}
/* ACTIONS PAGE */
.ds_kallak_PF2e .action-container {
	border: 2px outset black;
	box-shadow: 1px 1px 1px #cccccc;
	display: grid;
	padding: 6px 8px 6px 0px;
	grid-template-columns: 8px 45px 1fr 80px;
	grid-row-gap: 6px;
	grid-template-rows: 26px 36px;
}
.ds_kallak_PF2e .action-label {
	background-color: #cccccc;
	border: 1px solid black;
	text-align: center;
	font-size: 12px;
	line-height: 24px;
	font-variant: small-caps;
	grid-area: 1/2/1/3;
}
.ds_kallak_PF2e .one-action {
	height: 24px;
	width: 24px;
	background-image: url(https://blog.obsidianportal.com/wp-content/uploads/2020/04/OneAction.png);
	background-size: auto 24px;
	background-repeat: no-repeat;
	margin-left: 6px;
}
.ds_kallak_PF2e .two-action {
	height: 24px;
	width: 38px;
	background-image: url(https://blog.obsidianportal.com/wp-content/uploads/2020/04/TwoActions.png);
	background-size: auto 24px;
	background-repeat: no-repeat;
	margin-left: 6px;
}
.ds_kallak_PF2e .three-action {
	height: 24px;
	width: 50px;
	background-image: url(https://blog.obsidianportal.com/wp-content/uploads/2020/04/ThreeActions.png);
	background-size: auto 24px;
	background-repeat: no-repeat;
	margin-left: 6px;
}
.ds_kallak_PF2e .reaction {
	height: 24px;
	background-image: url(https://blog.obsidianportal.com/wp-content/uploads/2020/04/Reaction.png);
	background-size: auto 24px;
	background-repeat: no-repeat;
	margin-left: 6px;
}
.ds_kallak_PF2e .free-action {
	height: 24px;
	background-image: url(https://blog.obsidianportal.com/wp-content/uploads/2020/04/FreeAction.png);
	background-size: auto 24px;
	background-repeat: no-repeat;
	margin-left: 6px;
}
.ds_kallak_PF2e .action-container .input .dsf {
	padding-left: 3px;
}
.ds_kallak_PF2e .action-container .dslf_action_name,
.ds_kallak_PF2e .action-container .dslf_reaction_name {
	padding-left: 6px;
	border-top: 1px solid black;
	border-right: 1px solid black;
	border-bottom: 1px solid black;
	grid-area: 1/3/1/5
}
.ds_kallak_PF2e .action-container .action-icons {
	display: grid;
	grid-template-columns: 12px 1fr;
	grid-area: 2/4/4/5;
	border: 1px solid black;
	padding: 1px 1px 1px 4px;
}
.ds_kallak_PF2e .action-container .action-checkbox {
	display: grid;
	grid-template-columns: 12px;
	grid-template-rows: 6px 12px 6px;
}
.ds_kallak_PF2e .action-checkbox .checkBorder,
.ds_kallak_PF2e .ability-score-grid .checkBorder {
	position: relative;
	top: -6px;
}
.ds_kallak_PF2e .dslf_action_one,
.ds_kallak_PF2e .dslf_action_two,
.ds_kallak_PF2e .dslf_action_three,
.ds_kallak_PF2e .dslf_reaction_free,
.ds_kallak_PF2e .dslf_reaction_reaction {
	grid-area: 2/1/2/3;
}
.ds_kallak_PF2e .action-container .input {
	min-height: 34px;
	height: auto;
	box-shadow: none;
}
.ds_kallak_PF2e .action-container .action-traits {
	grid-area: 2/2/3/4;
	margin-right: 6px;
}
.ds_kallak_PF2e .action-container .action-page {
	grid-area: 3/2/4/4;
	margin-right: 6px;
}
.ds_kallak_PF2e .action-container .action-description {
	grid-area: 4/2/5/5;
	min-height: 81px;
}
.ds_kallak_PF2e .action-container .action-description .dsf {
	font-size: 12px;
	min-height: 62px;
	padding-bottom: 3px;
}
.ds_kallak_PF2e .action-container .handle {
	grid-area: 1/1/1/2;
}
.ds_kallak_PF2e .handle-space {
	display: block;
	grid-area: 1/1/1/2;
}
.ds_kallak_PF2e.editable .handle-space {
	display: none;
}
/* INVENTORY PAGE ELEMENTS */
/* CURRENCY SECTION */
.ds_kallak_PF2e .currency-grid {
	display: grid;
	grid-gap: 3px;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	margin-bottom: 6px;
}
.ds_kallak_PF2e .currency-notes {
	min-height: 181px;
}
.ds_kallak_PF2e .currency-notes .dsf {
	min-height: 163px;
}
/* ABOUT PAGE ELEMENTS*/
/* PERSONALITY SECTION */
.ds_kallak_PF2e .personality {
	display: grid;
	grid-gap: 3px;
}
/* PHYSICAL DETAILS SECTION */
.ds_kallak_PF2e .physical-details-grid {
	display: grid;
	grid-gap: 3px;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-template-rows: 36px 36px 36px 36px;
}
.ds_kallak_PF2e .ethnicity {
	grid-area: 1/1/span 3/5;
}
.ds_kallak_PF2e .nationality {
	grid-area: 2/1/span 3/5;
}
.ds_kallak_PF2e .birthplace {
	grid-area: 3/1/span 3/5;
}
.ds_kallak_PF2e .height {
	grid-area: 4/1/span 1/3;
}
.ds_kallak_PF2e .weight {
	grid-area: 4/3/span 1/5;
}
.ds_kallak_PF2e .age {
	grid-area: 5/1/span 1/3;
}
.ds_kallak_PF2e .sex {
	grid-area: 5/3/span 2/5;
}
/* CAMPAIGN NOTES */
.ds_kallak_PF2e .campaign-notes-grid {
	display: grid;
	grid-gap: 3px 6px;
	grid-template-columns: 1fr 1fr; 
	grid-template-rows: 60px 60px;
	margin-bottom: 6px;
}
.ds_kallak_PF2e .notes {
	grid-area: 1/1/span 3/span 1;
	min-height: 183px;
}
.ds_kallak_PF2e .allies {
	grid-area: 1/2/span 1/3;
	min-height: 57px;
}
.ds_kallak_PF2e .enemies {
	grid-area: 2/2/span 1/3;
	min-height: 57px;
}
.ds_kallak_PF2e .organizations {
	grid-area: 3/2/span 1/3;
	min-height: 57px;
}
/* APPEARANCE & BIO BOXES*/
.ds_kallak_PF2e .dsf_bio,
.ds_kallak_PF2e .dsf_appearance {
		font-size: 14px;
		padding: 6px;
		border: 1px solid black;
		box-shadow: 1px 1px 1px #cccccc;
		min-height: 150px;
		margin-bottom: 6px;
}
/* GENERAL ELEMENTS */
.ds_kallak_PF2e .footer {
	text-align: center;
	font-variant: small-caps;
	font-size: 12px;
}
.ds_kallak_PF2e .footer .dsf {
	display: inline;
}
.ds_kallak_PF2e .area-header {
	background-color:black;
	color:white;
	font-variant:small-caps;
	font-size:16px;
	text-align:center;
	margin-bottom:6px;
	height:26px;
}
.ds_kallak_PF2e .input {
	border:1px solid black;
	padding:0px 3px;
	height:34px;
	box-shadow:1px 1px 1px #cccccc;
}
.ds_kallak_PF2e .input-label {
	font-size:10px;
	line-height:14px;
	font-variant:small-caps;
}
.ds_kallak_PF2e .input .dsf {
	padding-left: 6px;
	line-height: 1.1;
	font-size: 16px;
}
.ds_kallak_PF2e .input2 {
	border:1px solid black;
	text-align:center;
	border-radius:6px;
	box-shadow:1px 1px 1px #cccccc;
	height:34px;
}
.ds_kallak_PF2e .input2 .dsf {
	font-size: 16px;
	line-height: 1.3;
	height: 20px;
}
.ds_kallak_PF2e .entry {
	display: grid;
	grid-template-columns: 80% 20%;
	border: 1px solid black;
	margin-bottom: 6px;
	box-shadow: 1px 1px 1px #cccccc;
	height: 24px;
}
.ds_kallak_PF2e .entry .dsf {
	max-height: 24px;
}
.ds_kallak_PF2e .entry-label {
	font-size: 12px;
	font-variant: small-caps;
	line-height: 24px;
	background-color: #cccccc;
	border-left: 1px solid black;
	padding-left: 3px;
}
/* SHEET EDITING */
.ds_kallak_PF2e.editable .dsf {
	background-color:#cdf;
	cursor:pointer;
}
.ds_kallak_PF2e.editable .dsf.readonly {
	background-color:transparent;
}
.ds_kallak_PF2e .dsf input {
	padding:0px 0px 0px 0px;
	margin:-1px 0px 0px -1px;
}
.ds_kallak_PF2e .jeditable_input button {
	display: none;
}
.ds_kallak_PF2e.editable .dsf_bio {
	display: none;
}
.ds_kallak_PF2e.editable .dsf_allies,
.ds_kallak_PF2e.editable .dsf_enemies,
.ds_kallak_PF2e.editable .dsf_organizations {
	height: 39px;
}
.ds_kallak_PF2e.editable .dsf_notes {
	height: 165px;
}
/* CSX SETTINGS */
.ds_kallak_PF2e .csx .list {
	min-height:100px;
}
.ds_kallak_PF2e .csx .list li.item {
	margin-bottom: 6px;
}
.ds_kallak_PF2e .csx .action-container .check .checkOn {
	background-position:1px 1px;
}
.ds_kallak_PF2e .csx .single-attack .check .checkOn,
	.ds_kallak_PF2e .csx .single-attack .check .checkOn:hover {
	background-position:1px 4px;
}
.ds_kallak_PF2e .csx .single-action.spells .check .checkOn {
	background-position:1px 4px;
}
.ds_kallak_PF2e .csx .check {
	margin:0px;
}
.ds_kallak_PF2e .csx .check .checkBorder {
	background-image: url('https://blog.obsidianportal.com/wp-content/uploads/2019/10/check-border-1.png');
	background-size:12px 12px;
}
.ds_kallak_PF2e .csx .check .checkOff,
.ds_kallak_PF2e .csx .check .checkOff:hover {
	background-image: url('https://blog.obsidianportal.com/wp-content/uploads/2019/10/check-off.png');
	background-position:1px 1px;
}
.ds_kallak_PF2e .csx .check .checkOn,
.ds_kallak_PF2e .csx .check .checkOn:hover {
	background-image: url('https://blog.obsidianportal.com/wp-content/uploads/2019/10/check-on.png');
	background-position:1px 1px;
}
.ds_kallak_PF2e .csx .hidden {
	display: none;
}
/* TABLET SETTINGS */
@media only screen and (max-width: 800px) {
	.ds_kallak_PF2e .grid-1 {
		grid-template-columns: calc(33.33% - 3px) calc(66.66% - 3px);
	}
	.ds_kallak_PF2e .grid-2 {
		grid-template-columns: calc(50% - 3px) calc(50% - 3px);
	}
	.ds_kallak_PF2e .grid-3 {
		grid-template-columns: calc(33.33% - 3px) calc(33.33% - 4px) calc(33.33% - 5px);
	}
	.ds_kallak_PF2e .grid-4 {
		grid-template-columns: calc(66.66% - 1px) calc(33.33% - 5px);
	}
	.ds_kallak_PF2e .entry-label {
		font-size: 10px;
	}
	.ds_kallak_PF2e .ability-score-grid,
	.ds_kallak_PF2e .ability-label-grid {
		grid-template-columns: 114px 1fr 32px 32px 12px;
	}
}
/* PHONE SETTINGS */
@media only screen and (max-width: 420px) {
	.ds_kallak_PF2e .grid-tabs {
		grid-template-columns: 1fr 1fr 1fr;
	}
	.ds_kallak_PF2e .grid-1,
	.ds_kallak_PF2e .grid-2,
	.ds_kallak_PF2e .grid-3,
	.ds_kallak_PF2e .grid-4,
	.ds_kallak_PF2e .basic-info-grid,
	.ds_kallak_PF2e .campaign-notes-grid {
		grid-template-columns: 100%;
	}
	.ds_kallak_PF2e .campaign-notes-grid {
		grid-template-rows: 186px 60px;
	}
	.ds_kallak_PF2e .currency-grid {
		grid-template-columns: 1fr 1fr;
	}
	.ds_kallak_PF2e .ancestry,
	.ds_kallak_PF2e .background,
	.ds_kallak_PF2e .size,
	.ds_kallak_PF2e .class,
	.ds_kallak_PF2e .alignment,
	.ds_kallak_PF2e .deity,
	.ds_kallak_PF2e .traits,
	.ds_kallak_PF2e .languages,
	.ds_kallak_PF2e .notes,
	.ds_kallak_PF2e .allies,
	.ds_kallak_PF2e .enemies,
	.ds_kallak_PF2e .organizations {
		grid-area: auto;
	}
	.ds_kallak_PF2e .entry {
		grid-template-columns: 75% 25%;
	}
	.ds_kallak_PF2e .tab {
		font-size: 16px;
		margin-bottom: 4px;
	}
	.ds_kallak_PF2e .action-container {
		grid-template-rows: 26px 28px 36px;
	}
	.ds_kallak_PF2e .action-container .action-icons {
		grid-template-columns: 18px 1fr 18px 1fr 18px 1fr;
		grid-area: 2/2/2/5;
	}
	.ds_kallak_PF2e .action-container .action-traits {
		grid-area: 3/2/3/5;
		margin-right: 0px;
	}
	.ds_kallak_PF2e .action-container .action-page {
		grid-area: 4/2/4/5;
		margin-right: 0px;
	}
	.ds_kallak_PF2e .action-container .action-description {
		grid-area: 5/2/5/5;
	}
	.ds_kallak_PF2e .ability-score-grid,
	.ds_kallak_PF2e .ability-label-grid {
		grid-template-columns: 123px 1fr 32px 32px 12px;
	}
}

Javascript

var $ = jQuery;
csx_opts = {
	'setupCallback': function(item){kallak_PF2e_setup(item);},
	'uiContainer': function(){return document;},
	'defaultFieldValue':'&nbsp;',
	'imagePath':'https://chainsawxiv.github.io/DST/common/images/',
	'preloadFiles':[
		'add.png',
		'add_hover.png',
		'balance.png',
		'balance_hover.png',
		'bullet.png',
		'fb_back_bottom.png',
		'fb_back_main.png',
		'fb_back_top.png',
		'grab.png',
		'grab_hover.png',
		'tip.png',
		'tip_hover.png',
		'trash.png',
		'trash_active.png',
		'trash_hover.png',
	],
};

function kallak_PF2e_dataPreLoad(opts){
	aisleten.characters.jeditablePlaceholder = csx_opts.defaultFieldValue;
}

function kallak_PF2e_dataPostLoad(options) {
	csx_opts.defaultContext = document.getElementById(options.containerId);	
	csx_opts.uiContainer = csx_opts.defaultContext.querySelector('.uicontainer');
	csx_opts.isEditable = options.isEditable;
	csx_opts.containerId = "#" + options.containerId;
	
	if (options.isEditable) {
		var containerId = options.containerId;
		kallak_PF2e_updateStat("str", containerId);
		kallak_PF2e_updateStat("dex", containerId);
		kallak_PF2e_updateStat("con", containerId);
		kallak_PF2e_updateStat("int", containerId);
		kallak_PF2e_updateStat("wis", containerId);
		kallak_PF2e_updateStat("cha", containerId);
	}
	var includes = document.createElement('script');
	includes.type = 'text/javascript';
	includes.src = 'https://chainsawxiv.github.io/DST/common/js/csx_pathfinder_common.js';
	includes.onload = function(){
		csx_opts.setupCallback();
	};
	document.body.appendChild(includes);
}

function kallak_PF2e_dataChange(options) {
	var field = options['fieldName'];
	var containerId = "#" + options['containerId'];
	
	switch (field) {
		case "str":
			kallak_PF2e_updateStat("str", containerId);
			kallak_PF2e_updateSkills("str", containerId);
			kallak_PF2e_updateEncumbrance(containerId);
			kallak_PF2e_checkKey("str", containerId);
			break;
		case "int":
			kallak_PF2e_updateStat("int", containerId);
			kallak_PF2e_updateSkills("int", containerId);
			kallak_PF2e_checkKey("int", containerId);
			break;
		case "wis":
			kallak_PF2e_updateStat("wis", containerId);
			kallak_PF2e_updateSkills("wis", containerId);
			kallak_PF2e_updateSave("wis", "will", containerId);
			kallak_PF2e_updatePerception(containerId);
			kallak_PF2e_checkKey("wis", containerId);
			break;
		case "dex":
			kallak_PF2e_updateStat("dex", containerId);
			kallak_PF2e_updateSkills("dex", containerId);
			kallak_PF2e_updateSave("dex", "ref", containerId);
			kallak_PF2e_checkKey("dex", containerId);
			break;
		case "con":
			kallak_PF2e_updateStat("con", containerId);
			kallak_PF2e_updateSave("con", "fort", containerId);
			kallak_PF2e_checkKey("con", containerId);
			break;
		case "cha":
			kallak_PF2e_updateStat("cha", containerId);
			kallak_PF2e_updateSkills("cha", containerId);
			kallak_PF2e_checkKey("cha", containerId);
			break;
		case "class_dc_item":
			kallak_PF2e_updateClassDC(containerId);
			break;
		case "athletics_item":
		case "athletics_armor":
			kallak_PF2e_updateSkills("str", containerId);
			break;
		case "acrobatics_item":
		case "acrobatics_armor":
		case "stealth_item":
		case "stealth_armor":
		case "thievery_item":
		case "thievery_armor":
			kallak_PF2e_updateSkills("dex", containerId);
			break;
		case "arcana_item":
		case "crafting_item":
		case "lore_item":
		case "occultism_item":
		case "society_item":
			kallak_PF2e_updateSkills("int", containerId);
			break;
		case "medicine_item":
		case "nature_item":
		case "religion_item":
		case "survival_item":
			kallak_PF2e_updateSkills("wis", containerId);
			break;
		case "deception_item":
		case "diplomacy_item":
		case "intimidation_item":
		case "performance_item":
			kallak_PF2e_updateSkills("cha", containerId);
			break;
		case "fort_item":
			kallak_PF2e_updateSave("con", "fort", containerId);
			break;
		case "ref_item":
			kallak_PF2e_updateSave("dex", "ref", containerId);
			break;
		case "will_item":
			kallak_PF2e_updateSave("wis", "will", containerId);
			break;
		case "perception_item":
			kallak_PF2e_updatePerception(containerId);
			break;
		case "char_level":
			kallak_PF2e_updateLevel();
			break;
	}
}

function kallak_PF2e_setup(context){
	// Provide default context, then setup interfaces
	if (context == undefined)
		context = csx_opts.defaultContext;
	csx_check(context);
	kallak_PF2e_csx_edit(context);
	csx_list(context);

	
	var checks = context.querySelectorAll( ".check" );
	for (var i = 0; i < checks.length; i++) {
		checks[i].onUpdate = function() {
			if ( this.className.match( "group_" ) && this.value() ){
				var key = this.className.match( /group_[\w\d]+/ )[ 0 ];
				var members = document.querySelectorAll( "." + key );
				for ( var i = 0; i < members.length; i++ ){
					if ( members[ i ].value() && members[ i ] != this )
						members[ i ].click();
				}
			}
			if (this.className.match("_teml")) {
				kallak_PF2e_teml_trigger(this);
			}
			if (this.className.match("_key")) {
				kallak_PF2e_key_trigger(this);
			}
		}
	}
}

function kallak_PF2e_dataPreSave(){
	// Default context if not set, then unrender field values
	var context = csx_opts.defaultContext;
	var edits = context.querySelectorAll('.dsf:not(.readonly),.edit');
	for (var i = 0; i < edits.length; i++)
		edits[i].unrender();
	
	var checks = context.querySelectorAll('.check');
	for (var i = 0; i < checks.length; i++)
		checks[i].unrender();

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

function kallak_PF2e_getElementsByClassName(className,elementType) {
	if (!elementType) {
		elementType = 'div';
	}
	var list = new Array();
	var divs = csx_opts.defaultContext.getElementsByTagName(elementType);
	for (var i = 0; i < divs.length; i++) {
		if (divs[i].className.match(className)) {
			list[list.length] = divs[i];
		}
	}
	return list;
}

function kallak_PF2e_tabClick(pageNum) {
	var pages = kallak_PF2e_getElementsByClassName('page-');
	for (var i = 0; i < pages.length; i++) {
		var tab = kallak_PF2e_getElementsByClassName('tab-' + (i + 1))[0];
		if (pages[i].className.match('page-' + pageNum)) {
			pages[i].style.display = 'block';
			tab.style.backgroundColor = '#FFFFFF';
			tab.style.borderBottom = '1px solid white'
		}
		else {
			pages[i].style.display = 'none';
			tab.style.backgroundColor = '#CCCCCC';
			tab.style.borderBottom = '1px solid black';
		}
	}
}

function kallak_PF2e_teml_trigger(item) {
	var group = item.className.substr(item.className.indexOf("group_") + 6, item.className.length);
	var containerId = csx_opts.containerId;
	
	switch (group) {
		case "class_dc":
			kallak_PF2e_updateClassDC(containerId);
			break;
		case "fort":
			kallak_PF2e_updateSave("con", "fort", containerId);
			break;
		case "ref":
			kallak_PF2e_updateSave("dex", "ref", containerId);
			break;
		case "will":
			kallak_PF2e_updateSave("wis", "will", containerId);
			break;
		case "perception":
			kallak_PF2e_updatePerception(containerId);
			break;
		case "spell_dc":
			kallak_PF2e_updateSpellDC(containerId);
			break;
		case "spell_attack":
			kallak_PF2e_updateSpellAttack(containerId);
			break;
		case "athletics":
			kallak_PF2e_updateSkills("str", containerId);
			break;
		case "acrobatics":
		case "stealth":
		case "thievery":
			kallak_PF2e_updateSkills("dex", containerId);
			break;
		case "arcana":
		case "crafting":
		case "lore":
		case "occultism":
		case "society":
			kallak_PF2e_updateSkills("int", containerId);
			break;
		case "medicine":
		case "nature":
		case "religion":
		case "survival":
			kallak_PF2e_updateSkills("wis", containerId);
			break;
		case "deception":
		case "diplomacy":
		case "intimidation":
		case "performance":
			kallak_PF2e_updateSkills("cha", containerId);
			break;
	}
}

function kallak_PF2e_updateLevel() {
	var temls = [
		"class_dc",
		"fort",
		"ref",
		"will",
		"perception",
		"spell_dc",
		"spell_attack",
		"acrobatics",
		"arcana",
		"athletics",
		"crafting",
		"deception",
		"diplomacy",
		"intimidation",
		"lore",
		"medicine",
		"nature",
		"occultism",
		"performance",
		"religion",
		"society",
		"stealth",
		"survival",
		"thievery"
	];
	for (i = 0; i < temls.length; i++) {
		var items = document.querySelectorAll(".group_" + temls[i]);
		kallak_PF2e_teml_trigger(items[0]);
	}
}

function kallak_PF2e_teml_value(group) {
	var checks = document.querySelectorAll(".group_" + group);
	var bonus = 0;
	for (var i = 0; i < checks.length; i++) {
		if (checks[i].value() == 1) {
			var level = checks[i].className.substr(checks[i].className.indexOf("teml_") + 5, 1);
			
			switch(level) {
				case "t":
					bonus = 2;
					break;
				case "e":
					bonus = 4;
					break;
				case "m":
					bonus = 6;
					break;
				case "l":
					bonus = 8;
					break;
				default:
					bonus = 0;
			}
		}
	}
	if (bonus == 0) {
		return bonus;
	}
	var containerId = csx_opts.containerId;
	var char_level = Number($(containerId + " .dsf_char_level").text());
	bonus += char_level;
	return bonus;
}

function kallak_PF2e_key_trigger(item) {
	var containerId = csx_opts.containerId;
	var keys = document.querySelectorAll(".group_key");
	var stat = "";
	for (var i = 0; i < keys.length; i++) {
		if(keys[i].value() == 1)  {
			stat = keys[i].className.substr(keys[i].className.indexOf("_key") - 3, 3);
		}
	}
	var modifier = Number($(containerId + " .dsf_" + stat + "_mod:first").text())
	$(containerId + " .dsf_class_dc_key").text(modifier);
	$(containerId + " .dsf_spell_attack_key").text(modifier);
	$(containerId + " .dsf_spell_dc_key").text(modifier);
	kallak_PF2e_updateClassDC(containerId);
	kallak_PF2e_updateSpellDC(containerId);
	kallak_PF2e_updateSpellAttack(containerId);
}

function kallak_PF2e_updateEncumbrance(containerId) {
	var total = 5;
	total += Number($(containerId + " .dsf_str_mod:first").text());
	$(containerId + " .dsf_encumbered").text(total);
	total += 5;
	$(containerId + " .dsf_maximum").text(total);
}

function kallak_PF2e_calcSkill(stat, skill, containerId) {
	var total = Number($(containerId + " .dsf_" + skill + "_armor").text());
	if(total == undefined) {
		total = 0;
	}
	total += Number($(containerId + " .dsf_" + stat + "_mod:first").text());
	total += kallak_PF2e_teml_value(skill);
	total += Number($(containerId + " .dsf_" + skill + "_item").text())
	$(containerId + " .dsf_" + skill + "_total").text(total);
}

function kallak_PF2e_updateSkills(stat, containerId) {
	switch (stat) {
		case "str":
			kallak_PF2e_calcSkill("str", "athletics", containerId);
			break;
		case "dex":
			kallak_PF2e_calcSkill("dex", "acrobatics", containerId);
			kallak_PF2e_calcSkill("dex", "stealth", containerId);
			kallak_PF2e_calcSkill("dex", "thievery", containerId);
			break;
		case "int":
			kallak_PF2e_calcSkill("int", "arcana", containerId);
			kallak_PF2e_calcSkill("int", "crafting", containerId);
			kallak_PF2e_calcSkill("int", "lore", containerId);
			kallak_PF2e_calcSkill("int", "occultism", containerId);
			kallak_PF2e_calcSkill("int", "society", containerId);
			break;
		case "wis":
			kallak_PF2e_calcSkill("wis", "medicine", containerId);
			kallak_PF2e_calcSkill("wis", "nature", containerId);
			kallak_PF2e_calcSkill("wis", "religion", containerId);
			kallak_PF2e_calcSkill("wis", "survival", containerId);
			break;
		case "cha":
			kallak_PF2e_calcSkill("cha", "deception", containerId);
			kallak_PF2e_calcSkill("cha", "diplomacy", containerId);
			kallak_PF2e_calcSkill("cha", "intimidation", containerId);
			kallak_PF2e_calcSkill("cha", "performance", containerId);
			break;
	}
}

function kallak_PF2e_updateSave(stat, save, containerId) {
	var total = Number($(containerId + " .dsf_" + stat + "_mod:first").text());
	total += kallak_PF2e_teml_value(save);
	total += Number($(containerId + " .dsf_" + save + "_item").text());
	$(containerId + " .dsf_" + save + "_total").text(total);
}

function kallak_PF2e_updatePerception(containerId) {
	var total = Number($(containerId + " .dsf_wis_mod:first").text());
	total += kallak_PF2e_teml_value("perception");
	total += Number($(containerId + " .dsf_perception_item").text());
	$(containerId + " .dsf_perception_total").text(total);
}

function kallak_PF2e_updateClassDC(containerId) {
	var total = 10;
	total += Number($(containerId + " .dsf_class_dc_key").text());
	total += kallak_PF2e_teml_value("class_dc");
	total += Number($(containerId + " .dsf_class_dc_item").text());
	$(containerId + " .dsf_class_dc_total").text(total);
}

function kallak_PF2e_updateSpellDC(containerId) {
	var total = 10;
	total += Number($(containerId + " .dsf_spell_dc_key").text());
	total += kallak_PF2e_teml_value("spell_dc");
	$(containerId + " .dsf_spell_dc_total").text(total);
}

function kallak_PF2e_updateSpellAttack(containerId) {
	var total = Number($(containerId + " .dsf_spell_attack_key").text());
	total += kallak_PF2e_teml_value("spell_attack");
	$(containerId + " .dsf_spell_attack_total").text(total);
}

function kallak_PF2e_updateStat(stat, containerId) {
	var value = Number($(containerId + " .dsf_" + stat).text())
	if (kallak_PF2e_isNumeric(value)) {
		$(containerId + " .dsf_" + stat + "_mod").text(Math.floor((parseInt(value) - 10) / 2));
	}
}

function kallak_PF2e_checkKey(stat) {
	var key = document.querySelectorAll('dsf_' + stat + '_key');
	kallak_PF2e_key_trigger(key);
}

function kallak_PF2e_isNumeric(n) {
	return ($.isNumeric && $.isNumeric(n)) || (!isNaN(parseFloat(n)) && isFinite(n));
}

function kallak_PF2e_csx_edit(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;

			// Display the formatting toolbar
			//this.formatBar.show(this);
			
			// Shade the field
			this.className += ' activeField';

			// Select all the text in the field for editing
			if(this.allowBlur){
				var el = this;
				requestAnimationFrame(function() {
					el.select();
				});
			}
			
			// Disable the element's title
			this.titleStore = this.title;
			this.title = '';
		}
		
		// Called when the field loses focus, hide editing interface
		field.deactivate = function(){
		
			if(!this.allowBlur)
				return;
				
			// Hide the formatting toolbar
			//this.formatBar.hide();
			
			// 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);	
		}
		// Create ref to format bar
		//field.formatBar = formatBar;

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

Back

kallak_PF2e

Create Your Campaign

I'm sorry, but we no longer support this web browser. Please upgrade your browser or install Chrome or Firefox to enjoy the full functionality of this site.

kallak_PF2e

Create Your Campaign

Just One More Step

Just A Little More Info

Use a Social Account

I'm sorry, but we no longer support this web browser. Please upgrade your browser or install Chrome or Firefox to enjoy the full functionality of this site.