Packages with several files
A single .html file handles one sheet. Use a package (a .zip) when the plugin has:
- more than one sheet, or sheets and tables together;
- the CSS and JavaScript in separate files;
- images, fonts or sounds of its own.
What goes in the package
Section titled “What goes in the package”The RPG Desk Basic Sheet, for example:
Directorybasic-sheet.zip
- manifest.json the manifest, at the root
- sheet.html the sheet
- style.css
- sheet.js
- portrait.svg the portrait’s silhouette
manifest.json has the same fields as the single file’s manifest and, on each sheet or table, the
entry, its HTML:
{ "rpgdesk": 1, "id": "br.rpgdesk.basic-sheet", "name": { "en": "RPG Desk Basic Sheet", "pt": "Ficha Básica do RPG Desk (inglês)" }, "version": "1.0.0", "author": "RPG Desk", "description": "A sheet for any system: attributes, skills, attacks, inventory and notes, with health and energy on the player's card.", "sdk": 1, "sheets": [ { "type": "br.rpgdesk.basic-sheet.character", "title": { "en": "Character", "pt": "Personagem" }, "entry": "sheet.html", "private": { "gm": "gm" } } ]}- Each entry HTML loads rpgdesk.js (and, if you want,
rpgdesk.css) in its<head>, as in the single file. The manifest does not go inside the HTML. - The other files come in through relative paths:
<link rel="stylesheet" href="style.css">,<script src="sheet.js"></script>,<img src="img/crest.webp">. - The
"$schema"in the manifest (optional) gives you the editor’s help:“$schema”: “https://docs.rpgdesk.com/_sdk/1/manifest.schema.json”. - The
"icon"(optional) is a.pngor.svgfrom the package.
Every field is in The manifest.
Test mode: the data stays in this browser only. The band in the corner switches the role (GM, sheet owner, another player) and shows the log of rolls.
Build the .zip
Section titled “Build the .zip”- Put the files in a folder, with
manifest.jsonat its root. - Select the contents of the folder (not the folder) and compress them: on Windows, right-click → Send to → Compressed (zipped) folder.
- Install the
.zipin Room settings → Plugins → Install plugin….
Accepted files
Section titled “Accepted files”.html .htm .css .js .mjs .json .txt .md .png .jpg .jpeg .webp .gif .svg
.woff2 .woff .ttf .otf .mp3 .ogg .wav
- The package has up to 10 MB and 500 files.
- Paths are case-sensitive:
Portrait.pngis notportrait.png. - The page reads the package’s own files, even with
fetch('data/spells.json'). The internet, no.
Libraries
Section titled “Libraries”Libraries such as Alpine.js and jQuery work, as long as their file goes inside
the package. A <script src> from a CDN is an error, because the sheet has no internet.
- Download the library’s
.min.jsbuild (for Alpine, thecdn.min.jsof thealpinejspackage on npm). - Save it in a
vendor/folder of the package, asvendor/alpine.min.js. - Load it by its relative path, after rpgdesk.js:
<script defer src="vendor/alpine.min.js"></script>.
- The verifier gives no warnings for a library’s code: a file in
vendor/, or code that starts with the/*!license comment. See The verifier. - With Alpine, use
x-data,x-showandx-forfor the screen (tabs, showing and hiding) anddata-fieldfor the data. Don’t putx-modelanddata-fieldon the same field: both would write the same value. - jQuery’s
$.ajaxand$.getJSONread the package’s files ($.getJSON('data/spells.json')), but not the internet.