Recently I made my first foray into the world of role playing games by way of a Dark Heresy campaign with some of my friends. The learning curve was steep and while we picked it up relatively quickly, I often found myself forgetting which skills, traits and talents my character had. More importantly, I couldn't yet remember which skills to use in which situations off the top of my head (a key part of the game). So I put together a little web app that I run on my iPad which allows me to filter and highlight skills, talents and traits categorised by the contexts in which they might come in handy.

I wanted to create a simple web app that would work well on my iPad and that I could easily use during game sessions. I had the following requirements:

Pull up information on skills, talents and traits quickly as I needed during the game

Filter the growing list of skills as my character developed

Skills, talents and traits should be grouped by the contexts in which my character might need them, for example, interrogating contacts, sneaking around or in combat

Highlight certain skills to temporarily visually differentiate them from others as I come up with a strategy

I wanted my friends to be able to enter information about their character's skills, talents and traits into a data file so that we had a centralised source from which anyone of us could draw from, reducing the chance of duplicating effort.

This is what I came up with.

The Front End

For the front end interface I used Metafizzy's Isotope. It's a layout library, similar to Masonry and Packery. Many of their options and methods are the same, however, Isotope is particularly good for its sorting and filtering options. The web app uses standalone mode to look more like a native application and to maximise the screen real estate on the tablet

Each skill, trait or talent is represented by a card in the interface. Each card is defined in JSON as follows:

{
"players": [
"devin"
],
"class": [
"movement",
"offense",
"defense"
],
"name": "Accustomed to Crowds",
"description": "Hivers grow up surrounded by immense herds of humanity. They are used to weaving through even the densest mob with ease.",
"result": "Benefit: Crowds do not count as Difficult Terrain for hivers, and when Running or Charging through a dense crowd, hivers take no penalty to the Agility Test to keep their feet.",
"symbol": "Tr"
}

Players: represents which of my friend's characters have this skill and want it to appear in their version of this app.

Class: represents a context tag that can then be filtered on within isotope using the buttons at the top of the app.

Name, description, results and symbol: are all content classes used to build the cards in the front end.

I used a click event listener on the cards, upon clicking the 'is-expanded' class is added to the card which alters the CSS.

It highlights the card in question and increases its height to reveal the 'description' content from the JSON. You can see the card styles in the image below, standard on the left, expanded on the right.

I didn't tweak Isotope to make it responsive (although it can be done), as the layout reflowed pretty well out of the box.

The Data

The web app makes a JSONP call to import data from a JSON file hosted on my public Dropbox. This half of the solution isn't perfect but the workflow is as follows: I created the base JSON file in a Dropbox shared folder with my friends. If they need to make an update, e.g. their character gets a new skill, they will search the JSON file for that skill, if it already exists they will add their name to the players array for that skill, if it doesn't exist they will create a new JSON item for that skill, trait or talent and assign their name in the newly created players array. Before each game session, I push the latest version of the shared JSON file to the public Dropbox folder so it can be accessed by each instance of the application being run by either myself or my friends.

Customising the app for each friend is simple, I simply clone a new subdirectory with their name, and then change the filter variable within Isotope JavaScript call to look for cards where the players array includes their name. It's a little bit manual, but it works.

What's Next

I've already had requests from the group for a similar tool to handle weapons but I'm not sure if I'll have the time. It's clear there is a real opportunity to create a fully-fledged character sheet native application tailored for Dark Heresy. It baffles me why Fantasy Flight isn't jumping on this and creating companion mobile applications for their role playing games. Hopefully we see more open source projects based on this in the mean time.

The Dark-Data app project is in no way affiliated or condoned by Fantasy Flight Games.

I've posted the Dark-Data project on Github under an MIT license. Feel free to clone it and make a companion app for your own character.