[Devember 2021] RPG Character Sheet web application

Hi everyone! Short version: I’m making a character generator for some friends and their RPG. I want it to work in-browser first and foremost, with loads of places for this to go once the core is done. Planning to learn Javascript and, yes, Git by doing this.

Now, if you want the long version, I’m going to presume what questions you have and answer them! Otherwise, jump to the next post wherein I actually did something.

Who are you, anyways?
I’m an IT guy. Spent the last five years or so in the marine industry, working lots of overtime for substandard pay. Left that job when the owner directly lied to me, currently floundering in the hunt for new work, and spending a lot of my time now learning stuff I don’t. I’ve written a few scripts, a little Python and SQL, but nothing substantial. So, this is exciting new ground.

Javascript? Really?
Every programming language is on someone’s shit list, I know. But I need something that’s going to do well enough on whatever browser gets pointed at it, and have a lot of documentation around the quirks and mishaps along the way. It’s a common tool for the job, so it’s one I’m going to have the easiest time finding help for. Also, it’s very new territory, and the name of the game is learning.

And on the subject of frameworks, I have touched Bootstrap recently on the lead-up to this quest. I get it. It’s nice to slap together something reasonably nice fast. I’m going to try to avoid that, because I’m not learning the same thing by slapping in a pre-made sandwich menu, and it’s not like I have to hurry.

So what’s this for?
A couple friends of mine really busted their tails making an RPG. It’s gone through tests and revisions, and for my part, I’ve been involved as a sounding board, a tester, and sometimes-editor. RPGs are great, and I’ve played a lot of 'em. These guys had a good idea, though: they made character sheets in Google Sheets, so they’re easy to share, and nobody has to double check their math or if things are correct.

When it came to improving the features of the darn thing, and making updates smoother, I had lots of ideas on how to do that. But then again, linked Google Sheets work, but they’re slow and a little cumbersome. Surely we can make something more slick, where you can’t screw it up by deleting a menu of choices accidentally.

So I wrote up something resembling a spec sheet (because I need feedback from the non-techy people, often before code is written, and a plan). I have a paper layout, and a really hacky digital layout.

Can you get to the point?
Right. So, Devember. Mostly this is a way to keep me accountable for my goal, and making sure goalpost #1 is at least reached.

Goalposts are set as follows:

  1. Code an hour each day. I will be tracking research time separately. I need to be writing and testing and all that, each day, starting today.
  2. Create a nice sheet layout that can be interacted with. One should be able to build a character from scratch.
  3. Make a database backend, and do whatever voodoo magic it takes to make the sheet actually save the stuff people make.
  4. Oh, crap, I need to learn login things as well. Guess that’s next priority. Can’t have just anyone saving and editing just anyone else’s work.
  5. Make a second mode for gameplay use. Load a character, apply status effects and track HP, possibly even a rudimentary dice roller. Those kinds of things.
  6. Make a tutorial. A nice, guided tour for new players of the game.
  7. Fancy API shenanigans. I slapped together a rudimentary Discord bot some time ago. Wouldn’t it be cool to have the Discord bot able to look things up and track rolls? I just wanna try to do it, really.
  8. Roll20: Putting together a reasonably nice sheet there isn’t too bad. But surely there’s some way for me to cook up some magic that makes entering your character into a Roll20 sheet something like three clicks. I have no idea how to even attempt this.

Eight goalposts, ranked from least to most ambitious. I’m getting some sleep, and getting started. Cheers!


Day one.

Things learned:
Emmet is pretty rad. Makes writing HTML a snap.
Tinkering with grid and flexbox are… complicated.

After putting the I’m really seeing the appeal of bootstrap, and if I wind up getting much further in without getting to the stuff I’m actually here for, I’ll resort to it. You can always restyle later right? That’s never a huge pain, right?

So folks have something to look at, here’s the digital mockup I slapped together with Bootstrap handling row/column nonsense.

The more I think about it, the more I should have done the layout in advance. We’ll see what tomorrow brings.

1 Like

These sorts of things are very useful for modern desktop RPG environments. Some more updates would be nice (well at least one more before Devember ends). Its always nice to see a project completed