True to Melee Text Color Change Based on Damage - SSBDoppler/slippi-hud GitHub Wiki

This is the damage text color logic for the left player. replace the [0] with [1] for the right player

 ${(this.playerData[0].slippi.damage>300)
? html `<div id="dmg" class="damage" style="color: rgb(80,0,0);">${this.playerData[0].slippi.damage}</div>`
: html `<div id="dmg" class="damage" style="color: rgb(${Math.floor(((this.playerData[0].slippi.damage/300)*-175)+255)},${Math.floor(((this.playerData[0].slippi.damage/300)*-255)+255)},${Math.floor(((this.playerData[0].slippi.damage/300)*-255)+255)});">${this.playerData[0].slippi.damage}</div>`    
} 

this is the start of the if then, because the color become static at 300% and above

${(this.playerData[0].slippi.damage>300)

the static value when damage is greater than 300

? html `<div id="dmg" class="damage" style="color: rgb(80,0,0);">${this.playerData[0].slippi.damage}</div>`

the dynamic value while damage is less than 300.

: html `<div id="dmg" class="damage" style="color: rgb(${Math.floor(((this.playerData[0].slippi.damage/300)*-175)+255)},${Math.floor(((this.playerData[0].slippi.damage/300)*-255)+255)},${Math.floor(((this.playerData[0].slippi.damage/300)*-255)+255)});">${this.playerData[0].slippi.damage}</div>`

I used the if then, because the equation that controls percent color starts outputting negative values when damage is over 300 and I wasn't sure how css would react to negative values in the rgb data field, I suppose I could have tested or checked smash stack.

If you want the '%' to change color along with the numbers, you have two options you can just

If you don't mind the % sign being the same size as the numbers

<div id=dmg class="damage" style=... >${this.playerData[0].slippi.damage}%</div>

If you want it to be a different size, all you have to do is make a new <span>s for each and repeat the style equation, you can still embed it in the original if then statement, so that doesn't have to be repeated.

Example of how that might look.

<div id=dmg class="damage" style=... ><span id=percent>${this.playerData[0].slippi.damage}</span><span id=symbol>%</span></div>

text-color math, since we're using rgb to determine the color.

Red Value

${Math.floor(((this.playerData[0].slippi.damage/300)*-175)+255)}

Green Value

${Math.floor(((this.playerData[0].slippi.damage/300)*-255)+255)}

Blue Value

${Math.floor(((this.playerData[0].slippi.damage/300)*-255)+255)}

Shout-out to uncle punch for the original equations.