+1 vote
by (950 points)

Hello Everyone,

I got my Energy-Bar applied to the point of it showing fully loaded. However, it just doesn't move at all no matter what. I am sure, I made a mistake, but I fail seing where...

This is what is inside my StoryInit

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

The script is inside a passage which carries the name "Sleepy" I took it from another post like that...

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

PassageDone suppose to execute the Energy at the end of every page. I was hoping like that it would automatically count what is the EnergyLoss per passage but the way the code is, it's just the CSS. I suspect my error is there somewhere... But at least now that that is added, the bar shows finally for me if I view the Passage named PassageDone. I couldn't get that display working before I put that in.

::PassageDone
<div class="energy-bar">\
	<div class="bar">\
		<div class="hit"><br></div>\
	</div>\
</div>\

Now below is what is in StoryCaption. I want the energy-bar to display there and show progress there. It suppose to actually track it all over the passages. I know I suppose to add an <<if>> rule there because different tags cause the time to pass more than 15 minutes on some passages. The bar shows the way I see it bye viewing the PassageDone if I write instead the code I posted below just <<display "PassageDone">> without the rest of it. But eitherway, there is no way I can get the bar to move and empty itself as I click from one passage to the next while playing.

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

My noob status doesn't allow me to really understand more of what I copied there other than that I have an giant error in it. Can somebody please help me with this?

Thank you ahead already. :)

*waves*

Mr. Peppermint

1 Answer

+1 vote
by (159k points)
selected by
 
Best answer

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.

by (130 points)
edited by
Hello MrPeppermint, greyelf and the someone who reads this,

I am writing my first Twine 2 SugarCube 2 Sci-Fi Game and wanted to say thanks for the code above.

[Edit: Made a new thread about the questions I had. Sorry.]

Thank you very much for your time
by (63.1k points)
Make a separate question please; it's not like your question has anything to do with the energy bar thing (from what I can see). One of the goals of this site is to make a searchable index of questions and answers, so piggy-backing off of an unrelated question will just confuse things.
by (950 points)
Thank you very much. <3 Once again you saved me. ;) Big huuugs*

Mr. Peppermint
...