Status bar transitions do not work

Authoring Twine
, ,
1

I made a simplified model of status bars based on the HiEv status bar, I tried to add the bar to UiBar but according to what I understood the elements of UiBar are reloaded each time the pass changes, so the transitions never happen.

window.statusBar = function(CurST, MaxST, BarID) {
		var ST = parseInt((CurST / MaxST) * 100);
		if (ST < 0) { ST = 0 } 
		else if (ST > 100) { ST = 100 };
	
		let BarElement = $(document).find("#" + BarID);
		BarElement.css( { width : ST + "%" } );
		BarElement.attr("title", CurST + "/" + MaxST + " EN");
	
		$(document).find("." + BarID + "Base").attr("title", CurST + "/" + MaxST + " ST");
};

Then on the storycaption

<<set _curHP = $characters.player.health.curHP,
	  _maxHP = $characters.player.health.maxHP
>>\

<div class="charmText UiName"><<= $mcName>> <<= $mcSurname>><hr></div>
<div id="statusbarBase1" class="statusBase1">\
	<div id="statusBase1" class="statusCenter1">\
		<span class="statusWord">Health</span>
	</div>
</div>\
<<run statusBar(_curHP, _maxHP, 'statusBase1')>>\

The CSS

.statusBase1 {
	position: relative;
  	left: -15px;
	height: 45px;
	width: 110%;
	background-color: #110;
	border-radius: 1px;
	z-index: 1;
	visibility: visible;
  	border: 3px solid black;
  	margin-bottom: 5px;
  	margin-top: 5px;
}

.statusCenter1 {
	position: absolute;
	bottom: 0px;
	left: 0px;
	height: 45px;
	background-color: transparent;
	border-radius: 1px;
	z-index: 2;
  	background-color: lightblue;
  	transition: width 2s, background-color 2s;
}

Any way to fix this?

Twine Version: Twine 2
Story Format: Sugarcube 2

2

First off, this line of your JavaScript:

$(document).find("." + BarID + "Base").attr("title", CurST + "/" + MaxST + " ST");

won’t work with this:

<div id="statusbarBase1" class="statusBase1">\
	<div id="statusBase1" class="statusCenter1">\
		<span class="statusWord">Health</span>
	</div>
</div>\
<<run statusBar(_curHP, _maxHP, 'statusBase1')>>\

because then it would be looking for something with a class of “statusBase1Base”, which doesn’t exist there.

The simplest fix to that would be to change the ID of the first <div> to “statusBase1bkg” and to change the JavaScript line to be:

$("#" + BarID + "bkg").attr("title", CurST + "/" + MaxST + " ST");

Now, to fix the transition problem that you’d asked about, first trim the StoryCaption passage down to just this:

<div id="charname" class="charmText UiName">$mcName $mcSurname<hr></div>
<div id="statusBase1bkg" class="statusBase1">\
	<div id="statusBase1" class="statusCenter1">\
		<span class="statusWord">Health</span>
	</div>
</div>\
<<run statusBar($characters.player.health.curHP, $characters.player.health.maxHP, "statusBase1")>>\

and then do this in your JavaScript section:

Config.ui.updateStoryElements = false;

$(document).on(":passageend", function () {
	try {
		$("#charname").empty().wiki("$mcName $mcSurname<hr>");
		statusBar(State.variables.characters.player.health.curHP, State.variables.characters.player.health.maxHP, "statusBase1");
	} catch(err) {
		// Failed.
	}
});

window.statusBar = function(CurST, MaxST, BarID) {
	var ST = parseInt((CurST / MaxST) * 100).clamp(0, 100);
	$("#" + BarID).css( { width : ST + "%" } ).attr("title", CurST + "/" + MaxST + " EN");
	$("#" + BarID + "bkg").attr("title", CurST + "/" + MaxST + " ST");
};

Setting Config.ui.updateStoryElements to false will prevent the StoryCaption passage from automatically updating itself on passage transitions, which will allow the health bar animation to work on passage transitions. The code then watches for :passageend events, and uses that to trigger updates in the StoryCaption passage. (Note that that event also updates the character name.)

Hope that helps! :grinning:

P.S. I also note that you’re referring to it as “EN” in one part, and “ST” in another. You should probably fix that.

1 Like