Displaying a Health Bar on the UI Bar

Question

Hey everyone! So I am continuing making my first Twine game, and I have set up a health bar using Javascript and StoryInit code from

http://twinery.org/forum/discussion/8243/health-bar-in-right-side-bar-or-in-a-status-passage

In terms of the health bar working, everything seems fine; I am not getting any error messages upon start-up. However, I can't seem to get the bar to display on the right sidebar in Sugarcube 2. I changed the CSS code to the following:

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

.hit {
  background: rgba(255,255,255,0.6);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 0px;
  
  transition: width .5s linear;
}

Implemented the following code in Javascript:

postrender["Update Health Bar"] = function (content, taskName) {
	var hBar = $('#right-ui-bar-body .health-bar'),
			bar = hBar.find('.bar'),
			hit = hBar.find('.hit');
	var total = State.variables.totalHealth,
			value = State.variables.health,
			damage = State.variables.damage,
			hitWidth = 0,
			barWidth = (value / total) * 100,
			delayReset = false;
	
	if (damage != 0) {
		hitWidth = (damage / value) * 100;
		value -= damage;
		barWidth = (value / total) * 100;
		State.variables.health = value;
		State.variables.damage = 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.health / State.variables.totalHealth) * 100 + "%");
		}, 500);
	}
 };

$rightUiBar.addClass('stowed');

Added this to a StoryRightSidebar passage:

<div class="sanity-bar">\
    <div class="bar">\
        <div class="hit"></div>\
    </div>\
</div>\

 

And added everything I needed to my StoryInit passage. What exactly am I doing wrong that the healthbar won't display? I tried entering something in Javascript and it responded that the "$rightUiBar" is not defined. Do I have to define it somehow? If anyone has any suggestions, please let me know! Thank you!

Answer 1

Please use the Question Tags to start the name and full version number of the story format you are using, it makes it easier to find that information within a question as well as helps when searching for questions related to that story format.

If you look the StoryRightSidebar passage of the original example you will see that the outer div element has been assigned a health-bar CSS class.

<div class="health-bar">\
	<div class="bar">\
		<div class="hit"></div>\
	</div>\
</div>\

... and if you look at the 2nd line of the original Story Javascript area code you will see that it also references the same health-bar CSS class.
(note the full stop at the start of the class name.)

postrender["Update Health Bar"] = function (content, taskName) {
	var hBar = $('#right-ui-bar-body .health-bar'),
	...

... and if you look at this comment by TheMadExile in that same question you will learn that the CSS (within the Story Stylesheet area) should also be targeting the same health-bar CSS class.
(note the full stop at the start of the class name.)

.health-bar {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	....

You have changed the CSS class of the outer div to sanity-bar in your StoryRightSidebar passage example

<div class="sanity-bar">\
	<div class="bar">\
		<div class="hit"></div>\
	</div>\
</div>\

... this means that you will also need to change the health-bar CSS class in both the Story Javascript area code and the Story Stylesheet area styling to also be sanity-bar (with a leading full stop)

eg. changed Story Javascript.

postrender["Update Health Bar"] = function (content, taskName) {
	var hBar = $('#right-ui-bar-body .sanity-bar'),
	...

eg. changed Story Stylesheet.

.sanity-bar {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	....

WARNING: The implementation of the original Health Bar example assumed that there would only be a single bar within the StoryRightSidebar passage.
If you are planning on having multiple bars within that passage then you will need to change how those bars are defined and identified, then change both the JavaScript code and the CSS styling to use that identification instead of the current CSS class based implementations.

Comments

Hey, thanks for replying! And sorry about not adding tags; I'll be more attentive with that from now on (I am using Sugarcube 2.21.0). And to clarify further, I do not intend to have any other bars besides this

I changed what you suggested to

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

.hit {
  background: rgba(255,255,255,0.6);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 0px;
 
  transition: width .5s linear;
}

And

postrender["Update Health Bar"] = function (content, taskName) {
    var hBar = $('#right-ui-bar-body .sanity-bar'),
            bar = hBar.find('.bar'),
            hit = hBar.find('.hit');
    var total = State.variables.totalHealth,
            value = State.variables.health,
            damage = State.variables.damage,
            hitWidth = 0,
            barWidth = (value / total) * 100,
            delayReset = false;
    
    if (damage != 0) {
        hitWidth = (damage / value) * 100;
        value -= damage;
        barWidth = (value / total) * 100;
        State.variables.health = value;
        State.variables.damage = 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.health / State.variables.totalHealth) * 100 + "%");
        }, 500);
    }
};
$rightUiBar.addClass('stowed');
//

 

And I should clarify (if it isn't already obvious) that I am very new at coding; I don't want to be spoon-fed, but something akin to a step-by-step would help me get a better grasp on this. Anyway, thank you for your patience (and whoever else is reading this) and you aid!