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

Dungeon World character sheet

Author: dysmnemonic

Slug: luminousdw

Type: GameCharacter

System: Dungeon World

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 class="tipBox">
			<div class="corner topLeft"></div>
			<div class="corner topRight"></div>
			<div class="corner bottomLeft"></div>
			<div class="corner bottomRight"></div>
			<div class="contentBox">
				<div class="tipArea edit"></div>
			</div>
		</div>
	
	</div>
	
	<div class="main" style="display:block;">
		<div class="border_container"></div>
				
		<div class="pagehead">
			<div class="head"><span class="name readonly dsf dsf_name singlerow">Edit Character Name</span></div>
			<div class="charclass">&#8226; <span class="dsf dsf_class singlerow" style="text-align:right;" defaultString="Character Class">Character Class</span> &#8226;</div>
			<div class="played_by">Played by <span class="dsf dsf_player readonly">Player</span> in <span class="readonly dsf dsf_campaign">Campaign Name</span></div>
		</div>
		
		<!-- Look -->
		<div class="section look">
			<div class="head">Look</div>
			<div class="group">
				<span class="dsf dsf_look fullwidth" defaultString="Character appearance...">Character appearance...</span>
			</div>
		</div>
		
		<!-- Stats -->
		<div class="section abilities">
			<div class="head">Ability Scores</div>
			<div class="labelrow">
				<span class="statlabel statstable">Strength</span>
				<span class="statlabel statstable">Dexterity</span>
				<span class="statlabel statstable">Constitution</span>
				<span class="statlabel statstable">Intelligence</span>
				<span class="statlabel statstable">Wisdom</span>
				<span class="statlabel statstable">Charisma</span>
			</div>
			<div class="attributerow">
				<span class="statscore statstable dsf dsf_strength">0</span>
				<span class="statscore statstable dsf dsf_dexterity">0</span>
				<span class="statscore statstable dsf dsf_constitution">0</span>
				<span class="statscore statstable dsf dsf_intelligence">0</span>
				<span class="statscore statstable dsf dsf_wisdom">0</span>
				<span class="statscore statstable dsf dsf_charisma">0</span>
			</div>
			<div class="debilityrow">
				<span class="statstable"><span class="readonly pips pipsRange_1 dsf dsf_weak"></span>Weak (-1)</span>
				<span class="statstable"><span class="readonly pips pipsRange_1 dsf dsf_shaky"></span>Shaky (-1)</span>
				<span class="statstable"><span class="readonly pips pipsRange_1 dsf dsf_sick"></span>Sick (-1)</span>
				<span class="statstable"><span class="readonly pips pipsRange_1 dsf dsf_stunned"></span>Stunned (-1)</span>
				<span class="statstable"><span class="readonly pips pipsRange_1 dsf dsf_confused"></span>Confused (-1)</span>
				<span class="statstable"><span class="readonly pips pipsRange_1 dsf dsf_scarred"></span>Scarred (-1)</span>
			</div>
			<div class="attributerow">
				<span class="statscore statstable dsf dsf_str">0</span>
				<span class="statscore statstable dsf dsf_dex">0</span>
				<span class="statscore statstable dsf dsf_con">0</span>
				<span class="statscore statstable dsf dsf_int">0</span>
				<span class="statscore statstable dsf dsf_wis">0</span>
				<span class="statscore statstable dsf dsf_cha">0</span>
			</div>
			<div class="labelrow">
				<span class="modlabel statstable">STR</span>
				<span class="modlabel statstable">DEX</span>
				<span class="modlabel statstable">CON</span>
				<span class="modlabel statstable">INT</span>
				<span class="modlabel statstable">WIS</span>
				<span class="modlabel statstable">CHA</span>
			</div>
		</div>
		
		<!-- Damage & Armour -->
		<span class="column halfwidth">
			<div class="section halfwidth">
				<div class="head">Damage &amp; Armour</div>
				<div class="group">
					<div class="row subhead">Damage die: <span class="dsf dsf_dmgdie right singlerow" defaultString="1Dx">1Dx</span></div>
					<div class="row subhead">Armour: <span class="dsf dsf_armour right singlerow" defaultString="0">0</span></div>
				</div>
			</div>
		</span>
		
		<!-- HP -->
		<span class="column halfwidth">
			<div class="section halfwidth">
				<div class="head">Hit Points</div>
				<div class="group">
					<div class="row subhead">Current: <span class="dsf dsf_hpcurrent right singlerow" defaultString="0">0</span></div>
					<div class="row subhead">Max: <span class="dsf dsf_hpmax right singlerow" defaultString="0">0</span></div>
				</div>
			</div>
		</span>
		
		<span class="column halfwidth">
		
			<!-- Alignment -->
			<div class="section halfwidth">
				<div class="head">Alignment</div>
				<div class="subhead"><span class="dsf dsf_align halfwidth" defaultString="Alignment..."></span></div>
				<div><span class="dsf dsf_align_desc halfwidth" defaultString="Alignment description...">Alignment description...</span></div>
			</div>
			
			<!-- Race -->
			<div class="section halfwidth">
				<div class="head">Race</div>
				<div class="subhead"><span class="dsf dsf_race halfwidth" defaultString="Race..."></span></div>
				<div><span class="dsf dsf_race_ability halfwidth" defaultString="Racial ability...">Racial ability...</span></div>
			</div>
			
			<!-- Moves -->
			<div class="section halfwidth">
				<div class="head">Moves
					<span class="interface trash"></span>
					<span class="interface add addto_moves" title="Add Move"></span>
				</div>
				<ul class="group list list_moves">
					<li class="proto item">
						<div class="handle"><div></div></div>
						<span class="edit dslf dslf_move fullcolumn singlerow" defaultString="Move">Move</span>
						<span class="tip dslf dslf_tip"></span>
					</li>
					<span class="oldfields hidden">[{"mutation":"merit","tip":"merit_tip"},{"mutation":"flaw","tip":"flaw_tip"}]</span>
					<span class="dsf dsf_moves readonly hidden"></span>
				</ul>
			</div>					
		
		</span>
		
		<span class="column halfwidth">
		
			<!-- Experience -->
			<div class="section halfwidth">
				<div class="head">Experience</div>
				<div class="group">
					<div class="row subhead">Level: <span class="dsf dsf_level right singlerow" defaultString="1">1</span></div>
					<div class="row">Experience: <span class="dsf dsf_experience right singlerow" defaultString="0">0</span></div>
				</div>
			</div>
			
			<!-- Bonds -->
			<div class="section halfwidth">
				<div class="head">Bonds
					<span class="interface trash"></span>
					<span class="interface add addto_bonds" title="Add Bond"></span>
				</div>
				<ul class="group list list_bonds">
					<li class="proto item">
						<div class="handle"><div></div></div>
						<span class="edit dslf dslf_bond fullcolumn singlerow" defaultString="Bond">Bond</span>
						<span class="tip dslf dslf_tip"></span>
					</li>
					<span class="oldfields hidden">[{"mutation":"merit","tip":"merit_tip"},{"mutation":"flaw","tip":"flaw_tip"}]</span>
					<span class="dsf dsf_bonds readonly hidden"></span>
				</ul>
			</div>
			
			<!-- Gear -->
			
			<div class="section halfwidth gear">
				<div class="head">Gear
					<span class="interface trash"></span>
					<span class="interface add addto_gear" title="Add Item"></span>
				</div>
				<div class="row hl_fix">Coins: 
					<span class="dsf dsf_coins right singlerow" defaultString="0">0</span>
				</div>
				<div class="row hl_fix">Rations: 
					<span class="dsf dsf_rations right singlerow" defaultString="0">0</span>
				</div>
				<div class="row hl_fix">Load/Max Load: 
					<span class="right"><span class="dsf dsf_load" defaultString="0">0</span> / <span class="dsf dsf_maxload" defaultString="0">0</span>
				</div>
				<div class="row" style="border-bottom:1px solid rgba(0,0,0,0.1);padding-top:3px;">Items</div>
				<ul class="group list list_gear">
					<li class="proto item">
						<div class="handle"><div></div></div>
						<span class="edit dslf dslf_item fullcolumn singlerow" defaultString="Item">Item</span>
						<span class="tip dslf dslf_tip"></span>
					</li>
					<span class="oldfields hidden">[]</span>
					<span class="dsf dsf_gear readonly hidden"></span>
				</ul>
			</div>
			
		
		</span>
	
		<!-- Spells -->
		<div class="section">
			<div class="head">Spells / Techniques
				<span class="interface trash"></span>
				<span class="interface add addto_spells" title="Add Spell"></span>
				<span class="interface balance balance_spells"></span>
				<span class="interface readonly check dsf dsf_spells_autobalance autobalance autobalance_spells">1</span>
			</div>
			<ul class="group list list_spells twocolumn">
				<div class="column colspace"></div>
				<div class="column"></div>
				<li class="proto item">
					<div class="handle"><div></div></div>
					<span class="edit dslf dslf_name fullcolumn singlerow" defaultString="Spell Name">Spell Name</span>
					<span class="tip dslf dslf_tip"></span>
				</li>
				<span class="oldfields hidden">[{"name":"rote_name","tip":"rote_tootip"}]</span>
				<span class="dsf dsf_spells readonly hidden"></span>
			</ul>
		</div>
		
		<!-- Notes -->
		<div class="section">
			<div class="head">Notes
				<span class="interface trash"></span>
				<span class="interface add addto_notes" title="Add Note"></span>
				<span class="interface balance balance_notes"></span>
				<span class="interface readonly check dsf dsf_notes_autobalance autobalance autobalance_notes">1</span>
			</div>
			<ul class="group list list_notes twocolumn">
				<div class="column colspace"></div>
				<div class="column"></div>
				<li class="proto item">
					<div class="handle"><div></div></div>
					<span class="edit dslf dslf_name fullcolumn singlerow" defaultString="Note Title">Note title</span>
					<span class="tip dslf dslf_tip"></span>
				</li>
				<span class="oldfields hidden">[{"name":"rote_name","tip":"rote_tootip"}]</span>
				<span class="dsf dsf_notes readonly hidden"></span>
			</ul>
		</div>
	
		<!-- History -->
		<div class="section">
			<div class="head">History</div>
			<div class="group">
				<div class="portraitholder">
					<span class="portrait readonly dsf dsf_avatar_image">.</span>
				</div>
				<span class="dsf dsf_bio fullwidth readonly">Edit Biography below...</span>
			</div>
		</div>
		
		<div class="page_foot">
			<div class="head"></div>
			<div class="authcredit">Adapted for Dungeon World by <span class="dsf dsf_dst_author readonly">Author</span></div>
		</div>
	</div>
	
</div>

CSS

/* Font Imports */

@import url('https://fonts.googleapis.com/css?family=Catamaran');
@import url(https://fonts.googleapis.com/css?family=Cinzel:400,700);
@import url(https://fonts.googleapis.com/css?family=EB+Garamond);

/* Component Includes */

@import url(https://chainsawxiv.github.io/DST/common/css/csx_exalted_common.css);

div.ds_luminousdw .tipBox .contentBox{
	background-color: rgba(255,255,250,0.9);
	border: 2px solid rgba(100,0,0,1);
	border-radius: 4px;
}

div.ds_luminousdw .tipBox .contentBox .tipArea,
div.ds_luminousdw .tipBox .contentBox .tipArea:hover{
	background-color:rgba(255,255,255,0.7);
	border:1px dotted rgba(0,0,0,0.3);
	border-radius:4px;
	font-family:'Catamaran',Sans Serif;
	color:#554220;
}

div.ds_luminousdw .main{
	background-color: rgb(255,255,250);
	
	font-family: Catamaran, palatino, serif;
	font-size:14px;
	line-height:18px;
	color: rgb(50,50,50);
	
	border: 1px solid rgba(0,0,0,0.5);
	margin-top:51px;
}

div.ds_luminousdw div.head {
	border-bottom: solid 2px rgba(100,0,0,1);
	color: rgb(100,0,0);
	font-family: 'Cinzel';
	font-weight: bold;
	font-size: 24px;
	padding-bottom: 5px;
	margin-bottom: 10px
}

div.ds_luminousdw a{
	text-decoration: none;
	color:#554220;
}

div.ds_luminousdw .section a{
	text-decoration:underline;
}

div.ds_luminousdw div.head span.dsf.dsf_name {
	font-size: 40px;
}

div.ds_luminousdw .csx div.pagehead div.charclass{
	font-family:'Cinzel', palatino, serif;
	font-size: 30px;
	padding: 5px;
	color: rgb(100,0,0)
}

div.ds_luminousdw .csx .pagehead{
	padding-top:30px;
}

div.ds_luminousdw .csx .add,
div.ds_luminousdw .csx .trash{
	position:relative;
}

div.ds_luminousdw .portrait img{
	min-height:150px;
	min-width:150px;
}

div.ds_luminousdw .csx .section{
	min-height: 100px;
}
div.ds_luminousdw .csx div.gear {
	min-height: 150px;
}
div.ds_luminousdw .csx div.abilities {
	min-height: 180px;
}

div.ds_luminousdw .row.highlight.hl_fix{
	background-color:rgba(255,255,255,0.5);
	border-radius:2px;
}

div.ds_luminousdw .subhead {
	font-size: 18px;
	font-weight: bold;
}

div.ds_luminousdw .authcredit {font-size: 10px;}
div.ds_luminousdw .charclass {font-size: 18px;}
div.ds_luminousdw .statstable {
	display: inline-block;
	width: 110px;
	text-align: center;
	margin-left: 5px;
}
div.ds_luminousdw span.modlabel {
	border-top: 1px solid gray;
	padding-top: 3px;
	font-size: 18px;
	line-height: none;
	font-weight: bold;
}
div.ds_luminousdw span.statlabel {
	border-bottom: 1px solid gray;
	font-weight: bold;
}
div.ds_luminousdw .debilityrow {
	font-size: 14px;
	
}
div.ds_luminousdw div.attributerow div.statstable.statscore.dsf {
	font-size: 18px;
	line-height: 20px;
}

div.ds_luminousdw div.look,
div.ds_luminousdw div.look div.dsf.fullwidth,
div.ds_luminousdw div.look div.edit.fullwidth {
	min-height: 30px;
	width: auto;
	display: block;
	font-size: 18px;
}

.csx .portraitholder{
	border-width:2px;
	border-color: rgb(100,0,0);
	margin-top: -35px;
	margin-right: -3px;
}

JavaScript

/* Taken from ChainsawXIV's excellent mage dst */

// Global Options
csx_opts = {
	'setupCallback': function(item){luminousdw_setup(item);},
	'uiContainer': function(){return document;},
	'defaultFieldValue':'Click to edit',
	'imagePath':'https://chainsawxiv.github.io/DST/common/images/',
	'preloadFiles':[
		'add.png',
		'add_hover.png',
		'balance.png',
		'balance_hover.png',
		'bold_active.png',
		'bold_hover.png',
		'bullet.png',
		'crunch.png',
		'crunch_hover.png',
		'equipment.png',
		'equipment_hover.png',
		'fb_back_bottom.png',
		'fb_back_main.png',
		'fb_back_top.png',
		'fluff.png',
		'fluff_hover.png',
		'grab.png',
		'grab_hover.png',
		'indent.png',
		'indent_active.png',
		'indent_hover.png',
		'italic.png',
		'italic_active.png',
		'italic_hover.png',
		'magic.png',
		'magic_hover.png',
		'tip.png',
		'tip_hover.png',
		'trash.png',
		'trash_active.png',
		'trash_hover.png',
		'underline.png',
		'underline_active.png',
		'underline_hover.png',
		'solar/pip_off.png',
		'solar/pip_off_hover.png',
		'solar/pip_on.png',
		'solar/pip_on_hover.png',
		'solar/tab01_active.png',
		'solar/tab01_inactive.png',
		'solar/tab02_active.png',
		'solar/tab02_inactive.png',
		'solar/tab03_active.png',
		'solar/tab03_inactive.png',
		'solar/tab04_active.png',
		'solar/tab04_inactive.png',
		'solar/check_off.png',
		'solar/check_off_hover.png',
		'solar/check_on.png',
		'solar/check_on_hover.png',
	],
};

// Master Startup
function luminousdw_dataPostLoad(data){

	csx_opts.defaultContext = document.getElementById(data.containerId);	
	csx_opts.uiContainer = csx_opts.defaultContext.querySelector('.uicontainer');
	csx_opts.isEditable = data.isEditable;

	// Include the shared script file
	var includes = document.createElement('script');
	includes.type = 'text/javascript';
	includes.src = 'https://chainsawxiv.github.io/DST/common/js/csx_exalted_common.js?v=dev001';
	includes.onload = function(){

		// Fix container properties
		csx_firstParentWithClass(csx_opts.defaultContext,'dynamic_sheet_container').style.overflow = 'visible';
		//csx_firstParentWithClass(csx_opts.defaultContext,'main-content-container').style.minWidth = '853px';
		
		// Set up the editing interface
		csx_opts.setupCallback();
		
	};
	document.body.appendChild(includes);
	
	// Preload rollover images 
	// Deferred to prevent blocking
	window.setTimeout(function(){
		if (document.images){
			for (var i = 0; i < csx_opts.preloadFiles.length; i++){
				var img = new Image();
				img.src = csx_opts.imagePath + csx_opts.preloadFiles[i];
			}
		}
	},500);
	
}

// Setup After Script Load
function luminousdw_setup(context){

	// Provide default context
	if (context == undefined)
		context = csx_opts.defaultContext;
	
	// Do setup for interfaces
	csx_pips(context);
	csx_check(context);
	csx_edit(context);
	csx_tip(context);
	csx_list(context);
	csx_tab(context);

}

// Shutdown Before Save
function luminousdw_dataPreSave(){

	// Default the context if not set
	var context = csx_opts.defaultContext;

	// Bake everything down to its field values
	var pips = context.querySelectorAll('.pips');
	for (var i = 0; i < pips.length; i++){
		if (pips[i].parentNode.className.match(/proto/))
			continue;
		pips[i].unrender();
	}
	
	var checks = context.querySelectorAll('.check');
	for (var i = 0; i < checks.length; i++)
		checks[i].unrender();

	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();		
		
}

Back

Dungeon World character sheet

Create Your Campaign

Just One More Step

Just A Little More Info

Use a Social Account