twine time macro

Twine: Combined <<Replace>> Macro Set

Last updated: 6-Jun-15
I've worked hard to combine my <<replace>>, <<timedreplace>>, <<revision>>, <<hoverreplace>> and <<once>> macros, and all their variations, into a single codebase, and included some new variations as well. Here's my combined "Replace Macro Set":

http://twine1.neocities.org/ReplaceMacros.min.js (version 1.1.7)

CSS
The first good news is that you only need this much default CSS for all these macros:

.revision-span-in {
	opacity: 0;
}
.revision-span:not(.revision-span-out) {
	transition: 1s; -webkit-transition: 1s;
}
.revision-span-out {
	position:absolute;
	opacity: 0;
}
The reason I require this CSS is to enable people to modify it to make their own effects. You can, for instance, change this to an instant transition by removing the middle CSS block (with the "transition" property line.)

List of macros
This set includes the following "revision macros":
* <<insert>>, <<replace>>, <<continue>> — triggered by clicking their contents.
* <<timedreplace>>, <<timedinsert>>, <<timedremove>>, <<timedcontinue>>, <<timedcycle>> — triggered by time.
* <<hoverreplace>>, <<hoverremove>> — triggered by the mouse touching their contents, only temporarily.
* <<mousereplace>>, <<mouseremove>>, <<mousecontinue>>, <<mousecycle>> — triggered by the mouse touching their contents, permanently.
* <<once>>, <<later>> — triggered by visiting the passage a certain number of times in the game session.
* <<insertion>>, <<revision>>, <<removal>>, <<cycle>> — triggered by a separate "triggering macro".

It also includes these "triggering macros":
* <<revise>>, <<revert>>, <<randomise>> — hyperlinks.
* <<mouserevise>>, <<hoverrevise>> — sections that the mouse can touch.

Changed syntax
* <<replacewith>>, used to separate sections in <<timedreplace>>, has been replaced with <<becomes>>.
* You can now have multiple sections in most of the revision macros, by separating them with <<becomes>> or <<gains>> macros:

These function just like they do within <<revision>> macros - <<becomes>> replaces the previous section with the next section, and <<gains>> merely appends the next section.
* To reconcile differences between <<replace>> and <<timedreplace>>'s syntax, some macros (currently just the <<replace>>, <<mousereplace>> and <<hoverreplace>> varieties, as well as <<mousecontinue>>) have multiple syntax for specifying sections - the "normal" syntax, where each section is separated by <<becomes>>/<<gains>>, and a "shorthand" syntax, where the first several sections are strings within the opening tag:

The final section must be between the opening tag and the <<endreplace>> macro tag, though.
For most of these, the shorthand strings behave as if the <<becomes>> macro separates them. The exception to this is the "insert" named macros, wherein the strings will behave as if the <<gains>> macro separates them.

New macros
* <<later>> is the antonym of <<once>> - it displays its contained text on the second and subsequent visits.
* <<mousecycle>> creates a section of text that cycles between different versions whenever the mouse touches it. It's similar to <<cyclinglink>> in some respects, though you can't yet easily bind a variable to change when it changes.
* <<timedcycle>> constantly rotates through its sections without stopping. It is similar to <<timedloop>> and may well replace it in future.

Examples

In any of these examples, <<becomes>> can be substituted with <<gains>>.

Feel free to report any bugs to @webbedspace.
Don't use the attached file. It's out of date.

Twine macro: <<timedloop>>

This macro is similar to <<timedreplace>>, but instead of replacing one block of text with another, it just re-runs a passage section, re-drawing the text and running the contained macros again.

http://www.glorioustrainwrecks.com/files/TwineMacro-TimedLoop-1.1.0.txt

Much like <<timedreplace>>, the transition between each rewrite is handled by CSS. Here's a default "fade-in" transition:

.timedloop.replacement-in {
	opacity: 0;
}
.timedloop {
	transition: 1s;
	-webkit-transition: 1s;
}
.timedloop.replacement-out {
	display:none;
}
You can easily modify this CSS. If you want an "instant" transition, for instance, change "opacity: 0;" to "display:none;"

New: This now takes CSS time values, which are decimal numbers ending in "s" (for seconds) or "ms" (for milliseconds).

Here's a usage example:

<<set $red=1>>
<<timedloop 1s>>You have <<set $red += 1>><<print $red>> seed pods.<<endtimedloop>>
The text will initially read "You have 2 seed pods.", then change to "You have 3 seed pods." after 1 second, then "You have 4 seed pods." after another second, and so forth until you leave the passage. The time value is in half-seconds, like <<timedreplace>>.

Known bug: When you click a link to leave a passage, the loop will still run while the passage is transitioning out. This may cause unexpected behaviour (if, for instance, a <<timedgoto>> is inside the looped code).

Implementation details:
* If inserted text appears and descends below the bottom of the screen, the page should automatically scroll down to make it visible.
* Note: due to the way the browser and Twine interact, any changes made by code inside a <<timedloop>> tag after the first iteration will be forgotten if you use the Back or Forward browser buttons. This means that if you put long-term variable changes that affect future passages inside one, you should disable the Back button.

Version history:
* 11-4-2013: Fixed bug where the timeout wouldn't expire if you clicked a "refresher" link to the same passage.
* 5-4-2013: Initial.

Feel free to report any bugs to @webbedspace.

Twine macro: <<timedgoto>>, a simple timer

This is inspired by the Timer script used in Panic! by Astrid Bin and Stefano Russo. That script implements a sophisticated timer entity which can count down throughout the entire game, can draw itself in graph form in a canvas element, and can be paused and resumed. However, it requires multiple macros to set it up for each use, and it can be a bit cumbersome if you simply want the game to advance to a new passage after a delay.

I felt like writing a similar macro that would be shorter and more specific. This one, <<timedgoto>>, just automatically (and invisibly) goes to the given passage after the given amount of time has passed. Each use of the macro only functions within the passage that uses it - if you're using Sugarcane or single-passage Jonah and leave the passage by a normal link, it will be disengaged. Feel free to consider this a counterpart to <<timedreplace>>.

version.extensions.timedgotoMacro={major:1,minor:2,revision:0};
macros["goto"]=macros.timedgoto={timer:null,handler:function(a,b,c,d){function cssTimeUnit(s){if(typeof s=="string"){if(s.slice(-2).toLowerCase()=="ms"){return +(s.slice(0,-2))||0
}else{if(s.slice(-1).toLowerCase()=="s"){return +(s.slice(0,-1))*1000||0
}}}throwError(a,s+" isn't a CSS time unit");return 0}var t,d,m,s;
t=c[c.length-1];d=d.fullArgs();m=0;if(b!="goto"){d=d.slice(0,d.lastIndexOf(t));
m=cssTimeUnit(t)}d=eval(Wikifier.parse(d));if(d+""&&state&&state.init){if(macros["goto"].timer){clearTimeout(macros["goto"].timer)
}s=state.history[0].passage.title;macros["goto"].timer=setTimeout(function(){if(state.history[0].passage.title==s){state.display(d,a)
}},m)}}};

New: This now takes CSS time values, which are decimal numbers ending in "s" (for seconds) or "ms" (for milliseconds). You can use fractions of seconds as well as whole seconds.

Usage examples:
* <<timedgoto "underwater" 2.5s >> goes to the "underwater" passage if you stay at the current passage for 2 and 1/2 seconds.
* <<timedgoto $deathpassage 5s >> goes to the passage whose name is in the $deathpassage variable if you stay at the current passage for 5 seconds.
* <<timedgoto $playerType + "pit" 1s >> goes to the $playerType + "pit" passage if you stay at the current passage for 1 second.
* <<goto "Throne">> - This shorter version functions the same as <<timedgoto "Throne" 0s>>.
Notes:
* This uses code parameters (that is, it accepts "strings", $variables, and "various"+$combinations of both, and its parameters are interpreted as Javascript), except that the final parameter (the time value) is separated from the rest and interpreted as a literal parameter.

Version history:

  1. 1-9-2013 - Fixed a bug where it caused problems with the (un-patched) browser Back button code.
  2. 18-4-2013 - Changed time units to CSS units, added "goto" variation.
  3. 5-3-2013 - Initial.

Feel free to report any bugs to @webbedspace.

Twine macro: << timedreplace >>, << timedinsert >>, << timedremove >>, << timedcontinue >>

Similar to my <<replace>> macro, this code causes the passage text in between the <<timedreplace>> and <<becomes>> tags to be replaced with what is between those and the <<endtimedreplace>> tag, after a certain amount of time has elapsed.

Variants
* <<timedinsert>> causes its text to be inserted into the page. It doesn't need a <<becomes>> tag to function.
* <<timedremove>> works in a matching fashion, removing its contained text after the time elapses.
* <<timedcontinue>> is similar to <<timedinsert>> but does not require a final <<endtimedcontinue>> - instead, it causes all subsequent text in the passage to appear.
Gains
You can also substitute the <<becomes>> tag with <<gains>> to cause the next run of text to appear at the end of the previous run, without replacing it.
Chains
If you put multiple <<becomes>> or <<gains>> tags in, the macro will make them appear as well after the same amount of time passes.

Install my <<Replace>> Macro Set to use these macros.

This takes CSS time values, which are decimal numbers ending in "s" (for seconds) or "ms" (for milliseconds).

Usage examples:
* <<timedreplace 2s >>You see nothing. <<becomes>>After 2 seconds, you still see nothing.<<endtimedreplace>>
* <<timedreplace 2s >>You see <<gains>>a dog, <<gains>>a walrus, <<gains>>and a civet.<<endtimedreplace>>
* You search. <<timedinsert 1s>>You find nothing.<<endtimedinsert>>.
* <<timedremove 2.5s >>Something is disappearing... <<endtimedremove>>
* Look <<timedcontinue 3s>>A bird just few by...

Example program.

Implementation details:

* If inserted text appears and descends below the bottom of the screen, the page should automatically scroll down to make it visible.
* Note: due to the way the browser and Twine interact, any changes made by code inside a <<timedreplace>> tag will be forgotten if you use the Back or Forward browser buttons, unless you use this script.

Version history:
* 16/06/2013 - Updated regarding Combined Replace Macro Set.
* 26/04/2013 - Added timedcontinue.
* 05/04/2013 - Added timedinsert and timedremove, as well as downward scrolling.
* 07/03/2013 - Made the transition CSS-based.
* 01/02/2013 - Initial.
Feel free to report any bugs to @webbedspace.

Syndicate content