As a “full-stack” WordPress web developer my weakest skill (being the one that’s required of me least) is Javascript. The vast majority of what my clients need is handled by existing solutions and for custom requests I’m better off simply using a trusted subcontractor who has more expertise and will work faster than I.

But I like to tinker, and often dream up useful tools hoping they end up simple enough for me to pull off. Last year I started playing the excellent indie RPG Tales From the Loop, just as I started playing around with CSS columns.

I’ve used tools like spreadsheets to make game tools since the 80s when I made a spreadsheet car-builder for the superb Car Wars board game. My Champions RPG sheet (Excel) made its way around several BBS file depositories through the 90s.

For this sheet I wanted to make my web-based form fillable and loadable anywhere — on a desktop, smartphone, whatever. I didn’t want to worry about logins and database storage on my end. That’s when I realized I I could store my data in the URI.

Long story short, I’ve cobbled together enough basic javascript that I have a character sheet that reads and converts a form’s state into a JSON string then compresses that into a URI-safe string it sets as the current page’s hashtag. Just bookmark the form (or share the URI) and the character loads right up on page load!

That button will load a blank sheet. To see how it functions with an existing character, here’s my Troublemaker, Chet Barker. The URI is over a thousand characters, but the maximum allowed is 2038 so there’s a decent amount more that can be stored.

Here’s the full URI, in all its glory:

https://sheet.adventureforhire.com/loop/#N4IgxgFghgTgQgewCYE8QC4QFYQBpzQwAqAppBiAEx4GwASJsALhTvpLALICWAdkhWrtCAZV6MA1oJocYAMQQwwJCgGYZhTggBuKzBthE+EkjAoBGAzAAKMBAHMYUALYUrAYSgAbMAFcvUEx6IB4IvExQYCz6wrDuhK6YlrEwADKMApjqKQCSvLoAzkzc9oHBoc4ADjAkECT8bikAolWBENwAXuX4vC7B8SRMAARwsCZm+EwolcFEdr4ARl4kzlDjNFD2weYALDRevmASAPLiFGH7hxJEAO4I57yXR0QQNcEX+AdHCr5mmB8gJAwbi6CgAcUGQygNygKCGADM7M4hhAEM4SEMmAghgU0YN2rx7EMFoMgjAAHQbXiQRTgpzOVZDADSJC8XjQ+GqCCWKwoABEoEgAOQFKG8KELXwFEEY7xgBCorzcMA0arcJDBThwiL2ex8InMIbcUWORjDAAUkuGvG5yDhYCg4okNpuRqYIqG6IAlJT8BqCmBgZVihdMCJoLq4c5-MsmLghgA1R10bz1TEAWgK7RgcaGACtGLwCvHVmB85ETBabtwmBAUQhkF6aPCoIUwvYKKkQXwhUMwlChrZYaYhumRv2AFI6bg0CTqyyYHgmOFjgByJBKEAWCF+8fhinRMCGlQCKFWQUxdXFkrZ2tgW1zLs92t8WIpQwAqtSG15ia-yQBQxIAgJCivKCC-rW+qivuR7ojiCAAeSQw3NAQS6BSs7qtQmB8lcK5DAAOiALyBMSNaQOSxFYUg6hhvKr6jkMADqG4wEgf7DHO-BQEM4FeHuigDkqTBMMsQx6jAXi+iAc5IHsMQgLwlRgAuIBapijCQCO5qcO+zGbOIMBekaoq1hiYTsppkR1EeORDCQGFDEqJgcQAZEMT7Gka4rmfWBSVDW3hihxdy8EKwwwiYQy+JUCJIihaGOSOvCbkwqw1CiGLedA2j6jJylgDhIDHF4HGcI63BDHQ3B2ExFUapeGKlDACybBilRjPGT6Og5YDKOEwJltomxOOEiXYkEbKivBBRkDUTAFDQyphMqNa8pgoxEgg8I4tUsLHlAfDDAA1EIIDrc4anLUEzjFTdKx0SE+CXQpz0XbdOCKe0Go7tEIBgrAbVbIdMASEMFX2OITDAuIxL3hi5pzYGkLyhq6ZeAgRwkBx9Qw46ygAIRNj0CBBEt+gAL5AA

I’m sure the current code is quite ugly (v 1.1 as of this posting). I may continue to tweak it if needed. It should be completely portable and will store the form data of any form with the id “charSheet”. That’s right, anyone could make any fillable HTML form and use this code to save the state to the URI! What this means is: I’ll probably do more character sheets for more RPGs in the future using this. Stay tuned!