Skip to content

Adding Your Own Content

Garrett Vorbeck edited this page May 3, 2022 · 5 revisions

Default Behavior

The GMCM by default expects to find your content at path/to/site/src/content/. The first time you run gatsby develop from your site's root directory, the GMCM will create an empty src/content directory for you if one does not already exist.

Changing Default Directories

There are theme options to change those default paths: !!! ADD THEME OPTION DOCUMENTATION !!!

Content Types

There are six content types you can add to the GMCM.

  1. Adventures

Adventures, or campaigns, are where you'll house the games you and your players will embark upon.

  1. Locations

A Location is a mapped destination your players may visit at some point during your game. Here you'll set up the map data and room notes.

  1. NPCs

Non-Player Characters. Keep them and all their details listed in a handy table on your Adventure's landing page.

  1. Rule References

Shorthand notes about rules. Can't remember the rules for drowning characters? To to find what a shop might have for sale and associated costs? Document them here.

  1. Monster Stats

By default, the GMCM contains all the Dungeons & Dragons monsters listed in the SRD, but you can also build out more interactive stat sheets that allow you to roll for checks/saves/attacks.

  1. Spell Stats

By default, the GMCM WILL EVENTUALLY contain all the Dungeons & Dragons spells listed in the SRD, but you can also build out official or homebrew interactive spell sheets that allow you to document all the magical intricacies of your game.

Adding Adventures

Inside your src/content/ directory, create a new directory for your adventures called adventures. Inside there, create another directory for each of your adventures (ex: "Lost Mine of Phandelver" might become src/content/adventures/lmop/). It can be named anything, but it should be named something you'll be able to remember.

Everything about your adventure will live in here, but first you'll need to create an index.mdx file that will contain the basics about your adventure. The provided example adventure's index.mdx file looks like this:

---
# Adventure name (String)
title: 'Zapped From the Material Plane!'
# The recommended levels this adventure advances through. (String)
levels: '1 - 5'
# The recommended number of players this adventure is suited for. (String)
playernum: '1 - 5'
# Your adventure's setting. (String)
setting: 'Realms of Examplia'
---

_Zapped From the Material Plane!_ is an example set up to show how GMCM adventure file architecture is set up. This text is read from the `index.mdx` file in the adventure's root directory. A number of frontmatter fields can be placed in this file to give further details regarding the adventure, such as its title, levels, player number, and setting. Open the `index.mdx` file in your favorite editor to see how this is formatted.

The four fields: title, levels, playernum, and setting are enough to get the GMCM started. Add a brief paragraph under the closing --- to give your adventure a description. Text is formatted with markdown. After you have created these directories and your index.mdx file, run gatsby develop and you should see your new adventure listed on http://localhost:8000/adventures.

Adding Locations

As your game progresses and your players advance through your adventure, they will inevitably stumble into mapped locations like "The Fortress of Dread" or "The Ruins of Caledonia". You'll likely have a fat stack of notes for these locations such as monsters, events, traps, loot, and NPCs that can be found in this location. Store it all in a location page within your GMCM.

In the directory you created for your adventure (path/to/site/src/content/adventures/example) create two more directories called locations and images. In your src/content/adventures/example/locations/ directory you will create an .mdx file for each location (ex: "The Moonbeam Observatory" might become moonbeam-observatory.mdx). It can be named anything, but it should be named something you'll be able to remember.

Everything about your location will live in here. The provided example adventure's location "Example Location" has a location .mdx that looks like this:

---
# Name of the location (String)
title: Example Location
# Image details (Object)
map:
  # Image file location relative to the index.mdx of the adventure (String)
  image: '../images/examplia-hills-barrow.png'
  # Number of CSS Grid columns (Integer)
  width: 21
  # Number of CSS Grid rows (Integer)
  height: 27
  # Eyeballing the CSS padding of the image (String)
  padding: 8% 8% 8% 8%
# List of areas in the location (Array)
areas:
    # Name of the area (String)
  - name: 'Entrance'
    # X coordinate of the CSS Grid where the area tag should appear on the map (Integer)
    x: 10
    # Y coordinate of the CSS Grid where the area tag should appear on the map (Integer)
    y: 4
    # Collection of short form symbols that appear on hover of the area tag (Array)
    flags:
        # Flag symbol key (String)
      - eyes
      - trap
      - person
    # Collection of traps associated with this area (Array)
    traps:
        # X coordinate of the CSS Grid where the trap should appear on the map (Integer)
      - x: 8
        # Y coordinate of the CSS Grid where the trap should appear on the map (Integer)
        y: 5
        # Width of the CSS Grid (in columns) where the trap should appear on the map (Integer)
        w: 2
        # Height of the CSS Grid (in columns) where the trap should appear on the map (Integer)
        h: 2
    flavor: |
      This is **flavor text** written in _markdown_. It's for designating what text to read aloud to your players, for example "Dust and spiders lurk here, where adventurers are seldom seen."
    content: |
      #### Occupants
      * 2 <MonsterLink m="example monster">Example Monsters</MonsterLink> - This is a custom link that sends you directly to the Bestiary highlighting the monster in question. Just type `<MonsterLink m="example monster">Example Monster</MonsterLink>`. The same works for spells: `<SpellLink s="gotcha spell">Gotcha Spell</SpellLink>`.

      #### Environment
      * The main gates, made of bronze-covered wood, have corroded and collapsed.
      * Any dice formulas in text can be turned into buttons to roll from!
          * example: Typing `<Dice r="2d6" />` in your front matter will result in <Dice r="2d6" />. Heres some more: <Dice r="d20" />, <Dice r="4d8+5" />
      #### Developments
      * Hover your mouse over the PLAYER STATS bar at the bottom of your screen. Your players' info will be displayed. Right now it's just their Passive Perception, but I'll put more here soon.
      * Any loud noises here attract attention from Goblins in **area 7**.
      #### Treasure
      * A single **MacGuffin** is located in the southeast corner.
      * 1 scroll of <SpellLink s="gotcha spell">Gotcha Spell</SpellLink>
      #### XP
      * The party splits 5,000 xp for being great. And defeating the goblins.
  - name: Moonbeam Observatory
    # ... Fields for next area here ...
---

This is where you can put "General features" for this map. Include things like:

- **Doors**. Doors in this room are made of clay. They are awful. Why would anyone make clay doors?
- **Ceilings**. Ceilings are 10 feet high and are entirely unremarkable. Here's a random dice button, because you can also put them here: <Dice>3d6-3</Dice>

Getting your map grid perfect

The location map uses CSS Grid to place items across the gridded battle maps. Count the columns and rows on your map image and input those results into the width and height properties of the map item. Frequently, map images' grid doesn't perfectly align with the edges of your image or even have a bit of a frame before the grid starts. That's where the padding property comes in. Treat it like a CSS Padding rule and give a string representing the image's padding. It can be tedious, but once it is done right, the result is awesome. I like to find the padding by manually adding padding to the element in my browser's developer tools until it lines up.

Location "Flags"

One of the features of the map is the ability to hover over the keys and see the room's name and a set of symbols that will tell you at a glance what your players will experience inside. For now, these are hardcoded, but I may make this more flexible in the future. The current values for this field is:

  • person - A person of interest is located here.
  • monster - Monster(s) present here.
  • secret - There are hidden passages or items here.
  • eyes - 'Players can/are being observed here.
  • treasure - There is loot here.
  • trap - There is a trap here.
  • boss - A boss level monster is here.

Adding NPCs

While traveling to various locations, your players will have to interact with several Non Playing Characters that are your job to bring to life as the Game Master. Keeping all those characters and their various intricacies can be a lot to remember, so the GMCM comes with an NPC table to hold all of that information. Every adventure landing page has an NPC table that looks for .mdx files inside your adventure's npcs/ directory (ex: path/to/site/src/content/adventures/example/npcs/). If you haven't already, create an npcs/ directory. Then create an .mdx file for your NPC named for them (the name is unimportant for its function within the GMCM) and format it like this:

---
name: Jerry
race: Human
age: '20'
motive: friendly
stats: commoner
emotion: apathetic
location: Examplia Canyon
occupation: prospector
voice: southern
---

Each NPC should have its open file. This differs from monsters, spells, etc that keep several stats in one file, because sometimes an NPC will appear in multiple adventures and you may want to drag-and-drop your NPC into multiple adventures.

Adding Rule References

I'm still tooling with how these are formatted. They will be standardized shortly.

Adding Monsters

Monsters and their stats are shown on the search pages. While you can only add monsters to the search results from the "Bestiary" page, those results do not go away when you go to the "Spellbook" page, allowing you to build out a stat board for your session. Monsters are also kept in .mdx files within the content/monsters/ directory. Out of the box, the GMCM includes all the 5E D&D monsters, but you can add more including your own homebrewed beasts.

In /src/content/monsters/ add a new .mdx file (ex: mymonsters.mdx) and start adding front matter like this:

---
monsters: # This needs to be at the top. 
    # Name of the monster.
  - monster: Gobbler
    # Where this stat sheet came from.
    source: 'Homebrew'
    # Size, type, and alignment. Formatting not important.
    type: 'Small humanoid (goblinoid), neutral evil'
    # Hit Points. "value" is the average default, "notes" is the formula the Combat Tracker uses to determine a monster's starting HP.
    # ROADMAP: In future releases, if a monster lacks a "notes" field here, it will default to the "value" field.
    hp:
      value: '7'
      notes: '2d6'
    # Armor Class.
    ac:
      value: '15'
      notes: 'leather armor, shield'
    # Speed. Array of various speeds. NOTE: The first value doesn't need to have "Walking," it is assumed. Other will need to start with the type of movement (ex: 'Swimming')
    speed:
      - '30 ft.'
      - 'Swimming 20ft.'
    # Monster's Ability Scores.
    abilities:
      str: 8
      dex: 14
      con: 10
      int: 10
      wis: 8
      cha: 8
    # Damage Vulnerabilities. Formatted just like Speed is, as a list.
    dmgvulnerabilities: null # No need to include every field for each monster.
    # Damage Resistances
    dmgresistances: null # I'm including unused fields for example's sake.
    # Damage Immunities
    dmgimmunities: null # Normally I wouldn't include these if a monster didn't need them.
    # Condition Immunities
    cdnimmunities:
      - 'Poisoned'
    # Saving Throw info, list here if different from Ability Score.
    saves:
      - name: Con
        modifier: 6
    # Skills that your monster has.
    skills:
      - name: 'Stealth'
        modifier: 6
    # Senses, formatted as list
    senses:
      - 'darkvision 60 ft.'
    # Languages known to monster.
    languages:
      - 'Common'
      - 'Goblin'
    # Challenge Rating
    challenge: '1/4'
    # Traits, actions, reactions, and legendary actions are all formatted the same with a "name" and a "content" key. "content" can have markdown formatting.
    traits:
      - name: 'Nimble Escape'
        content: |
          The goblin can take the **Disengage** or **Hide** action as a _bonus action_ on
          each of its turns.
    actions:
      - name: 'Scimitar'
        content: |
          Melee Weapon Attack: +4 to hit, reach 5 ft., one target. Hit: 5 (1d6+2) slashing damage.

          <Attack n="Scimitar" h="1d20+4" d="1d6+2" /> # Available soon in v0.1.3!
      - name: 'Shortbow'
        content: |
          Ranged Weapon Attack: +4 to hit, range 80/320 ft., one target. Hit: 5
          (1d6+2) piercing damage.

          <Attack n="Shortbow" h="+4" d="1d6+2" /> # Available soon in v0.1.3!
    reactions: null
    legendaryactions: null
    # This is a free form area for monster description and lore. 
    description: |
      Extremely small and angry. Do not approach. Loves chocolate.
  - monster: # Start of next monster. Documented right under the previous one. No need for separate files!
    ...
---

Adding Spells