Where to start...
1. From memory the PassageDone special passage is automatically silent so the Energy Bar related HTML elements you have in it wont appear on the page.
2. If you want the Energy Bar to appear within the StoryCaption area then you should place the HTML element that make up the Energy Bar within the StoryCaption special passage.
3. The procession of the StoryCaption special passage happens after the processing of the current Passage has finished, this means that you can't directly use the Passage related Events & Tasks to update content displayed by the StoryCaption special passage.
4. You left out the example of your Energy Bar related CSS, which means I have to assume it is something like that in my original Health Bar solution.
I suggest doing the following.
1. Your Energy Bar related CSS, within your Story Stylesheet area.
energy-bar {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 200px;
height: 20px;
padding: 5px;
background: #ddd;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
position: relative;
}
.bar {
background: #c54;
width: 100%;
height: 10px;
position: relative;
transition: width .5s linear;
}
... notice that I have deleted the .hit class based rule, because you are not using it.
2. Define an updateEnergyBar() function on the setup object within the Story Javascript area.
This function will be used to update the Energy Bar when needed.
setup.updateEnergyBar = function () {
var
hBar = $('#story-caption .energy-bar'),
bar = hBar.find('.bar');
var
total = State.variables.EnergyTotal,
value = State.variables.Energy,
loss = State.variables.EnergyLoss,
barWidth = (value / total) * 100,
delayReset = false;
if (loss != 0) {
value -= loss;
barWidth = (value / total) * 100;
State.variables.Energy = value;
State.variables.EnergyLoss = 0;
delayReset = true;
}
hBar.data('total', total);
hBar.data('value', value);
bar.css('width', barWidth + "%");
if (delayReset) {
setTimeout(function(){
bar.css('width',
(State.variables.Energy / State.variables.EnergyTotal) * 100
+ "%");
}, 500);
}
};
... notice I have removes the Hit Bar related code.
3. Modified StoryCaption special passage.
This creates the Energy Bar related HTML element then calls the new setup.updateEnergyBar() function to update the width of the bar.
<div class="energy-bar">\
<div class="bar"></div>\
</div>\
<<run setup.updateEnergyBar()>>
... notice I have removes the Hit Bar.
4. Delete your Sleepy passage and PassageDone special passage, because they are not longer needed for the Energy Bar.
You should now have an Energy Bar within the StoryCaption are, which you can change the current value of by assign a value to the $EnergyLoss story variable within the current Passage like so.
<<set $EnergyLoss to 50>>
... would reduce the bar by 50 units.