Implementing a javascript health bar in sugarcube

Question

I want to make a health bar, that responds to a twine variable $vit[0].

I'm using the javascript:

<progress id="energy" value="$vit[0]" max="100"></progress>

The bar has a value of 0 when used in the story, despite a value of 90 for $vit[0]. Could anyone help with this? 

Answer 1

There are a number of existing threads on the Twine Forum which explain possible methods that can be used to display and update a 'bar' in SugarCube:

a. Health bar in right side bar or in a status passage

b. Live Countdown Bar

I suggest reading the whole of each thread before using either solutions, both of those solutions can be modified to work with a progress element instead.

 

Break down of why your existing example does not work:

The bar has a value of 0 when used in the story

Actually if you use your web-browser's Developer Tools to Inspect the HTML being generated for the progress element in your Passage you will see that has a value of $vit[0] which is invalid so the bar is defaulting to zero.

There are two main issues with your example:

1. When the Passage content is processed the $vit[0] reference is not being substitute with the current value of that variable. There are a number of methods that can be used to get around this issue, the simplest is to use a <<print>> macro to dynamically create the progress element.

<<print '<progress id="energy" value="' + $vit[0] + '" max="100"></progress>'>>

2. You are incorrectly assuming that HTML elements know how to monitor state changes in TwineScript variables, and the simple fact is that they don't. This is why both of the possible solutions I linked to use a SugarCube Task Object to (check the current state and) update the bar manually using Javascript.