Howdy, Stranger!

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

SugarCube 2/Twine 2 — have a div "reveal" when the player clicks/taps the screen

edited June 2017 in Help! with 2.0
I swear I saw this implemented somewhere already but I can't remember what I read and it's driving me mad.

I'd like to structure the passage so that text is revealed as the player clicks or taps the game screen — conceptually, like revealing a paragraph (or whatever arbitrary length of text I want) at a time so the player progresses at their own pace instead of presenting them with a sudden wall of text.

I don't want the passage to change, just the text to gradually appear until the player reaches the section where they're presented with a choice to make — at which point they move on to another passage as normal.

I came across this

https://www.glorioustrainwrecks.com/node/5019

which potentially is what I want (the continue macro) but I know SugarCube 2 has its own continue macro that I think is unrelated to this completely.

I don't want to eliminate or replace text on the screen, just have a div slide into place when the player clicks.

Comments

  • edited June 2017
    You can make a div-element pop up this way:
    <<set document.getElementById("yourdiv").style.visibility = "visible">>
    

    If you want to change this on a click, you should look at onclick Events.

    Not sure why this would be necessary for what you seemingly want to do. You could just do something like:
    <<set $text = "Original Text">>
    <<set $additional_text = ["Additional text.", "Even more text.", "And one last time."]>>
    <<set $text_count = 0>>
    
    
    <<nobr>>
    <<if $text_count < $additional_text.length>>
    [[Continue|passage()][$text += "\n\n" + $additional_text[$text_count], $text_count += 1]]
    <<else>>
    [[Continue|next_passage]]
    <</if>>
    
    $text
    
    <</nobr>>
    

  • edited June 2017
    Another way would be with a bit of jQuery and CSS:
    ::some passage
    First paragraph. <<set _show to { start: 0, end: 2 }>>
    
    <div class='hide' id='next0'>\
    Second paragraph. 
    </div>
    <div class='hide' id='next1'>\
    Third paragraph. 
    </div>
    

    In stylesheet:
    .hide { display: none; }
    

    In JavaScript:
    $(document).on('click', ":not('#ui-bar')", function () {
        var show = State.temporary.show;
        var el;
    
        if (show.start < show.end) {
            el = '#next' + show.start;
            $(el).fadeIn();
            show.start++;
        }
    });
    

    Or something like that.
  • Chapel wrote: »
    Another way would be with a bit of jQuery and CSS:
    ::some passage
    First paragraph. <<set _show to {start: 0, end: 2}>>
    
    <div class='hide' id='next0'>\
    Second paragraph. 
    </div>
    <div class='hide' id='next1'>\
    Third paragraph. 
    </div>
    

    In stylesheet:
    .hide { display: none; }
    

    In JavaScript:
    $(document).on('click', ":not('#ui-bar')", function () {
        var show = State.temporary.show;
        var el;
    
        if (show.start < show.end) {
            el = '#next' + show.start;
            $(el).fadeIn();
            show.start++;
        }
    });
    

    Or something like that.

    Actually this feels exactly like what I want, although I'm out of the house at the moment so I can't test it just yet.
  • mixvio wrote: »
    Chapel wrote: »

    In JavaScript:
    $(document).on('click', ":not('#ui-bar')", function () {
        var show = State.temporary.show;
        var el;
    
        if (show.start < show.end) {
            el = '#next' + show.start;
            $(el).fadeIn();
            show.start++;
        }
    });
    

    Or something like that.

    Actually this feels exactly like what I want, although I'm out of the house at the moment so I can't test it just yet.

    I made a mistake in that JavaScript. I tested it, but not well enough. Here's a better version:
    $(document).on('click', 'html', function (e) {
        if ((e.target.id == 'ui-bar') || 
            ($(e.target).closest('#ui-bar').length)) {
    
            return;
        }
    	
        var show = State.temporary.show;
        var el;
    
        if ((typeof show !='undefined') &&
            (show.start < show.end)) {
    
            el = '#next' + show.start;
            $(el).fadeIn();
            show.start++;
        }
    });
    

    Sorry for the mix up.
  • Chapel wrote: »
    mixvio wrote: »
    Chapel wrote: »

    In JavaScript:
    $(document).on('click', ":not('#ui-bar')", function () {
        var show = State.temporary.show;
        var el;
    
        if (show.start < show.end) {
            el = '#next' + show.start;
            $(el).fadeIn();
            show.start++;
        }
    });
    

    Or something like that.

    Actually this feels exactly like what I want, although I'm out of the house at the moment so I can't test it just yet.

    I made a mistake in that JavaScript. I tested it, but not well enough. Here's a better version:
    $(document).on('click', 'html', function (e) {
        if ((e.target.id == 'ui-bar') || 
            ($(e.target).closest('#ui-bar').length)) {
    
            return;
        }
    	
        var show = State.temporary.show;
        var el;
    
        if ((typeof show !='undefined') &&
            (show.start < show.end)) {
    
            el = '#next' + show.start;
            $(el).fadeIn();
            show.start++;
        }
    });
    

    Sorry for the mix up.

    That works perfectly! Question —

    Is there something that can be added to that code that on the final "click" when all content is displayed, another div will vanish? IE, I can have a "click to continue" div below the content that then disappears when the sequence is finished and there's nothing further to reveal.
  • It's hard to make that look as good; the div will wind up 'jumping' down the page as the new elements are added with each click, but this is a start at least:
    ::some passage
    First paragraph. <<set _show to {start: 0, end: 2}>>
    
    <div class='hide' id='next0'>\
    Second paragraph. 
    </div>
    <div class='hide' id='next1'>\
    Third paragraph. 
    </div>
    <div align='center' id='cont'>\
    //Click to continue//
    </div>
    

    Updated Javascript:
    $(document).on('click', 'html', function (e) {
        if ((e.target.id == 'ui-bar') || 
            ($(e.target).closest('#ui-bar').length)) {
    
            return;
        }
    	
        var show = State.temporary.show;
        var el;
    
        if ((typeof show != 'undefined') &&
            (show.start < show.end)) {
    
            el = '#next' + show.start;
            $(el).fadeIn();
            show.start++;
    			
            if (show.start === show.end) {
                $('#cont').fadeOut();
            }
    
        }
    });
    
  • Sweet! I don't mind the jumping part, that's kinda what I was after anyway.

    I tweaked the code so that it scrolls down to the top of the new div that was introduced.
    $(document).on('click', 'html', function (e) {
        if ((e.target.id == 'ui-bar') || 
            ($(e.target).closest('#ui-bar').length)) {
    
            return;
        }
    	
        var show = State.temporary.show;
        var el;
    
        if ((typeof show != 'undefined') &&
            (show.start < show.end)) {
    		
            el = '#next' + show.start;
            $(el).fadeIn(750);
            show.start++;
    					
            if (show.start === show.end) {
                $('#cont').fadeOut(200);
            }
    		
    		$('html, body').animate({
    			scrollTop: $(el).offset().top
    		}, 500);
    		
        }
    });
    

    This was exactly what I was after and appears to be just fine.
Sign In or Register to comment.