Key Bindings

rev

Hi, I'm using Twine 1.4 - Sugarcube (more specifically Responsive)

I've tried using things from http://twinery.org/forum/discussion/2918/binding-a-key-to-a-link/p1 but it comes up with an error

It says "There is a technical problem with this story (keybinding: $(...).ready is not a function)"

I'm using Chrome, for some reason Microsoft Edge (what I'd been using to debug before since at one point Chrome wouldn't run tests, only uploaded versions) but currently Edge doesn't work when I turn off the ability for people to rewind the story, it tries to restart the story whenever you click a link.

Also I have to have rewind off, because I'm revisiting certain pages quite a few times, so can't have the super long url. It causes an error after a while, plus I don't want people to re-wind things.

I've also changed the text given in the above link to:

$(document).ready(function () {
	$(document).on("keypress", function (event) {
		if (event.which == 38) {
			$("#storySubtitle")
	.find('a[data-passage="Up"]')
	.trigger("click");
		}
	});
});

TheMadExile

rev wrote: »

Hi, I'm using Twine 1.4 - Sugarcube (more specifically Responsive)

You seem to be confusing SugarCube (which is available for both Twine 1 & 2) with the Twine 1 vanilla story formats (e.g. Sugarcane, Responsive, and Jonah). Please don't, they really aren't the same thing.

rev wrote: »

I've tried using things from http://twinery.org/forum/discussion/2918/binding-a-key-to-a-link/p1 but it comes up with an error

It says "There is a technical problem with this story (keybinding: $(...).ready is not a function)"

If you're using Responsive, as you claim, then it sounds like you haven't enabled jQuery (jQuery is not included with the Twine 1 vanilla story formats by default). You may do so via the StorySettings special passage (Story menu > Special Passages > StorySettings).

rev

Hi, yes sugarcane, sorry. I was rather sleepy and had been reading too many things of people using sugarcube.

Ok, I enabled JQuery, but I could only do so by disabling Modernizer, is that supposed to happen? Otherwise it does the "noDefaultCSS" break.

Though thanks the error is not when I run the story now, but the keybindings still don't work.

TheMadExile

rev wrote: »

Ok, I enabled JQuery, but I could only do so by disabling Modernizer, is that supposed to happen? Otherwise it does the "noDefaultCSS" break.

Hmm. I'm unsure what's going on there. Another bug in the vanilla formats, I suppose.

rev wrote: »

Though thanks the error is not when I run the story now, but the keybindings still don't work.

You have several additional issues you need to resolve. A possible issue with your link and two code issues, an issue with the event you're listening for and another issue with how the vanilla story formats register events.

Possible Link Issue
Unlike SugarCube, the vanilla story formats do not generate normalized links for all link types. Unless you're using HTML markup to create your link, it probably doesn't have a "data-passage" attribute, so your secondary selector won't match. The solution is to only use HTML markup for the links you want to trigger via JavaScript. For example:

→ Instead of something like this:
[[Up]]

→ Do something like this:
<a data-passage="Up">Up</a>

Code Issue: Event
You can't use "keypress" to identify all keys—in particular, the arrow keys will thwart you. So, for the arrow keys, change the event you're listening for to "keydown".

Code Issue: Event Registration
Even with the above two issues resolved, triggering a click on the link via jQuery won't work due to the way the vanilla story formats register click events.

To resolve the final two issues, you could change your code to something like the following: (I dropped the superfluous ready() wrapper)

$(document).on("keydown", function (event) {
	if (event.which === 38) {
		document
			.querySelector('#storySubtitle a[data-passage="Up"]')
			.dispatchEvent(new MouseEvent("click"))
	}
});

That won't work in ancient browsers (e.g. IE≤8), but I don't really consider that an issue—YMMV.

rev

Ok I'm using:

<a data-passage="Up" data-setter="$eventCount = $eventCount + 1">Forwards</a>

with

$(document).on("keydown", function (event) {
	if (event.which === 38) {
		document
			.querySelector('#storySubtitle a[data-passage="Up"]')
			.dispatchEvent(new MouseEvent("click"))
	}
});

And it's saying Script Error when I press a key. Do you think my use of Sugarcane instead of SugarCube could be the problem?

TheMadExile

Just "Script Error"? Also, in the opening post you said that you were using Responsive, now you say Sugarcane, so which is it (not that it should matter, but I want to be clear)?

As for SugarCube vs. the vanilla story formats. Using the vanilla formats hasn't been helping you here, no, but that's not the cause of your latest issue.

In what passage are you putting your link? I'd assumed, based on the selector you provided in the opening post, that you were putting it in the StorySubtitle special passage. I'm asking, because I'm guessing the error you received was because querySelector() isn't finding the link, which makes the chained call to dispatchEvent() fail. That's just a guess though, "Script Error" isn't much to go on.

rev

It's responsive, but I know it's basically just sugarcane for more devices.

The exact thing is
"Sorry to interrupt, but this story's code has got itself in a mess. (Script error) ou (sic.) may be able to continue playing, but some parts will not work properly. "

I'm putting it in an ordinary passage called Directions, I was modifying some code I found previously, yet I don't know entirely about the code.

Thanks for saying that thing is a special passage, I removed that part of the code and now it works, hurrah!

Thanks for your help