Harlowe - How to change type-styles with variable and if statements?

Faustice

Hi there, just started with Harlowe Twine2 but am having some difficulty changing the text-style of passages when a variable reaches a certain value.

I want to make it so that when the player has a certain number of drinks, the passage text is blurry. I tried using both blurry and blurrier, but only blurrier works.
Here is what I have in my passage:

(if: $drinkcount is 5)[(text-style: "blurrier")[
So many options to choose from. Which do you choose? ]](else:)[ So many options to choose from. Which do you choose?]

Since it's an if statement, it's only showing up when $drinkcount is at 5. Is there an easier way to do this?

greyelf

If you want to change the text of all passages viewed while $drinkcount is 5 then you could use a technique similar that in the Basic Harlowe Passage Tag Based Styling thread, that being using a class on the html element to indicate when the players is drunk/sober and using CSS to style the passage text.

1. Change the header tagged passage in the linked thead's example to the following:

{<script>$('html').removeClass('drunk');</script>
(if: $drinkcount is 5)[<script>$('html').addClass('drunk');</script>]}

note: Using a header tagged passage requires the $drinkcount variable to be changed on the passage before the ones you want to see blurry. If you want to be able to see the passage in which the $drinkcount variable is changed as blurry then you will need to use a footer tagged passage instead.

2. Change the CSS in the linked thead's example to the following, it is the same styling produced by the (text-style: "blurrier") macro:

html.drunk tw-passage {
	text-shadow: rgb(0, 0, 0) 0em 0em 0.2em;
	-webkit-user-select: none;
	color: transparent;
}

3. If you don't want to use a header/footer tagged passage then you could use the code from point 1 with an (if:) macro whenever you change the value of $drinkcount like so:

Increasing
(set: $drinkcount to it + 1)
(if: $drinkcount is 5)[<script>$('html').addClass('drunk');</script>]

Decreasing
(set: $drinkcount to it - 1)
(if: $drinkcount < 5)[<script>$('html').removeClass('drunk');</script>]

... you still need the CSS in point 2.