Color code HP on status bar

[friedev]

Color codes the HP readout according to the fraction of max HP:

• White: full HP
• Green: >= 2/3 HP
• Yellow: >= 1/3 HP
• Red: < 1/3 HP

Ideally this would change the background highlight too, but that would be a bigger change since <mark> doesn't accept a custom background color AFAICT. Therefore, I figured I'd send this in as a draft for feedback before attempting to change that.

This could also be extended to spells if we want to. Not sure if we'd want to use the same colors and thresholds or something different.

[primeau]

I think we can get part way there with css variables.

player.js:getBottomLine():

    document.documentElement.style.setProperty('--mark-bg', hpColor);
    document.documentElement.style.setProperty('--mark-font', `black`);

larn.css:mark{}:

    background-color: var(--mark-bg, lightgrey);
    color: var(--mark-font, black);

The catch of course, is that this changes <mark> for everything, not just HP. So we'd have to find a way to separate things. Any ideas?

[friedev]

@primeau I ended up implementing it a bit more like how <font> works, although there's no color='...' attribute for <mark> (understandably), so I had to use style='background-color: ...'.

I added some helper functions to make the markup less fragile too. There's a lot more refactoring that could be done with how markup is handled in general, but I didn't want to go too crazy haha. If you're not a fan of the refactors at all, you can drop the commits after 0115171.