Sidebar widget malfunctioning (Sugarcube)

Authoring Twine
1

Hi, I’m creating a glossary system using sugarcube that’s embedded in the UI sidebar: the player clicks on links in the main story and a definition/info pops up in the sidebar (that all works perfectly). When the player clicks on a link, that entry becomes “clickable” in a scrolling glossary div in the sidebar, and here’s where it’s not working. I use jquery to get the name of the sidebar-glossary link being clicked, which works, and pass it into a widget that’s based on the same code I use for the main story link definitions.

Here is the widget:

<<widget "gDef">>
	<<set _word = $args.raw>>
	<<set _output to "">>
	<<for $j to 0; $j lt $terms.length; $j++>>
		<<if _word is $terms[$j].word>>
			<<set _output = "<b>" + $terms[$j].word + ":</b> " + $terms[$j].definition>>
			<<break>>
		<</if>>
	<</for>>
	<<print _output>>
<</widget>>

From testing I know that for some reason, the <<if _word is $terms[$j].word>> is not being evaluated as true even though in logs I see that _word and $terms[$j].word are the exact same. I’ve torn my hair out and am appealing to smarter people. Thanks for reading!

2

Without examples of things like: the content of the $terms variable, and the link which you’re using to call the <<dDef>> macro, it is hard to debug your code or determine exactly what is contained within the _word variable.

I noticed that you’re not using the <string>.trim() JavaScript function to remove any unwanted leading or trailing space characters from the contents of _word before you compare it to the relevant $terms value. Such white-space may not be easy to see in your log output.
eg.

<<if _word.trim() is $terms[$j].word>>
3

Hey @Greyelf, thanks for the time and sorry about not including enough info. $terms is an array of about 20 Term objects described below:

class Term {
  constructor(word, definition) {
    this.word = word;
    this.definition = definition;
    this.seen = false;
    this.sparkle = false;
  }
}

window.Term = Term;

So, for example, _Ciborium.word would return “Ciborium” for the term _Ciborium.

The macro is being called in another macro (the main story define widget, which also replaces the glossary to restyle the newly found Term). The link where it’s being called is below:

@@.geoi;<<link $terms[$i].word>><<replace "#definitions">><<gDef $gWord>><</replace>><</link>>@@

Thanks again and if I’m missing anything else, please just lmk.

P.S. I tried calling .trim() in the actual comparison, but it didn’t help; I use that same in another macro and it works as intended. I’ve also checked the logs for whitespace, and unless it got trimmed behind the scenes (which it shouldn’t have), it appears the Terms being compared are ostensibly the same sequences of characters.

4

The problem is that you’re using <<set _word = $args.raw>>. Since you call the widget using <<gDef $gWord>>, _word is getting set to the string “$gWord”, instead of the value of $gWord.

Change that one line to <<set _word = $args[0]>> and it should work fine.

You would only want to use $args.raw if you were calling the widget like this:

<<gDef This whole sentence would be passed in via $args.raw.>>

Hope that helps clear that up! :slight_smile:

5

@HiEv Oh my god that fixed it, thank you so much. I actually had tried that before fixing another bug and hadn’t (and probably wouldn’t have) considered trying it again.

Problem solved, tyvm to @HiEv and @Greyelf!