ChainsawXIV
I've made quite a few dynamic character sheets, and a number of other folks have found my core tech useful enough in their own sheets as well, but after the Reforge, I got to feeling like my code was overdue for an update. The dynamic character sheet system rolled out almost four years ago, and since then, the web - not to mention my understanding of how to use it - has come a long way. Today, I put up the first sheet using my overhauled code. Writing bug free code is like riding to work on a unicorn however (read: not a thing that happens in the real world) so I'm hoping I can enlist a few of you fine folks to bang on it and see what falls out before I roll it out on a wider basis.
The new sheet is for "Scion":https://chainsawxiv-test-campaign.obsidianportal.com/characters/scion-test-character, and I'd love if anyone was willing to take it for a spin (if you don't have a Scion campaign handy, let me know and I'll invite you to my test campaign), and provide any kind of feedback. Suggestions for layout and presentation. Things that are counter-intuitive or could be easier to use. Stuff that just falls down in some way... these are all things it would be good to hear about.
In terms of what changed... well, damn near everything. This overhaul involved rewriting probably 90% of my JavaScript, and a fair chunk of the HTML and CSS stuff that I use commonly as well. But here's a basic outline of what changed from a features standpoint:
*General Redesign*
* Redesigned the sheet around a general use two-column layout for easier reading
* Increased font sizes and generally made the sheet's text more readable
* Added tool tip options to more fields throughout the sheet where needed
* Sheet design now uses Google Web Fonts for a more evolved textual presentation
* Rollover images are now pre-loaded for a smoother overall experience
*Characteristic Pips*
* Pips code streamlined, compacted, and optimized for better performance and ease of use
* Pip rows are now made of individual pips, and can have arbitrary length and spacing
* Individual pips now support mouse-over states for improved user feedback
* Pip borders are now drawn as vector graphics for cleaner rendering at any scale
* Added a context menu option to non-critical pips fields allowing them to be hidden
*Image Based Check Boxes*
* Checks code streamlined, compacted, and optimized for better performance and ease of use
* Check borders are now drawn as vector graphics for cleaner rendering at any scale
*General Text Fields*
* Eliminated all dependency on the jEdtiable library in favor of a more direct implementation
* All text fields are now editable directly, without the need for a commit button on each field
* Multi-line text fields no longer require any special treatment in script to be editable
* Unified editing of single and multi-line text fields under an optimized code path
* Text field appearance during editing is now what-you-see-is-what-you-get, for minimal funk
* Added a roving tool bar of basic formatting options for inline, WYSIWYG text formatting
* Added formatting key-combos (Ctrl+B for Bold, Ctrl+I for Italic, Ctrl+U for Underline)
* Added automatic bulleted indent to formatting options (key-combo is Ctrl+Tab)
*Dynamic Lists*
* Lists code completely overhauled, streamlined, and rebuilt to be far more performant
* Users can now rearange list items using drag and drop with immediate visual feedback
* Developers can now easily specify default contents for any list, without using code
* Lists are no longer arbitrarely limited to a maximum of 99 entries by the mechanics of code
* Reworked the way lists are saved in a sheet's data (with auto-conversion from old format)
*Tool Tips*
* Tool tips code completely rewriten from the ground up to a new specification
* Tool tips can no longer be clicked on when viewing a character in view mode
* Tool tips are now positioned relative to the user's mouse, with continuous updates
* Tool tips no longer pop up automatically when the user is in editing mode
* Added an edit tool tip button for each item when in editing mode
*Sheet Tabs*
* Your browser will now remember what tab you were on when you last visited a sheet
* Fields in the sheet's header section are now properly shared between all tabs
*Known Issues*
* Toggling pips visibility is only supported in Firefox (Browser feature support issue)
* Insertion markers sometimes get stuck on in Firefox (Known and tracked Mozilla bug)
* Fonts look terrible in Chrome (Known and tracked Chrome bug / missing feature)
Comments
I'd like to help test your Scion sheet; shoot me an invite to your test campaign!
edit: After reading through your list of features, I'm totally astounded! I'd love just 20% of those, but all of them would be fantastic.
- Kallak
* Single line items (like Birthrights) accept \n characters, I found this when hitting Enter to save the item, but instead a \n was added.
* When you delete all the text from an item (select all + delete) and save it, it becomes uneditable as there is no clickable target to start editing.
Edit: Do you have the code in a repo (github or otherwise) somewhere? I'd like to start building on it for my sheet, but it seems prudent to be able to collaborate.
I've been meaning to set this up in a repo, so I finally did: "https://github.com/ChainsawXIV/DST":https://github.com/ChainsawXIV/DST
Thanks for the repo! I'll port my current Firefly codebase, based on the current DST DevKit.
Looking at the code in the repo though, I don't see any mention of jquery, are you not using it at all?
As to jquery, I'm... not a fan, for a number of reasons. Obviously, it's still loaded on all the OP pages, so it should be there to use, but I'd prefer not to create any unnecessary dependencies on it in the common core of of my sheet code.
One problem I'm having though is that the sheet values defined in dynamic_sheet_atrs isn't being populated into the "dsf_*" elements.
There's no JS errors in the console, and I'm just using testbed.html as my base for editing. Do I need to do something else to get those values populated?
Line breaks are semi-intentional. At least, I consciously chose not to prevent them, because there's nothing fundamentally wrong with having multiple lines in those fields. I can definitely understand how that's not the intuitively expected behavior though. Since you don't need to press enter to 'save' your changes to a field in this system, what would you expect pressing it to do? Advance you to the next field like Tab perhaps?
Specifically which fields could you delete everything from and render uneditable? It's important that all editable fields have a min-width attribute in their CSS to prevent this, but clearly I've missed one.
Asking because my Exalted campaign is seeing pop-ups for charms and backgrounds working on Alchemical, Solar, and DB sheets but not for Lunar or Sidereal sheets. (I haven't looked at Abyssal or Infernal yet.) I'd ask if those could be fixed, but if you're revising/replacing with updated sheets, it might be easier & better to upgrade.