Ashley Sheridan​.co.uk

Tags:

About a year and a half ago, I wrote about building a Dungeons & Dragons game that I was developing in two parts: an API built in Laravel, and a UI developed in Angular. After working on this for nearly 2 years, I'm pleased to say that D&D Yonder is finally live!

Contents

What Did I Do?

Since my last article, I've spent a lot of time building the application out to something that can be used to facilitate an entire game amongst friends, fleshing out character creation, equipment management, and creating campaigns with maps & lore.

While my main focus had been on the UI, I extended and enhanced the API to support those changes, keeping the two parts separate (and both open source) to allow any other dev to use either independantly.

The maps and campaign management were especially fun to build, and working with large complex SVGs inside of Angular was quite a challenge (especially when dealing with Chrome bugs where <pattern>> elements are not direct children of <defs>).

I also wanted to develop this without using AI, as this is a project I wanted to enjoy creating, not something I wanted to just have AI create for me. I'm not against AI at all, and I do use it as a tool, but for this I wanted to create it with my own hands.

I did use AI for some of the iamges that you can see used for the backgrounds on the login and register pages, and the creature icons. I'm no artist, and I felt that having some visuals was important. All other icons were either from open source icon repositories, or created myself.

The Backend

The entire backend is built with Laravel, which is incredibly capable for creating APIs. I made heavy use of Laravels Eloquent API Resource classes to shape data how I needed it for the JSON responses. All of the Eloquent models back off to a MySQL database. Every single thing action performed on the frontend by a user runs off of a purely RESTful API, which makes it entirely possible in the future for the frontend to be entirely swapped out by something else.

Backend Stats

The Frontend

Aside from the issue I ran into with Chrome not behaving correctly on SVG files where the <pattern> elements weren't direct descendents of the <defs>, the frontend dev work was not too difficult. Everything was built out with Angular, using a vast array of components, entities, services, and a large array of SCSS stylesheets.

I did deviate slightly from some of the default setup of Angular, by not using per-component SCSS files and implementing them all within a separate scss directory. What I prefer about this approach is that I get the benefit of the cascade (the key part of CSS) and I can simplify my styling of the app, by keeping all the styles in one place. I find this level of separation leads to me developing cleaner code.

The main areas that I built up on the frontend were the campaign management, campaign maps, tools (including item custom generation and encounter generator), and the library section which contains various lookup lists for things like monsters, conditions, classes, languages, etc.

Encounter Creator

A big improvment is the encounter creator, which tried to generate and encounter based on the setting, difficulty level, and the players (which can be based on the players in a campaign, or a list of character levels).

This is still a work in progress, as it doesn't alwaus generate natural encounters of creatures that might normally be together. But, all generated encounters are fully customisable after they're created.

Campaign Management

With the campaign management, now it's easy to create campaigns, add lore and other files, and campaign content. You can create markdown docs, upload images and PDF files, and organise them by groupings that you control. If that isn't enough, you can easily add links to other online resources.

Campaign Maps

The maps section of campaigns allows a DM to upload map images, and add players. Everyone with a player added to the map has access to add creatures, draw on the map to indicate spell effect areas, and more. There's still plenty of work for me to do in this area, but the base is there and working well.

While the map currently lacks realtime updates for all players, that is coming soon. I also need to flesh out the action panel for selected characters to allow full play to be performed from the map. I also need to add some kind of initiative bar to allow for a game with multiple people to progress smoothly and efficiently. I will also soon add the ability to add non-creature entities, to allow for more interactive elements on the maps.

Frontend Stats

Why This Project?

D&D has been something I've loved playing for many years, and I wanted to create something that I and others could use. Working on this for the last 1½ years has been a challenge to fit in amongst the pressing needs of everyday life, but I've managed to get this far.

I have many more plans for taking this project further, so watch this space! I hope you enjoy using this as much as I have enjoyed building it!