another health bar for sugarcube 2
i have problem about my kind of health bar feature for my game, here we go:
first we set this variable
then in story caption, i have button which can fast forward time clock about 1 hour for one click and decrease player energy
and here's the formula i get from greyelf and customize a little for my need
and here's the energy bar will be display in each passage, im using passageHeader because it will show up in top of each passage or maybe its wrong, yes?
this thing is works well, the energy bar is decreasing whenever i press the fast forward button..... but the problem is when i go to another passage, the enery bar is back to full (you know what i mean?) when it should be not.
what im missing here? any help will be appreciated, sorry for my bad english. thx before
first we set this variable
::StoryInit <<set $energyTotal to 100>> <<set $energy to $energyTotal>> <<set $energyLoss to 0>>
then in story caption, i have button which can fast forward time clock about 1 hour for one click and decrease player energy
::StoryCaption <<button "">> <<set $gameDate.setHours($gameDate.getHours() + 1)>> <<set $energyLoss to 6>> <<display "Sleepy">> <</button>>
and here's the formula i get from greyelf and customize a little for my need
::Sleepy
<<script>>
var hBar = $('.energy-bar .stats-bar'),
bar = hBar.find('.bar'),
hit = hBar.find('.hit');
var total = State.variables.energyTotal,
value = State.variables.energy,
damage = State.variables.energyLoss,
hitWidth = 0,
barWidth = (value / total) * 100,
delayReset = false;
if (damage != 0) {
hitWidth = (damage / value) * 100;
value -= damage;
barWidth = (value / total) * 100;
State.variables.energy = value;
State.variables.energyLoss = 0;
delayReset = true;
}
hBar.data('total', total);
hBar.data('value', value);
/*hit.css('width', hitWidth + "%");*/
bar.css('width', barWidth + "%");
if (delayReset) {
setTimeout(function(){
/*hit.css({'width': '0'});*/
bar.css('width', (State.variables.energy / State.variables.energyTotal) * 100 + "%");
}, 500);
}
<</script>>
and here's the energy bar will be display in each passage, im using passageHeader because it will show up in top of each passage or maybe its wrong, yes?
::PassageHeader <div class="stats-wrapper energy-bar"> <span>Energi</span> <div class="stats-bar"> <div class="bar"> <div class="hit"></div> </div> </div> </div>
this thing is works well, the energy bar is decreasing whenever i press the fast forward button..... but the problem is when i go to another passage, the enery bar is back to full (you know what i mean?) when it should be not.
what im missing here? any help will be appreciated, sorry for my bad english. thx before
Comments
In the Health bar in right side... thread you linked to you will notice that the Javascript code in 2c is contained within a postrender["Update Health Bar"] event handler, which is called after each passage is shown to the reader.
That event is one way to do as @TheMadExile suggested, another is to use a PassageDone special passage like the following to invoke your Sleepy passage.