Howdy, Stranger!

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

Change "Undo" to "Go back" in Harlowe

Hi,

I'm working on a project where the "Undo" button is useful for moving in passages, but I don't want the memory erased from visiting, as a player would trigger certain variables by visiting those passages and I don't want that event removed when they go back.

Can I disable the "Undo" effect and turn the back arrow into an "go back" function instead, much like what the back and forward keys did in Twine 1.0?

Comments

  • edited November 2015
    clarification: Excluding the Jonah story format, both the back arrow and <<back>> macro in Twine 1 story formats do undo History. It is the <<return>> macro which navigates forward to the relevant passage thus preserving any changes made.

    Method A:
    Changing the tool-tip of the Undo button to "Go Back" can be done using the following code within a header tagged passage:
    {<script>
    var back = $('tw-sidebar tw-icon[title="Undo"]');
    back.attr("title", "Go Back");
    </script>}
    

    You could even potentially change what happens when the Undo button is clicked by changing the above to something like the following:
    {<script>
    var back = $('tw-sidebar tw-icon[title="Undo"]');
    back.attr("title", "Go Back");
    back.click( ... The Javascript handler code you want to run would go here ... );
    </script>}
    
    The issue is that Harlowe currently does not have a Javascript API, so unfortunately there is no documented method for an Author to use to programmatically navigate the story to another passage.

    Method B:
    Another option would be to hide the existing Undo button and replace it with your own, the hiding part can be accomplished by adding the following to your Story Stylesheet area.
    tw-story tw-icon.undo {
        display: none;
    }
    
    ... and placing the following code within a header tagged passage would create the replacement button:
    (if: (history:)'s length > 0)[(link: "↶")[(goto: (history:)'s last)]]
    
    The issue this time is the CSS needed to position the new button so that it appears where the old Undo button did. Harlowe uses percentages (both hard-wired and dynamically calculated) to define where the contents of the current passage is displayed which in turn defines where the sidebar (containing the Undo/Redo buttons) appears, and this makes it difficult to precisely position your replacement button.

    Someone else may be able to supply you with a working solution.
  • I also have this question. Perhaps a history stack implementation like jQuery.mobile.navigate would help? It seems like Sugarcube did it and now Harlowe doesn't.
  • edited November 2015
    Thanks for this information. Perhaps there is a way of just making (set: variables) stick when you jump back a passage, rather than try and rebuild the entire step-back system?

    Method B is interesting. Unfortunately, it only goes one step back, unlike the undo and redo which can follow your entire history and recall it from a save or load in the project.
  • macen101 wrote: »
    Method B is interesting. Unfortunately, it only goes one step back
    Method B is not actually going one step back to the previously displayed passage, instead it is going one step forward to the previously displayed passage. It is a small but significant difference and the reason why changes to variables in the current passage are not being undone.
  • I'm wondering how to display the arrow larger, and about the positioning couldn't you display the arrow a couple hundred pixels to the left and it would be in the side-bar area?
  • I'm wondering how to display the arrow larger, and about the positioning couldn't you display the arrow a couple hundred pixels to the left and it would be in the side-bar area?
    Yes, you can use CSS to make the arrow in the header tagger passage both larger and appear at a different location, although the positioning may be a little more complex than just moving it x pixels to the left.

    The following CSS is based on the sidebar's selector, the only difference is I have added a top attribute to move the header link down below the existing undo/redo 'buttons'. Add both the CSS and the header based link to a story project consisting of at least two connected passages:
    tw-passage > tw-include[type="header"] {
    	left: -5em;
    	top: 7em;
    	width: 3em;
    	position: absolute;
    	text-align: center;
    	display: block;
    }
    
    ... as you can see the header based link appears in the sidebar area below the undo/redo buttons. You may of also noticed the short delay between the link first appearing at the start of the passage text area and the link appearing in the sidebar area, and that is the issue that I personally have not worked out how to overcome.

    Maybe a more experienced CSS coder knows how to fixed the problem of the header based link appearing twice.
  • Oh man. It's way more complex than I imagined D: Help us CSS experts!
  • Alternatively is there a way to make a variable stick no matter if you undo?
  • macen101 wrote: »
    Alternatively is there a way to make a variable stick no matter if you undo?
    Short of you using Javascript to store the value somewhere other than Harlowe's State/Variable sub-system, No.

  • greyelf wrote: »
    macen101 wrote: »
    Alternatively is there a way to make a variable stick no matter if you undo?
    Short of you using Javascript to store the value somewhere other than Harlowe's State/Variable sub-system, No.

    Ok. Thanks for the quick reply. I'll have to experiment around to see if any alternatives come to mind for all of this.

Sign In or Register to comment.