Need help with a flashing go-to link

Hi. I’m currently trying Twine with Harlowe.

I created a story for testing things out.

Since I’m a new user I can’t attach my story :frowning:

This is my overview:

In my header I have:


=|=
(print: $user's name)
=|||||=
(live:0.5s)[(display: "Wetter")]
=||=
{(live:0.5s) [
Münzen: (print: $user's coins)<br>
Ausdauer: "Keine"
]}
|==|

My “Wetter” passage is as follows:

{(if: $weather is "sunny")[Die Sonne scheint. Das Gras ist grün. Es ist einfach ein herrlicher Tag]
(else-if: $weather is "cloudy")[Es sind ein paar Wolken am Himmel zu sehen. Nichts schlimmes. Hoffentlich bleibt es so.]
(else-if: $weather is "rainy")[Es regnet. Bei dem Wetter kriegen mich keine 10 Pferde raus]
(else-if: $weather is "none")[]
(else:)[Oh das Wetter '$weather' kenne ich noch gar nicht. Das sollte ich mir [[näher anschauen->Wetter untersuchen]] ]}

In my startup passage the weather is set to “rainy”.

And my “Init” passage is:

<!-- Der Start Button startet die Geschichte. Der Rest ist nur zu Demonstrationszwecken -->
[[Start]]

---
---

(link: "Münze einsammeln")[(set: $user's coins to $user's coins + 1)]

[[Lass es regnen -> Regen]]
[[Lass die Sonne scheinen -> Sonne]]
[[Lass die Wolken übers Land ziehen -> Wolken]]

(link: "Lass es dynamisch regnen")[(set: $weather to "rainy") (go-to: "Zeige Wetter")]
(link: "Lass dynamisch die Sonne scheinen")[(set: $weather to "sunny") (go-to: "Zeige Wetter")]
(link: "Lass dynamisch die Wolken übers Land ziehen")[(set: $weather to "cloudy") (go-to: "Zeige Wetter")]

(link: "Ändere das Wetter inline")[(set: $weather to "sunny")]
(link: "Komisches Wetter machen")[(set: $weather to "komisch")]

In the “Init” passage when you click on “Komisches Wetter machen” the correct text is shown in the header with a link to investigate “näher anschauen”.
As soon as you hover the mouse over that link it starts flashing.

I think this is somehow related to the fact that the header is live updating the section every 0.5s

But how can I fix this?
Cause the problem is: if you click it might not get noticed.

There are a number of issues with your example:

1: Generally the (live:) family of macros are the wrong thing to use if you want to update the content of the current page after an end-user interaction. A better method to use is a Named Hook and (rerun:) macro combination.

2: Harlowe’s passage content parser has a bug relating to using Passage Markup like Aligner and Column in the 1st line of a Passage. One way to get around this bug is to make the 1st line a HTML Comment, so that the Passage Markup starts on the 2nd line of the passage.

3: You are placing a space character before the Target Passage Name part of some of your Markup based links.
eg. [[Lass es regnen -> Regen]]

Which due to a limitation of the Twine 2.x application’s “Create missing passages from links” feature can result in the Name of the created Passage containing a space before the first letter of its name.
eg. the Passage Name ends up being " Regen" instead of just "Regen".

Which can cause issues when you try to reference that Passage without including the additional space character.
eg. (goto: "Regen") wont transition to a passage named " Regen"

4: You are using a (link:) plus (goto:) macro combination to create your “Setter” links, where the (link-reveal-goto:) macro is a better choice.

5: The Column based markup feature you used seems to require that the 1st column definition starts with a | character, and the last column definition ends with the same character.

The following TWEE Notation based example is a variation of your original code that includes the above suggestions. For testing purposes I’ve added a startup tagged Passage to show the variable values I used to debug the code.

:: Startup [startup]
(set: $weather to "rainy")
(set: $user to (dm: "name", "Jane", "coins", 10))

:: Story Header [header]
<!-- This comment is used to get around a Harlowe header bug -->
|=
(print: $user's name)
=|||||=
|weather>[(display: "Wetter")]
=||
{
	|stats>[
		Münzen: (print: $user's coins)<br>
		Ausdauer: "Keine"
	]
}

:: Wetter
{
	(if: $weather is "sunny")[Die Sonne scheint. Das Gras ist grün. Es ist einfach ein herrlicher Tag]
	(else-if: $weather is "cloudy")[Es sind ein paar Wolken am Himmel zu sehen. Nichts schlimmes. Hoffentlich bleibt es so.]
	(else-if: $weather is "rainy")[Es regnet. Bei dem Wetter kriegen mich keine 10 Pferde raus]
	(else-if: $weather is "none")[]
	(else:)[Oh das Wetter '$weather' kenne ich noch gar nicht. Das sollte ich mir [[näher anschauen->Wetter untersuchen]]]
}

:: Init
<!-- Der Start Button startet die Geschichte. Der Rest ist nur zu Demonstrationszwecken -->
[[Start]]

---
---

(link: "Münze einsammeln")[{
	(set: $user's coins to it + 1)
	(rerun: ?stats)
}]

[[Lass es regnen->Regen]]
[[Lass die Sonne scheinen->Sonne]]
[[Lass die Wolken übers Land ziehen->Wolken]]

(link-reveal-goto: "Lass es dynamisch regnen", "Zeige Wetter")[(set: $weather to "rainy")]
(link-reveal-goto: "Lass dynamisch die Sonne scheinen", "Zeige Wetter")[(set: $weather to "sunny")]
(link-reveal-goto: "Lass dynamisch die Wolken übers Land ziehen", "Zeige Wetter")[(set: $weather to "cloudy")]

(link: "Ändere das Wetter inline")[{
	(set: $weather to "sunny")
	(rerun: ?weather)
}]
(link: "Komisches Wetter machen")[{
	(set: $weather to "komisch")
	(rerun: ?weather)
}]

note: I’ve added addition code formatting and indentation to help make it clear where I altered your original code. Most of that formatting and indentation can be safely removed.

1 Like

Hey Greyelf,

thank you so much for the explanations. I learned a ton from them!

But maybe you could elaborate on 1 thing for me please:

you wrote that (link-reveal-goto:) is a better option than (link: "")[(go-to: "")] Why is that?
I tried (link-reveal-goto:) and even (link-goto:)

What is the difference (in simple words) cause I’m not sure wether I understand the documentation.

And about the column based markup:
I generated it with the online editor.

The Harlowe Toolbar doesn’t always generate code that “works” as expected or the simplest means to achieve a result.

eg. If we use the Column toolbar option to generated a 3 column “table” and don’t change the the default settings we get.

=|=
Column 1
=|=
Column 2
=|=
Column 3
|==|

And if we displayed the containing Passage it would appear as expected, even if we remove the “blank line” that was added before the 1st =|= of the columns structure.

Now if we change the Passage containing the columns structure into a header tagged Passage and view the result you will see something like the following if we include a “blank line” before the 1st =|=

Column 1     Column 2     Column 3
                          |==|

and like the following if we remove that “blank line”

=|=
Column 1
   Column 2
                         Column 3
                         |==|

After some more trial and error I was able to get the initial column structure to work as expected within a header tagged Passage, by wrapping it within Collapsing whitespace markup.

{
=|=
Column 1
=|=
Column 2
=|=
Column 3
|==|
}

The (link-reveal-goto:) macro was specifically added during one of the updates to allow Harlowe users to create a “Setter” link without the need of using an extra macro call (the (goto:) macro) to achieve a Passage transition.

The (link-goto:) macro exists because that’s what a Markup based link is converted into.
eg. The following Markup based links…

[[Link Text is the Target Passage Name]]
[[Link Text->Target Passage Name]]

…get converted into the following (link-goto:) macro calls…

(link-goto: "Link Text is the Target Passage Name", "Link Text is the Target Passage Name")
(link-goto: "Link Text", "Target Passage Name")
1 Like