Health bar display problems in PassageFooter [Sugarcube]

Authoring Twine
1

Hi there I’m using Sugarcube version 2.2.1 and I’m running into a problem with a health bar displaying incorrectly in a bottom bar in my PassageFooter.

I’m using HiEv’s healthbar code (THANK-YOU!!) and the code in my PassageFooter is this:

> /*The exclamation point below means that any passage WITHOUT the bbar tag WILL display the text in the div id below*/
> <<if !tags().includes("bbar")>>
> 	<div id="bottombar"><div id="bbblock"><div id="bbtext">
> 		<div id="hzhealthbarbkg" class="hzbarbkg">
> 			<div id="hzhealthbar" class="hzbar"></div>
> 		</div>
> 	</div>
> <</if>>

My problem passage [[riddle display]] looks like this:

JAVASCRIPT GETTING THE HEALTHBAR TO RENDER AT START OF PASSAGE (???)
<<script>>$(document).one(':passagerender', function (ev) {
	Health2(50, 50, "hzhealthbar", true, ev.content);
});<</script>>

LOSE HEALTH BUTTON:
<<button "Trying to modify the bottom health">>
	<<set $CurHP2 = $CurHP2-10>>
	<<run Health2($CurHP2, $MaxHP, "hzhealthbar", true)>>
<</button>>

[[riddle display]] THIS LINKS BACK TO THE SAME PASSAGE

The health bar works fine in the sense that when I press the button it animates and loses health without navigating to another passage (which is awesome). BUT, I’ve noticed that if I go back to the same passage, the healthbar resets to full health (50) because of the Javascript passagerender which is restoring it incorrectly to 50 at the start of the passage when in reality the underlying health variable (CurHP) IS being changed correctly.

No problem, I thought, I’ll just change the 50 in the script to be a variable ($CurHP), but whenever I try this it causes an error and Twine says $CurHP is undefined (It definitely IS defined in my StoryInit, but I suspect there’s a Javascript usage limitation going on here or something?

So yeah, I’m sorry this is surely something stupidly simple but it’s sure beyond me! Any help is very appreciated and I’m so sorry for my ignorance!

1 Like
2

You just need to use one of the APIs which give you access to story variables within pure JavaScript code—temporary variables have similar methods and functions. As one example:

State.variables.CurHP

SEE:

1 Like
3

Thanks so much for your reply TME,
I have no idea what you mean :confused:
Are you saying to put that “State.variables.CurHP” inside the script like this?

<<script>>$(document).one(':passagerender', function (ev) {
	Health2(State.variables.CurHP, 50, "hzhealthbar", true, ev.content);
});<</script>>

I’m sorry I don’t actually have a background in javascript so I don’t understand what an API even is…

4

Assuming that’s where you’d place $CurHP, yes.

1 Like
5

Hmmm doesn’t seem to be working…is there a chance I could upload my file or something? No pressure if you don’t have time etc.

Here is the JavaScript passage in case that’s useful?

window.Health2 = function (CurHP, MaxHP, BarID, Horizontal, Container) {
	if (Container == undefined) {
		Container = document;
	}
	var HP = parseInt((CurHP / MaxHP) * 100);
	if (HP < 0) HP = 0;
	if (HP > 100) HP = 100;
	var BarElement = $(Container).find("#" + BarID);
	if (Horizontal) {
		BarElement.css( { width : HP + "%" } );
	} else {
		BarElement.css( { height : HP + "%" } );
	}
	// Hue goes from -20 to 240 = red (hue = 0) -> green -> blue (hue = 240)
	var col = "hsl(" + (Math.floor(HP * 2.6) - 20) + ", 100%, 50%)";
	BarElement.css("background-color", col);
	BarElement.attr("title", CurHP + "/" + MaxHP + " HP");
	$(Container).find("#" + BarID + "bkg").attr("title", CurHP + "/" + MaxHP + " HP");
};
6

Actually I just closed and reopened twine and then it worked!!!
Thanks so much for your help!