I've wanted to start developing small utility programs/apps for a long time. The idea being that they can provide me practice with a number of different kinds of development while producing software that myself (and potentially others) can use. To begin my journey into creating such utilities, I've made a dice rolling app for the Genesys tabletop RPG system!
The app was created with React. This was actually my first foray into making something in React, as I've historically been more of a Vue.js kind of guy. While I'm still not a React convert, I will say I quite enjoyed whipping this little utility app up. The code could be a bit cleaner, and I'll likely go through and separate some of the logic out from the main App.js file at a later time, but for a single night worth of coding I'm content with what I've made.
The UI is designed to be simple and mobile friendly. Some small decisions were made that break slightly from the aim of “realism,” the biggest of which being the representation of the dice faces themselves. In Genesys, some die faces contain multiple symbols. Rather than create images for each potential face, I simply break the aggregate faces into their individual components and render those out separately. This means that a user can choose to roll 4 dice but end up with 5 or more faces being shown. This decision could potentially confuse some people, and I may revisit it later, but for now I find it be an adequate representation.
To test the app, navigate to this link: https://bojjenclon.com/tabletop/genesys/roller/
To view the code on Github, go here: https://github.com/bojjenclon/genesys-dice-roller