Obsidian Portal
Menu
Sign In / Create Account
JavaScript is currently disabled. Obsidian Portal has a lot of really cool features that use JavaScript. You should check them out. We think you'll have a much more enjoyable experience.
Home
Campaigns
Games Nearby
Plans
Community
Help
Resources
Blades in the Dark
Author:
ZedAxis
Slug:
bitd
System:
Blades in the Dark
DST Source Code
HTML Template
<div class="csx"> <div class="uicontainer"></div> <div class="csx_opts.uiContainer"></div> <!-- Start of the second page of content --> <div class="bitd"> <div class="mainCon1"> <div class="con1"> <div class="logo long"> <span class="blades">BLADES</span> <span class="inThe">IN THE</span> <img class="knife" src="https://raw.githubusercontent.com/LumberZack/bitd/master/kinfe.png"> <span class="dark">DARK</span> <span class="filler"></span> <div class="dsf dsf_crew field crew"></div> <div class="subtext">CREW</div> </div> <div class="dsf dsf_name field first"></div> <div class="dsf dsf_alias field"></div> <div class="subtext">NAME</div> <div class="subtext">ALIAS</div> <div class="dsf dsf_campaign field first"></div> <div class="dsf dsf_player field"></div> <div class="subtext">CAMPAIGN</div> <div class="subtext">PLAYER</div> <div class="dsf dsf_look field long"></div> <div class="subtext long">LOOK</div> </div> <div class="con2"> <div class="dsf dsf_heritage field first"></div> <div class="dsf dsf_background field"></div> <div class="subtext">HERITAGE</div> <div class="subtext">BACKGROUND</div> <div class="dsf dsf_vice field long"></div> <div class="subtext long">VICE/PURVEYOR</div> </div> <div class="con3"> <div class="nameXP"> <div> <span class="name">STRESS</span> <span class="checkboxes"> <span class="dsf dsf_stress1 checkbox"></span> <span class="dsf dsf_stress2 checkbox"></span> <span class="dsf dsf_stress3 checkbox"></span> <span class="dsf dsf_stress4 checkbox"></span> <span class="dsf dsf_stress5 checkbox"></span> <span class="dsf dsf_stress6 checkbox"></span> <span class="dsf dsf_stress7 checkbox"></span> <span class="dsf dsf_stress8 checkbox"></span> <span class="dsf dsf_stress9 checkbox"></span> </span> </div> <div> <span class="name">TRAUMA</span> <span class="checkboxes"> <span class="dsf dsf_trauma1 checkbox"></span> <span class="dsf dsf_trauma2 checkbox"></span> <span class="dsf dsf_trauma3 checkbox"></span> <span class="dsf dsf_trauma4 checkbox"></span> </span> </div> </div> <div class="con9 traumas"> <div class="dsf dsf_traumaList field"></div> <div class="subtext">TRAUMAS</div> </div> </div> <div class="con4"> <div class="harm"> <span class="name">HARM</span> <div class="heal"> <span class="name">HEALING</span> <span class="checkboxes"> <span class="dsf dsf_healing1 checkbox"></span> <span class="dsf dsf_healing2 checkbox"></span> <span class="dsf dsf_healing3 checkbox"></span> <span class="dsf dsf_healing4 checkbox"></span> </span> </div> </div> <span class="harmText">3</span> <div class="dsf dsf_levelThreeHarm field wide vertCenter"></div> <span class="harmText">NEED HELP</span> <span class="harmText">2</span> <div class="dsf dsf_levelTwoHarm1 harmSplit field vertCenter"></div> <div class="dsf dsf_levelTwoHarm2 field vertCenter"></div> <span class="harmText">-1D</span> <span class="harmText">1</span> <div class="dsf dsf_levelOneHarm1 harmSplit field vertCenter"></div> <div class="dsf dsf_levelOneHarm2 field vertCenter"></div> <span class="harmText">LESS EFFECT</span> </div> <div class="con5"> <div class="con6"> <div class="dsf dsf_playbook field"></div> <div class="subtext large">PLAYBOOK</div> <div class="dsf dsf_archetype field"></div> <div class="subtext large">ARCHETYPE</div> </div> <div class="con7"> <span class="name">STASH</span> <span class="checkboxes"> <span class="dsf dsf_stash1 checkbox"></span> <span class="dsf dsf_stash2 checkbox"></span> <span class="dsf dsf_stash3 checkbox"></span> <span class="dsf dsf_stash4 checkbox"></span> <span class="dsf dsf_stash5 checkbox"></span> <span class="dsf dsf_stash6 checkbox"></span> <span class="dsf dsf_stash7 checkbox"></span> <span class="dsf dsf_stash8 checkbox"></span> <span class="dsf dsf_stash9 checkbox"></span> <span class="dsf dsf_stash10 checkbox"></span> </span> <div class="coin"> <span class="name">COIN</span> <br> <span class="checkboxes"> <span class="dsf dsf_coin1 checkbox"></span> <span class="dsf dsf_coin2 checkbox"></span> </span> <br> <span class="checkboxes"> <span class="dsf dsf_coin3 checkbox"></span> <span class="dsf dsf_coin4 checkbox"></span> </span> </div> <span class="checkboxes"> <span class="dsf dsf_stash11 checkbox"></span> <span class="dsf dsf_stash12 checkbox"></span> <span class="dsf dsf_stash13 checkbox"></span> <span class="dsf dsf_stash14 checkbox"></span> <span class="dsf dsf_stash15 checkbox"></span> <span class="dsf dsf_stash16 checkbox"></span> <span class="dsf dsf_stash17 checkbox"></span> <span class="dsf dsf_stash18 checkbox"></span> <span class="dsf dsf_stash19 checkbox"></span> <span class="dsf dsf_stash20 checkbox"></span> </span> <span class="checkboxes"> <span class="dsf dsf_stash21 checkbox"></span> <span class="dsf dsf_stash22 checkbox"></span> <span class="dsf dsf_stash23 checkbox"></span> <span class="dsf dsf_stash24 checkbox"></span> <span class="dsf dsf_stash25 checkbox"></span> <span class="dsf dsf_stash26 checkbox"></span> <span class="dsf dsf_stash27 checkbox"></span> <span class="dsf dsf_stash28 checkbox"></span> <span class="dsf dsf_stash29 checkbox"></span> <span class="dsf dsf_stash30 checkbox"></span> </span> <span class="checkboxes"> <span class="dsf dsf_stash31 checkbox"></span> <span class="dsf dsf_stash32 checkbox"></span> <span class="dsf dsf_stash33 checkbox"></span> <span class="dsf dsf_stash34 checkbox"></span> <span class="dsf dsf_stash35 checkbox"></span> <span class="dsf dsf_stash36 checkbox"></span> <span class="dsf dsf_stash37 checkbox"></span> <span class="dsf dsf_stash38 checkbox"></span> <span class="dsf dsf_stash39 checkbox"></span> <span class="dsf dsf_stash40 checkbox"></span> </span> </div> </div> </div> <!-- Start of the second page of content --> <div class="mainCon2"> <div class="con5"> <div class="con6"> <div class="name grey">SPECIAL ABILITIES</div> <div class="dsf dsf_sa1 special"></div> <div class="dsf dsf_sa2 special"></div> <div class="dsf dsf_sa3 special"></div> <div class="dsf dsf_sa4 special"></div> <div class="dsf dsf_sa5 special"></div> <div class="dsf dsf_sa6 special"></div> <div class="dsf dsf_sa7 special"></div> <div class="dsf dsf_sa8 special"></div> <div class="dsf dsf_sa9 special"></div> <div class="dsf dsf_sa10 special"></div> </div> <div class="con8"> <div class="nameXP"> <span class="name">PLAYBOOK</span> <span class="checkboxes"> <span class="dsf dsf_playbook_xp1 checkbox"></span> <span class="dsf dsf_playbook_xp2 checkbox"></span> <span class="dsf dsf_playbook_xp3 checkbox"></span> <span class="dsf dsf_playbook_xp4 checkbox"></span> <span class="dsf dsf_playbook_xp5 checkbox"></span> <span class="dsf dsf_playbook_xp6 checkbox"></span> <span class="dsf dsf_playbook_xp7 checkbox"></span> <span class="dsf dsf_playbook_xp8 checkbox"></span> </span> </div> <div class="attributes"> <span class="name">INSIGHT</span> <div class="checkboxes"> <span class="dsf dsf_insight_xp1 checkbox"></span> <span class="dsf dsf_insight_xp2 checkbox"></span> <span class="dsf dsf_insight_xp3 checkbox"></span> <span class="dsf dsf_insight_xp4 checkbox"></span> <span class="dsf dsf_insight_xp5 checkbox"></span> <span class="dsf dsf_insight_xp6 checkbox"></span> </div> </div> <div class="actions"> <span class="readonly pips pipsRange_4 dsf dsf_hunt"></span> <span class="action">HUNT</span> <span class="readonly pips pipsRange_4 dsf dsf_survey"></span> <span class="action">SURVEY</span> <span class="readonly pips pipsRange_4 dsf dsf_study"></span> <span class="action">STUDY</span> <span class="readonly pips pipsRange_4 dsf dsf_tinker"></span> <span class="action">TINKER</span> </div> <div class="attributes"> <span class="name">PROWESS</span> <div class="checkboxes"> <span class="dsf dsf_prowess_xp1 checkbox"></span> <span class="dsf dsf_prowess_xp2 checkbox"></span> <span class="dsf dsf_prowess_xp3 checkbox"></span> <span class="dsf dsf_prowess_xp4 checkbox"></span> <span class="dsf dsf_prowess_xp5 checkbox"></span> <span class="dsf dsf_prowess_xp6 checkbox"></span> </div> </div> <div class="actions"> <span class="readonly pips pipsRange_4 dsf dsf_finesse"></span> <span class="action">FINESSE</span> <span class="readonly pips pipsRange_4 dsf dsf_prowl"></span> <span class="action">PROWL</span> <span class="readonly pips pipsRange_4 dsf dsf_skirmish"></span> <span class="action">SKIRMISH</span> <span class="readonly pips pipsRange_4 dsf dsf_wreck"></span> <span class="action">WRECK</span> </div> <div class="attributes"> <span class="name">RESOLVE</span> <div class="checkboxes"> <span class="dsf dsf_resolve_xp1 checkbox"></span> <span class="dsf dsf_resolve_xp2 checkbox"></span> <span class="dsf dsf_resolve_xp3 checkbox"></span> <span class="dsf dsf_resolve_xp4 checkbox"></span> <span class="dsf dsf_resolve_xp5 checkbox"></span> <span class="dsf dsf_resolve_xp6 checkbox"></span> </div> </div> <div class="actions"> <span class="readonly pips pipsRange_4 dsf dsf_attune"></span> <span class="action">ATTUNE</span> <span class="readonly pips pipsRange_4 dsf dsf_command"></span> <span class="action">COMMAND</span> <span class="readonly pips pipsRange_4 dsf dsf_consort"></span> <span class="action">CONSORT</span> <span class="readonly pips pipsRange_4 dsf dsf_sway"></span> <span class="action">SWAY</span> </div> </div> <div class="name grey">FRIENDS</div> <div class="name grey">RIVALS</div> <div class="name grey">ITEMS</div> <div class="con9"> <div class="dsf dsf_friend1 field"></div> <div class="dsf dsf_friend2 field"></div> <div class="dsf dsf_friend3 field"></div> <div class="dsf dsf_friend4 field"></div> <div class="dsf dsf_friend5 field"></div> </div> <div class="con9"> <div class="dsf dsf_rival1 field"></div> <div class="dsf dsf_rival2 field"></div> <div class="dsf dsf_rival3 field"></div> <div class="dsf dsf_rival4 field"></div> <div class="dsf dsf_rival5 field"></div> </div> <div class="con9 items"> <div class="dsf dsf_item1 field"></div> <div class="dsf dsf_item2 field"></div> <div class="dsf dsf_item3 field"></div> <div class="dsf dsf_item4 field"></div> <div class="dsf dsf_item5 field"></div> <div class="dsf dsf_item6 field"></div> <div class="dsf dsf_item7 field"></div> <div class="dsf dsf_item8 field"></div> <div class="dsf dsf_item9 field"></div> <div class="dsf dsf_item10 field"></div> </div> <div class="name grey long">XP</div> <div class="long"> <div class="xpText">• Every time you roll a desperate action, mark xp in that action's attribute</div> <div> <span class="xpText">• You addressed a challenge with </span> <span class="dsf dsf_xp field"></span> </div> <div class="xpText">• You expressed your beliefs, drives, heritage, or background</div> <div class="xpText">• You struggled with issues from your vice or traumas during the session</div> </div> </div> </div> <div class="mandatory"> <span class="name">Character Bio:</span> <span class="dsf dsf_bio"></span> <br> <span class="name">DST Author:</span> <span class="dsf dsf_dst_author"></span> </div> </div> </div>
CSS
/* Pips */ @import url(https://chainsawxiv.github.io/DST/common/css/csx_exalted_common.css); .bitd .pipBorder { background-image: url('https://raw.githubusercontent.com/LumberZack/bitd/master/pip_border.png'); } .bitd .pips .pipOff { background-image: url('https://raw.githubusercontent.com/LumberZack/bitd/master/pip_off.png'); } .bitd .editable .pips .pipOff:hover { background-image: url('https://raw.githubusercontent.com/LumberZack/bitd/master/pip_off_hover.png'); } .bitd .pips .pipOn { background-image: url('https://raw.githubusercontent.com/LumberZack/bitd/master/pip_on.png'); } .bitd .editable .pips .pipOn:hover { background-image: url('https://raw.githubusercontent.com/LumberZack/bitd/master/pip_on_hover.png'); } .bitd .pips .pip { top: 1px; } .bitd .pipBorder { position: absolute; top: 0px; } /* Font Imports */ @font-face { font-family: kirsty; src: url(https://github.com/LumberZack/bitd/blob/master/kirsty%20bd.otf); font-weight: bold; } /* Container Styles */ .bitd { display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr; } .bitd .mainCon1 { max-width: 600px; } .bitd .mainCon2 { max-width: 600px; } .bitd .con1 { display: grid; grid-row-gap: 10px; grid-column-gap: 0px; grid-template-columns: 60% 40%; margin-bottom: 10px; } .bitd .con2 { display: grid; grid-row-gap: 10px; grid-column-gap: 0px; grid-template-columns: 50% 50%; } .bitd .con3 { display: grid; grid-gap: 0px; grid-template-columns: max-content auto; margin-top: 15px; } .bitd .con4 { display: grid; grid-gap: 0px; grid-template-columns: max-content 1fr 1fr max-content; } .bitd .con5 { display: grid; grid-gap: 0px; grid-template-columns: 1fr 1fr max-content; } .bitd .con6 { grid-column: 1 / 3; display: grid; grid-template-columns: 1fr; grid-gap: 0px; border-right: 1px solid black; } .bitd .con7 { grid-column: 3 / 4; display: grid; grid-column-gap: 0px; grid-template-columns: 1fr max-content; padding-left: 5px; padding-top: 5px; } .bitd .con8 { grid-column: 3 / 4; } .bitd .con9 { display: grid; grid-template-columns: 100%; padding: 5px; } /* Heading Section */ .bitd .logo { display: grid; grid-template-columns: max-content max-content max-content auto 40%; grid-template-rows: max-content max-content; grid-gap: 2px; } .bitd .blades { grid-area: 1 / 1 / 3 / 2; font-size: 40px; font-family: kirsty; font-weight: bolder; } .bitd .inThe { text-align: center; margin-top: auto; padding-bottom: 2px; font-size: 20px; grid-area: 1 / 2 / 2 / 3; font-family: kirsty; font-weight: bolder; } .bitd .knife { grid-area: 2 / 2 / 3 / 3; width: 80px; } .bitd .dark { grid-area: 1 / 3 / 3 / 4; font-size: 40px; font-family: kirsty; font-weight: bolder; } .bitd .filler { grid-area: 1 / 4 / 3 / 5; } .bitd .crew { margin-top: auto; } .bitd .long { grid-column: 1 / 3; } .bitd .first { margin-right: 10px; } /* Harm Block Section */ .bitd .harm { grid-column: 1 / 5; background-color: black; color: white; padding-left: 5px; padding-right: 5px; } .bitd .traumas { border-top: 10px solid black; padding-left: 5px; padding-right: 5px; } .bitd .heal { float: right; } .bitd .harmText { background-color: lightgrey; font-size: 12px; font-family: kirsty; font-weight: bold; text-align: center; padding: 5px; border-bottom: 1px solid black; } .bitd .wide { grid-column: 2 / 4; border-bottom: 1px solid black; } .bitd .harmSplit { border-right: 1px solid black; } .bitd .vertCenter { padding-top: 6px; padding-left: 5px; } /* General Styling */ .bitd .field { border-bottom: 1px solid black; margin-top: auto; } .bitd .subtext { font-size: 11px; font-family: kirsty; font-weight: bold; } .bitd .nameXP { background-color: black; color: white; border-bottom: 20px solid white; padding-left: 5px; padding-right: 5px; padding-bottom: 2px; } .bitd .name { font-family: kirsty; font-weight: bolder; font-size: 12px; display: inline; margin-bottom: 0px; width: auto; } .bitd .checkboxes { float: right; padding-left: 5px; padding-top: 2px; } .bitd .attributes { background-color: black; color: white; padding-left: 5px; padding-right: 5px; margin-bottom: 2px; } .bitd .actions { display: grid; grid-template-columns: 50% 50%; grid-gap: 10px; margin-left: 20px; } .bitd .action { font-family: kirsty; font-weight: bolder; } .bitd .coin { grid-area: 2 / 1 / 5 / 2; padding: 5px; border-right: 1px solid black; } .bitd .grey { background-color: lightgrey; padding: 5px; } .bitd .special { border-bottom: 1px solid black; align-self: center; padding-left: 5px; } .bitd .items { border-left: 1px solid black; grid-area: 3 / 3 / 6 / 4; } .bitd .xpText { font-size: 10px; font-family: kirsty; font-style: italic; padding-left: 5px; } .bitd .mandatory { max-width: 600px; } .bitd .large { font-size: 14px; } @media only screen and (max-width: 650px){ } @media only screen and (min-width: 1700px){ .bitd { grid-template-columns: 600px 600px; max-width: 1200px; } .mainCon2 { border-left: 1px solid black; border-bottom: 1px solid black; } .mainCon1 { border-bottom: 1px solid black; } .mandatory { max-width: 800px; margin-left: auto; margin-right: auto; grid-column: 1 / 3; } }
Javascript
// Global Options csx_opts = { 'setupCallback': function(item){bitd_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', '../../sheets/chainsawxiv_exalted/images/pip_off.png', '../../sheets/chainsawxiv_exalted/images/pip_off_hover.png', '../../sheets/chainsawxiv_exalted/images/pip_on.png', '../../sheets/chainsawxiv_exalted/images/pip_on_hover.png', '../../sheets/chainsawxiv_exalted/images/tab01_active.png', '../../sheets/chainsawxiv_exalted/images/tab01_inactive.png', '../../sheets/chainsawxiv_exalted/images/tab02_active.png', '../../sheets/chainsawxiv_exalted/images/tab02_inactive.png', '../../sheets/chainsawxiv_exalted/images/tab03_active.png', '../../sheets/chainsawxiv_exalted/images/tab03_inactive.png', '../../sheets/chainsawxiv_exalted/images/tab04_active.png', '../../sheets/chainsawxiv_exalted/images/tab04_inactive.png', '../../sheets/chainsawxiv_exalted/images/check_off.png', '../../sheets/chainsawxiv_exalted/images/check_off_hover.png', '../../sheets/chainsawxiv_exalted/images/check_on.png', '../../sheets/chainsawxiv_exalted/images/check_on_hover.png', ], }; // Master Startup function bitd_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 bitd_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 bitd_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(); }
Submit Notes
A character sheet for the game Blades in the Dark. This is just my first test with basic DST code to get a hang of things.
Back