Pathfinder 2: build flow (Patreon)
Content
The ultimate goal of the project is to produce a personalised character sheet. For reasons described in my last post ( https://www.patreon.com/posts/19446212 ) the result this time will not be a PDF, but a self-contained HTML file with embedded CSS etc, designed for printing.
In order to get there, it needs to take a user's selection, pick elements to combine, and produce a completed . Here's how that works.
---
REGISTER
The full list of available options is loaded and added to a global registry. Objects are identified by a type and an id. For example, there's a class for the Wizard, which has { type: "class", id: "wizard" }; there's also a page for the Wizard, which has { type: "page", id: "wizard" }, and these are separate objects.
The various JavaScript and YAML files seen in other posts are transpiled in advance into a dense JavaScript object lib-pathfinder2.js, which makes this step relatively easy at runtime as it's not finding files or parsing YAML each time.
ACTIVATE
Your character selection - in the form of a JSON object - gives the set of options you need to enable. Each selected option - class, feat, ancestry etc - contributes to the result.
Each object requires other objects, and so on, in a cascading process. For example, the Wizard class adds a Wizard page, and a spellcasting class feature that add a spells list to that page.
The result of this is a structured tree of nodes representing pages, sections and visible elements like text, calculations, spell lists, etc.
RENDER
The tree is rendered hierarchically. Each visual element produces HTML output, including the elements within it.
The containing framework embeds whatever CSS and JavaScript it needs to, again combining elements. So your character sheet might include base.css, pathfinder2.css, largeprint.css and turquoise.css, along with custom CSS to embed your iconic image - whether that image was uploaded or selected from the standard list.