WoR Character Sheet for Roll20.
Install packages and gulp.
npm install
npm install -g gulp-cli
To compile once, use the default task:
gulp
To compile whenever a file changes,
gulp watch
To see all the tasks, use
gulp -T
The base output (just the sheet, not a full HTML page) can be found in
target/bare.html, while the sheet in an HTML page can be found at
target/full.html.
See Writing the Sheet for information on the compilation process, and see Compatability Notes for information on how this sheet attempts to mirror Roll20's sheet environment.
HTML is compiled with
nunjucks. To allow for proper roll20 compatibility, the default syntax has been changed as follows:
| Block Start | Block End | Variable Start | Variable End | Comment Start | Comment End | |
|---|---|---|---|---|---|---|
| Old | {% | %} | {{ | }} | {# | #} |
| New | <% | %> | <$ | $> | <# | #> |
The main
templates or "entrypoints" can be found in templates/, but you shouldn't need to edit these directly.
Both templates import src/sheet.html.njk, which in turn can import other
partials from the src directory, which is where you can put other
partial templates. The .njk extension is suggested but not required.
All HTML partial templates are in the src/ directory, so
{% include "sheet.html.njk" %}
Processes then includes the file at src/sheet.html.njk.
Javascript is compiled with browserify to manage
modules and Terser for transpilation and minification.
Browserify enables require('module') in the browser for both local and NPM
modules. To import local modules (for good code organization), you can use
const mod = require('./mod.js');To import the module at src/mod.js. Local modules are all relative to the
src/ directory.
NPM modules are imported by their NPM name, so to import the elementify
module, first we need to install it with NPM
npm install elementify
(note that this should be a full dependency, not a development dependency)
Then, you can import it in your Javascript with
const elementify = require('elementify');
npm install automatically adds the dependency to package.json, and
Browserify bundles everything together into 1 Javascript file.
Terser is a transpiler for ES6 and a minifier, which takes the bundled Javascript from Browserify and makes it smaller.
This compilation chain outputs to target/partials/app.js
Uses node-sass to compile
SASS to CSS. All .scss files in src are
compiled to equivalently named .css files in target/. The most
important is src/style.scss. SASS allows the use of partials. A preceding
underscore indicates a partial stylesheet that shouldn't be compiled to a
standalone CSS file. For example, _partial.scss can be imported with
@import 'partial';This is relative to the src directory. Also note the lack of extension.
Note that Roll20 does not permit ID CSS selectors.
Roll20 requires sheets be exactly 1 HTML file and 1 CSS file and nothing else,
so this project compiles all HTML and Javascript to a single HTML file, so this
compilation process inlines all Javascript. This is achieved by compiling
the Javascript first, then using nunjucks to import target/partials/app.js
and target/partials/style.css directly into the resulting file directly. CSS
is compiled separately. The full.html sheet links to it. The bare.html sheet
doesn't, because Roll20 strips out all style and link tags, so style.css
needs to be copied and pasted into the Roll20 interface.
Note that Roll20 prepends sheet- all non-permited class names. Permitted class
names start with attr, roll, or repeating_. To make Roll20-less
development easier, full.html includes Javascript which makes the same changes
to the sheet. Additionally note that Roll20 converts all id selectors found in
your stylesheets to class selectors.
Note that, although a r20 Javascript module has been supplied, it is currently
a very thin wrapper over Roll20's provided functions. At this time, it provides
no replacement code or similar shims.
Andrew Amis, Jakob Rubin.
GPL 3.0 or later.