Labor Day Weekend
Posted on Mon 02 September 2019 in Updates
It's a three-day weekend, and what does that mean? Well, probably getting sick, because the universe is cruel. But that aside, it's actually been quite a relaxing one - we had D&D on Saturday, and shortly before I discovered a very cool React project called The Spells of D&D 5e. It was almost perfect... and hey, I've never played with React before, so why not give it a spin?
Backing up a bit - I'm a visualization nerd. Before landing completely in software engineering, I had planned to blend graphic design and programming, two things I'd fallen in love with as a kid.
So here I am, poking at my news feed on Saturday morning, and this absolutely gorgeous interactive infographic shows up. What's a girl to do? Share it with the rest of her nerdy friends, of course.
It wasn't long before I poked at the source code. From what I could initially see (despite knowing absolutely nothing of node.js or React), dukeflipchart had started with a Create React App, interleaved some specific logic, and integrated the JSON he generated via u/Zolo49's spell spreadsheet. He's got a pretty solid explanation of the process on the original page; check it out if you're interested.
Personally, I wanted to get my hands dirty, so in my Chromebook fashion, I spun up a Codenvy NodeJS project, forked his project, imported it, and got to poking. The scaffolding for leveling, which felt like a really obvious additional filter to be made available.
The biggest changes to make were:
- Add another HighlightLabel
section for the levels
- Add functionality for the new section's onClick
behavior
- Change the getHighlightColors
logic to consider both the casters and the levels
- Update the logic behind hasOpacity
That last one took way longer than I'd like to admit. I probably spent a couple hours going in circles, trying to find why logic in one place was behaving so different from another place. While I'm tempted to blame the sick on this, realistically, I just don't know the frameworks being used here, so a lot of the more implicit things (such as these seemingly arbitrary property names) just weren't clicking for me.
Sleeping on it seemed to do the trick - when I looked again this morning, tracing line for line, I finally spotted it, and it was such an easy change, it was embarrassing. But it was finished, so all that was left to figure out was publishing to Github-pages, which should have been easy, except it took me a while more flailing to figure out the right way to get npm to use my personal access token.
Finally, though, it's here - The Spells of D&D 5E.
After spamming the same nerdy friends, a couple items were flagged for possible improvements: - Linking to spell descriptions / details - Additional classes added
The former should be easy, and the latter... well, as dukeflipchart said, it's time consuming. But maybe worth it.