#looking macro

I made some quick and dirty macros just now if you're interested, so you don't have to do the somewhat ugly way I do it! Here's the itch.io link. Instructs on how to implement are on the page! Password is "looking". You can demo it + download it to see how it works!

The macros I made will probably be more than adequate for most of your needs, though it is limited to having 10 of each of the three different ways you can look at something in one passage (opens a new window of text, reveals some lines of text, or reveals new lines of text with the include macro).

Underneath, I'll go over how I manually do it in Sugarcube—and it's going to be horrible to look at if you try to do it without syntax highlighting in your project. For the sake of this guide, I'll be highlighting it!

Separate textbox

I am going to show you two ways to do this—one, the way I typically do it; two, with Cycy's liveupdate macro (thanks to my friend, Gwen for teaching me this revolutionary way!!!). You'll need:

StoryFormat - SugarCube (need for both ways)

Chapel's Popover macro (need for both ways)

Cycy's liveupdate macro (if you're doing it With Cycy)

With Cycy - easier to understand, but the text replacement (when you click on the link and it gets replaced with new text to show you've already seen it) does not happen smoothly/with a transition.

Without Cycy - harder to understand, but can replace the link with a smooth transition so the text does not instantaneously and abruptly change.

Each guide is going to rehash pretty much the same information as the other way because I'll just assume you haven't read the other way.

With Cycy

Here is an example:

1. LIVEBLOCK. A custom macro from Cycy. Whatever is inside the ((liveblock)) will be updated when ((update)) is called inside of it. We need this because, once a passage is rendered, even if a variable is changed through ((click)) or ((link)), the text will not change to reflect these changes. What Cycy's liveblock macro offers is allowing you to live update the text! All the code we'll be writing will be contained inside liveblock.

2. VARIABLE. You'll need a variable to remember that you've looked at this specific place before, and you're going to have a make a variable everytime you have a looking place like this one. I'm guessing you can use temporary variables (which only apply to one passage) instead if you don't want to clutter your StoryInit with global variables (which apply to the entire IF).

The reason why I make my looking variables global variables is because I want to be able to remember that a player has looked at something to update the codex and/or remember that the player has looked at something, in case we want to check that they've done that in the future. It's also because, if a player goes and looks at their stat page, it may refresh the variable and let players look at the same thing again.

3. IF STATEMENT. Again, a simple if statement to test if a player has seen something won't work on its own, as the text does not update live to reflect the changes—even if you use ((link)) that has a ((set)). However, with Cycy's live update macro, this is actually very relevant. If the player hasn't seen the link, show the link; if the player has, show the text that will replace the link.

4. LOOK SPAN. I want the link for all my "looking" links to be distinct from actual choices, so I wrap (span id="look")...(/span) around the entire ((link)) that is in #5. This span is going to style the link to be a bold, gold color.

Here is how I style my links in my Story Stylesheet (here's a link to the Pastebin):

5. INSIDE THE LINK. Of course, make the ((link)) which the player will click on to look at something. Set the variable that tests if they've looked at it to true, and then call ((update)) to update ((liveblock))'s contents. Next, we will be using Chapel's Popover macro—what this does is "pop over" in a new dialog everything that is inside ((popover)...((/popover)). I specified "noclick" so the players click on an X instead of the screen to exit out. I use the ((include)) macro inside, which is especially useful if the text you're going to be "popping over" is quite long (which my character descriptions are).

Here, I put my closing ((/link)) and then also my closing (/span) for the look span.

6. ELSE — SPAN CLASS LOOKED. Just the same way where I use a (span) to style the link, I use a (span) to style the text that replaced the link. I classed the link with "looked" so that the text that replaced the link is gold, but not bold, and styles normal text instead of links.

Here's how I did it in the Story Stylesheet (also included in the Pastebin already):

Everything that is in ((else)) will be the text that replaces the link to show you've already looked at something. Sometimes I don't want the entire thing to be gold text, just an indicator of where it has changed; so I might only put the (span class="looked") around a part of the text and make the rest of the text normal.

7. ENDING. Close the if statement and close the liveblock.

Without Cycy

Here is an example, ripped straight out of the IF:

The reason I'm showing this way is because if you want to just reveal new lines of text instead of opening up a new window of text, the code for the way I teach you how to do that is basically the same, except you don't use ((popover)).

Also, the text replacement is smoother because the ((replace)) macro we'll be using has the option to use a transition/fade by simply adding "t8n". Cycy's liveupdate macro, when you call ((update)), instantaneously changes the text, which is abrupt.

1. THE IF STATEMENT AND VARIABLE. The if statement tests a variable. If it's true, it will show the link; if it's false, it does not.

This usually does not come into play. When a variable is changed with a link macro, the text does not live-update once the passage is fully rendered. Meaning, even if you click on the link changing $salvatore_looked[0] to true, it won't change the passage. What you'll want instead is the ((replace)) macro that is executed when you click on the link.

So why did I include an if statement anyway? If a player looks into their stat page, which counts as another passage, when they look back at what they were reading, they're able to look at the link again. If you don't care about this, you don't need the if statement—but I'll include it anyway.

2. THE LOOK1 SPAN. The look1 span contains the entire thing, because whatever is inside the span will be replaced when the replace macro is executed. You can call this span anything of course, just make sure the replace macro replaces the specified ID.

3. THE LOOK SPAN. This is actually entirely different from the previous span. The previous span is used by the replace macro to replace everything that it contains; this look span styles the link. If you want the link of your look interaction to look distinct from your other links, you'll want to include a span specifically for this.

Here's a link to the Pastebin of how I style my links in the Story Stylesheet:

4. INSIDE THE LINK, PART 1. Set the variable of the looking variable to true and use the popover macro from Chapel to popover the new screen. I use "noclick" because my popover dialog can be quite long, and I don't want them to accidentally click out of the popover while scrolling. Usually, you click anywhere on the screen to exit; with the "noclick", there is an X button instead.

The popover macro "pops over" in a new dialog everything that is inside it before its closing tag. I use the include macro to include a different passage (optional, but recommended if your popover is going to be long).

5. INSIDE THE LINK, PART 2. Now this is the replace macro. The replace macro I use here replaces everything inside the look1 span with whatever is inside the replace macro's contents. Meaning, what will your link look like after you click on it? The link said "Salvatore" previously, but after clicking on it, I made it so that it still only says "Salvatore" right after.

I used a span class called "looked" to style the text to show that you've clicked on the link before. I did this so that people know where the text has changed. Here's how I did it in the Story Stylesheet (also included in the Pastebin already):

Same color, no font weight, and styles normal text instead of links.

6. ELSE. Of course, if the player has already looked at the link before, you will want to do the same thing you did in Part 5, albeit without the replace. Again, this is only relevant when players can click on a different passage and return to that passage where it can be looked at (e.g. looking at a stat page and then returning).

7. CLOSING TAGS. Make sure to keep organized with your closing tags, there are many here. The looked span should end before the link ends; the look span ends after the link ends; the else statement comes next, with its own span that ends after the last if closing tag. This all sounds confusing on text, so go ahead and just look at the screenshot above.

New sentences in a passage

There is almost no difference if you don't use Cycy's way, except that I don't use the popover macro. You don't have to use the include macro here though, especially if the text that it reveals is minimal. In the case of revealing entire paragraphs or choices, though, I recommend using include.

If you do use with Cycy, I highly recommend looking at the guide "without Cycy". Again, the code is the same, except there is no ((popover))—just ((replace)) with ((include)) inside.

Closing Thoughts

2. If you're using the "observe" macro, replace the widget passage with the observe widget with this code instead. For glance. For reveal.

3. We should get rid of the default color I initially applied in .look a , .look a:hover , and .looked by commenting the code out (that is, the code will be a comment instead of actual code, so it does not apply to the text).

4. Next, we will want to make a class for every color you want to give the player an option to color their links as. For example, if you want to make a red color, we will make a class for the red color. Remember, a class is a way you format a group of "stuff" the same way.

To do this, we will need to make classes that are .look.red a, .look.red a:hover, and .looked.red. These are SEPARATE from .look a, .look a:hover, and .looked. Inside these classes, you will want to add "color: red" or in place of red, you can also add a hexcode instead.

Make sure it is in the format of .look.(color) a, .look.(color) a:hover, and .looked.(color).

Repeat the step for every color you want to add. Again, these are new classes each time. So you will make a .look.green a and a .look.blue a separate from .look.red a (and of course, from .look a). This goes for .look a:hover and .looked as well.

5. After that, go into each of the looking macros (any of the ones you added like observe, glance and reveal) and scroll down to the bottom of the widget passage. You will find an empty ((timed 0s)). Here, we will make if statements.

Let's say I made classes red, green and blue, because I want to give the option to players to make the links red, green or blue. If the variable $link_color is red, we will call an ((addclass)) that adds the "red" class that will be formatting the links. If the $link_color is blue instead, add the "blue" class. It will look like this:

((addclass ".look" "[the name of the color class]"))

You will also want to do the same thing in the new widget passage "looked" that we just made earlier. It's practically the same code, but make ".look" into ".looked":

((adclass ".looked" "[the name of the color class]"))

6. After all of that is done, you can ask the player what color they want and change it merely with ((set $link_color to "red")) or ((set $link_color to "blue")) and so forth. It will automatically color the links.

Although, keep in mind, if the passage is already rendered, it likely won't live update the colors of the link. It will just color the links of all the looking links after you ask them and the variable is set.