Making a variable show correct current info (health after an attack)?

Question

So I've tried my hand at making a simple combat system.

 

The combat passage looks like this- 

 

<<include "combat">>
<<if $firstAttack is true>>
You are attacked by a $monster.name!<br><br><</if>>

$text<br><br>

The monster's health is $monster.hp!<br><br>

Your health is $health.<br><br>



<<if $monster.hp > 0 and $health > 0>>
<<button "Fight" "attack">>
	<<set $monster.hp to $monster.hp - $weapon.basedamage>>
	<<set $health to $health - $monster.basedamage>>

	<<set $monster.hp to Math.clamp($monster.hp, 0, 100)>>
	<<set $health to Math.clamp($health, 0, 100)>>
		<<set $firstAttack to false>>
		<<set $text to "You hit the $monster.name for $weapon.basedamage! 
       <br><br> The $monster.name hits you back for $monster.basedamage!">>
		<</button>>
		
<<if $firstAttack is true>>		

<<button "Run Away">><<script>>Engine.backward();<</script>><</button>>
<</if>><</if>>
		
<<if $monster.hp is 0>>
You defeated the monster!<br><br>
<<return>><</if>>

<<if $health is 0>>
You were killed by the monster!<br><br>
<<button "Next" "Dead">><</button>><</if>>

When I go through the combat, say I start with 100 health, and the goblin attacks, my health stat is always a turn behind. So, if it gives me 3 damage and I already have 95 health, during that turn it supposedily hit me, my health stays at 95. Then the next turn the monster hits me at 2 damage, it says I have 92 damage until the next hit. 

I don't know if I need to show the rest of the passages that make up the combat since it just sets your weapon damage and enemy damage, but I will if I need to.

Answer 1

What's displayed on a passage is static unless it's affected by a macro. When you print a variable, it's only printed once, when the page is first rendered. Any changes made to the variable after that won't be reflected; it's static text. To update it, you'd need to call that print code again, either by refreshing the passage or with a <<replace>> macro.

I would recommend turning the frontend display into its own passage, wrapping that portion in a <span> or <div>, and <<replace>>ing it with itself. That's what I did in my RPG. Try something like this:

:: battle display
$text<br><br>

The monster's health is $monster.hp!<br><br>

Your health is $health.<br><br>

:: battle
<<include "combat">>
<<if $firstAttack is true>>
You are attacked by a $monster.name!<br><br><</if>>

<div id="battle-display">
<<include "battle display">>
</div>



<<if $monster.hp > 0 and $health > 0>>
<<button "Fight" "attack">>
	<<set $monster.hp to $monster.hp - $weapon.basedamage>>
	<<set $health to $health - $monster.basedamage>>

	<<set $monster.hp to Math.clamp($monster.hp, 0, 100)>>
	<<set $health to Math.clamp($health, 0, 100)>>
		<<set $firstAttack to false>>
		<<set $text to "You hit the $monster.name for $weapon.basedamage! 
       <br><br> The $monster.name hits you back for $monster.basedamage!">>
<<replace "#battle-display">><<include "battle display">><</replace>>
		<</button>>