30 Days of Code — Day 12
Simple TTRPG Dice Roller
Today I had a lot of fun working on the calculator UI I mentioned a few days ago inspired by developer Toby Coulstock in his Dice Ex Machina app. I thought it would be pretty easy to implement as I have created a similar UI for an application at work, but I was surprised by how much it’s required me to tinker with the CSS for the grid.
I also felt like the results were taking up too much space on mobile and didn’t look very clean, so I tried to simplify that as well. Here’s what I came up with:
Also, rather than displaying all of the details of the result at once, users can tap/click the result to see the breakdown.
Overall I’m much happier with this, and I’m pretty pleased with the progression I made.
Dealing With Bugs
One rather frustrating bug came up while I was working through all of this which really pulled me down a rabbit hole. When using the app on my phone, I found that it was quite annoying to delete input using the new backspace button I made. If you tap it rapidly (as one might do when trying to delete something), it it zooms in.
Double tap to zoom is a useful feature on mobile, so I fully understand why it’s there, however I disabled user-scalable and added touch-action: manipulation to the relevant elements, and it continues to do it. It seems to be a problem with the Ionic Framework, so I reported it on their forums. For now I will just have to tap slowly to delete, but it may be annoying enough to remove Ionic entirely.
Aside from that, things are really starting to look good. I’m very excited for the next steps, though I’m putting off authentication and user accounts for as long as possible.
