How link the keybord button to the game button?

Authoring Twine
1

Can yo tell me how link the keybord button to the game button? To conditionally “Space”, press on <<button>><</button>> or <button></button>.
I tried to do this, and i have the space bar pressed only after clicking on the <<button>> or <button>.
Each mouse click works correctly, doing the right action. The space bar does not work without clicking the mouse, as if does not work, and when you click on the button with the mouse 1 time it starts working correctly.
How to make the space bar work immediately without selecting an element with a mouse click?
I did it with macro <<button>> and when i fail, i try do it in pure JS:

<div class="passageText">
    <span id="passageText"><<=$texts[$currentIndex]>></span>
    <div class="buttonStoryText">
        <button id="buttonStoryText">Next</button>
    </div>
</div>
<<done>>
    <<script>>
let buttonStoryText = document.getElementById('buttonStoryText');
let currentIndex = 0;
const sv = State.variables;
let texts = [
       "Первый текстовый блок. Это начало вашей истории.",
    "Второй текстовый блок. Сюжет развивается.",
    "Третий текстовый блок. Сюжет продолжается.",
    "Четвертый текстовый блок. Приближение к развязке.",
    "Последний текстовый блок. Конец вашей истории."
];

buttonStoryText.addEventListener('keydown', function(e) {
                sv.currentIndex++;
    if (e.keyCode === 32 && document.activeElement === buttonStoryText) {
        if (sv.currentIndex < texts.length - 1) {

            replaceElementContent('passageText', texts[sv.currentIndex]);
        }
    }
});

buttonStoryText.addEventListener('click', function(e) {
    sv.currentIndex++;

    if (currentIndex < texts.length) {
        replaceElementContent('passageText', texts[sv.currentIndex]);
    } else {
        sv.currentIndex = texts.length - 1;
    }
});

function replaceElementContent(elementId, newContent) {
    var element = document.getElementById(elementId);
    if (element) {
        element.innerHTML = newContent;
    }
}
    <</script>> 
<</done>>

PS: one more question: When we clicked on the button and the index of the array with the text changed to any other than 0, showing our text, we make a transition along the segment. There and back. This text remains in the output field, which is good. When you save the game and load it, this text is correctly displayed in the block (for example, with the index 2 of array). But this only works when you made a pass to the passage and back before saving. If you save it immediately after clicking on the output button, but without leaving the passage, the text will not be saved. Question: “How do I make sure that the text is saved at any time?”

2

Hi there!

I’ve done the following for a previous project of mine:

<<link "SPACE" "Explanation">>
	<<run $(document).off('keyup.mystory')>>
<</link>>

$(document).on('keyup.mystory', function (ev) {
        if (ev.which == 32) {
              $(document).off('keyup.mystory');
              Engine.play("Explanation");
        }
});

Note: links and buttons are interchangeable macros.

$(document).on (or $(document).one) is how you can create Event Listeners in SugarCube :wink:

3

Yes, your code is working. I read about .on/.off and its meaning that space not will active anymore while user don’t go to new passage and then space will work again. But i need by many clicks on one button show to user each string text of each index of array. I bad coding and dont know how do it correctly.

4

If anyone want to know answer to my questing from PS, i was found right solution to this issue from “HiEv” message:

Actually, there’s a similar trick using [Config.saves.onSave](http://www.motoslave.net/sugarcube/2/docs/#config-api-property-saves-onsave) that you can use to make the “Save” button save the current values of variables, so you could use that for the variable that keeps track of your music. If your variable for your music is $CurrentMusic then you code would look something like this:

Config.saves.onSave = function (save) {
	save.state.history[save.state.index].variables.CurrentMusic = State.variables.CurrentMusic;
};
5

Keyboard handlers for both Enter/Return (ev.which === 13) and Spacebar (ev.which === 32) are included by default in SugarCube. What you’re doing there is pointless.

EDIT: Your correct.

6

Don’t you need to have the element selected (like TAB to select the element rather than the page → active state) before ENTER/SPACE works though?

The code I had made it so you don’t need have the element in an active state to trigger it.

1 Like
7

You’re correct.

2 Likes