Changing stats' text colour in Sugarcube 2, Twine 2.0.11

Authoring Twine
1

I have a list of dog stats in the StoryMenu of my Twine game, including speed and obedience. These change depending on the choices you make in the game. For example, the dogs get slower if they aren’t given any food.

I would like there to be a signifier when these stat changes occur, as it is easy to overlook when the numbers increase or decrease (the text colour doesn’t differ much from background).

My idea is having a green +1 symbol occur next to the stat when it increases, and a red -1 symbol next to the stat when it decreases. Either that or having a low stat shown as red, while a high stat is shown as green.

This is beyond my current coding skills, however, and I’m a bit uncertain whether something like this is possible.

I’d appreciate some help going forward!

2

First, just add this to your Stylesheet section:

.up:after {
    content: " ▲";
    color: green;
}
.down:after {
    content: " ▼";
    color: red;
}

You can put other things in the “content” properties if the arrows aren’t what you’re looking for.

Then, for any stats that increase, do this:

<span class="up">$stat</span>

and for any stats that decrease, do this:

<span class="down">$stat</span>

Enjoy! :slight_smile:

P.S. It’s a good idea to use a symbol of some sort, since then colorblind people will be able to see the difference as well.

3

Thank you so much! You are the best.