Hello, I am working on a character sheet that makes use of a progress bar as a visual marker of armor damage in ADDITION to health and energy. I have found the code I want to use on the CSS wizardry page, specifically progress bar #3 (also posted below). However, the issue I have is that the code will need to be duplicated on my character sheet multiple times. I could simply copy the code in the sheet workers, for like the 6-7 times the progress bar needs to be reused, however that seems a bit wasteful. What I want to do is use a const string array to grab the unique attribute name and dynamically create it so that I can just have one set of code for as many versions of the progress bar I wish to create. Kind of like how the <button> version of tabbed layout code works. I am almost certain this is possible, but my knowledge of javascript is barely enough that I dont dunning-kruger myself into thinking I am a programming god (that is to say, I can tell the difference between a switch and a case statement and not much else. :P) I would very much appreciate the help in this and perhaps some other small things. The following is the code I am currently using, please keep in mind that it is an incomplete version with some of my tinkering not the original code. Below the code is a bit more of a description of what I am doing if you would find that helpful. HTML Code <div class="armor-armdisp">
<!-- When testing the inputs and bar-track are split on different lines, however, they MUST be condensed for final or it will add a &nbsp; for each new line in the code... it sucks... -->
<input type="number" name="attr_arm_head_hp" class="sktext w2m" title="@{arm_head_hp}" value="0" min="0">
/<input type="number" name="attr_arm_head_hp_max" class="sktext w2m" title="@{arm_head_hp_max}" value="10" max="99">
<input type="hidden" class="bar-value" name="attr_bar_value" value="100" />
<div class="bar-track"><div class="bar-progress"></div></div>
</div> SheetWorkers Code /* ARMOR HEALTH BAR */
const update_progressBar = function ( event ) {
// make the function generic so it can be used by any current/max attribute pairing
const baseAttributeName = event.sourceAttribute.replace( /_max/ , '' );
getAttrs([baseAttributeName, ` ${baseAttributeName} _max` ], function ( v ) {
const output = {};
// Use the generic baseAttributeName to retrieve and calculate
const arm_head_hp_max = +v[ ` ${baseAttributeName} _max` ] || 1 ;
// We can use the Math functions of JS to limit our hp to valid values
const arm_head_hp = Math .min( Math .max(+v[baseAttributeName] || 0 , 0 ), arm_head_hp_max);
// Calculate the percentage value for the progress bar
output.bar_value = (arm_head_hp / arm_head_hp_max) * 100 ;
setAttrs(output);
});
};
on( "change:arm_head_hp change:arm_head_hp_max" , update_progressBar); CSS Code /* ----- BAR PROGRESS ----- */
.bar-progress { /* this class is just for the color and progress element, not the BAR itself. For the bar, see class immediately above (.bar-track).
/* Note that this calculation is done in this element so that the changing values of the size variables cascade to it properly and
update the value as the sizes are updated */
--trackPercentage: calc(var(--tensSize) + var(--onesSize) + var(--decimalSize));
box-sizing: border-box;
grid-area:content;
background-color: color-mix(in oklab,var(--trackGoodColor) var(--trackPercentage),var(--trackBadColor)); /* Green fading to red as damage taken */
width: var(--trackPercentage);
height: 100%;
transition: width 0.25s ease-in-out, background-color 0.25s ease-in-out;
}
/* ----- BAR PROGRESS STEPS ----- */
/* 10's steps */
.bar-value[value^="1"]:not([value^="1."]):not([value="1"]) + .bar-track{ --tensSize: 10%;}
.bar-value[value^="2"]:not([value^="2."]):not([value="2"]) + .bar-track{ --tensSize: 20%;}
.bar-value[value^="3"]:not([value^="3."]):not([value="3"]) + .bar-track{ --tensSize: 30%;}
.bar-value[value^="4"]:not([value^="4."]):not([value="4"]) + .bar-track{ --tensSize: 40%;}
.bar-value[value^="5"]:not([value^="5."]):not([value="5"]) + .bar-track{ --tensSize: 50%;}
.bar-value[value^="6"]:not([value^="6."]):not([value="6"]) + .bar-track{ --tensSize: 60%;}
.bar-value[value^="7"]:not([value^="7."]):not([value="7"]) + .bar-track{ --tensSize: 70%;}
.bar-value[value^="8"]:not([value^="8."]):not([value="8"]) + .bar-track{ --tensSize: 80%;}
.bar-value[value^="9"]:not([value^="9."]):not([value="9"]) + .bar-track{ --tensSize: 90%;}
.bar-value[value^="10"]:not([value^="10."]):not([value="10"]) + .bar-track{ --tensSize: 100%;}
/* Ones sizing */
.bar-value:is([value*="1."],[value$="1"]:not([value*="."])) + .bar-track{ --onesSize: 1%}
.bar-value:is([value*="2."],[value$="2"]:not([value*="."])) + .bar-track{ --onesSize: 2%}
.bar-value:is([value*="3."],[value$="3"]:not([value*="."])) + .bar-track{ --onesSize: 3%}
.bar-value:is([value*="4."],[value$="4"]:not([value*="."])) + .bar-track{ --onesSize: 4%}
.bar-value:is([value*="5."],[value$="5"]:not([value*="."])) + .bar-track{ --onesSize: 5%}
.bar-value:is([value*="6."],[value$="6"]:not([value*="."])) + .bar-track{ --onesSize: 6%}
.bar-value:is([value*="7."],[value$="7"]:not([value*="."])) + .bar-track{ --onesSize: 7%}
.bar-value:is([value*="8."],[value$="8"]:not([value*="."])) + .bar-track{ --onesSize: 8%}
.bar-value:is([value*="9."],[value$="9"]:not([value*="."])) + .bar-track{ --onesSize: 9%}
/* decimal sizing */
.bar-value:is([value*=".0"],[value*=".1"]) + .bar-track{ --decimalSize: 0.1%;}
.bar-value[value*=".2"] + .bar-track{ --decimalSize: 0.2%;}
.bar-value[value*=".3"] + .bar-track{ --decimalSize: 0.3%;}
.bar-value[value*=".4"] + .bar-track{ --decimalSize: 0.4%;}
.bar-value[value*=".5"] + .bar-track{ --decimalSize: 0.5%;}
.bar-value[value*=".6"] + .bar-track{ --decimalSize: 0.6%;}
.bar-value[value*=".7"] + .bar-track{ --decimalSize: 0.7%;}
.bar-value[value*=".8"] + .bar-track{ --decimalSize: 0.8%;}
.bar-value[value*=".9"] + .bar-track{ --decimalSize: 0.9%;} What I am trying to do, my character sheet is an advanced version of the FALLOUT EQUESTRIA character sheet, that will be styled to look like the pipboy (pipbuck), vats display. Or at least the self-armor will be represented by a vaultboy with icons and number fields where you include the resistances the current armor slot possesses. When it is toggled that you are wearing armor the above section of code will be displayed. including a progress bar like display of the damage taken by that armor location. In this version of the sheet since it is a quadruped, it will be, HEAD, TORSO, Left Foreleg, Right Foreleg, Left Hindleg, Right Hindleg. The attribute syntax for each armor location is attr_arm_LOCATION_damage. That means, what I am looking for is a sheet workers that can have a constant array that is something like const hitlocation = ["head", "torso", "LFore", "RFore", "LHind", "RHind", "horn", "wing"]. The horn and wing are sublocations so they wont entirely be relevant right now since I am not making a progress bar for them at present. I am hoping that I can use that constant string array to make it so that I can have one compact and simple code rather than copy/paste the sheet workers repeatedly. Thank you in advance for any help and/or guidance you may be able to give. PS., This is only the first pass at the code to create a minimum releasable character sheet. I have designs to also tweak the progress bar further, but I wanted to keep it simple for the present. Also, if you are someone who would be interested in seeing the code, or working on it with me, or even testing it with a small one/two shot fallout equestria when its done. Feel free to hit me up in DM's here or on discord.
