Health/Cooldown Bars (sugarcube)

Hello all,

I've been working on an action RPG combat system using twine, and I've been using the <<repeat 100ms>> and <<replace>> macros to dynamically update player health bars, and cooldowns to the next enemy attack.

I used this method for my health bars: https://twinery.org/forum/discussion/2751/health-bars
But due to the rapid replacing of such health bar images every 100ms, the health bars don't update smoothly at all, and rather they flash rapidly.

My new idea was to just create an entirely new set of updating health bars using Javascript and/or html/css. But I have no idea where to start (even after months of learning javascript and css, I'm still lost when it comes to complicated coding).

https://www.w3schools.com/w3css/w3css_progressbar.asp I've been reading up on using a css progress bar, and triggering a move() function using javascript. However, I already have some complex "damage calculations" in place using the default Sugarcube macros, and I have no idea how to use those story variables to affect the css progress bar's width %.

Here's an example of :

<<repeat 100ms>>
    <<set $enemy_cd to $enemy_cd - 1>>
    <<if $enemy_cd <= 0>>
        <<set $enemy_cd to 0>>
        <<enemy_attack>>
        <<stop>>
    <</if>>
<</repeat>>

My <<enemy_attack>> widget basically resets the $enemy_cooldown variable to 50 (basically the enemy attacks the player every 5 seconds) and restarts the repeat macro.

I guess this explanation has been rather long-winded, but what I'm ultimately trying to achieve is to use a css progress bar, and get javascript to "use" the $enemy_cd variable to determine the % of the progress bar's width value... i.e. when $enemy_cd is 50, the width of the bar is 100%, and when $enemy_cd is 0, the width of the bar is 0%.

Can anyone help? ;_; I've been really struggling with javascript functions.