I made a dice rolling app!

There are two things on my mind at all times: D&D, and web development. Sometimes I get ideas for marrying the two. Like last year, when I made a D&D reference tool. And last weekend, when I finally made a web app for rolling dice.

I’d designed the app in March. But last weekend, I finally got my stuff together and made it.

What it even does

You use it to… roll dice. Fake dice. Digital dice.

You can click on one of the seven polyhedrals to roll it. Or type in a dice expression and press Roll (or enter) to roll that too! There are many, many options you can use in your expression.

You can do anything from 1d20 (roll a 20-sided die) to 4d6d1 (roll 4 6-sided dice, drop the lowest one, then add the rest together). All the options are documented on the app’s About page — accessible by clicking on the little question mark in the bottom right corner of the screen.

Put it on your telephone!

The site is responsive (a fancy way of saying it looks good on a mobile device). Also — and I think this is super cool — you can add the page to your home screen and it behaves like a native app.

I did it on iOS through Safari, and I imagine you can do something similar in Android as well. Here are some instructions I found.. They’re from 2014, but probably still relevant?

How you even make something like this

Step one: be a nerd.

Actually though, the first thing I did was draw some wireframes in my notebook.

My initial plan was to write a program that would parse dice expressions (like 3d6+1d4+2) and generate random numbers. But then I thought that would be hard. So I checked out npm for a library that would do that for me. I found some promising packages. initially used dice-typescript but it didn’t handle invalid input very gracefully (or at all). So I switched to rolldice instead, and modified it a bit to get the verbose roll breakdown I wanted.

Oh yeah, another important thing was to design the UI. I drew some dice in Illustrator, which was weirdly a thing I’d done before. Then I designed the rest of the interface in Adobe XD, following my initial sketch pretty closely.

I planned on using Angular and hosting the final thing on github pages, so… I did. I’m all about that.

That means the project is on github! There’s no readme and I’ll probably never update it, but if you have suggestions for improvement or anything, let me know.

Leave a Reply

Your email address will not be published. Required fields are marked *