I'm in the middle of writing the sign-up pages and I've hit a bit of a creative roadblock; I'm hoping that writing about it will help.
It's perhaps a little early to be doing player sign-up, but I thought I'd get it out of the way early for a number of reasons. First, it lets me to get some basic, boring, but essential functionality out of the way, so I can get onto the more entertaining parts. Second; it forces me to answer a bunch of fundamental structural questions about the game: how are the Player and Character objects arranged and stored? What are the minimal set of properties a character needs to function within the mechanical rules of the game?
Over the last few days, I've made some good progress on the object side of things; I now have Player and Character objects with a good set of methods on them, and a neat and easy way to generate new characters, save and load them, and assign them to players. Where I've started to struggle is with the UI for displaying and selecting characters -- the first action a new player will take upon signing up is selecting and customising their first party member from a roster of pre-generated characters.
Here's some freshly rolled examples:
Despite what I wrote earlier; I have settled on using Bootstrap for the front-end (and I have a nifty Bootstrap object for outputting pre-canned HTML fragments). My initial thought was to use the Carousel component to allow the player to flip through their roster of pre-generated characters. It works decently, and I can hook into it's slide events to show additional details alongside the carousel, but I'm not happy with how it looks on mobile. Late last night I hit on the idea of using a more square layout -- two side-by-side on desktop, then stacked on top of each other on mobile -- and having the player swipe through characters, Tinder style. That might work better, but I think for now I'm just going to do the simplist thing that could work -- a list with some radio buttons. Fancy styling can come later.