0 votes
by (1.4k points)
Hello all!

I use and pretty much only want to use SugarCube 2.21, but I am curious about any possibilities. You can make things that are clickable, even things that respond to mouse hover: are there ways to make things that respond to pressing a key? Like going to a passage or playing a sound when you press a certain key, combination of keys, or sequence of keys.

Thank you all!

2 Answers

+1 vote
by (159k points)

You can use Javascript like the following within your Story Javascript area to monitor for all keyup events that occur while the story is running.

(function () {
	$(document).on('keyup', function (ev) {
		/* the ev variable contains a keyup event object.
		 * ev.key contains the key value of the key that was released.
		 */

		/* the following shows an alert when the 'a' is released. */
		if (ev.key === 'a') {
			UI.alert("the 'a' key was released.");
		}
	});
}());

 

What you do within that monitoring code is up to you, the following are some examples:

/* the following changes to the Next passage when the 'b' is released. */
if (ev.key === 'b') {
	Engine.play("Next");
}
		
/* the following clicks on a link with the ID of continue when the 'c' is released. */
if (ev.key === 'c') {
	$('a#continue').click();
}

... the above click example assumes that your Passage contains an anchor element with an ID attribute and a  HTML attributes like so.

<a id="continue" data-passage="Next">Continue</a>

 

by (1.4k points)
Thank you Greyelf! It will be cool to see what I can do with this.
by (1.4k points)
Oh by the way, I just discovered the <<textbox>> macro; though I only know how to set variables, that is quite a bit more than I was expecting "right out of the box" so to speak.
by (1.1k points)

How might we implement the following? (Or should I make a new question?

if (ev.key === 'w') {
	<<set $positionY += 1>>
}

if (ev.key === 's') {
	<<set $positionY -= 1>>
}
if (ev.key === 'a') {
	<<set $positionX -= 1>>
}
if (ev.key === 'd') {
	<<set $positionX += 1>>
}

 

by (1.1k points)
Nevermind. I did it. Only took two seconds.
+1 vote
by (1.1k points)
edited by

I was able to take these 

<a id="north" data-passage="North">North</a>
<a id="east" data-passage="East">East</a>
<a id="south" data-passage="South">South</a>
<a id="west" data-passage="West">West</a>

and by simply replacing the 

[[North]]
[[East]]
[[South]]
[[West]]

links that were found in the Moving Through a Dungeon example combined with a slight modification of the JavaScript snippet below that GreyElf showed

(function () {
	$(document).on('keyup', function (ev) {
		/* the ev variable contains a keyup event object.
		 * ev.key contains the key value of the key that was released.
		 */

		/* the following moves you around. */
		    
			if (ev.key === 'w') {
            $('a#north').click();
        }
			else if (ev.key === 's') {
            $('a#south').click();
        }
			else if (ev.key === 'd') {
            $('a#east').click();
        }
			else if (ev.key === 'a') {
            $('a#west').click();
        }
	});
}());

I was able to make that dungeon crawl happen with just keystrokes.  The whole thing only took a minute to set up.  Of course... that's because someone did all the work before. Thank you to whomever that was.

But I found this to be a cool feature.

Hope that helps!

by (1.4k points)
edited by

I am sure this can be used to trigger macros like <<link>> but I am not sure how from the examples. I've used a link to go to another passage with good success, but nothing in the same passage so far.

In this format I do not know how to add an id to the <a>:

<<link "a">><<goto "Untitled Passage">><</link>>

And in this format I do not know how to add <<goto>> or other content:

<a class="link-internal macro-link" id="key" tabindex="0">a</a>

 

...