In that case you will need to use a sheet worker, to set the value of an attribute. Edit : i wasnt aware of the in-range and out-of-range selectors. I'll have to check them out for the future, but the method below is pretty reliable. The problem is in CSS you can only check against string values - there's no way to include calculations, like check if an attribute is below half of another value. You solve this by creating a sheet worker, to create an attribute based on those calculations. If the armour is undamaged it has a value of 0, if below 50% max, it will have value of 1; if its over 50%, a value of 2, and if max or over, a value of 3. You can then check for those values in the CSS. So, here's how to do it. First create the new attribute, and give it both a name (which you need for it to work) and a class (which you need for the CSS part). <input type="hidden" name="attr_armour_css" class="armour-damage" value="0" > That should be placed in the html just before the armour card, like so. If its not placed there, the CSS wont work. <input type="hidden" name="attr_armour_css" class="armour-damage" value="0" >
<div class="armorcard armor-h"> <div class="flexrow">H <input type="number" name="attr_armor-current-h" value="0"></div> <div class="flexrow">MX <input type="number" name="attr_armor-max-h" value="0"></div> </div> Then a sheet worker like this: on('change:armor-current-h change:armor-max-h', () => {
getAttrs(['armor-current-h', 'armor-max-h'], values => {
const current = parseInt(values['armor-current-h']) || 0;
const max = parseInt(values['armor-max-h']) || 0;
const css = (current === 0) ? 0 : (current < Math.ceil(max/2)) ? 1 : (current < max) ? 2 : 3;
setAttrs({
armour_css: css
});
});
}); and finally the CSS: div.sheet-armorcard div { background: #098C87; padding: 0px 5px; }
input[type="hidden"].sheet-armor-damage[value="1"] ~ div.sheet-armorcard div {
background: #E28800;
}
input[type="hidden"].sheet-armor-damage[value="2"] ~ div.sheet-armorcard div {
background: #EB4511;
}
input[type="hidden"].sheet-armor-damage[value="3"] ~ div.sheet-armorcard div {
background: #463c66;
} I've assumed here that the current stat shows the damage taken. If it shows the damage remaining, change a line in the sheet worker to this: const css = (current === 0) ? 3 : (current < Math.ceil(max/2)) ? 2 : (current < max) ? 1 : 0;
