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
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.