Twine Version: 2.6.1
SugarCube: 2.36.1
So, I’m wondering if I can add text that’s linked to the health bar. To show how much health the player currently has instead of just a bar. Like a 100/100. With the left number being the players current health.
I have this in JavaScript"
Macro.add('statusbar', {
skipArgs : false,
handler : function () {
if (this.args.length < 4) {
return this.error('not enough parameters specified');
}
var identifier = this.args[0],
maximum = State.getVar(this.args[1]),
current = State.getVar(this.args[2]),
change = State.getVar(this.args[3]),
barWidth = (current / maximum) * 100,
changeWidth = 0,
delayReset = false;
const $parent = jQuery(document.createElement('div'));
$parent
.addClass("status-bar")
.attr({
'id': identifier,
'data-maximum': maximum,
'data-current': current
});
const $bar = jQuery(document.createElement('div'));
$bar
.addClass("bar")
.css('width', barWidth + "%")
.appendTo($parent);
const $change = jQuery(document.createElement('div'));
$change
.addClass("change")
.css('width', changeWidth + "%")
.appendTo($bar);
$parent.appendTo(this.output);
if (change != 0) {
changeWidth = (change / current) * 100;
current -= change;
barWidth = (current / maximum) * 100;
State.setVar(this.args[2], current);
State.setVar(this.args[3], 0);
delayReset = true;
}
if (delayReset) {
setTimeout(function(){
$change.css({'width': '0'});
$bar.css('width', barWidth + "%");
}, 500);
}
}
});
This in Style Sheet:
.status-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;
}
.status-bar .bar {
background: #c54;
width: 100%;
height: 10px;
position: relative;
transition: width .5s linear;
}
.status-bar .change {
background: rgba(255,255,255,0.6);
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 0px;
transition: width .5s linear;
}
#health-bar .bar {
background: green;
}
#mana-bar .bar {
background: blue;
}
With this in StoryInit:
<<set $level to 0>>
<<set $exp to 0>>
<<set $hpdamage to 0>>
<<set $mpuse to 0>>
<<set $Brawn to 5>>
<<set $Agi to 5>>
<<set $End to 5>>
<<set $Mind to 5>>
<<set $SP to ($MSP - $USP)>>
<<set $MSP to ($level*3)>>
<<set $USP to 0>>
<<set $maxExp to (Math.pow($level,3))>>
<<set $MHP to (($Brawn*$End)/2)>>
<<set $MMP to (($Brawn*$Mind)/2)>>
<<set $PD to (($Brawn+$End+$Agi)/2)>>
<<set $MD to (($Mind+$End+$Agi)/2)>>
<<set $CHP to $MHP>>
<<set $CMP to $MMP>>
And this in Story Caption:
HP: <<-$cHP>> / <<-$MHP>>
<<statusbar "health-bar" "$MHP" "$CHP" "$hpdamage">>
MP: <<-$cMP>> / <<-$MMP>>
<<statusbar "mana-bar" "$MMP" "$CMP" "$mpuse">>