0 votes
by (3.5k points)
retagged by

I would like to make it so that if you click on a choice/link called ''make background red'', the background for the rest of the story would be red, if "make background yellow", then yellow background and so on. The same mechanism I would use for "text colour" and other CSS parametres.
How should I approach this? I tried using the enchant macro, but it only seems to affect the next passage and afterwards the color is reset to the initial one.

Any help will be greatly appreciated! ))

1 Answer

0 votes
by (159k points)

There are two basic ways to can do this:

1. The Harlowe way.

You can extend the method used within the Variable Story Styling cookbook recipe for Harlowe to use a header tagged special passage automatically apply the variable based styling to later passages.

a. Initialise the $storyStyle variable within your project's startup tagged special passage.

(set: $storyStyle to "")

b. Create a header tagged special passage, name this passage whatever you like.

This passage uses an (if:) macro to determine if the $storyStyle variable contains any styling, and uses a (enchant: ?page) macro call to apply it if it does.

(if: $storyStyle is not "")[(enchant: ?page, $storyStyle)]

c. Update the value of $storyStyle as required.

note: you will also need to execute the (enchant: ?page) manually to update the current passage's styling.

(link-repeat: "make background red")[{
	(set: $storyStyle to (background: red))
	(enchant: ?page, $storyStyle)
}]
(link-repeat: "make background yellow")[{
	(set: $storyStyle to (background: yellow))
	(enchant: ?page, $storyStyle)
}]
(link-repeat: "reset background")[{
	(set: $storyStyle to "")
	(enchant: ?page, (background: black))
}]


2. The Web-Developer way.

You can use a <script> HTML element to execute JavaScript wihich adds/removes known CSS classes to/from the html element, and then use CSS style rules based on those CSS classes to style the current page.

a. Add CSS rules like the following to your project's Story Stylesheet area.

The first rule is associated with a red CSS class, the second with a yellow CSS class.

html.red tw-story {
	background-color: red;
}
html.yellow tw-story {
	background-color: yellow;
}

b. Apply the 'red' or 'yellow' CSS class names as required.

The following example uses the jQuery .addClass() function to apply the relevant CSS classname to the html element, it also uses the .removeClass() function to get rid of any of our previously assigned CSS classnames.

(link-repeat: "make background red")[{
	<script>$('html').removeClass("red yellow").addClass('red');</script>
}]
(link-repeat: "make background yellow")[{
	<script>$('html').removeClass("red yellow").addClass('yellow');</script>
}]
(link-repeat: "reset background")[{
	<script>$('html').removeClass("red yellow");</script>
}]


note: Ideally you would use more meaningful CSS classnames in your own project, generally the name of a CSS class is based on its purpose and not its effect.

eg. If the 'red' & 'yellow' colour stylings are being used to represent the planet the player is on, and 'red' represents Mars, then you might change the first CSS selector to be

html.mars tw-story {
	background-color: red;
}

... and change the related link (and jQuery code) to reference the mars CSS class instead.

(link-repeat: "Land on Mars")[{
	<script>$('html').removeClass("mars yellow").addClass('mars');</script>
}]

 

...