hero creator ui feedback
I'm trying to refactor the abilities' tab on the hero creation room to accomodate Race ASIs, but I don't like what I landed on, and I could use some UX/UI advice hahah
This's the new working prototype (moved the buttons onto a grid to make space for the bigger divs below, and replaced the Modifier for the Race ASI, showing modifier instead of the total value on hover)
48 Replies
like it, I still don't get used to these.. I will past the Before here and remove it from the main thread
Current layout:
I've a feeling you could save some room by making the abilities themselves set in stone instead of a
selectI also considered replacing the calculation buttons for a select, and overall using all the realstate with bigger buttons, a little closer to how the Charactermancer on R20 does it
that actually happens on some cases.. but yeah, could do.
I'm not super familiar with r20's but dndbeyond sounds similar to that
because right now the behavoirs change a little, tried making it as intuitive as possible to use4
i think its better if I just show all cases
if you click Roll:
interesting
You're thinking about this from the perspective of the Score value being the 'first class citizen' and then assigning abilities to those scores
damn
you smart Calego, that makes sense
It's a lot more intuitive to have the 6 abilities fixed, in order
dndbeyond reverses that, making the ability the 'first class citizen' which values are assigned to (screenshots coming in)
I think R20 does to, and it totally makes sense
They also combine "Manual/Rolled" where the roll populates the otherwise editable input
The usage of selects for the values is really intuitive, though probably harder to pull off in a Foundry context, is this a standard foundry interface or are you using svelte or something?
standard
I really wanted to explore migrating this to a framework eventually, but for now everything's done by hand
Regarding racial ASI, yeah that's a tough one. Ideally you show what the input is, any modifiers to that input, and then the derived value somewhere.
You might be able to squeeze that into a row if you make the abilities little headings over each row
eg
prototyping something ..
Yeah, that makes sense. The key to the selects working is that the other ones change their options when assigned. That's probably a pita to pull off by hand
F.. I wanted to replace something while touching the html and my mind defaulted to "oh, replace, ctrl+R!" ...
tried two different things here.. Strengh is "adding the race value directly", so for example the selected roll/standard array value is 14, but as it has a +2, it shows 16, with a 16-equivalent modifier of +3.
Dex is showing the race bonus on the option, but it looks hedious imo haahah
maybe this? and keep the value outside of the select for the modifier ? The rules themselves mention it's more widely used than the Score, it I guess it makes sense to give it some prime real estate
I sort of like this last one.. but I have no idea how I will accomodate this for Point Buy/Manual Input. Manual could be a 1-20 select maybe, one less UI to think
I'll put this to rest a little, my mind demands some gaming haha
I wouldn't put anything about the "race bonus" in the select which is the user's input. I would instead have a "total" column after the user input column with the two added together.
So the thing you end up with is kinda like:
What about something like this?
I feel like it's more of a sequential order:
im a little unfamiliar with the syntax here, _X_ i imagine is italics, the [## v] is supposed to be the select ?
Yeah
If you decide to put one, it might look nice to make the = symbol slightly darker
There's CSS variables for secondary text I believe
styling might be a little bit off
but.. i kinda like it for the select ones.. Manual input could be just 1-20 select, roll and standard array the corresponding values
I believe RAW ability score input can't be below 3 or above 18?
I don't have a source for that
Hmm I honestly don't recall such a rule, but I can double check on the SRD
3d6 means 3-18
the raw point buy is only 8 - 15
and the standard array is something like that
But i definitely dig this ui for manual input (with 1-20 or 3-18, whatever 😆 ), standard array and roll.
oh yeah, I added Manual Input*** as a means to "just put whatever you want so long as your DM agrees"
yeah it would be nice to be allow a number input for 'manual'
select for 1- whatever reasonable is also totally usable
I dig it
im slightly confused by this phrase.. my idea now would be to use this last suggestion by arcanist for:
* roll: Rolls 3d6 drop lowest x6, rearrange those rolls on the selects as you please
* standard array : rearrange the array with the selects as you see fit
* manual input: 1-20 on each select, put whatever you want.
so no literal number input on the manual input. I have it know, but the selects are better imo.. i can save the user from typing something off and breaking stuff 😛
so my only last concern would be how to fit Point Buy here.. because a select is not reasonable there imo
Why not?
You could add a point total at the bottom and then the cost next to the value in the select
oh but the select gets unerringly complicated hahaha
well.. no actually
I could just put 8-15 on the select
and recalculate the points ?
You could change the color of the total label and give it a strike through (for accessibility) when it's over the limit
Yeah, recalculate in the change event listener for all of the selects
yeah, I was having some tunnel vision because right now I don't let them go over 27 points, but now I can, and just yell at them if they do 😄
like it, hands on the dough now!
You could even make the total editable for custom point buy rules...
I was absolutely gonna do that too, thought that the very instant I typed my last message haha and that's ezpz
Register a "point buy total points" setting and pull the value from there
I'm taking the time to also allow customizing the rolls, before it was a fixed 4d6kh1, but it's just text, why not let users play with that too!? 😄
lots of hardcoded scaffolding yet, don't fret if the stuff you see don't really line up hahah but next im doing is plugging in race values and calculating totals & mods again
also taking the opportunity to refactor the code a lot, this Ability Tab was the very first thing I did when I joined the guys on the hackathon
It's a Christmas miracle! the HCT now considers Race bonus properly! (plus setting customization goodies)