(click-replace:) links flickering due to (live:) timer

Question

So I've got a story which has some (click-replace:) links, like this:

Numberless(click-replace: "Numberless")[Numberless grains(click-replace: "grains")[grains of sand(click-replace: "sand")[sand,
<div style="text-indent: 10em;">[[tumbling->Prologue 4]]</div>]]]

And I've also got a timer running in my story's header passage, which updates every second:

{

(live: 1s)[
	(if: $timeMoving is true) 
	[
	  <!-- Calculate stuff -->
	  code...
	  <!-- are we dead yet? -->
	  code...
	  <!-- check to see if energy hotspot moves -->
	  more code...
	  <!-- death stuff -->
	  even more code...
	  <!-- print header line: -->
	  code that prints text on the top of the screen...
	]
	  
]

}
-----------------------------------

My problem is, every second my click-replace links flash the same color as the main passage text, like this:

Click here for a gif of the problem.

(I changed the text color to purple to find out where the flash color was coming from; turns out it's just the same color as tw-passage.color.)

One strange thing is that this only happens when playing a compiled html version of the game, not in the Twine editor when previewing the story.

Does anyone have any suggestions for how to stop these links from flashing, or a solution instead of using click-replace which would not flash? My only options right now are to either change the passage and link colors to be more similar (which defeats the UI purpose of having links that stand out), or change the frequency of live: to something less distracting - but the whole point of this game is that it has a ticking clock at the top of the screen, so that would be terrible.

Any help appreciated.

Answer 1

As a generaly rule you should only use the (click:) related macros if it is not possible to achieve the same result using one of the (link:) replated macros, and you are experencing the reason why.

The (click:) related macros need to wait until all of the current Passage's content has been converted to HTML and added to the current page before each instant of those macros can scan the contents of the whole page to locate all occurrences of their targets, which are then converted into links.

Any code that later alters the content of the current page after the current Passage has finished being displayed (like the code of your (live:) macro is doing) will cause all that scanning & link creation to be re-done, and this is what is causing the visual effect you are seeing.

The (link:) related macros don't have this issue because they create their links at the time the macro is encounted duing the Passage processing phase.

The following example replaces your (click:) related macros with their (link:) related equivalents.

(link-replace: "Numberless")[Numberless (link-replace: "grains")[grains of (link-replace: "sand")[sand,
<div style="text-indent: 10em;">[[tumbling->Prologue 4]]</div>]]]

 

Comments

This works perfectly within Twine itself. Once I publish it to an html file and play it in Chrome and Firefox it's also fine, but on IE I run into a few issues:

On Internet Explorer I have to click once to make the hypertext go away, and then click again to make the replacement text come in. (See this gif.) Is there a fix for this? I know IE isn't really supported any more (by anyone?) but it would still be nice to fix this particular issue.