Creating L5R 4E character sheet. CSS advice?

You can see a listing of how to implement various math functions, including min(x), for autocalc fields in the CSS Wizardry thread (although admittedly, it's not really CSS that's doing it).

If you try to use an offline editor to make the character sheet, you'll be missing out on some things, most notably the sheet-2colrow and sheet-3colrow classes (and the sheet-col class which is intended for use inside the other two). Here's the CSS for those classes:

.sheet-2colrow,
.sheet-3colrow {
    display: block;
    clear: both;
}

.sheet-3colrow .sheet-col {
    width: calc(33% - 21px);
    margin-right: 30px;
}

.sheet-2colrow .sheet-col {
    width: calc(50% - 20px);
    margin-right: 30px;
}

.sheet-col {
    display: inline-block;
    vertical-align: top;
}

Also remember that autocalc fields won't work in an offline environment (they're calculated using some JavaScript), nor will repeating sections (manipulated with JavaScript), but those are both true of the preview pane as well. You'll also be missing out on some default styling which may slightly alter the look of your sheet offline as compared to online, and you won't have access to certain special fonts, such as the one used for the dice images which appear on roll buttons by default.

It may also be worth pointing out, especially if you're copying code from my Exalted sheet, that when running on Roll20, all classes on your HTML elements are prefixed with "sheet-", and all selectors in your CSS are prefixed with ".charsheet ". So, if you write the following offline:

<input type="number" name="attr_Reflexes" class="ability narrow" />

input.ability { font-style: italic; }

.narrow { width: 10%; }

It will look like you want it, but once you enter a campaign with it, you will effectively have:

<div class="charsheet tab-pane"><input type="number" name="attr_Reflexes" class="sheet-ability sheet-narrow" /></div>

.charsheet input.ability { font-style: italic; }

.charsheet .narrow { width: 10%; }

As you can see, the classes won't match up. If you remember to include sheet-* in your CSS you'll be fine (this is what I did on the Exalted sheet), but it may be simpler to just always remember to include sheet-* on all of your classes, even your HTML, and you'll have an easier time hunting down bugs.

Looks like the problems is that the sanitizer is matching the CSS against several regular expressions, one of which includes (java|vb)?script. That's catching on the "script" part of Brush Script MT, and the CSS is getting thrown out.

So, do not use any of the following words, as they should all suffer the same problem:

• data:
• eval
• cookie
• window
• parent
• this
• behavior
• behaviour
• expression
• moz-binding
• @import
• @charset
• javascript
• vbscript
• script

Steven F. said:

it seems a little silly to have two in process.

But collaboration seems like a great idea!

Steven F. said:

well, suddenly the last couple days of me trying to muck together my own kludged L5R character sheet seem somewhat wasted... At about the same time I started working on the same problem, though from the snapshot given above it looks like you're significantly further ahead than I am.

I haven't looked into how to submit new character sheets yet, but I was initially hoping to have a first draft of mine out sometime next week, any idea when yours might be out? In the mean-time I'll probably keep working on my version, but it seems a little silly to have two in process.

Nick, you can simply substitute id="customers" for class="customers" in the HTML, and change #customers to .customers in the CSS.

The reason you shouldn't use ids on your character sheet is because all of the sheets in a campaign are on the same webpage, using the same HTML, and ids are supposed to be unique across the page. As soon as the campaign has more than one character, the browser is forced into undefined territory. However, for most cases where you would use an id, you can use a class just fine. There are differences behind the scenes with how the two are handled, but you care more about the output. =)

Calle A. said:

I'll get back to my computer around the 14th, I'd love to have a look at the CSS and everything then.

Calle A. said:

I should warn you though, emphasis rolls don't work as-written in Roll20; specifically, there's an issue with compounding dice and rerolling. For example, if you roll a 10 and it explodes onto a 1, it will be dropped and re-rolled.

Nick R. said:

Thanks so much for all the help so far, Steve and I have about 3/4 of our goals finished and working!

We're now getting to weapons, and I have two questions about those.

1. How can I make a dropdown menu change another attribute?
Say I have 5 arrow types, for example, and I have them in a dropdown menu. Each arrow type should set a different value for attr_ArrowDamageRoll and attr_ArrowDamageKeep. Is this possible?

2. Is it possible to make an expandable list with different things that roll properly?
What I mean is, can you have an expandable weapon list, where each row that a user creates is able to have separate attribute names that stay separate? like attr_Weapon1DamageKeep, attr_Weapon2DamageKeep, attr_Weapon3DamageKeep, etc.

Thanks!

1. I'm not sure what you mean, exactly. You'll have to be more explicit, since I'm only vaguely familiar with the L5R system.
2. You can create a repeating section with roll buttons, if that's what you mean. You can't have interactions between the different sections, or reference them from outside the repeating section, though. While there is a syntax for accessing values from a repeating section, there isn't a guarantee that the indexes will remain the same.

Nick R. said:

1. What I mean is, say I have a row in a table for a weapon. One of the cells is a selector for the type of weapon. I want the cell later on in row that is a dice roll to change based on what weapon type is selected, e.g., if "Sword" is selected I want the roll to be "/roll @{swordskill}d10k3" and if "Spear" is selected "/roll @{swordskill}d10k3"
We have tried to make this happen by having the dropdown selector change an attribute, that is, change attr_WeaponStat to "@{swordskill}, and then later "/roll@{WeaponStat}d10k3"
I think it runs into the same problem I was running into with Ring rolls several days ago, because the error message is again
"SyntaxError: Expected "(", ".", "[", "abs(", "ceil(", "d", "floor(", "round(", "t", "{", [ |\t], [+|\-] or [0-9] but "J" found."

You can create a select with values from other attributes. For example:

<input type="number" name="attr_swordskill" />
<input type="number" name="attr_spearskill" />

<select name="attr_WeaponStat">
    <option value="@{swordskill}">Sword</option>
    <option value="@{spearskill}">Spear</option>
</select>

<button type="roll" name="roll_weapon" value="/roll @{WeaponStat}d10k3"></button>

Nick R. said:

2. What I meant is that if I create a repeating section with roll buttons, will the roll button on row 4 use only values from row 4 and not from row 1?

You will only be able to use values from row 4.

Nick R. said:

Calle A. said:
I'll get back to my computer around the 14th, I'd love to have a look at the CSS and everything then.

Happy to send it, let me kn if you want to use it in our campaign.

Brian said:

You can create a select with values from other attributes. For example:

<input type="number" name="attr_swordskill" />
<input type="number" name="attr_spearskill" />

<select name="attr_WeaponStat">
    <option value="@{swordskill}">Sword</option>
    <option value="@{spearskill}">Spear</option>
</select>

<button type="roll" name="roll_weapon" value="/roll @{WeaponStat}d10k3"></button>

You will only be able to use values from row 4.

Nick R. said:

Currently I'm trying to figure out how I can make a multiple line text area in a repeatable list thing.

http://i.imgur.com/5LyiIrm.jpg

Use <textarea name="attr_attribute-name"></textarea> instead of <input type="text" name="attr_attribute-name" />. You may want to use CSS to modify the dimensions of the textarea.

Nick R. said:

I'm also wondering how to change the look of the dice button.

Would it be in this code?
"button[type=roll].sheet-blank-roll-button::before,
input[type=radio]:not(.sheet-tab):checked ~ input[type=radio] + span::before,
.sheet-dots input[type=checkbox]:checked ~ input[type=radio] + span::before { content: ""; }"

Aiming for something more like these: https://app.roll20.net/forum/post/1009540/still-more-sheet-building-issues#post-1011021

Setting the button::before style to include content: "" will remove the d20 image that defaults on button[type=roll] elements. (You will likely wrestle with specificity, so I recommend doing the same thing as you've quoted: add a class to the button, and use button[type=roll].sheet-my-class::before.) Generally, styling a button works just like styling anything else, though.

I can't comment on Riley's criterion for accepting a sheet. At a guess, I'd say he probably just makes sure nothing explodes, as he's a busy guy and can't be familiar with every game system. (Consider: some of the fields on the oWoD sheets don't even save correctly.)

If you don't include the json file, Riley won't even attempt to add it to the approved list of sheets (and I doubt he'll do much if any validation on it). You can use that fact to upload a "beta" version of the sheet to look at. Of course, you could also simply post a link to your own Git fork for people to peruse, rather than sending a pull request to Riley.