D20 Roller
In an online class, the project was to make a dice roller in React. Being the fan of DnD that I am, I had to make it a d20 and add in the DM's response to the roll. It's been used for playing DnD in a pinch.
This was originally just something I made for fun, because I thought it would be more interesting than simply making a dice roller that used an additional six-sided die. However, once I started, I was committed to making it as functional as I knew it should be, particularly once the course introduced me to the idea of adding a 'rolling' state and using that to render various texts.
Challenges:
- The original project used Font Awesome dice icons. Since I was using a d20, I instead needed to find and make my own images, particularly for each of the numbers the die could roll.
- I had some difficulty dynamically rendering the images. At first it seemed that I might need to import all of the images, and then dynamically select which to render, but I was able to store the image path in a variable and dynamically change that to fit which image I wanted to render.
- At first it was rendering the image with the rolled number immediately, which looked odd while the image was still doing the rolling animation. However, I was able to use a conditional tied to the 'isRolling' state to have it briefly render a blank d20 until the animation stopped.
Reflections:
Even though I originally made it as a more interesting version of a simple exercise in a course, this has ended up being one of the apps I created that gets the most use. Both I and others I play DnD with have used it on several occasions. This showed me that even simple apps can be very useful, when I take the time to ensure they are well-made and I fine-tune their functionality.