Keyboard to activate linkreplace in Sugarcube

I will be very grateful if anyone can help me!
I’m using Twine 2.3.2 Sugarcube 2.28.2 with the javascript code below so that the keyboard button “1” will make the page change, which works perfectly.

(function (){$(document).on('keyup', function (ev){
	if (ev.key === '1'){$('a#1').click();}});}());
<a id="1" data-passage="Next">Next</a>

However, at another time, I included a dialog through linkreplace that when I press “continue” with the mouse it works. But I can’t make it work using the keyboard either, because I can’t put id = “1” in a linkreplace. Can anybody help me?

''Daniel'': Hi!
<<linkreplace 'Continue'>>''Jane': Hi!
<<linkreplace 'Continue'>>''Daniel': How are you?
<</linkreplace>> <</linkreplace>>

I tried using:

if (ev.key === '1'){$('linkreplace#1').click();}});}());

But it did not work =(

2 Likes

There are a few possible solutions to this depending on what your overall goal when using using keyboard capture is.

If you want to be able to press “1” and have it affect all internal links in a SugarCube (2.28) story, you could use something like the following:

(function (){$(document).on('keyup', function (ev){
	if (ev.key === '1'){$('.link-internal').click();}});}());

Since you seem to want to affect the use of the <<linkreplace>> macro, something like the following might help:

(function (){$(document).on('keyup', function (ev){
	if (ev.key === '1'){$('.macro-linkreplace').click();}});}());

If you want to filter where some links are affected by keypress and others aren’t, you can follow what you were working on, but “reverse” it. What you want is a more specific selector to work on in the passage. If you cannot get to the class of <<linkreplace>> easily, you can always add more HTML to more easily target something.

In the passage:

''Daniel'': Hi!
<div id="keypress">
<<linkreplace 'Continue'>>''Jane': Hi!
<<linkreplace 'Continue'>>''Daniel': How are you?
<</linkreplace>> <</linkreplace>>
</div>

<<linkreplace 'Continue'>>''Jane': Hi!
<<linkreplace 'Continue'>>''Daniel': How are you?
<</linkreplace>> <</linkreplace>>

In StoryJavaScript:

(function (){$(document).on('keyup', function (ev){
		if (ev.key === '1')
		{
			$('#keypress .macro-linkreplace').click();
		}
	});
}());

With a compound selector, jQuery can more easily target exactly what you want. Now, in the above example, only elements within the DIV with the id keypress are examined. From those, only those elements with the class macro-linkreplace have a click event triggered on them.

1 Like

Worked perfectly! Thank you so much for your help! It will be very useful!
If anyone else is having trouble with this, this link also has a very useful tutorial: https://www.reddit.com/r/twinegames/comments/5t73zc/keyboard_driven_twining_tutorial

1 Like