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

Difference between revisions of "Character Sheet Development/Best Practice"

From Roll20 Wiki

Jump to: navigation, search
m (Attributes/Inputs)
m (Other Roll20-specific)
Line 23: Line 23:
  
 
* '''Avoid''' <code>!important</code>. Whenever possible try to avoid using <code>!important</code> in CSS as it can create a cascading effect of needing to use ever more <code>!important</code> to fix things.
 
* '''Avoid''' <code>!important</code>. Whenever possible try to avoid using <code>!important</code> in CSS as it can create a cascading effect of needing to use ever more <code>!important</code> to fix things.
 
* (Applies to [[Legacy Sheet]], not [[CSE]])'''Don't include''' <code>sheet-</code> '''for CSS Class names in the HTML'''. <code>sheet-</code> is automatically added to the CSS classes in the HTML, so it's redundant to repeat it there. Leaving it out also increases readability if lots of classes are used.
 
** For example in the HTML, instead of <code>class="sheet-strRow"</code>, just do <code>class="strRow"</code>.
 
** '''WARNING:''' the above is untrue for classes of <code><rolltemplate></code> elements. For those, you do need to specify the full class name (i.e. starting with <code>sheet-</code>) or your rolltemplates will simply stop working.
 
  
 
* '''Include a minimum width'''. Including a minimum width on the sheet will help with resizing. Try to not exceed the default width when a sheet opens for the first time, approximately 800px-900px. Character sheets with an NPC view may be smaller and elaborate PC sheets are sometimes bigger.  
 
* '''Include a minimum width'''. Including a minimum width on the sheet will help with resizing. Try to not exceed the default width when a sheet opens for the first time, approximately 800px-900px. Character sheets with an NPC view may be smaller and elaborate PC sheets are sometimes bigger.  
Line 33: Line 29:
  
 
* '''Use <code>^{ }</code> for [[i18n|translations]] in button macros'''. In your [[Character Sheet Development/Button#Roll_Macro|button macros]] using <code>^{key}</code> will insert the appropriate key from the appropriate language's <code>translation.json</code>. This makes roll templates more adaptable to other languages, and avoid hardcoding
 
* '''Use <code>^{ }</code> for [[i18n|translations]] in button macros'''. In your [[Character Sheet Development/Button#Roll_Macro|button macros]] using <code>^{key}</code> will insert the appropriate key from the appropriate language's <code>translation.json</code>. This makes roll templates more adaptable to other languages, and avoid hardcoding
 +
 +
* (Applies to [[Legacy Sheet]], not [[CSE]])'''Don't include''' <code>sheet-</code> '''for CSS Class names in the HTML'''. <code>sheet-</code> is automatically added to the CSS classes in the HTML, so it's redundant to repeat it there. Leaving it out also increases readability if lots of classes are used.
 +
** For example in the HTML, instead of <code>class="sheet-strRow"</code>, just do <code>class="strRow"</code>.
 +
** '''WARNING:''' the above is untrue for classes of <code><rolltemplate></code> elements. For those, you do need to specify the full class name (i.e. starting with <code>sheet-</code>) or your rolltemplates will simply stop working.
  
 
<noinclude>==See Also==
 
<noinclude>==See Also==

Revision as of 10:04, 8 May 2022


These are general best practice guidelines to help increase consistency among sheet authors, in order to make more maintainable code repository for the community. Some of these are generic, while others are specific to how the Roll20 Character Sheet Framework functions.

Contents

Attributes/Inputs

  • Attribute names should be lowercase. For the sake of consistency & to avoid some quirks related to sheetworkers, it's best to always give lowercase attribute names, such as attr_strength, attr_strength_mod, which will then be called in macros and sheetworkers as strength, strength_mod. It might be a good idea to limit them to alphanumerical + _ and -.
  • RPGs have weird words. Utilize spellcheck="false" for text inputs and <textarea>, to prevent the browser from indicating spell errors.
  • Use fewer Attributes & Inputs. The more attributes and inputs you have the slower the sheet will load. This is not a concern for the average sheet but robust sheets such as the D&D 5E Sheet by Roll20- or the Pathfinder (Community)-sheets large amount of attributes & inputs can lead to performance issues if left unmanaged. If sheetworkers need to process many attributes often, or the game relies on characters having many entires in Repeating Sections, it might impact performance.

Sheetworkers & Roll Templates

  • Avoid Asynchronous cascades. Whenever possible avoid asynchronous cascades for sheet workers. An example of this is, getAttrs -> calculations -> setAttrs -> getAttrs -> calculations -> setAttrs… A better way to do this is getAttrs for everything you'll need then do all necessarily calculations before finally using a single setAttrs.
  • Use Sheetworkers over Auto Calculated attributes. Sheetworkers only trigger when events happen ,which improves performance for character sheets over auto calculated attributes since these events occur less frequently.

Other Roll20-specific

  • Avoid !important. Whenever possible try to avoid using !important in CSS as it can create a cascading effect of needing to use ever more !important to fix things.
  • Include a minimum width. Including a minimum width on the sheet will help with resizing. Try to not exceed the default width when a sheet opens for the first time, approximately 800px-900px. Character sheets with an NPC view may be smaller and elaborate PC sheets are sometimes bigger.
  • Use Supported Fonts. Either use the five named fonts (Arial, Patrick Hand, Contrail One, Shadows Into Light, and Candal), or Google Fonts. Roll20 also comes with some Icon Fonts, and it's possible to us Google's Material Icons.
  • Use ^{ } for translations in button macros. In your button macros using ^{key} will insert the appropriate key from the appropriate language's translation.json. This makes roll templates more adaptable to other languages, and avoid hardcoding
  • (Applies to Legacy Sheet, not CSE)Don't include sheet- for CSS Class names in the HTML. sheet- is automatically added to the CSS classes in the HTML, so it's redundant to repeat it there. Leaving it out also increases readability if lots of classes are used.
    • For example in the HTML, instead of class="sheet-strRow", just do class="strRow".
    • WARNING: the above is untrue for classes of <rolltemplate> elements. For those, you do need to specify the full class name (i.e. starting with sheet-) or your rolltemplates will simply stop working.

See Also