A framework using Svelte to generate a website for one's TTRPG notes with buttons that activate Foundry commands
0

Configure Feed

Select the types of activity you want to include in your feed.

20 1 0

Clone this repository

https://tangled.org/cass.cityboundforest.com/fvtt-notes https://tangled.org/did:plc:u77wyqyb7cjg4dtq2yckflxy
git@tangled.org:cass.cityboundforest.com/fvtt-notes git@tangled.org:did:plc:u77wyqyb7cjg4dtq2yckflxy

For self-hosted knots, clone URLs may differ based on your setup.



README.md

Foundry VTT Notes#

A repo using Svelte to generate a static site for notes that connect Foundry VTT via the Foundry VTT REST API.

Setup#

  1. Install dependencies by running npm install
  2. Add your content in the form of Markdown files to the content folder, and collect your notes into folders for each campaign (e.g. content/season-of-ghosts/session-33.md, content/curse-of-strahd/session-2.md, etc)
  3. Create a .env file with the keys below in the Environment Variables section.
  4. Run npm run build to build your site (at least once)
  5. Run npm run preview if you'd like to preview the site before publishing it.

Environment Variables#

Your .env file needs to contain the variable named PUBLIC_FOUNDRY_URL containing the URL (without http/https in front; e.g. PUBLIC_FOUNDRY_URL="foundryrestapi.com"). Then, for each campaign, you create an API key and store that in a variable labeled PUBLIC_[CAMPAIGN_SLUG]_KEY, where CAMPAIGN_SLUG is the slug you use for your campaign in the content folder (notably, it uses underscore separation instead of dash separation). Finally, create a variable labeled PUBLIC_CAMPAIGNS containing a comma-separated list of all of your campaign slugs.

Content Buttons#

To create a button in your Markdown file that uses the Foundry VTT REST API, at the top of your Markdown file, create a <script> section and import the components you'd like to use. Example:

<script>
    import CheckButton from "$lib/components/checkButton.svelte";
    import RollButton from "$lib/components/rollButton.svelte";
    import RollTableButton from "$lib/components/rollTableButton.svelte";
</script>

Then, you would call each component like you would an HTML tag. The parameters required for each as well as examples on how to use them are listed below.

CheckButton#

<CheckButton skill="deception" dc=18 campaign="my-campaign-slug" />
  • Usage: Sends a chat message to Foundry with a roll prompt for players to click on with their tokens
  • Parameters:
    • skill (required): the slug of the skill you'd like to use, all lowercase and separated by dashes. saves are included, check the information from your game system.
    • dc (required): the Difficulty Class (DC) of the check you'd like to include.
    • campaign (required): the campaign slug related an API key in your Environment Variables (see related section)

RollButton#

<RollButton dieFormula="1d4" flavor="Food Points" campaign="my-campaign-slug" />
  • Usage: Rolls a set of dice denoted in dieFormula with an optional flavor tag
  • Parameters:
    • dieFormula (required): the dice formula you'd like to roll; compatible with mixed die types (e.g. 1d8 + 2d4).
    • flavor: Flavor text to include in the roll
    • campaign (required): the campaign slug related an API key in your Environment Variables (see related section)

RollTableButton#

<RollTableButton uuid="mD4W0Ulq1tjgLYpz" label="Roll on the table" campaign="my-campaign-slug" />
  • Usage: Roll on a RollTable in Foundry and whisper the result to the GM
  • Parameters:
    • uuid (required): The UUID of the RollTable
    • label (required): The label for the button
    • campaign (required): the campaign slug related an API key in your Environment Variables (see related section)