widget not working

Question

For whatever reason, this widget won't work if I try to do the reverse version of it? I have this set up for all of my stats and it works for other ones, so I have no clue what I've borked up.

:: StoryInit
<<set $hunger to 50>>
<<set $full to 50>>
<<set $hunger = Math.clamp($hunger, 0, 100)>>

:: hunger #widget #nobr
<<widget "hunger">>
<<set $hunger += $args[0]>>
<<set $full -= $args[0]>>
<</widget>>

:: CSS
.statsb { display: flex; width: 200px; font-size: 10px; color: #000; text-align: center; font-weight: 700; }
.stats { display: inline-block; min-width: 0; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }

:: hungertest
<div class="statsb">
<<if $full gte 0>><div class="stats" @style="'width: ' + ($full * 2) + 'px; background-color: #fff;'">full: $full%</div><</if>>
\<<if $hunger gte 0>><div class="stats" @style="'width: ' + ($hunger * 2) + 'px; background-color: #ccc;'">hunger: $hunger%</div><</if>>
</div>

<<hunger -1>>
<<link "refresh" `passage()`>><</link>>

using <<hunger 1>> works to increase $hunger and decrease $full, but <<hunger -1>> (which I believe should increase $full and decrease $hunger) does absolutely nothing.

Answer 1

warning: You need to use the Math.clamp() function each time the associated story variable is changed, the story variable doesn't remember the mimum or maximum limits.

<<set $hunger += $args[0]>>
<<set $hunger = Math.clamp($hunger, 0, 100)>>

note: The syntax of your TWEE Notation contains a couple of errors:
1. The Passage Tags assigned to a passage should apear as a space sperated list between square brackets.
2. Story Stylesheet / CSS related passages need to be assigned the stylesheet passage tag.

:: CSS [stylesheet]
.statsb { display: flex; width: 200px; font-size: 10px; color: #000; text-align: center; font-weight: 700; }
.stats { display: inline-block; min-width: 0; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }

:: hunger [widget nobr]
<<widget "hunger">>
<<set $hunger += $args[0]>>
<<set $full -= $args[0]>>
<</widget>>

:: StoryInit
<<set $hunger to 50>>
<<set $full to 50>>
<<set $hunger = Math.clamp($hunger, 0, 100)>>

:: hungertest
<div class="statsb">
<<if $full gte 0>><div class="stats" @style="'width: ' + ($full * 2) + 'px; background-color: #fff;'">full: $full%</div><</if>>
\<<if $hunger gte 0>><div class="stats" @style="'width: ' + ($hunger * 2) + 'px; background-color: #ccc;'">hunger: $hunger%</div><</if>>
</div>

<<hunger -1>>
<<link "refresh" `passage()`>><</link>>

If I add the above to a new SugarCube 2 based project and change the name of your hungertest passage to Start, the <<hunger>> widget works correctly when I build & view the story HTML file in a web-browser.

Comments

Thanks for the syntax note!

Thanks for your help! I... don't know what was happening because when I tried again the widgets weren't changing, but renaming them and then changing their names to what the original variables had been worked? I wasn't using those variables or a widget with that name anywhere else so idk what the issue was.