Help on Timers in Sugarcube? (Offline version)

Ivy

So I'm INCREDIBLY new to sugarcube, and I've been poking about the tutorials like a mad woman for a little while now- the issue is I'm getting a whole string of pieces of code; But I haven't the slightest idea on how to string them together to get them to do what I want. And I'd very much appreciate any help on the matter.

Here's the concept I'd like to do. When a player selects a choice using THIS

<span id="message">
<<click "Click this to see a message!">>
<<replace "#message">><<print "A message!">><</replace>>
<</click>>
</span>

I would like the 'A message!' to use the transition pulse (that's the code (t8n: "pulse")[This text will pulse] ) and when the pulse animation has finished, transfer the player to another page.

Is this even possible?

TheMadExile

Which version of SugarCube? You should always state the story format's version. This is especially true now that Twine 2 (v2.1.x) allows multiple versions of story formats to be installed. I'm going to assume v2 at the moment, since that's what you should be using.

As a tangent on tutorials, and with no offense to the authors intended. I've not been excessively impressed with most of the tutorials I've seen thus far—especially those on YouTube. Many make basic errors that are never going to be corrected, which only serves to confuse and/or mislead. YMMV.


Now, as to your question.

Try something like the following CSS: (goes in Story JavaScript)

@-webkit-keyframes pulse {
	0% { -webkit-transform: scale(0, 0); transform: scale(0, 0); }
	20% { -webkit-transform: scale(1.2, 1.2); transform: scale(1.2, 1.2); }
	40% { -webkit-transform: scale(0.9, 0.9); transform: scale(0.9, 0.9); }
	60% { -webkit-transform: scale(1.05, 1.05); transform: scale(1.05, 1.05); }
	80% { -webkit-transform: scale(0.925, 0.925); transform: scale(0.925, 0.925); }
	to { -webkit-transform: scale(1, 1); transform: scale(1, 1); }
}
@keyframes pulse {
	0% { -webkit-transform: scale(0, 0); transform: scale(0, 0); }
	20% { -webkit-transform: scale(1.2, 1.2); transform: scale(1.2, 1.2); }
	40% { -webkit-transform: scale(0.9, 0.9); transform: scale(0.9, 0.9); }
	60% { -webkit-transform: scale(1.05, 1.05); transform: scale(1.05, 1.05); }
	80% { -webkit-transform: scale(0.925, 0.925); transform: scale(0.925, 0.925); }
	to { -webkit-transform: scale(1, 1); transform: scale(1, 1); }
}
.pulse {
	-webkit-animation: pulse 1s;
	animation: pulse 1s;
	display: inline-block;
}

And either this markup, using HTML tags—as that's what your example used:

<span id="message">
\<<link "Click this to see a message!">>
	<<replace "#message">><span class="pulse">A message!</span><</replace>>
	<<timed 1s>><<goto [[Another passage]]>><</timed>>
<</link>>
\</span>

Or this markup, using the custom styles markup:

@

In both markup examples:

• I used the <<link>> macro in preference to the deprecated <<click>> macro.
• I used a delay with the <<timed>> macro of 1s, which is the length of the animation in used in the CSS example. This allows the animation to play out before the <<goto>> macro within the <<timed>> is executed. You may change the delay of both to suit your needs—though I advise keeping the <<timed>> delay greater than or equal to the animation duration—so it has time to fully play out.

greyelf

edit: It seems TheMadExile added a comment while I was typing. lol

The Any dynamic text effect macros for Sugarcube 2.x? thread may help you with converting some of the standard Harlowe stylings over to SugarCube. I recently added CSS to emulate the base (transition: "pulse") effect.

Once you have added the required CSS to your story the following should do what you asked.

@<;</replace>>
<</link>>
</span>

note: you don't need to use a <<print>> macro within the <<replace>> macro to get standard (or custom styled) text to appear.

TheMadExile

TheMadExile wrote: »

Try something like the following CSS: (goes in Story JavaScript)

Speaking of errors—sheesh. The correct place for the CSS is Story Stylesheet, rather than Story JavaScript. My apologies for the confusion.

Ivy

@TheMadExile

I didn't realise the versions were so diverse! It looks like my version is 2.0.11 (Offline version), sorry if that caused any confusion! This is my first project, and well, I have some big, ambitious ideas. To be honest, I've found the Harlowe youtube tutorials quite helpful- But the Sugarcube ones just don't work, and the ideas aren't well explained. But I digress-

So I put the CSS code into my Story Stylesheet (heh, heh, typos..) and entered in the code for the custom style markup you provided. When I tested it, though, it flashed up an error sign for one second before moving to the linked page. I removed the timer line to get a better look at the error message, and this is what it displayed.

#message;Click this to see a message!
Error: <<replace>>: no elements matched the selector "#message"
Error: macro <</link>> does not exist

So I plugged in your html piece of code- But it redirected me to the other passage.

Am I just shootin' for the stars here? If it's impossible, I really wouldn't want to waste someone else's time on something impossible!

@greyelf

I opened up the wiki link- but the CSS coding did not include the pulse animation portion, so I kept the CSS stylesheet that TheMadExile provided, and tested the portion of code you provided on a blank passage. It displayed this error;

Click this to see a message!
Error: <<replace>>: no elements matched the selector "#message"
Error: macro <</link>> does not exist

If I'm aimin' too high here, don't be afraid to tell me it's impossible! I'd hate to waste someone's time!

Chapel

It's definitely not impossible.

Can you post your code? It sounds like you missed something.

greyelf

Ivy wrote: »

It looks like my version is 2.0.11 (Offline version)

I believe that is the version of your Twine 2 application and there are two different off-line releases, one is install-able and the other is web-browser based. You will need to use the Change Story Format option to see the name and version of the story format you are using for your story.

The link I included in my previous post was to a Twine Forum topic, the CSS for the pulse animation is in a separate comment at the current end of the thread.

I tested the CSS and example in that tread in both SugarCube 1.x and 2.x before posting it. I tested the <<link>> based example in my previous comment in SugarCube 2.12.1

The following is a <<click>> macro based example that works using any recent version of SugarCube 1.x or 2.x

@<;</replace>>
<</click>>
</span>

TheMadExile

Ivy wrote: »

[…] I didn't realise the versions were so diverse! It looks like my version is 2.0.11 (Offline version), sorry if that caused any confusion! […]

As noted by greyelf, that is the version of Twine 2, not the story format, which you may find as they describe.

Twine 2 v2.0.11 only comes with SugarCube v1 preinstalled, which why the examples did not work correctly.

I strongly suggest switching to SugarCube v2—either by switching to the current release of Twine 2, which is v2.1.0 and comes with both versions of SugarCube preinstalled, or by installing SugarCube v2 manually, instructions for which may be found within the SugarCube 2.x in Twine 2 guide on its website.

Ivy

I updated my twine, and it works like a DREAM! Thank you so much guys!!