TLDR; I made another thing
The Inspiration
So let's get the obvious out of the way... I'm a big nerd for the online DnD/RPG series Dimension20 hosted by DropoutTV. They are really entertaining, and I've always gravitated towards the super visual experience you get with the drawings and visual graphics introduced in post-production of the show.
Similar shows with visual forward RPGs include:
This leads me to a recent series from Dimension20 with a twisted version of 4 students attending a Harry Potter-esque school. This series is called Dimension 20: Misfits and Magic .
While watching the show, their production team included visually stunning (IMHO) character sheets for the viewers to follow along
That single character sheet shows a ton of information for the viewer and helps fill in the gap of imagination for what these characters look like. If every game of DnD had these character sheets, a GM (the person running the campaign) can spend more time focusing on the story resulting in a better experience for everyone involved!
If only this existed outside of post-production... as a free website... where anyone can use it...
The Plan
Goal: I want to create an interactive, visual character sheet for Misfits & Magic characters (available for free).
I figure this is also a good excuse to relearn some React basics, while trying not to use other 3rd party libraries.
For those who haven't seen the show, Misfits & Magic is based on a ruleset called Kids on Brooms. The amazing GM of the show, Aabria Iyengar, created a great Reddit comment breaking down the rules of this game (and its differences from normal Dungeons & Dragons).
6 stats: Brains // Brawn // Fight // Flight // Grit // Charm
and each stat has one of the 6 standard poly dice (no d%) associated with a stat.
The GM sets the difficulty for a roll, and the player tries to meet/beat that number with their stat die (with a special effect known as "exploding", called a Lucky Break in KoB - if you roll the highest number on the die, you roll again and add it to the total):
+ the d4 magic die if they're doing magic
+ or plus the HOMEBREWED common-fucking-sense d6 if they're injecting logic into this ridiculous world
+ they add any bonuses (from their character build, wand, or broom) at the end
And results more or less than 5 from the target number yield critical results!
They can take half of the die value (and add their bonuses onto it) for checks if they want. For example: if a Flight roll w/ a difficulty of 8 is called for, and you have a d20 in Flight, you can simply take half the die and succeed with a ten without rolling. There are conditions when this is allowed RAW, but I'm a lenient GM.
Failed rolls (and GM fiat) yield Adversity Tokens which can be spent 1-for-1 on die rolls (yourself or others as long as you can explain narratively how you're helping someone succeed) or on special abilities from PC playbooks.
Finally, it's important to note that high die rolls (on magic checks ESPECIALLY) are indicators of magnitude rather than control. KoB can be incredibly dangerous. Evan's build is...interesting.
Did I miss anything?
- A
Some key takeaways are that each attribute (Brains, Brawn, etc.) have a single die associated to them, so each character will naturally have better attributes than others. Also, there's the concept of "Exploding dice", which is FASCINATING to me, and something I'll definitely need to implement... Speaking of, I should probably put together a feature list for this project 🤔
List of Features
- Style of the website looks just like the show (or as close to it as possible)
- Everything on the page is editable
- Player's name (the actual person sitting at the table)
- Character's name
- Short description of the character (including Age)
- Likes & Dislikes
- 6 attributes with Dice assignable to each
- Attribute modifiers
- RNG rolls by clicking on Dice (with explosions!)
- Magic vs Non-Magic dice rolls
- House selection
- Broom selection
- Wand selection
- Adversity Token counter
- Character image (with animation)
- Character customization
- Mobile friendly
- Export & Upload characters
- Reset character button
- Credits modal
It's just as easy as 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20!
Execution
Not gonna lie, this project easily took 2 weeks to finish. I was hoping to finish faster, but I ran into many issues with setting up a development environment (including discovering a bug that crashes StackBlitz, hooray 😥). If you want to see the final product, there's a link in the header and in the TLDR. You can also click here for the GitHub repo.
This post is already getting a bit long, so I'm gonna split this into a multi-part series breaking down how I
completed each of these features (Who knows, maybe I can get this done in only 1 more blog post 😅). It would be
an injustice to not go a little in-depth with how I did things like
UPDATE (May 8, 2023): See Part 2 here .
Best,
nv