The sidebar is divided into two sections, the actual Sidebar which includes the ladder of skills and several buttons useful during play, and the Config section, where you can set properties for this campaign and this character. You can clip between these two by clicking the title, and while neither are needed most of the time, the Config section is probably only needed when a character is first designed.
So our Sidebar starts like this.
<input type="hidden" name="attr_sidebar" value="0" class="sidebar-toggle">
<div class="sidebar grid-box">
<input type="hidden" name="attr_config" value="0" class="config-hide">
<div class="ladder">
<button type="action" name="act_config" class="title" title="click to show the Config Settings.">
<h2>Ladder</h2>
</button>
<button type="action" name="act_terrible_button" class="nod20 title Terrible" >Terrible</button>
<button type="action" name="act_poor_button" class="nod20 title Poor" >Poor</button>
<button type="action" name="act_fair_button" class="nod20 title Fair" >Fair</button>
<button type="action" name="act_good_button" class="nod20 title Good" >Good</button>
<button type="action" name="act_great_button" class="nod20 title Great" >Great</button>
<button type="action" name="act_superb_button" class="nod20 title Superb" >Superb</button>
<button type="action" name="act_spectacular_button" class="nod20 title Spectacular" >Spectacular</button>
<button type="action" name="act_legendary_button" class="nod20 title Legendary" >Legendary</button>
<button type="action" name="act_mythical_button" class="nod20 title Mythical" >Mythical</button>
<button type="action" name="act_perfect_button" class="nod20 title Perfect" >Perfect</button>Code language: HTML, XML (xml)We begin with an input to hold an attribute value, and create a rule so that the entire Sidebar can be hidden:
.sidebar-toggle[value="0"] ~ .sidebar {
display:none;
}Code language: CSS (css)Then we add sidebar to the growing tabs function(which is about to grow a lot more).
const tabs = {
toggles: ['biotoggle', 'show_xp', ...conditions, 'doomed'., 'sidebar', 'config'],
inserts: {} }
};
run_tabs(tabs);Code language: JavaScript (javascript)With this function, any button of the same name can be toggled between value 1 and 0. This is used in the Conditions section to toggle those buttons between “clicked” and “unclicked” with a simple CSS rule to change the appearance of the buttons. here we hide the sidebar. I made this custom function because being able to toggle between 1 and 0 is so useful, way more useful than you’d expect.
The rest of the displayed section above is a bunch of buttons to launch rolls at that rank level, so if you don’t know exactly what skill is being rolled but you know it is Good, you can roll that.
Rolls
Under the Ladder, there’s a section called Rolls. This is for quick modifications in the way rolls behave.
- Whisper: You can set a roll to be whispered to the GM, for making private rolls.
- Query: You can set a roll to query for modifiers, from +2 to -2. It’s possible that sometimes a modifier might be needed, though in this system that is uncommon.
- Power: You might have a static bonus of +1 for some reason. This is handy for some things that might apply to one skill, and are activated when needed. Different games will have different ways to use this.
- Mega Power: There are situations you might have a bigger bonus. This is a roll of 1d6, which doesn’t guarantee a decisive success, but makes it a lot more likely.
These are applied to rolls in a way that after each roll is made, they are reset to their defaults.
Bits & Bobs
The final part of the fgront of the sheet are things of more use to the GM than the players. There is a button to advance time by one scene, and another to end and adventure. They refresh certain values on the character sheet (and are shown in full in next week’s post). There is also an Add 1 XP button, since characters get to add XP at certain points during play.
Config Section
After the front of the Sidebar ends, we have the Config section which starts like this:
</div>
<div class="config">
<button type="action" name="act_config" class="title" title="click to show the Ladder and other controls.">
<h2>Config</h2>
</button>
<span>Starting Skills</span>
<select name="attr_starting_skill">
<option value="0" selected>Poor</option>
<option value="1">Fair</option>
<option value="2">Good</option>
<option value="3">Great</option>
<option value="4">Superb</option>
<option value="5">Spectacular</option>
</select>
<span>Starting Traits</span>
<select name="attr_starting_trait">
<option value="0" selected>Poor</option>
<option value="1">Fair</option>
<option value="2">Good</option>
<option value="3">Great</option>
<option value="4">Superb</option>
<option value="5">Spectacular</option>
</select>
<span>Starting Extras</span>
<select name="attr_starting_extras">
<option value="0" selected>Poor</option>
<option value="1">Fair</option>
<option value="2">Good</option>
<option value="3">Great</option>
<option value="4">Superb</option>
<option value="5">Spectacular</option>
</select>
<span>Starting <span name="attr_special_label"></span></span>
<select name="attr_starting_special">
<option value="0" selected>Poor</option>
<option value="1">Fair</option>
<option value="2">Good</option>
<option value="3">Great</option>
<option value="4">Superb</option>
<option value="5">Spectacular</option>
</select>
<br>
<button type="action" name="act_config" class="title" title="click to show the Ladder and other controls.">
<h3>Game Settings</h3>
</button>
<span>System</span>
<select name="attr_system">
<option value="3">Carrington Event</option>
<option value="2">Legends Never Die</option>
<option value="1">Starscape</option>
<option value="0">Another</option>
</select>
<span>Lifepaths</span>
<select name="attr_lps">
<option value="0">Use Age</option>
<option value="1" >Always 3</option>
<option value="2"selected>Always 4</option>
<option value="3">Always 5</option>
</select>
<span>Special Stat Name</span>
<input type="text" name="attr_special_label" value="Special">
<button type="action" name="act_config" class="title" title="click to show the Ladder and other controls.">
<h3>Fixes</h3>
</button>
</div>Code language: HTML, XML (xml)With minimal styling, that looks like
The top entries, Starting_[something] let you assign a starting rank in those things. When you create a new character, it may start at higher experience, or GM and group may decide they want to start with more experienced characters. These let you create a starting number of advances, and there is already code in the sheet to detect changes in the number of advances, and calculates everything related to the new rank. The JavaScript for this:
['skill', 'trait', 'extras', 'special'].forEach(type => {
on(`change:${type}_advances sheet:opened`, () => {
// snipped because it's not important here.
});
on(`change:starting_${type} sheet:opened`, () => {
getAttrs([`starting_${type}`], v => {
const output = {};
const levels = [0, 1, 3, 6, 10,15,21,28,36,45,55];
const level = int(v[`starting_${type}`]);
output[`${type}_advances`] = levels[level];
setAttrs(output);
});
});
});Code language: JavaScript (javascript)This grabs the numerical “level” of a rank (0, 1, 2, 3, etc.) and converts that into a relevant number of advances. The code allows much higher number of advances you’ll ever actually get. That’s a bit of overkill but doesn’t do any harm.
Game Settings lets you create some configuration for the game, and may be expanded on once those games are designed. In particular, the game system dropdown will probably be changed to a datalist, so people can define their own game names.
