0 votes
by (220 points)

Hello there,

I want to have several progress-bars for stats like "energy" ect. in my storycaption. I've managed to make them look halfway decent with css, but I have no clue about how to get them to change easily without just straight up replacing the entire text. Right now I have this kind of progress-bar in my storycaption :

<div class="progress-bar orange stripes shine glow" id="energy">\
	<span style="width: 40%"></span>\
</div>

I'm looking for a way to make a widget that would change that 40% in there to something else, based on the variable $player.energy for example.

Let's say my player can have a total of 5 energy. I have no problem changing $player.energy with the help of a widget, but I'm looking to also update the 40% in the <div> up there to a new value(based on max energy, so x out of 5) at the same time.

Hope I'm making sense here.

1 Answer

+1 vote
by (159k points)
selected by
 
Best answer

You could use @ HTML Attribute Directive to make your progress meter use the associated variable as part of the calculation of the related span element's width.

<div class="progress-bar orange stripes shine glow" id="energy">\
	<span @style="'width: ' + (($player.energy / 5) * 100) + '%'"></span>\
</div>

... then you could use information gained from this answer by TheMadExile to refresh the whole of the StoryCaption area.

<<link "Increase Player Energy by 2">>
	<<set $player.energy to Math.clamp($player.energy + 2, 1, 5)>>
	<<replace "#story-caption">><<include "StoryCaption">><</replace>>
<</link>>

... or a modified version of the above to only refresh the Energy progress meter.

<<link "Increase Player Energy by 2">>
	<<set $player.energy to Math.clamp($player.energy + 2, 1, 5)>>
	<<replace "#energy">><span @style="'width: ' + (($player.energy / 5) * 100) + '%'"></span><</replace>>
<</link>>

Both the first of my examples and the bodies of both my <<link>> macro calls could be embedded within widgets.

by (220 points)
Thank you very much for answering.

Tried the html attribute directive before, but apparently in entirely the wrong place. This works like a charm, thank you very much!
...