Possibilities of displaying health bars in a character sheet

Hi, I'm not sure whether to post this thread here or in the Specifig Use Questions & Macros-forum since it has to do with a character sheet and is also a Specifig Use Question. So I'm posting it here, where I posted my other character sheet-based questions. In the system I'm mainly playing and I made a character sheet for a character has a specific amount of health bars (that is fixed) with a flexible amount of boxes, each representing one health point. The amount of boxes is based on the amount of life points, so it's likeley that they increase over the duration of a heroes life. My question: Which is the best way to display those health bars on a character sheet while their amount is flexible and no API is needed? For better understanding: [ ] [ ] [ ] [ ] [ ] [ ] [ ] [ ] [ ] [ ] [ ] [ ] [ ] [ ] [ ] [ ] [ ] [ ] [ ] [ ] [ ] [ ] [ ] [ ] [ ] This would represent a character with 5 life points. Would he get one additional life point, each row would gain another box: [ ] [ ] [ ] [ ] [ ] [ ] [ ] [ ] [ ] [ ] [ ] [ ] [ ] [ ] [ ] [ ] [ ] [ ] [ ] [ ] [ ] [ ] [ ] [ ] [ ] [ ] [ ] [ ] [ ] [ ] Every box should be a checkbox with three different symbols (representing different kind of damage) that the player can iterate through while clicking the boxes. The boxes also should be auto-filled via Sheet Workers but that would be no problem. My problem is, as stated above, how do I get five rows with a flexible amount of boxes, how do I display them and how do I adjust them upon the change of an specific attribute? The most intuitive solution I thought of would be a repeating row, but I don't know how to add single items to a specifig repeating row (if the boxes would represent attributes within a row). So far I only added a whole new row to an existing repeating row section. Can anyone help or at least give me a hint on how to achieve this goal? Greetings, Loki

I'd recommend doing this as repeating sections. This way you could have as many (or as few) health boxes as you needed. The basic html would look something like this: <fieldset class='repeating_health'> <div class='health-box-container'> <input type='radio' name='attr_bar1' value='healthy'> <input type='radio' name='attr_bar1' value='damagestate1'> <input type='radio' name='attr_bar1' value='damagestate2'> <input type='radio' name='attr_bar1' value='damagestate3'> <span>Some conditional display here for the symbols</span> </div> <div class='health-box-container'> <input type='radio' name='attr_bar2' value='healthy'> <input type='radio' name='attr_bar2' value='damagestate1'> <input type='radio' name='attr_bar2' value='damagestate2'> <input type='radio' name='attr_bar2' value='damagestate3'> <span>Some conditional display here for the symbols</span> </div> <div class='health-box-container'> <input type='radio' name='attr_bar3' value='healthy'> <input type='radio' name='attr_bar3' value='damagestate1'> <input type='radio' name='attr_bar3' value='damagestate2'> <input type='radio' name='attr_bar3' value='damagestate3'> <span>Some conditional display here for the symbols</span> </div> <div class='health-box-container'> <input type='radio' name='attr_bar4' value='healthy'> <input type='radio' name='attr_bar4' value='damagestate1'> <input type='radio' name='attr_bar4' value='damagestate2'> <input type='radio' name='attr_bar4' value='damagestate3'> <span>Some conditional display here for the symbols</span> </div> <div class='health-box-container'> <input type='radio' name='attr_bar5' value='healthy'> <input type='radio' name='attr_bar5' value='damagestate1'> <input type='radio' name='attr_bar5' value='damagestate2'> <input type='radio' name='attr_bar5' value='damagestate3'> <span>Some conditional display here for the symbols</span> </div> </fieldset> You'd use some CSS to style that as needed and cycle the radio buttons through some z-index swapping, but that would be the basic idea. EDIT: hadn't put in the proper iterations of the radios

Hi, Scott C. Thank you for your reply and the effort! I implemented it in my test campaign and it looks like this: I realize now that I've expressed myself badly talking about rows when I meant coloumns - sorry for that. The amount of coloumns should always be five, but there should be a possibility to add further option fields within the repeating section (or another solution that allows to add rows while the number of coloumns is stable). With your implementation when I click on "+Add" i get another five coloumns with 4 option fields each, but my goal is the opposite: There are only 5 coloumns with 1 to x option fields each coloumn. Maybe with five repeating sections (one each coloumn)? Or is this part of the CSS that you mentioned? Greetings, Loki

It sounds you're effectively asking for a nested repeating section, which is not possible... at least if the number of rows can be different from 5. If there's an upper bound to the number of columns, if would be possible to hack something together.

Hi Jakob! The number of columns should always be 5 and only 5. The number of rows (or elements per column) can be different, from 1 to x. Realistically there's also an upper bound for the number of rows / elements per column, because a heroe can only get a specific amount of lifepoints. Does that help? Greetings, Loki

Hmm, I don't think I explained my code very well, let me try to annotate it: <fieldset class='repeating_health'><!-- this repeating section will store all the health boxes--> <div class='health-box-container'><!-- This container holds the possible values for a single box, in this case in bar 1 (aka column 1) --> <input class='show-healthy' style:'display:none;' type='hidden' name='attr_bar1'><!-- hidden via inline styling. this one should never be shown --> <input class='healthy' type='radio' name='attr_bar1' value='healthy' checked><!-- This is the input that would be checked when this box is in the healthy state --> <input class='state1' type='radio' name='attr_bar1' value='damagestate1'><!-- This is the radio button that would be checked at the first damage state --> <input class='state2' type='radio' name='attr_bar1' value='damagestate2'><!-- second damage state --> <input class='state3' type='radio' name='attr_bar1' value='damagestate3'><!-- third damage state --> <!-- You'll need to use some css to conditionally display these radios depending on which one is checked, and to change what icon is shown in (or instead of) the span below. --> <span></span><!-- This span should be replaced with the icons for the varying damage states which you'll display conditionally depending on which radio button is checked --> </div> <div class='health-box-container'><!-- this is a single box in bar 2 (aka column 2)--> <input type='radio' name='attr_bar2' value='healthy' checked> <input type='radio' name='attr_bar2' value='damagestate1'> <input type='radio' name='attr_bar2' value='damagestate2'> <input type='radio' name='attr_bar2' value='damagestate3'> <span>Some conditional display here for the symbols</span> </div> <div class='health-box-container'><!-- box in bar 3 --> <input type='radio' name='attr_bar3' value='healthy' checked> <input type='radio' name='attr_bar3' value='damagestate1'> <input type='radio' name='attr_bar3' value='damagestate2'> <input type='radio' name='attr_bar3' value='damagestate3'> <span>Some conditional display here for the symbols</span> </div> <div class='health-box-container'> <input type='radio' name='attr_bar4' value='healthy' checked> <input type='radio' name='attr_bar4' value='damagestate1'> <input type='radio' name='attr_bar4' value='damagestate2'> <input type='radio' name='attr_bar4' value='damagestate3'> <span>Some conditional display here for the symbols</span> </div> <div class='health-box-container'> <input type='radio' name='attr_bar5' value='healthy' checked> <input type='radio' name='attr_bar5' value='damagestate1'> <input type='radio' name='attr_bar5' value='damagestate2'> <input type='radio' name='attr_bar5' value='damagestate3'> <span>Some conditional display here for the symbols</span> </div> </fieldset> CSS for cycling through radios .sheet-health-box-container{ position:relative; } .sheet-health-box-container > input{ position:absolute; display:none; z-index:10; width:100%; opacity:0; } .sheet-health-box-container .sheet-show-healthy[value=damagestate3] + .sheet-healthy, .sheet-health-box-container input[type=radio]:checked + input[type=radio]{ display:initial; } .sheet-health-box-container .sheet-healthy:checked ~ span:after{ content:'Healthy'; } .sheet-health-box-container .sheet-state1:checked ~ span:after{ content:'Damage State 1'; } .sheet-health-box-container .sheet-state2:checked ~ span:after{ content:'Damage State 2'; } .sheet-health-box-container .sheet-state3:checked ~ span:after{ content:'Damage State 3'; } This will only affect the display for bar 1 (aka column 1 boxes), the rest will show everything still as I haven't gone through and added the necessary classes and other edits. Also this is untested. EDIT: Tested, had some erroneous css. Should now work and demonstrate the idea more thoroughly. You'll still need to add your own styling to organize them into columns instead of rows, but that's basic css.

Hi, Scott C. Thanks again for the explanations! Especially the CSS was very helpful to understand the concept. I really think this is a good start, thank you! I will play around with this! :-) Greetings, Loki