Adding an energy bar, but how...?

Question

Hello Everyone and Merry Christmas,

I am trying to add an energy bar to my game. It suppose to decrease with the day going toward evening.

I have read up this

I wonder if that can be adapted as an energy bar decreasing the energy as the time passes bye in game.

I do have the Gregorian Widget calendar installed and added a couple of tags which makes time passing different in some passages like a "time8h" tag that passes 8 hours when you visist the sleep passage or a "time2h" tag which I use on the desk/homework passage etc, the energy on those passages suppose to decrease different as more time goes bye.

Finally, when the energy is reaching like 20% it should display that you feel sleepy and a "passing out" if you don't go to sleep and extend things to reach 0% energy. (This should lead to you laying there passed out for 1-2 hours which should add some energy to wake you and crawl to bed.)

I have been looking at above link for a while but since I have only half-knowledge, I am not sure if i would get it to work out just by changing the words from health to energy because the damage bar has a different way of how it works and is triggered differently...

Thank you in advance one more time for looking into it and for helping me out. <3

*waves*

Mr. Peppermint

 

 

Answer 1

I tried out the following, but it displays just a small blue square and has no progression at all. So, I am sure, I am missing out on something here.

StoryInit:

<<set $EnergyTotal to 100>>
<<set $Energy to $EnergyTotal>>
<<set $EnergyLoss to 0>>

Sleepy Passage:

<<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>>

PassageDone:

<<display "Sleepy">>

StoryCaption:

<<button "">>
<<set $gameDate.setMinutes($gameDate.getMinutes() + 15)>>
<<set $EnergyLoss to 6>>
<<display "Sleepy">>

 

I took that from here.

I believe the button line where it gets the time is wrong in my code ... the original had hours, but every click on my game passes 15 minutes unless in the special passages like HOMEWORK (time2h) or WATCH TV (time1h) or SCHOOL/UNIVERSITY (time7h).  I kinda worry that is going to get messy even if I get this to work since it then may count every passage as it is with 15 minutes per passage...

Finally, I wonder how I trigger the sleeping refill... probably like this, but I am not that sure:

<<if $EnergyTotal is "0">> [[Sleep]]
  <<set $EnergyTotal to "100">>
<</if>>

*waves*

Mr. Peppermint