Cannot make the energy bar works SugarCube 2

Question

Hello there.

I wanted to add an energy bar to my current game, so I looked for info on this Q&A and found this : http://twinery.org/questions/4464/trouble-with-energy-bar-it-just-wont-decrease

Greyelf helped MrPepperMint by offering a working solution for an energy bar.
Yet, I can't seem to make it work myself...
The energy bar does appear within the Story Caption, but despite my efforts, I didn't manage to have its length reduced when using <<set $EnergyLoss to 50>>. The bar won't change.

I even tried to create a new story only to try out the bar, and still, I can't have the bar working.
Any idea what I am doing wrong here ?
Thanks a lot

 

I am using SugarCube 2. something

 

StoryCaption 

<div class="energy-bar">\
	<div class="bar"></div>\
</div>\
<<run setup.updateEnergyBar()>>

Story Stylesheet 

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

 

Story Javascript 


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);
	}
};

 

I then created two passages, [[Passage 1]] where the story starts, leading to [[Passage 2]], where I <<set $EnergyLoss to 50>>, hoping for a change. 

Answer 1

People won't be able to fix your code unless you post it!  Please post all the relevant code, and hopefully someone will be able to help.

Comments

Done ! The code I used is 100% what Greyelf posted on the link I sent, which is why I don't understand why I can't make it work.

Answer 2

If you change the energy in [[Passage 2]] then it won't show the change until [[Passage 3]] (or whatever passage you go to next), because that's when the [[StoryCaption]] passage gets refreshed.

You either want to move the "<<set $EnergyLoss to 50>>" to [[Passage 1]] so the bar is updated when you go to [[Passage 2]], or you need to include this code after you set "$EnergyLoss":

<<run setup.updateEnergyBar()>>

which will trigger an update of the energy bar.

Hope that helps!

Comments

Thanks for your answer, yet it doesn't seem to work either for me !
I tried both of your solutions, and the bar won't bulge...

---

Just to be clear here, you did put the CSS in the Stylesheet section, right?  (In the Twine menu as "Edit Story Stylesheet".)  In the same way, the JavaScript should be in the JavaScript section (under "Edit Story JavaScript").

If you have them in passages called "Story Stylesheet" or "Story Javascript" then that won't work.

Answer 3

My answer to the recent Getting Health and Stats to Change Dynamically question includes a implementation for showing a changeable status-bar within the StoryCaption special passage, I suggest using it instead of the answer I gave to the older Trouble with Energy-Bar, it just won't decrease... question.

WARNING: That answer current requires that you are using a version of SugarCube 2 that is more recent that the one included with the v2.2.1 release of the Twine 2 applicaiton. Ideally you should keep your version of SugarCube up to date so you gain access to any new features & bug fixes.