0 votes
by (390 points)
Just a simple question, and the title about says it all. Is there anyway to use javascript or Mousetrap (https://craig.is/killing/mice) to allow the player to use keyboard inputs as hotkeys to activate a link?

For example, if you want to go to the next passage, you just hit "Shift+N" or something similar on your keyboard to activate the passage link and move on. I know it's possible using JS in SugarCube, but is there any way to do it using Harlowe? (I'm not super fluent in JS, but willing to learn and could just use a little push in the right direction, thanks for understanding).

Thanks!

1 Answer

+1 vote
by (159k points)
edited by
 
Best answer

There are four things you need to do to use the Mousetrap library in Harlowe.

1. Include the Mousetrap library source within your Story Javascript area.

This is similar to SugarCube (eg. open the relevant 'download it now' link on that web-page and cut-n-paste the code), except that Harlowe may generate a "See almond README: incorrect module build, no module name" error message. One method you use (hack) your way around this issue is by wrapping the Mousetrap library code within a try ... catch () block.

try {
	/* the source code of the Mousetrap library. */
	....

} catch (ex) {}

2. Implement a means to uniquely identify the link the bound key will effect,

There are a number of ways you can do this, one of them is to wrap the link within a named hook which will allow you use a selector starting with tw-hook[name="name of hook"] to target that link.

|next>[ [[Use the N key to visit the Next passage.|Next]]]

warning: Harlowe generates different HTML structures depending on which technique you used to create your link, the structures are either based on the tw-link element or based on the enchantment-link CSS classed enchantment. You will need to know which you used and take that into consideration when later defining your element selector.

3. Use jQuery to simulate a click event on the targeted link's HTML structure.

The above named hook based example generates a tw-link based HTML structure like the following.

<tw-hook name="next">
	<tw-expression type="macro" name="link-goto">
		<tw-link tabindex="0" passage-name="Next" data-raw="">Use the N key to visit the Next passage.</tw-link>
	</tw-expression>
</tw-hook>

.. so the following selector could be used with the jQuery <element>.click() function to programmatically cause that link to be 'clicked'

var link = $('tw-hook[name="next"] tw-link');
if (link.length > 0) {
	link.click();
}

4. Define the Mousetrap handler within the Story Javascript area.

The following code causes any markup based link wrapped within a 'next' named hook to be selected is the lower case 'n' key is pressed.

Mousetrap.bind('n', function() {
	var link = $('tw-hook[name="next"] tw-link');
	if (link) {
		link.click();
	}
});

WARNINGS:
1. Mousetrap's key bindings are CASE-SENSITIVE, so 'n' and 'N' are not the same key.
2. Once bound, a key stays bound for the entire story unless something else unbinds it or you unbind it yourself.

EDIT: The second code example in point 3 used the wrong technique for checking if jQuery found the required element, this has been corrected.

by (390 points)
My hero once again! I'll get right on this and see how I can implement it into my story. Thank you!

EDIT: Also, thank you for taking the time to explain and show the steps of how you got to the conclusion. It helps me learn so much more.
by (159k points)
Your welcome.

note: I fixed the element checking condition in the second examine of point 3.
...