Author Topic: HTML5 form-fillable character sheets  (Read 3626 times)

Offline mileswilford

  • Lurker
  • Posts: 8
    • View Profile
HTML5 form-fillable character sheets
« on: April 02, 2013, 01:58:01 AM »
Hey guys, new to these forums, but I'm getting ready to try GMing my first campaign.

I always hate having to deal with writing on lots of paper, so I usually like to make a form PDF or something like that for character sheets.  I've been trying to get my head into web development mode recently, so instead of something too easy, I decided to instead make a tiny web app for character sheets.

Here's where I uploaded it to git: https://github.com/MilesWilford/DresdenCharSheet

Edit now on GitHub pages: http://mileswilford.github.com/DresdenCharSheet/

Download the zip and load up index.html if you're interested in trying it out.  It will probably fail mightily on non-modern browsers, but c'est la vie.

It should print to two clean pages that resemble the standard sheets pretty closely.  I haven't yet played the game, so I don't have much experience with what the sheets actually need or don't need - if you have suggestions, I'm happy to hear them.

If anything's glaringly busted or not working, feel free to let me know.  I'll probably keep fussing with this a bit for the next few days.
« Last Edit: April 02, 2013, 08:40:04 PM by mileswilford »

Magicpockets

  • Guest
Re: HTML5 form-fillable character sheets
« Reply #1 on: April 02, 2013, 07:50:36 AM »
Is there a way to include Custom power levels (e.g. entering the intended Refresh/Skillpoints) or combining existing Templates?

Offline mileswilford

  • Lurker
  • Posts: 8
    • View Profile
Re: HTML5 form-fillable character sheets
« Reply #2 on: April 02, 2013, 03:46:50 PM »
The templates don't actually do anything at the moment - they're a picklist that's just there for a picklist's sake.  I could add in an Other option, or even replace it altogether with a text box, if that would make sense for someone who's actually played.

For custom power levels, I can probably work something in.  Right now they're just hard-coded, but it shouldn't be too much trouble to allow user input for them.  I'll look into it.

Offline mileswilford

  • Lurker
  • Posts: 8
    • View Profile
Re: HTML5 form-fillable character sheets
« Reply #3 on: April 02, 2013, 04:20:01 PM »
For custom power levels, I can probably work something in.  Right now they're just hard-coded, but it shouldn't be too much trouble to allow user input for them.  I'll look into it.

Alright, I committed a change that allows custom power levels (skill cap, skill points, and base refresh).

Offline cold_breaker

  • Conversationalist
  • **
  • Posts: 144
    • View Profile
Re: HTML5 form-fillable character sheets
« Reply #4 on: April 02, 2013, 05:31:45 PM »
Haha, I'm trying to build the same thing, only in form fillable pdf form. Or rather, I've asked my girlfriend to do it, since she's fermiliar with pdf creation. :p

My end goal is a little more direct though. After playing my first few sessions, I've realized I want more GM centric resources - forms for me to fill out to create a campaign, or at least an individual story. My thinking is if I generate a mini-charactor sheet for each NPC, location and major event, I'll have a good skeleton for the game - enough to keep the world solid, three dimensional and the story structured, while giving me the flexibility to have the world adept to PC reactions and my own improvisations. We'll see how it works out I suppose.

Offline mileswilford

  • Lurker
  • Posts: 8
    • View Profile
Re: HTML5 form-fillable character sheets
« Reply #5 on: April 02, 2013, 06:05:59 PM »
Haha, I'm trying to build the same thing, only in form fillable pdf form. Or rather, I've asked my girlfriend to do it, since she's fermiliar with pdf creation. :p

My end goal is a little more direct though. After playing my first few sessions, I've realized I want more GM centric resources - forms for me to fill out to create a campaign, or at least an individual story. My thinking is if I generate a mini-charactor sheet for each NPC, location and major event, I'll have a good skeleton for the game - enough to keep the world solid, three dimensional and the story structured, while giving me the flexibility to have the world adept to PC reactions and my own improvisations. We'll see how it works out I suppose.

I've done similar stuff in the past with LaTeX and the like.  HTML is definitely one of the easiest ways to rapidly create a presentation layer, even if it does tend to be extremely finicky on the fine details.  If the fine details don't particularly matter, I'm starting to feel it's the easiest way.

I'm trying to nail down why a gap is appearing in the consequences box when you print from Chrome right now.  I see no reason for it to be appearing.

Offline mileswilford

  • Lurker
  • Posts: 8
    • View Profile
Re: HTML5 form-fillable character sheets
« Reply #6 on: April 02, 2013, 08:40:34 PM »
To make it easier to access, I made the project accessible through GitHub Pages: http://mileswilford.github.com/DresdenCharSheet/

Offline shadowmyre

  • Lurker
  • Posts: 4
    • View Profile
Re: HTML5 form-fillable character sheets
« Reply #7 on: April 02, 2013, 08:59:41 PM »
Under Character Status, should "Current Hunter" be "Current Hunger"? Same with "Max Hungr".

Offline mileswilford

  • Lurker
  • Posts: 8
    • View Profile
Re: HTML5 form-fillable character sheets
« Reply #8 on: April 02, 2013, 09:03:38 PM »
Under Character Status, should "Current Hunter" be "Current Hunger"? Same with "Max Hungr".

Yes, most certainly it should.  Fixed.

Offline admiralducksauce

  • Conversationalist
  • **
  • Posts: 577
    • View Profile
Re: HTML5 form-fillable character sheets
« Reply #9 on: April 03, 2013, 11:11:38 AM »
This is really cool. I had made a simple one for Fate Core, but yours is exponentially more sophisticated.

Offline Tsunami

  • Posty McPostington
  • ***
  • Posts: 1169
  • Not delicate.
    • View Profile
Re: HTML5 form-fillable character sheets
« Reply #10 on: April 03, 2013, 04:59:35 PM »
Nicely done HTML sheet.

Shameless thread Hijacking incoming.

May i point you -> here: http://www.jimbutcheronline.com/bb/index.php/topic,25037.msg1061449.html#msg1061449

to the Open-Document Character Spreadsheet i made.

It's not a PDF, or an HTML, but you can export it to PDF easily enough.

« Last Edit: April 03, 2013, 05:06:21 PM by Tsunami »

Offline mileswilford

  • Lurker
  • Posts: 8
    • View Profile
Re: HTML5 form-fillable character sheets
« Reply #11 on: April 05, 2013, 03:04:11 PM »
I've added an update that now preserves the state of the sheet in localStorage (similar to cookies), so changes won't be lost if the sheet is reloaded or the page is closed unless you manually reset it or clear your cache/cookies in the browser.

I'm working on a way to let people share their sheets with each other by sending a URL, but shy of relying on server-side code that would require I set up a web host or creating massive URLs to store the data, I'm drawing blanks on a a good way to implement it.  I'd like to keep the app strictly client-side, if possible.

Offline admiralducksauce

  • Conversationalist
  • **
  • Posts: 577
    • View Profile
Re: HTML5 form-fillable character sheets
« Reply #12 on: April 05, 2013, 07:10:07 PM »
What about exporting the data to a JSON string? the user could save that data however they wished, and then have a load method that could read in a JSON string to populate the sheet?

Offline mileswilford

  • Lurker
  • Posts: 8
    • View Profile
Re: HTML5 form-fillable character sheets
« Reply #13 on: April 05, 2013, 09:45:37 PM »
What about exporting the data to a JSON string? the user could save that data however they wished, and then have a load method that could read in a JSON string to populate the sheet?

js can't get access to any kind of file writing, so the only way to do it would be to create a text box one user copies and the other pastes.  There wouldn't be any direct sharing, which kind of sucks.  A server-side solution would definitely save a JSON file for each character, or something like that, but like I said, I'm trying to make it run client side.

I uploaded a change that lets you spit a character into URL parameters that a user can link.  The result is a page that hangs for a while when it first loads, but it *does* seem to work.  Here's an example.

STRONG WARNING: your browser will hang for a minute or so when you click the link.  If you want to test it, try to give the page time to load; it shouldn't freeze you permenantly, but it might freeze you for a couple short minutes if you have a slow computer.  I'm not really sure what is causing this hang right now; it seems to be related to GET url params in some way.

I really need a better way of handling this.

edit: I've decided this is just too gruesome a way to handle this.  The changes have been reverted.  I'll work on a way of storing multiple characters locally and switching between them instead.
« Last Edit: April 06, 2013, 04:43:07 PM by mileswilford »

Offline TomCat

  • Participant
  • *
  • Posts: 73
    • View Profile
Re: HTML5 form-fillable character sheets
« Reply #14 on: April 08, 2013, 08:59:20 PM »
This is a great tool for a new GM like myself  ;D
I planing a one shot to test the game with my friends and if they like it we will start a campain using for the creation of  The PC's and NPC's .

So thank you man ;D
"it gets sort of Zen after a while, Life is a journey, time is a river and the door is ajar."