foundryvtt-blades-in-the-dark icon indicating copy to clipboard operation
foundryvtt-blades-in-the-dark copied to clipboard

Character sheet redesign

Open justinross opened this issue 3 years ago • 53 comments

As mentioned in the comments of #18, I've started work on a redesign of the character sheet and could use some ... guidance?

I'm actually pretty comfortable with Handlebars/HTML/CSS, and even Javascript. Mostly what I'm looking for is someone to sign off on design decisions (both code and UI-wise), so that the sheet can get merged into the main repo.

Right now, I'm working toward something between the Roll20 blades sheets (which are fantastic IMO) and the official character sheets.

I'm currently just adding fields and selectables with some basic styling/layout. Once I've got all of the fields implemented, I'll come back around to fine-tuning the layout.

Here's where I'm currently at:

image

A significant direction change I've made (and was hoping for feedback on) has been moving away from using item addition for setting things like Heritage, Background, etc. To that end, I'm pulling the indexes from most of the compendia for display as needed. I saw @megastruktur's note in the readme about not wanting some of these to be pre-populated to avoid too much compendium data, but IMO, from a gameplay standpoint, it's really nice having a lot of that info front-and-center as you play, and I figured for some of it, at least, getting just the indexes (indices?) was a happy medium, especially as I'm led to believe that compendium indexes will be cached in v0.8.

That is, I think class and general items are kind of necessary on the character sheets. Class special abilities and descriptions are nice-to-haves (in my experience, the skills being up-front like that can help players a lot with figuring out where they want to go next, advancement-wise). I'm also generating checkbox lists (but not yet storing that data) for Heritage, Background, and Vices (I also added a "details" field for each of those, to allow for freeform text entry. This may be redundant/overkill, and it might be worth just emulating the roll20 sheets, only showing a non-interactive list until the user has typed something into the text entry field).

Anyway, I'm going to keep plugging away at fleshing out the rest of the sheet. I'd love feedback, though.

Thanks!

/edit: also, to clarify, I have no intention of keeping the actor image and blades logo so ridiculously big. Totally just temporary.

justinross avatar Apr 29 '21 21:04 justinross

Adding the details of the elements is a good idea. It helped the player to be able to use them more. In the other hand, the list of elements do not provid any advantage. Maybe I've miss something but what the point of seeing the list of thing you do not use ?

I have the same critics about the roll20 sheet that is too focused on reproducing the paper one. But on paper, you have a full page to fill. On screen, a large sheet inder the experience because it hides part of the shared scene.

DarkWizarD24 avatar Apr 30 '21 07:04 DarkWizarD24

Yeah, true. It might be worth having a “play” sheet and an “editing” sheet. Or just an “editing” flag that can be toggled on and off to hide unnecessary stuff to minimize the sheet.

justinross avatar Apr 30 '21 12:04 justinross

Yeah, I’m realizing now that emulating the paper sheets has made a lot of sense to me because, for my group, roll20 Blades basically is your character sheet, since we don’t really use maps, but you’re 100% right that that’s not how everyone plays (in fact, we’re talking about introducing maps).

I think it would be really cool to have a tiny, mostly read-only version of the sheet, with minimal info. (I do think the full list of items for a given class needs to be very easily accessible, if not always visible by default, but it can be a collapsible box or something.)

Implementation-wise, I suppose it wouldn’t be too hard to make a minimal version of the main sheet and just toggle it with a class on the sheet, but the HTML would get cluttered fast, I suspect. A separate sheet would be better, I think, but I’m not sure how that would work in Foundry.

justinross avatar Apr 30 '21 13:04 justinross

The current sheet also support adding custom elements like a new background for people that want to personalize the world.

DarkWizarD24 avatar Apr 30 '21 13:04 DarkWizarD24

Oh interesting. I’ll check that out.

justinross avatar Apr 30 '21 13:04 justinross

Okay, total change of plans because you're 100% right that there's no reason to cover up a bunch of the play area to try and emulate the printed character sheets. I'm a little sad about having wasted that time, but also I learned a lot about Foundry, so we'll call it a win.

Anyway, I spent this morning putting together this mockup that I feel ... fairly certain I can pull off (the HTML/CSS, at least). I'm unabashedly borrowing very heavily from Tidy5e Sheet, because it's super-clever.

Here's the full sheet: image

Here's the sheet resized down to what I'd consider the minimum (players could always extend down to include the playbook name ... in case they forget what kind of character they're playing, I guess): image

Regarding the icons around the character photo: Stress: image

Tidy5e Sheets has exhaustion here, and has a flyout for editing, and different images/color based on how high your exhaustion is. I think that's pretty much perfect for Stress

Coin: image

This could also be a hover flyout for details of the character's coin. Another number could be added to indicate stash, too. I think that'll take some testing.

Harm: image

I think I can come up with a way to show current harm/effects via icon changes, but I'm not positive. At the very least, you can hover this to view your harm table, I suppose. I also pictured this as a healing clock (see the X of lines behind the + icon), accessible via the hover flyout.

Vice: image

This one I'm least sure of. Tidy5e Sheets uses a bed icon for resting, which makes sense, and indulging your vice is kiiiiind of like resting, but I don't love it. It might be worth just moving the vice into the end of the second bio bar.

We discussed adding details for Heritage, Background, and Vice. I think Vice needs a text field for indicating your purveyor, and Background needs text for a one-sentence blurb of your Background, but I don't think Heritage needs one. Everything I could think of as a "heritage" detail fit just as well or better as a Background detail.

Some other thoughts/issues I see already:

I'm not set on the Attribute/Action blocks. They're basically copied exactly from the print sheets, and I think they work fine, but they take up more space than needed, for sure. I'm just not sure what else would go there if we trimmed them down.

I'm also realizing there should be a way to add new items, friends, and special abilities (for veteran advances, at least). A "+" icon in the top-right of the items and friends areas would be simple enough, and it shouldn't be tough to make the HTML/CSS flexible enough to handle arbitrary list lengths.

I also haven't accounted for special cases like the Leech's alchemical bandoliers. Ah well, this is just a first draft.

/edit: also didn't include a way to re-zero any of the tooth trackers.

Any feedback/concerns would be very appreciated. You can also hit me up on Discord if that's easier: RootyB#5654

justinross avatar Apr 30 '21 20:04 justinross

My first impression is very good. Great concept.

My messy feedback :

For the items. With the + button, we can have the way it is where you add only the used item or the way the paper sheet does. I had this kind of changes in mind. You can add a selector for the current load level and the current load level in the "Item" title.

For the coin two icons, one with coins and one with a chest could be easily readable.

I love the stress as exhaustion. But you miss the traumas in your mokup. They need to be visible directly because they are important for the players.

For the vices, maybe we can change the icon depending of the vice. A bouton to easily roll for vice is great. Even if it is placed in an other place for more details, the button is a good idea.

For the harm, I think it might be too compact. But I have no better idea to offer for now.

The Whisper in this example look like a tab. It could be awesome to avec other tab for notes, long terme projects, and so on.

I have tryed to make a similar concept by mixing tidy5e and bitd and you provide a way better result 👍

DarkWizarD24 avatar May 01 '21 15:05 DarkWizarD24

Thanks so much! I definitely forgot the trauma. I was trying to think of icons for trauma and completely forgot to go back and put it in.

I was also trying to think of icons for the vices and struggled a bit, so I went with the generic bed, but I’m sure that’s not insurmountable.

What if there was a tab next to the Whisper “tab” for Downtime activities? Things that don’t need to be front and center during scores, like project clocks, healing clock, vices, etc.?

Clearing vices from the portrait would free up some space for traumas and bigger harm.

I’ll work on coding the current mock-up with changes you’ve suggested and we can go from there.

Thanks again!

justinross avatar May 01 '21 15:05 justinross

Making some slow progress: image

I noticed Tiny5e uses contenteditable elements and hidden inputs to do inline editing and I love that, so I definitely used it. I also did away with the "0" button for tooth/radio button fields, and instead made them toggleable (if you click on a radio button that's already active, it switches to the one below it instead). Saves some space and still feels pretty intuitive IMO.

justinross avatar May 04 '21 15:05 justinross

What do you think about giving players a way to easily track session xp triggers? I was just thinking about having trauma as status icons on the character portrait, and how they could click on one to quickly record "suffered from their trauma" for end-of-session tallying. Not super-important, but I know sometimes we'll get to the end of a session and my players will be like "hmm, did I ...?"

justinross avatar May 04 '21 16:05 justinross

(Sorry for the spam)

Got most of the main sheet implemented. Most things that don't require new decisions being made:

image

Foundry/wiring-wise, all of the XP markers update properly. Same with the action points. Character biographical info too. The edit lock/unlock button doesn't yet actually lock most fields, but it does turn on/off the drop-down for switching playbooks. Abilities and Items don't yet. I'm not sure how best to handle that. I imagine the way I'm loading them (pulling from compendiums on getData()) will have to change.

A couple of problems I've found: we'll probably either want to rename the abilities/playbook items in their respective compendia to remove the playbook/class prefix ("(W)" for example). Or at least add a field that has the item name without the prefix.

There are a couple of items that kind of don't make sense if they aren't adjacent to another item (like "Armor" and "+ Heavy"). I'm not sure how to handle that. Maybe just separate items for them? Some logic to have one supercede the other (or just leave it up to the players to not use both)?

I'm not seeing a compendium with friends/rivals. Should that get added so we can reference it on the sheets?

Anyway, not sure how much more I'll get done today. I've pushed the latest version to my forked repo if you want to check it out. Please bear in mind that I'm very new to Foundry and have been rushing through this a bit, with the intention of cleaning up my poor decisions after the fact (e.g., my wildly-mixed usage of different units in CSS). That is, be gentle with your code-related feedback. I know it's bad.

Also, I've commented out basically all of the original style.scss file to eliminate collisions, so I'm sure other parts of the system will be broken for the time being.

https://github.com/justinross/foundryvtt-blades-in-the-dark/tree/tidy-sheet-redesign

/edit: So, I'm not sure if there's a benefit to actually adding an item to the character as an embeddedEntity. If not, I'm thinking item and special ability use could just be stored as an array of item IDs (no need to store and transfer the item all over again if I'm already pulling them from the compendia). That would be easy enough to manage via listeners, and it wouldn't be hard to add a has helper for checking if an item or ability is present.

Or am I overcomplicating something that Foundry makes easy?

justinross avatar May 04 '21 22:05 justinross

A couple blank boxes you can type into for items might be a good idea for mission critical items or crafted items that aren't going to be in a compendium

TimPasquini avatar May 14 '21 03:05 TimPasquini

Thanks for the input! I went ahead and set it up by automatically adding the items from the compendium at creation, which should make it pretty easy to manually add custom items, too.

The hassle I’m dealing with right now is swapping out items and abilities when the character’s class/playbook gets changed. It doesn’t happen often, of course, but it does happen, and so needs to be addressed. Not a huge deal. Just a little pain.

justinross avatar May 14 '21 03:05 justinross

When is this great looking new sheet coming? 😊

fpiekert avatar May 28 '21 21:05 fpiekert

When is this great looking new sheet coming? 😊

Soon, hopefully! I was hoping to add some new updates this week, but I’ve had some home repair projects that have taken priority. Hoping I can pick it up next week. At this point, pretty much everything in the last screenshot works as advertised.

I still need to add Harm, Stress, Vice, and Trauma. Probably around the character portrait. I’m not in love with that part of my initial mock-up.

I’d also love input on what the second tab could contain. I had imagined it as a tab for handling downtime activities, but I’m not really sure what that should include/look like. What would be useful/valuable in such a screen?

Also, at this point, I should probably get the new version up and running in 0.8.x. I’m hoping it won’t take too much work to do so.

justinross avatar May 28 '21 21:05 justinross

Hey, thanks for the fast reply. Really looking forward to this.

Maybe I can be of help with some input.

For the second tab: just naming the activities that are available would be enough in my view.

I also liked the old sheets daggers style markers for stress. I also really liked the healing clock and harm field from the original document. Maybe that could be included? Maybe the second tab is the best place for stress and harm/heal fields?

In ma game a Coins are not as importand sheetwise. So your initial coin tracker was great.

And maybe vice fits on on of the lines from heritage/background/...?

Nonetheless, great work so far! Any plans to redo the crew sheet as well?

Thanks again, Fabian

Am 28.05.2021 um 23:18 schrieb justinross @.***>:

 When is this great looking new sheet coming? 😊

Soon, hopefully! I was hoping to add some new updates this week, but I’ve had some home repair projects that have taken priority. Hoping I can pick it up next week. At this point, pretty much everything in the last screenshot works as advertised.

I still need to add Harm, Stress, Vice, and Trauma. Probably around the character portrait. I’m not in love with that part of my initial mock-up.

I’d also love input on what the second tab could contain. I had imagined it as a tab for handling downtime activities, but I’m not really sure what that should include/look like. What would be useful/valuable in such a screen?

Also, at this point, I should probably get the new version up and running in 0.8.x. I’m hoping it won’t take too much work to do so.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub, or unsubscribe.

fpiekert avatar May 28 '21 22:05 fpiekert

I’m sure I’ll move onto the crew sheets once the character sheet is working well.

Vice going with the other bio info is a good idea. Maybe Trauma too.

I’d like all of these to be in the mini version of the sheet for easy access. Anything that is immediately relevant to the score, really.

I’ll probably still use the old sheet’s coin and stress trackers, though they might be hidden behind a mouseover for space.

justinross avatar May 28 '21 23:05 justinross

I do think that things like a healing clock, long-term project clocks, buttons for indulging your vice, etc., could all go on the downtime tab.

I think I’ll start with just a list of what downtime activities you can do, then see which of them make sense to automate in some way from there.

justinross avatar May 28 '21 23:05 justinross

Really liked finding this, as I'm a fan of the roll20 sheet and the "defaults all filled in" philosophy.

But I'm curious: is this branch currently intended to be working with Foundry 0.8.x? I ran into a large number of issues with it running on 0.8.6, and want to make sure it's not something that I inadvertently did.

cmcguigan9 avatar Jun 02 '21 05:06 cmcguigan9

Hey! The current version is not 0.8.x compatible, but I’ve actually just spent a few hours bringing in most of the changes from 3.0 and 3.1, as well as some cleanup on my new stuff, so it’s very close to working in 0.8.6. I’ll probably commit and push the new version tomorrow.

Though, I would definitely not recommend trying my fork with any data you care about. I haven’t touched migration (because I basically don’t know anything about it), and I’m sure things will break, so please be careful.

justinross avatar Jun 02 '21 05:06 justinross

Glad it wasn't me.

And thanks for making this; it's already 75% of what I want the sheet to be.

cmcguigan9 avatar Jun 02 '21 13:06 cmcguigan9

I've just pushed a new version that should be 0.8.x-compatible (thanks mostly to the great work megastruktur and drewg13 did getting the base system up to speed).

Now back to getting it feature-complete.

justinross avatar Jun 02 '21 18:06 justinross

Okay, I'm realizing I'm just going to keep building around in circles if I don't set a firm set of features that need to be in and working before I submit my code as a pull request to the main repo.

I'd love some help at this point with testing and coming up with a last few things to make it usable. I have a handful of things that I see that need to get done, but I'm just going to keep refining and tweaking if left to my own devices.

I'm going to try to wrap up a few more small features, undo some enhancements that I started on but am realizing should wait until it's usable, then start restoring necessary CSS for other views that I commented out during development, so people can test.

Anyone interested in helping out?

One thing I don't really know anything about is migration, so it's entirely likely that this will break existing characters until I either get some help with migration or figure it out on my own (which terrifies me, tbh, because I'll feel really awful if I screw up and mess up someone's existing game).

justinross avatar Jun 22 '21 22:06 justinross

I'm starting a Blades in the Dark game soon and I got the system for Foundry and was pretty enthusiastic until I saw the character sheets that needed a bit of love, especially in the pre-filling department (I know the system developer thinks it's better to post-fill, but I like having the base stuff for a playbook and then adding more). This sheet looks more like something I'd use. I'm fairly well versed in general programming, but not a lot with web development and not at all with FoundryVTT. I am willing to help out, and I downloaded your fork, @justinross, but I'm not able to make much headway. I understand that you're in between versions and that what's available is kind of broken (no stress, only leech playbook done, etc.). I don't know what I could do to help, but I am willing to participate.

Chlikaflok avatar Jul 01 '21 15:07 Chlikaflok

All the playbooks should work in the current version of my fork (make sure you’re on the tidy-sheet-redesign branch). You need to click the lock in the top right to be able to change playbooks, too.

Really, a list of broken things will be helpful at some point. I’m hoping to get it more ready for testing and feedback by next week. It’s just been busy at work lately.

justinross avatar Jul 01 '21 15:07 justinross

I can change playbooks fine, but neither the items, the abilities, nor the NPCs change in accordance.

As for broken things, here's a few :

  • Dragging abilities from a compendium doesn't add to the list of abilities but rather replaces the whole list with the one ability.
  • Adding items from compendium works fine, but deleting them on the sheet doesn't.
  • NPCs only have one "neutral" face icon rather than a happy and frowny.

If it's busy at work, take it easy over here, there's no rush! I appreciate your work and am simply trying to contribute, not putting pressure.

Chlikaflok avatar Jul 01 '21 17:07 Chlikaflok

In FVTT 0.8.8 I get these warnings and errors when using the sheet and switching between playbooks :

image

Chlikaflok avatar Jul 01 '21 18:07 Chlikaflok

Yeah, I'm noticing that some old code got reverted weirdly when I merged in some upstream changes. I have some of that fixed on my local copy, but I'm looking at another issue right now. Gimme a few to clean up and push.

As for dragging abilities, I haven't done anything with that, so I'll need to assess how that works and fits into what I'm doing with abilities. It seems weird that it's just killing the others, but I'll take a look at it.

Thanks for the feedback!

justinross avatar Jul 01 '21 18:07 justinross

Okay so, apparently I hadn't pushed in much longer than I thought. Sorry about that. The playbook issue should be fixed. You'll notice that nothing gets populated for the Hull, Ghost, or Vampire playbooks, as their abilities and items haven't been added to the respective compendia.

Changing playbooks should now auto-populate the abilities, playbook items, acquaintances, and starting attributes (which isn't ideal for switching playbooks later on, as it just kinda wipes out whatever you had. Need to address that at some point).

You can delete items and abilities via right-click and choosing the delete option from the context menu. There are a couple of "+" icons that don't work quite right yet, as well.

You should be able to add new abilities and items by dragging. You can also right-click on the Items header and choose Add New Item to create a new item.

Stress is trackable in this version. Trauma and harm aren't, really. I've got some space for them, but I'm still figuring out how to handle those on the UI front.

Oh, and if you're using a character made in the previous version, it probably won't work right in this version. I have given basically no attention to migration yet.

justinross avatar Jul 01 '21 20:07 justinross

I think the Hull, Ghost and Vampire playbooks are not part of the open licensed part of Blades in the Dark.

The character sheet is way better now, with most things populating correctly. The generic items available to all playbooks aren't populating though and when I add the manually, they are auto-sorted in what appears to be a random manner, not alphabetical, nor in the order they were added. It also spews a bunch of these errors image when creating a new character sheet.

The other sheets are all non-functional, I'm guessing because the CSS has been all stripped to avoid conflicts. I don't know the underlying tech, but at this point I'm thinking the correct approach for this is doing like Tidy5e and making this an alternative character sheet rather than overhauling the system. It would be nice to have your character sheet and the original crew sheet, which was quite usable. This was probably already the intent, with forking the system being the easier way to get to the meaty part right away.

Thank you for the quick replies and fixes!

Chlikaflok avatar Jul 01 '21 21:07 Chlikaflok