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

mixvio

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.

idling

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>>

Chapel

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.

mixvio

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.

Chapel

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.

mixvio

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.

Chapel

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();
        }

    }
});

mixvio

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.