Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Modifying SugarCube Variables With Javascript

edited January 2014 in Help! with 1.x
I know that SugarCube isn't a standard header, so I hope that requesting help for this is alright. I've gone and gotten way too excited again and tried to code in functionality before I fully understand the API. I'll attach the Twine file so all my code is available.

So semantic HTML5 and jQuery support are great, and I'm using them both. I'm running into an issue with updating any of SugarCube's variables with javascript, specifically that the page just doesn't seem to want to update after the initial load. I have a keyboard controlled menu that executes code like this:
$(document).bind('keydown',function(e){
if(e.keyCode==40 &amp;&amp; currentchoice < maxchoices) {
handloc+=33;
currentchoice+=1;
beep.currentTime=0
beep.play();
document.getElementById("handpointer").style.top=(handloc+"px");
}
if(e.keyCode == 38 &amp;&amp; currentchoice > 1) {
handloc-=33;
currentchoice-=1;
beep.currentTime=0
beep.play();
document.getElementById("handpointer").style.top=(handloc+"px");
}
if(e.keyCode == 13) {
select.currentTime=0
select.play();
if(currentchoice==1) {
state.active.title="New Game";
alert(state.active.title);
}
if(currentchoice==2) {
state.active.title="Continue";
alert(state.active.title);
}
if(currentchoice==3) {
state.active.title="Statistics";
alert(state.active.title);
}
if(currentchoice==4) {
state.active.variables.fruit="Oranges";
alert(state.active.variables.fruit);
}

}
});
I have state.active.title and state.active.variables.fruit displaying on the start passage. I know the variable code SHOULD work because I can update it with tweecode and the javascript alerts displays it properly. My questions are twofold. One, can the active title be updated in the way that I'm doing it here? Two, why isn't the page updating with changes to the variables, and how do I fix it?

Comments

  • Before I begin: your code is missing semi-colons in various places, it's polluting SugarCube's namespace (so be careful not to step on anything important, or wrap it in an anonymous function call to give it a scope of its own), and the audio is making Firefox sad for some reason (off-hand, it looks correct).

    CoraBlue wrote:
    One, can the active title be updated in the way that I'm doing it here?

    What is it that you're trying to accomplish by assigning to state.active.title?  Are you trying to:
    [list type=decimal]
    Display the named passage?
    Update the output of <<print state.active.title>>?
    Something else?

    state.active is the currently active history (analogous to state.history[0] in the vanilla headers), so state.active.title is the title of the currently active (displaying/rendered) passage.  It's not generally something that you should be changing directly, and changing it certainly doesn't update the current passage.

    CoraBlue wrote:
    Two, why isn't the page updating with changes to the variables, and how do I fix it?

    Because the page doesn't dynamically update by default.  If you want to update the output of <<print $fruit>> outside of the normal header method of displaying a passage, you'll have to update it manually.

    For example, wrap it in an element so you can target it:
    <span id="fruit"><<print $fruit>></span>
    Then after you assign "Oranges" to fruit, do something like one of these:

    // via jQuery
    $("#fruit").empty().append(state.active.variables.fruit);

    // the old-school way
    var fruit = document.getElementById("fruit");
    removeChildren(fruit);
    insertText(fruit, state.active.variables.fruit);
  • Thanks for the reply! I'll use jQuery, much easier. As for what I'm trying to do with state.active.title, I'm just trying to change the passage when a selection is made, identical to what happens when you click on [[New Game]] for instance. The idea is to make a selection and then navigate to a new passage.

    If this is written down somewhere, please feel free to just link me and I'll try and read up on it, but it seems the page I visited doesn't have the API for passages written up yet. http://www.motoslave.net/sugarcube/docs/story-apis.html#passage-api

    Instead of removing the contents of a span and then rewritting it, is there also a method for simply reloading the current passage? A whole lot of lines could be cut down the line if there was a way to perform several variable modifications and then just update the passage once the operations are completed.
  • To display a passage, I think you want state.display("PassageNameHere"). You could also use this to reload the current passage, e.g.
    state.display(state.active.title)
    Edit: One think I'm not sure of, though, is how redisplaying the passage will affect the history stack (back button, etc.)
  • Thanks Erik. I haven't checked to see how it affects history but I know how to modify that, so at the least I can get everything working.

    state.display is probably something I should have figured out. Oh well. You live and you learn.

    Now to change the $(document).bind('keydown') to a $(document).on('keydown') so I can disable it with $(document).off('keydown'), add an argument for var maxchoices, figure out how to link destinations to variables, and viola! I'll have a keyboard (or gamepad) controlled JRPG style selection macro.
  • CoraBlue wrote:
    Thanks for the reply! I'll use jQuery, much easier. As for what I'm trying to do with state.active.title, I'm just trying to change the passage when a selection is made, identical to what happens when you click on [[New Game]] for instance. The idea is to make a selection and then navigate to a new passage.

    Then, as Erik has mentioned, it's simply state.display(PASSAGE_TITLE);.  For example:
    state.display("New Game");
    CoraBlue wrote:
    If this is written down somewhere, please feel free to just link me and I'll try and read up on it, but it seems the page I visited doesn't have the API for passages written up yet. http://www.motoslave.net/sugarcube/docs/story-apis.html#passage-api

    The public interfaces for both Tale and Passage in SugarCube are/were largely similar to the vanilla headers, which is why they're not documented (SugarCube's docs were largely meant to document the differences between the vanilla headers and SugarCube).  I suppose now that Leon is pushing the vanilla headers away from SugarCube, I may have more to document.

    CoraBlue wrote:
    Instead of removing the contents of a span and then rewritting it, is there also a method for simply reloading the current passage? A whole lot of lines could be cut down the line if there was a way to perform several variable modifications and then just update the passage once the operations are completed.

    If by "reload" you mean, display the passage without adding new history states, then yes.  You add "back" as the third parameter to display, like so state.display(PASSAGE_TITLE, null, "back");.  For example:
    state.display("New Game", null, "back");
    That will display the "New Game" passage, without adding a new state to the history.
Sign In or Register to comment.