This blog is a continuation of Part 1 (Please read for some context leading into this post) . Also, if you wish to see the code for the website, feel free to check out the GitHub repo .
Features To Build
In this post, I'll go into detail for the first half of the features, what it took to implement, and how each challenge was met. Here's the full list of features to be built (treat this like a table of contents for this post)
- 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
Style Of The Website Looks Like The Show
One important goal for me was to design the website such that taking a screenshot would look as close to the show as possible. I wanted all users to feel the same level of post production happiness that the show provides 😄
Background Images
Let's start with the background images. I went through and grabbed a few screenshots from the show, as I wanted to build a "clean slate" for the background. As you can see from the images, this was gonna be tougher than originally planned as there's always a part of the background image obscured and there's text (Latin maybe?) written all over the place.
Seems like I got enough here to stitch together a clean plate of both the background and the little pedestal each character is presented on... so let's bust out GIMP and see what we get 🎨
Hey hey hey, not too bad!!! But as I started coding some things up, I did notice something was off...
Matching Font
Ahh yes, I'll need to grab a custom font that matches what the show used. From what I could tell, there were two fonts used: One for the main text and a second for any numbers displayed on the dice.
Using WhatTheFont , I was able to track down and download some fonts that are pretty darn close to the original. But after some testing, I ended up combining everything to just the main text font.
For the main text, using the "Mr Darcy" font in bold appears like this. Does this look close enough?
Matching Colors
After dropping a screenshot into Paint and using the Color Picker, I captured all the common colors used in the
original design. Since I'm using SASS for my CSS extension language, I created a single
$medium-beige: rgb(200, 170, 141);
$dark-beige: rgb(123, 94, 64);
$light-beige: rgb(248, 225, 203);
$light-blue: rgb(0, 253, 255);
$medium-blue: rgb(4, 164, 165);
Everything On The Page Is Editable
This one is pretty self-explanatory, but there was a lot of custom CSS work to make the text inputs be almost
"hidden". I wanted to adhere to one of my earlier principles for this website:
design the website such that taking a screenshot would look as close to the show as possible
Player's Name (The Actual Person Sitting At The Table)
This input should be for the actual player behind the character. One tricky thing that took some time to get
right was to make the width dynamic with the length of the input. This was necessary to make the
Character's Name & Short Description Of The Character (Including Age)
Decided to combine these features as only a few lines of CSS are the difference between the two. At this point in the project, it was a big boost of confidence to finally start seeing progress on the website!
Likes & Dislikes
This was the first feature I implemented that was NOT in the original show. I figured having
This is also the first time in the project where I used a modal dialog, and as I didn't want to use any 3rd party libraries, I made a custom, re-usable one myself 😅 ( See React component here )
Example Modal Dialog
<CustomModal
open={open}
onClose={handleClose}
title={'Example Title'}>
<div>
Main Content Here
</div>
</CustomModal>
6 Attributes With Dice Assignable To Each
TLDR;
Character setup for Misfits & Magic is really interesting to me, as you (the player) take each of the six standard DnD dice and assign them to one attribute. I not only wanted to capture this the same way the show did, but also allow users to change which die is associated to which attribute for their characters too.
The shape of the dice was really important to get right, and I decided to use SVG paths with a gradient fill and
Another new touch here was some dice animation when you hover on the dice (try it out above).
Attribute Modifiers
They are hidden underneath each dice attribute unless you either hover over them or set a value
RNG Rolls By Clicking On Dice (With Explosions!)
Seems like a waste to not include RNG dice rolls with the website. Simply clicking on any dice will trigger a roll (including adding any modifiers to the total)!
Also wanted to highlight the amazing feature of dice rolls where if a character rolls the maximum value of a die, they get to roll (and possibly explode) again. So when your dice explode, you'll see a little mini-fireworks show behind the die.
Magic Vs Non-Magic Dice Rolls
When completing an action that's also magic in the show, players get an additional
Wrapping Up Part 2
*PHEW* That was a lot of content to cover! Apologies for the long read, but there was a lot that went into this project and this seemed like a reasonable split of the blog series. Stay tuned for a Part 3 🙌
UPDATE (May 11, 2023): See Part 3 here .
Best,
nv