The following prototype is loosely based on answers given in the Forum Health bar in right side bar or in a status passage thread. It consists of five parts.
1. Defining the variables used to store the max and current values of the health bar.
The best places to initialise these variables would be within your story's startup tagged passage.
(set: $maxHealth to 100)
(set: $health to $maxHealth)
2. The HTML being used to simulate a health bar.
Ideally this would be placed within your header tagged passage, make sure there are no line-breaks within the HTML structure as they can effect the visual layout.
<div id="health-bar">\
<div class="bar"></div>\
</div>
3. The CSS being used to style the inner and outer sections that make up the health bar.
I have 'borrowed' the CSS from the linked thread for this prototype, you will obviously want to change it to suit your own needs. The CSS also hides the footer tagged passage defined later in this prototype, the CSS needs to be placed within your story's Story Stylesheet area.
#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;
}
tw-include[title="Update Health Bar"] {
display: none;
}
4. The Javascript method used to update the visual state of the Heath Bar.
The following Javascript needs to be placed within your story's Story Javascript area, it defines a unique GE namespace to contain your story's custom Javascript as well as the updateHeathBar method which will be used to update the Heath Bar.
/* Create an unique private namespace to contain custom code. */
if (!window.GE) {
window.GE = {};
}
/* Update Heath Bar elements. */
window.GE.updateHeathBar = function (maxHealth, health) {
var
outer = $('#health-bar'),
inner = outer.find('.bar'),
barWidth = (health / maxHealth) * 100;
outer.data('total', maxHealth);
outer.data('value', health);
inner.css('width', barWidth + "%");
};
5. A footer tagged passage named Update Health Bar
This passage serves two purposes: firstly it automatically refreshes the Health Bar after each passage transition; secondly it can be manual invoked using a (display:) macro whenever you need to cause the Health Bar to be refreshed after a non passage-transitioning link has been selected.
(print: "<script>GE.updateHeathBar(" + (text: $maxHealth) + "," + (text: $health) + ");")
To test the above prototype simply create a new Story Project containing all of the above, then place the following TwineScript within the main starting-point Passage.
<!-- The following health change will automatically be applied to the Health Bar due to the footer tagged passage. -->
(set: $health to it - 10)
(link: "Do some Damage")[
<!-- This health change will be applied after the link is selected, it uses an manual invokation of the footer tagged passage to cause the current Health Bar to visually be updated. -->
(set: $health to 40)
(display: "Update Health Bar")
]
note: I suggest you change the name of the GE namespace defined in point 4 to something more meaningful to your project, make sure the new name is UNIQUE and that you update its usage in point 4's code as well as the reference in point 5.
WARNING: The Javascript method defined in point 4 does not include any invalid parameter value or missing HTML element error catching, I strongly suggest you add some.