Character Vault
Any Concept / Any System
Compendium
Your System Come To Life
Roll20 for Android
Streamlined for your Tablet
Roll20 for iPad
Streamlined for your Tablet

Personal tools

Common Mistakes - Sheet Development

From Roll20 Wiki

Revision as of 14:40, 5 May 2021 by Andreas J. (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search

Character Sheet Creation
Getting Started


Reference


Tools & Tips


Git/GitHub GitHubLogo.png


Other

Main Page: Building Character Sheets

This is a list of common mistakes many do in sheet development. reorganized version of the ones found on BCS#Common_Mistakes.

The section headings are made this way to make it easier to reference individual rules by number, like https://wiki.roll20.net/Common_Mistakes_-_Sheet_Development#5


Contents

Common Mistakes

A list of common mistakes made by both old and new sheet creators/authors.

1

Forgetting to start attribute names with attr_

(Works: <input type="number" name="attr_dexterity"> vs. Doesn't work: <input type="number" name="dexterity">). To store any information on a character sheet, this attr_ prefix is needed in the name. If it is left out, no data being saved in the field after the sheet is closed.

2

Thinking the Preview Panel shows all the changes/is accurate

The preview panel does not show an accurate view of how the sheet will look/work in an actual game, and completely ignores sheetworkers. You need to login to the campaign and open a character sheet there to be sure of sheet visuals/functionality, or use the Sheet Sandbox.

3

Check/Uncheck "Legacy Sanitization" when using custom code

Depending on if you have sheet code formatted for Legacy sheets or CSE, you need to check the box found in the Sheet Editor, or when using Sheet Sandbox, update the sheet.json-section.

4

(Legacy Sheet)Forgetting to add sheet- to the class names in your .css file.

This is not need in the .html file, Roll20 automatically assumes all classes have that prefix there.(Doesn't apply to CSE sheets) See CSS Styling

5

Using an underscore in the name/class of repeating sections

Each <fieldset> needs to have unique classname, that starts with repeating_, and the rest of the name cannot have underscores, or the section won't save any information. Using - is fine, but might be smarter to write it as one word. Good ex. <fieldset class="repeating_meleeattacks">

6

CSS: Not understanding how General Sibling Selector ~ works, and how it applies in making tabs/hideable areas on the sheet

The CSS Wizardry examples on show/hide areas & creating tabs on your sheet, relies on the correct positioning of elements. If the HTML elements are in a different order, or are inside other elements, the conditions aren't met for making the ~ selector work in CSS.

7

Not using a linter/code validator on your HTML/CSS/Sheetworker/Translation files.

Often with HTML/CSS things can seemingly work fine for a long time even when you have mistakes, and cause trouble way later. Running your Sheetworker's code through a JavaScript validator is a critical step to finding why it might not work. Checking any translation.json or sheet.json files is also important. HTML/CSS code validation

8

Google Fonts

Follow the Roll20 guide to the letter, and don't use urls generated by google, you need the remove the "2" from the url, among things. Google Fonts on Roll20 Sheets

9

Do not submit a new sheet that uses <table> for layout.

It's the most common reason for new sheets being rejected/delayed, use better methods for layout instead, such as CSS Grid or Flexbox. There are old sheets in the repo using <table>, but they where created before this rule against <table> was made.


General Coding Mistakes

The kinda obvious, general coding mistakes, that aren't related to how Roll20 sheets code works specifically, but are general coding things to keep in mind, regardless of subject.

G-1

Not reading the Roll20 documentation.

Roll20 sheet code isn't straight up just regular HTML/CSS/JavaScript, but has a number of differences Much of the quirks & basics related to Character Sheet Creation is documented/linked on Building Character Sheets, and the pages are regularly getting updated. It's always a good idea to check pages again, even if you read them in the past. List of all pages related to "Character Sheet Creation"

G-2

Not looking at existing code.

Seeing how GitHubLogo.png have been made and structured can help you avoid reinventing the wheel or making many of the common mistakes as result of knowing HTML/CSS/JavaScript, but not taking time to get familiar with how Roll20 sheet code is slightly different. All sheets in the GitHubLogo.png are under MIT license so are free(and encouraged) to be used as templates for creating your own sheet, instead of making everything from scratch.

G-3

Not asking for help when you get stuck

Roll20 has a small, but active, community who works with creating and improving character sheets, and are often eager to help out if you got stuck on some feature you've tried to figure out.


Related Pages