0 votes
by (180 points)

I'm creating a UI for a battle system and I want the bar to go yellow every time the health drops below 50. So I used <<if $PlayerMorale <= 50>>. I also wanted the progress bar to go red when the health drops below 25 so I used <<if $PlayerMorale <=25>>. The first if also applies to the second one so the bar always stayed yellow. I figured out that I need to make a <<if $PlayerMorale is "Everything from 50 and 24">> But I didn't know how to do that. Is their a solution?

Html:

<<if $EnemyMorale <= 50>>\
<div style="text-align:right;">Enemy Morale: <span style="color: yellow;"><<print $EnemyMorale>></span>
<progress @value="$EnemyMorale" max="100" class="yellow"></progress></div>

<<elseif $EnemyMorale <= 25>>\
<div style="text-align:right;">Enemy Morale: <span style="color: red;"><<print $EnemyMorale>></span>
<progress @value="$EnemyMorale" max="100" class="red"></progress></div>

<<else>>\
<div style="text-align:right;">Enemy Morale: <span style="color: Green;"><<print $EnemyMorale>></span>
<progress @value="$EnemyMorale" max="100" class="green"></progress></div>

<</if>>\

<<if $PlayerMorale <= 50>>\
<div style="text-align:left;">Your Morale: <span style="color: yellow;"><<print $PlayerMorale>></span>
<progress @value="$PlayerMorale" max="100" class="yellow"></progress></div>

<<elseif $PlayerMorale <= 25>>\
<div style="text-align:left;">Your Morale: <span style="color: red;"><<print $PlayerMorale>></span>
<progress @value="$PlayerMorale" max="100" class="red"></progress></div>

<<else>>\
<div style="text-align:left;">Your Morale: <span style="color: green;"><<print $PlayerMorale>></span>
<progress @value="$PlayerMorale" max="100" class="green"></progress></div>

<</if>>\

Css:

.yellow {
  background: yellow;
}
.yellow::-webkit-progress-value {
  background: yellow;
}

.yellow::-moz-progress-bar {
  background: yellow;
}

.red {
  background: red;
}
.red::-webkit-progress-value {
  background: red;
}

.red::-moz-progress-bar {
  background: red;
}

.green {
  background: green;
}
.green::-webkit-progress-value {
  background: green;
}

.green::-moz-progress-bar {
  background: green;
}



 

1 Answer

+2 votes
by (143k points)

Or you could simple change the order of the <<if>> related macros for each of the $EnemyMorale and $PlayerMorale  value checks.

<<if $EnemyMorale <= 25>>

<<elseif $EnemyMorale <= 50>>

<<else>>

<</if>>


<<if $PlayerMorale <= 25>>

<<elseif $PlayerMorale <= 50>>

<<else>>

<</if>>

... that way the <<elseif>> condition will only be true if the value is > 25 and <= 50, because the <<elseif>> check only occurs if the <<if>> condition returns false.

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.
...