Hey!
I am trying to make a passage, where you would need a spacebar to continue. There would be a link “press spacebar to continue”, and then the rest of the passage text would be revealed below. I know I can do this with mouse click like this:
(link:"click here to continue")[=
but I would love that there would be ability to define the link to be only activated with spacebar. I have been trying to mess with Mousetrap and hooks and I have got the normal links working with that, but if I use those links, the rest of the passage is always shown already.
So how can I implement this space bar to this “reveal reminder of the passage”?
This helps me to get to another passage with n-key but how can I make it to show the rest of passage?
<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>
<script>
var link = $('tw-hook[name="next"] tw-link');
if (link.length > 0) {
link.click();
}
(This spacebar trick would be used multiple times per passage. And I think i need the spacebar also for other purposes so making the spacebar work as a mouseclick probably isn’t enough)
This does not answer your question, but I’m asking another one out of curiosity. What is your specific reason for wanting to implement the spacebar?
In my experience both as a UI designer and a user, it’s usually preferred that the user keeps their hand in one place: either on the mouse or on the keyboard. The less back and forth between the two, the better.
I imagine you might possibly be trying to recreate an old school feel to the Twine system, and that alone is a valid reason, but to me that would sacrifice the user experience in terms of ease.
Not throwing shade on you here, just genuinely interested.
Thanks for your reply Pete! You have a good point there! The original script is written with the “spacebar to continue” so I guess I am a bit stuck there. We can probably do it as “click here to continue” which is in the end much easier code-wise.
But there is also one other thing: The system we are building is an performance where a random player in the theatre (or gallery) can control an actor. So in the end I don’t know if there is a need for mouse though, other than the clicking. But currently I can definitely continue with the clicking.
note: Harlowe has been deliberately designed by its Developer to restrict an Authors ability to use JavaScript to enhance the functionality of their project.
You didn’t include an example of how you are monitoring for the specific keypress, and I personally don’t have experience with Mousetrap, so for the following technique I will be assuming you have access to features like the keypress() and the off( "keypress") functions of jQuery but the theory should work similar with other libraries.
If I understand correctly you want to use the SPACE key multiple times within the same Passage, to either cause new content to be revealed or to cause a Passage Transition.
The simplest way to do that is to:
Attach a keypress monitor to the document.
If the SPACE key was pressed.
a. Detach the current keypress monitor.
b. Reveal the new content or do the Passage Transition.
c. Attach a new keypress monitor to the document if still in the same Passage and there is more content to be reveal.
Wait for the SPACE key to be pressed.
By detaching the keypress monitor after the SPACE key has been pressed you can have each of the monitors you attach do a specific action.
eg. Reveal a specific section of content, simulate the selection of a specific link, etc…
How you code the above depends on which keyboard monitoring method you are using, and what specifically you want each of the SPACE key presses to do.
Berfore I went for the Mousetrap I got the “clicking” working with spacebar by doing this:
In the Story javascript (Arrows are playing sounds)
window.addEventListener("keydown", function(e) {
if(["Space","ArrowUp","ArrowDown","ArrowLeft","ArrowRight"].indexOf(e.code) > -1) {
e.preventDefault();
}
}, false);
(function () {
$(document).on('keydown', function (ev) {
if (ev.key === 'ArrowLeft') {
A.track('vasen').loop(true).play();
}
if (ev.key === 'ArrowRight') {
A.track('oikea').loop(true).play();
}
if (ev.key === 'ArrowUp') {
A.track('eteen').loop(true).play().volume(0.3);
}
if (ev.key === 'ArrowDown') {
A.track('taakse').loop(true).play().volume(0.6);
}
});
$(document).on('keyup', function (ev) {
if (ev.key === 'ArrowLeft') {
A.track('vasen').loop(true).stop();
}
if (ev.key === 'ArrowRight') {
A.track('oikea').loop(true).stop();
}
if (ev.key === 'ArrowUp') {
A.track('eteen').loop(true).stop();
}
if (ev.key === 'ArrowDown') {
A.track('taakse').loop(true).stop();
}
});
}());
I have this code in the Passage
<script>
(function () {
$(document).on('keyup', function (ev) {
if (ev.key === ' ') {
$('a').click();
}
});
}());
</script>
<a id=""></a>
Press space to continue
(click:?page)[=
So it works with the clicking but I still havent got the specific links binded with the spacebar- only the clicking. I know that somehow it must be possible to go to another passage with the specific keys but I don’t know if it is possible to reveal the reminder of the passage with it! And in the same passage this needs to be done multiple times so it doesn’t help to reveal another passage within a passage with (display:).
I guess I could try detaching the clicking somehow and then attach it again while using (click:?page)[= …
I have been banging my head to the wall for hours for this so any help is really welcome!
The (click:) macro (like the (link:) macro) is single use only, once its target has been selected the macro stops monitoring for click events for that target.
And unfortunately there is no (click:) macro equivalent of the (link-repeat:) macro, so if you want to be able to click on the page multiple times in a row then you will need to reapply the (click:) macro after each page selection.
eg. The following uses Hidden Hooks to hide sections of the Passage, which are ‘revealed’ using a related (show:) macro call each time the page is clicked.
The quick brown fox jumps over the lazy dog.\
(click: ?page)[(show: ?reveal1)]
|reveal1)[{
1: The quick brown fox jumps over the lazy dog.
(click: ?page)[(show: ?reveal2)]
}]
|reveal2)[{
2: The quick brown fox jumps over the lazy dog.
(click: ?page)[(show: ?reveal3)]
}]
|reveal3)[{
3: The quick brown fox jumps over the lazy dog.
}]