Building a Character Sheet: Hidden Advancement Pane

I have a lot of little things left to do, and one really big thing: experience and advancement (that’s one thing). We’ll do that now. It’s pretty quick and easy at the game table, but the code needed for what we want to do here is kinda complex.

How This Frame Works

We are using an experience frame (xp-floater) that hovers above the character sheet. This is where the z-index CSS setting comes in handy – this describes its depth in relation to the html page itself. Z-index: 0 is the default, and 1 or higher is above the default and floats above the page..

Here we can see a frame that floats above the sheet (the green one), blocking everything below it.

This was very tricky to get to display the way I want it to. I find position: absolute and relative very confusing and generally try to avoid using them. But when you want to position something with reference to something else, position can be very important.

The hardest part (so far) was getting this frame to line up with the Bio section. That can be collapsed, or exposed to reveal a lot more information, which changes its size. We want the experience frame to basically stay level with the abilities, as shown below.

Compare this with the Show Bio pic above – the Advance Track is now much lower on the sheet.

To make this happen on this sheet, the code for the experience tab was placed inside the same div as abilities, and given a CSS ration of position:absolute, which says it is relative to the abilities div, then a left: and top: rating to position it relative to that div. Then the div above them in the hierarchy (left) was given a position attribute – position:absolute needs a nearby position element to relate to.

.charsheet .left {
    position: relative;
}
div.xp-floater {
    display: none;
}
input.show-xp[value="1"] ~ div.xp-floater {
    display: block;
    position: absolute;
    left: 250px;
    top: 0;
    z-index: 10;
}Code language: CSS (css)

This code refers to an input’s class – that input is placed just before xp-floater, which has a default display:none; this makes it visible when that input is set to 1, and hides it when it is set to 0.

This article does a good job of explaining things, while this one clearly states what is easily missed.

Progress Track

At the top of the tab is this progress track.

At first glance, it’s not clear how to use it and being able to click checkboxes anywhere doesnt help.

There are two advancement tracks, Skill Advances, and Trait Advances. These tracks should fill from left to right, and you shouldn’t be able to just click anywhere. This would look more like this:

To enforce this, we will make these checkboxes unclickable, and add a pair of buttons- one to add Skill Advances, and one to add Trait Advances. (Notice that an extra label has been added for current Skills and Trait Advance Ranks, to make clearer what is currently being worked on).

First, we give those checkboxes a no-click class, and then use this CSS.

.charsheet select.no-click,
.charsheet input.no-click {
    pointer-events: none;
}Code language: CSS (css)

This makes both selects and inputs with the class unclickable (when including selects, we are just planning ahead).

Planning What Needs To Be Done

This is probably the most complex part of the sheet – it’s a shame it spends most of the time hidden!

The Advancement section has several sections, each of which requires different calculations and buttons. The greyed-out section is just text that doesn’t need to be shown for this tutorial. Here’s what needed to be coded for:

At the end of an adventure, there is a Chapter button (not shown). Pressing that lets us know you are in Advancement Mode and the different parts of this frame become active.

One the frame is active, here are what the different sections do:

1. A big section of advancement buttons. These show your progress in each of the 3 categories, you might be Great in Skills, Good in Extras and Fair in Traits.
2. When Advancement mode is active, you can click one of these 3 buttons, which will add an advancement box in section 1. If you have more than 5 XP points, you an buy more advances, and each extra click of a button costs 5 XP.
3. Here we see a display of what ranks of skills you have now, and what you should have – your current Skill Rank is taken into account. Likewise, your numbers of Traits and Extras are checked.
4. Here we track current XP. If the Save XP, the XP in the next section are erased and added here. The Add and Reduce XP buttons are just for dealing with errors: you can fine tune how many XP you should have here.
5. As an adventure proceeds, you can do different things to earn XP. These are placeholders, and will change in the final sheet. When you click the Save XP button in the previous section, the points here are added to your running XP total and numbers here all become zero.
6. Achievements are kind of an optional extra – a reward for learning the system. Each one grants 1 XP, and once learned cannot be gained again.

In the next post, we’ll now look at how each section is done.