Howdy, Stranger!

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

[Snowman] (goto:) equivalent?

Having big problems with the speed of my story, I'm experimentally trying to port it from Harlowe to Snowman. Something funny to do for someone who doesn't know Javascript. However, although my Harlowe code is long and elaborate, it's actually made of very few different macros, so I kind of trust I can get it done in Snowman.

One thing that I have no idea how to do, since Javascript documentation can't help and I can't find it about Snowman, is how to move from one passage to another indirectly: not with a standard Twine link like [this->this], but using the equivalent of a (goto:) macro from Harlowe.

What I need is creating a link that, when clicked, first sets some variables, and then jumps to the next passage.

Thanks!

Comments

  • edited April 2016
    The Snowman (for Twine 2) source code is in its repository. If you're going to use it, then you should become familiar with it—and learn JavaScript, because Snowman.

    Anyway. I believe what you want is story.show(). For example:
    <% story.show('Passage Name') %>
    

    A custom link could be something as simple as:
    <!--
    	Set the variable `hello` to 'world', then forward the player
    	to 'Some Passage'.
    -->
    <a onclick="story.state.hello='world';story.show('Some Passage')">Onward</a>
    

    A more complicated custom link could be something like the following:
    <!--
    	Set the variable `hello` to 'world', do other things you need
    	done, and finally forward the player to 'Some Passage'.
    -->
    <a id="link-awesome">Awesomely Complex Link</a><%
    $(document).on('showpassage:after', function () {
    	$('#link-awesome')
    		.on('click', function () {
    			// Set hello to 'world'.
    			story.state.hello = 'world';
    
    			// Other things that may need done.
    
    			// Finally, go to 'Some Passage'.
    			story.show('Some Passage');
    		});
    });
    %>
    

    You will need to style both of those as links, however. I recommend using CSS over something daft like adding href="javascript:void(0)" or href="#". For example:
    a {
    	cursor: pointer;
    }
    
  • edited April 2016
    Snowman relies on you being able to read and understand it's source code

    Try using something like the following in your passage.
    <script>story.show('Other Passage');</script>
    

    note: For some reason the following does not work even though I believe it should.
    <% story.show('Other Passage') %>
    
  • Here's a small revision on TME's version with more annotations:
    // Lines starting with two forward slashes are not shown to the reader.
    // First, let's start with the link in question. You'd probably have more text here as well:
    
    [[Awesomely Complex Link]]
    
    // You can put JavaScript in between <% and %>, and it will be run immediately
    // when the passage is loaded.
    
    <%
    
    // The function below will be run after this passage is displayed
    // on the page. Snowman overrides the typical usage of jQuery
    // with a single function, e.g. http://api.jquery.com/jQuery/#jQuery3,
    // to make it more useful.
    
    $(function() {
    	// The variable "this" right now is the passage as it is displayed in the browser.
    	// Begin listening to clicks on all links in the passage.
    	// See http://api.jquery.com/on/ for more details.
    
    	$(this).on('click', 'a', function(event) {
    		// The variable "this" is now the link that was clicked.
    		// Check its text to see if it's the link we're interested in.
    		// See http://api.jquery.com/text/ for more details.
    	
    		if ($(this).text() === 'Awesomely Complex Link') {
    			// The global variable 'story' contains its variables,
    			// and also has a show() method which immediately displays a passage.
    		
    			story.state.hello = 'world';
    			story.show('Some Passage');
    		}
    		
    		// Prevent the usual behavior of clicking the link -- that is,
    		// trying to go to a passage named 'Awesomely Complex Link.'
    		// Note that 'event' was an argument to the function above.
    		
    		event.stopPropagation();
    	});
    });
    
    %>
    
  • Thanks so much! I just tested the solution by @TheMadExile and of course it works perfectly; my situation is in fact more complex than I explained here (I don't simply want to write a link that does stuff, I want to generate a complex HTML block out of an object, including a link and the stuff that link does, and store all that inside a variable that will then go into an array to be retrieved and printed later) but I think I'll get away with it. I think that I'll have a couple more problems, though.

    Of course, it's ridiculous trying to write Snowman without learning Javascript, but 1) I'm in a hurry, 2) I tried Javascript a few years ago, without any success, 3) I only need the equivalents to seven or eight Harlowe macros.

    And 4) I counted on the awesome people in this forum.

    Anyway, I'll read the Snowman code and see what I can guess.
  • This old thread answered a question I had so thanks, just wanted to comment on this:
    greyelf wrote: »
    note: For some reason the following does not work even though I believe it should.
    <% story.show('Other Passage') %>
    

    I figured out how to get that working. Calling story.show() directly doesn't work but putting it inside a function does work (presumably that's some intricacy with scoping):

    <%
    $(function() {
    story.show("Other Passage");
    });
    %>
Sign In or Register to comment.