Roll The Dice!

Practice is the cornerstone of improvement no matter the discipline but for writers finding a way to practice can be challenging. Once you get stuck into creating a story everything tends to revolve around it and letting go of ideas is always painful. In writing one must always kill their darlings1 and what better way to do so than having a heartless machine do it for you?

In the house next door a retired detective must get married to stop a massive disaster.

Roll The Dice has everything you need to practice this very art of writing and has no qualms about murdering. Find an interesting, possibly absurd, prompt; set a limit then GET WRITING! Don’t like the prompt then Roll The Dice and find a new one. Or make it work anyway because that’s kind of the idea. Alright pitch over let’s talk about how and why this came into being.

Boring Technical Bit You Can Skip

If the words React, Vite and Quill don’t mean anything to you this bit is going to be incomprehensible technobabble. For those who do know then you’re probably wondering why use React for such a simple project? This is a valid question and it would not be very difficult to rewrite it in plain HTML/JS. My last project with React was a few years ago and I wanted to practice!

An unlikely duo broke their vows but discoverd a plot to protect a secret must get married while on the run from their ex-partner.

There are no technically interesting parts to cover which is exactly how a project like this should work out. After the eventual death of “Create React App” and despite all the marketing2 I picked Vite to scaffold the project. I’d used Vite for a VueJS project with a client last year and it worked out well so I was fairly pleased to see it pick up from CRA. The interactive command line setup is fantastic letting me get a page up with all the fancy HMR etc. up in seconds.

Said project last year also required a rich text editor and I’d already identified Quill as being the right tool for the job. It was almost a no-brainer to pick again as I’d enjoyed working with it. The only change would be integrating it with React instead of Vue but by the power of ref in both frameworks it fits in almost identically. While Quill provides heaps of customization and functionality I’m quite happy to ignore all of it and use the defaults. Makes a change when integrating 3rd party libraries!

With all that done the code itself is very straightforwards with only the “Limits” being complex enough to really justify using their own Context. Everything else is just passed via props! Unlike most of my projects this one does get a reactive design and works on mobiles! There’s nothing special here either as it’s just a handful of media queries to adjust font sizes and layout choices. Starting from the Vite template gives you a decent looking site to begin with so I built from there.

A Bold Design

About this design…

It’s heavily inspired by 90’s graphic design specifically the Memphis Group style. There’s a bit of record label branding in there too with the heavy drop shadows and offset background graphics. I’m not sure why I decided to go with this sort of design but as I normally work with very boring and safe corporate brands doing something this bold was a welcome change. If you can’t use your design powers to shitpost at maximum power then what’s the point of having them?

After them going bankrupt a pair of lovers must take the reigns before a friend goes missing.

All the graphics were created in Krita which is pretty much the wrong tool for the job. Everything looks like vector graphics but most of it was done with pixels! If I wasn’t doing this for fun there’d be a lot more room for using SVG or an actual vector program like Inkscape. As I wanted to get this turned around as quickly as possible I stuck with Krita and it turned out pretty decent.

Typography plays a huge part in any design and for something almost entirely text based it justified using more than just the inbuilt browser fonts. I’m sure every designer recognises “Impact” from a kilometre away which is exactly why it works so well as the title font. The main prompt typeface is AudioWide by Astigmatic which has a bit of a sci-fi vibe that perhaps doesn’t fit which in turn makes it fit perfectly. Unlike all the effort put into the site fonts the editor is left with the default system sans typeface. This is a deliberate choice to make sure the writer’s own text is a little distinct from the site and to keep it from being distracting.

Did I have to use all the colours at once? Yes absolutely! I’m not a Graphic Designer but I know my way around graphic design from decades of building websites. Working with a limited palette is de jour for corporate projects with chunky style guides for everything and this is exactly the opposite of that. While I can’t judge my own work I think I’ve managed to land the cacophony of colour visual experience the 90’s were without making the site unusable.

Random Words On Screen

Taking a peek behind the scenes might be interesting but it can take away some of the magic. Proceed with this section at your own risk!

The heart of the site and the reason it all came together in the first place. Generating a random prompt that makes grammatical sense is more of a challenge than you might think. It should almost go without saying but there’s no “AI” to be found here. We’re the original Math.random() gangsters. There’s two parts to generating a prompt: the structure and the contents.

A family forced to reconsider but find it was all a game to survive against the odds must reunite while breaking up with the king.

I’ve never played the game “Mad Libs” but due to the permeation of American culture everywhere I think it goes something like this. A card is drawn with a sentence on it that looks like “I went to the __ to get __ but I got __” and the players all fill in the blanks with whatever sounds funny. The game “Cards Against Humanity” is another take on this concept. This is the foundation all the prompts are built on.

After an untimely death a family must protect a secret before a massive disaster.

The format of this prompt looks a little like this:

After -blank- -blank- must -blank- before -blank-

With some words fixed in place we’re more likely to get something grammatically sound out the other end. The next step is to pick what sort of blank to fill in. We’re not thinking of English terms here so it won’t be “Adverb” or “Subject” but thematically with our editor hats on. A common pattern for stories is to happen after some sort of natural or man-made disaster. Making that a little broader we could say they’re all Tragedies3 so lets make that our first category. Next up is who the tragedy happened to and everyone’s already shouting Protagonist as it’s so obvious. With the setup and character in hand we need to give them something to do - that’s a Goal. Finally we can do the thing that makes computers so powerful and re-use the first category! Goals need to be accomplished before a Tragedy prevents them.

After -Tragedy- -Protagonist- must -Goal- before -Tragedy-

Our last job is to think of as many things to fit into these categories as possible. At first this seems straightforward but once more prompt formats are introduced the challenge is to make them fit in multiple positions. In this example we have Tragedy being used for something in the past with the first slot and then in the future with the last.

Some of the categories are easy to identify and fill with useful ideas but others require careful dissection. Choosing the formats and filling out the categories took more time and effort than the rest of the site combined and will never be done. Suggestions are welcome if you want to pop over to the Discord!

Happily Ever After

From the initial idea to writing this post took about a week which I am extremely pleased with. I’ll continue to add more formats and choices behind the scenes but for now the project is done. After struggling to get anything done at the start of the year it’s been satisfying to have such a fast turn around. There’s nothing else to say here I just wanted an excuse to use the cliche…

Originally published on 2025/03/20