changing label of stat bar as variable value changes

Question

I've implemented this health bar and was wondering if it was possible to make edits to this code to change a stat's title once it reaches a certain level? I attempted to use <<if>> macros but that didn't change anything. I know the div id is equivalent to the variable, so renaming them "health2" "health3" "health4" wouldn't work (and makes the bar disregard any changes) but I'm stumped. I'd like to make the colors to of the bar change, but that's beyond my expertise atm. 

:: StoryInit

<<set $health to 100>>

:: StoryMeters

<<if $health gte 75 lte 100>>
<div id="health" class="meter-gauge" data-label="healthy" data-max="100" data-value="100"><div></div></div>
<<elseif $health gte 50 lt 75>>
<div id="health" class="meter-gauge" data-label="fine" data-max="100" data-value="100"><div></div></div>
<<elseif $health gte 25 lt 50>>
<div id="health" class="meter-gauge" ill" data-max="100" data-value="100"><div></div></div>
<<else>>
<<elseif $health gte 0 lt 25>>
<div id="health" class="meter-gauge" data-label="faint" data-max="100" data-value="100"><div></div></div>
<</if>>

 

Answer 1

You have to use <<replace>> or a similar macro to update what is already one the screen. Wrap what you want to change into a div or span with a specific id:

<div id="test"><div id="health" class="meter-gauge" data-label="healthy" data-max="100" data-value="100"><div></div></div></div>

Then call your <<if>> statement whenever the health value changes like this:

<<if $health gte 75>>
<<replace "#test">><div id="health" class="meter-gauge" data-label="healthy" data-max="100" data-value="100"><div></div></div><</replace>>
<<elseif $health gte 50>>
<<replace "#test">><div id="health" class="meter-gauge" data-label="fine" data-max="100" data-value="100"><div></div></div><</replace>>
<<elseif $health gte 25>>
<<replace "#test">><div id="health" class="meter-gauge" ill" data-max="100" data-value="100"><div></div></div><</replace>>
<<else>>
<<replace "#test">><div id="health" class="meter-gauge" data-label="faint" data-max="100" data-value="100"><div></div></div><</replace>>
<</if>>

To save yourself the hassle of having to retype this <<if>> over and over again create a widget. Create a new passage, Give it the tag (not just the name) "widget". Now you can use this passage to create new widgets:

<<widget health>><<nobr>>

<<set $health += $args[0]>>

<<if $health gte 75>>
<<replace "#test">><div id="health" class="meter-gauge" data-label="healthy" data-max="100" data-value="100"><div></div></div><</replace>>
<<elseif $health gte 50>>
<<replace "#test">><div id="health" class="meter-gauge" data-label="fine" data-max="100" data-value="100"><div></div></div><</replace>>
<<elseif $health gte 25>>
<<replace "#test">><div id="health" class="meter-gauge" ill" data-max="100" data-value="100"><div></div></div><</replace>>
<<else>>
<<replace "#test">><div id="health" class="meter-gauge" data-label="faint" data-max="100" data-value="100"><div></div></div><</replace>>
<</if>>

<</nobr>><</widget>>

Any change of your health variable should now be done in the following manner:

<<health +10>> or <<health 10>>
<<health -17>>

The (live:) macro @Deadshot talks about is in Sugarcube 2 the <<timed>> macro. For this case you should not use it though (and it should generally only be used if absolutely nescessary since it - for a the time of its execution - prevents user input).

Comments

Thanks a lot! That works perfectly, and I managed to figure out how to change the color of the bars, too.

Answer 2

im not sure what you mean but it sounds like you want what's displayed to change real time. the reason the if statement won't work is because the pasage has to be reloaded. theres two ways to do this:

use a goto macro to refresh the passage

use a live macro. I use harlowe and im not sure how this would would in sugarcube, but this is how id do it:

(live: 0.001s)[$variable]

Every 0.001 seconds, the variable will be printed to the screen, so if its value has changed, it will change

Comments

Sorry about that. I mean that when $health dips below 50 I'd like the "health" label to turn to "ill" so it's printed over the stat bar in place of "healthy." It'll still be the health variable, I'd just like the particular label (the data-label) to change (and the color with it, if that's possible).

---

In harlowe:

(live: 0.001s)[(if: $health > 50)[(text-color: 'green')[Healthy]](else:)[(text-color: 'red')[Ill]]]

I'm sure its not hard to translate into sugarcube

BTW: I added text colour stuff just for fun

Answer 3

If you're interested, I have some sample health bar code for SugarCube here as well.

Comments

Oh, this is awesome! :D thanks!