How would I make a widget to change the "width" of my css-styled progressbar based on a story variable?

0 votes
asked Jun 4 by twinedude (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>\

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

Let's say my player can have a total of 5 energy. I have no problem changing $ 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
answered Jun 5 by greyelf (88,870 points)
selected Jun 5 by twinedude
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: ' + (($ / 5) * 100) + '%'"></span>\

... 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 $ to Math.clamp($ + 2, 1, 5)>>
	<<replace "#story-caption">><<include "StoryCaption">><</replace>>

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

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

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

commented Jun 5 by twinedude (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!
Welcome to Twine Q&A, where you can ask questions and receive answers from other members of the community.

You can also find hints and information on Twine on the official wiki and the old forums archive.

See a spam question? Flag it instead of downvoting. A question flagged enough times will automatically be hidden while moderators review it.