0 votes
asked by (180 points)
retagged by

I'm trying to create a UI for a combat system in SugarCube and I've come up to some problems. I want the html <progress> element to act as the health bar.  The full syntax for the element is 

<progress value="10" max="100"></progress>

I want my variable($EnemyMorale) to automatically print to  the value="_" section. Is there any way to do this because <<print>> doesn't work.


My Twine Passage:

<<set $EnemyMorale to 100>>\
<<set $PlayerMorale to 100>>\
<div style="text-align: right">Enemy Morale: <<print $EnemyMorale>>
<progress value="$EnemyMorale" max="100"></progress></div>

Player Morale: <<print $PlayerMorale>>
<<button 'Attack' system2>><<set $attack to either(0, 1, 2)>><<set $enemyattack to either(0, 1, 2, 4, 5)>><</button>>

<<button 'Aim' system2>><<set $aim to either(0, 1, 2, 3)>><<set $enemyattack to either(0, 1, 2, 4)>><</button>>

My SugarCube version is the one packaged with twine by default.

1 Answer

0 votes
answered by (32.6k points)

You can use the "@" before an HTML attribute to get SugarCube to translate the contents of that attribute.  So, simply adding an "@" before "value=" should work:

<progress @value="$EnemyMorale" max="100"></progress>

See the HTML Attribute Directives section of the documentation for details.

Note: If you plan on using more than one "@" in the same HTML element then you should upgrade to the latest version of SugarCube, because there was a bugfix for that in v2.23.5.

commented by (60.4k points)
Note that you may need to update sugarcube for that to work.
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.