Cycling links (Sugarcube 2)

From https://www.glorioustrainwrecks.com/node/5020

1. Copy the following macro script:

version.extensions.cyclinglinkMacro={major:3,minor:3,revision:0};macros.cyclinglink={handler:function(a,b,c){var rl=“cyclingLink”;function toggleText(w){w.classList.remove(“cyclingLinkInit”);w.classList.toggle(rl+“Enabled”);w.classList.toggle(rl+“Disabled”);w.style.display=((w.style.display==“none”)?“inline”:“none”)}switch(c[c.length-1]){case"end":var end=true;c.pop();break;case"out":var out=true;c.pop();break}var v=“”;if(c.length&&c[0][0]“$”){v=c[0].slice(1);c.shift()}var h=state.history[0].variables;if(out&&h[v]=“”){return}var l=Wikifier.createInternalLink(a,null);l.className=“internalLink cyclingLink”;l.setAttribute(“data-cycle”,0);for(var i=0;i<c.length;i++){var on=(iMath.max(c.indexOf(h[v]),0));var d=insertElement(null,“span”,null,“cyclingLinkInit cyclingLink”+((on)?“En”:“Dis”)+“abled”);if(on){h[v]=c[i];l.setAttribute(“data-cycle”,i)}else{d.style.display=“none”}insertText(d,c[i]);if(on&&end&&ic.length-1){l.parentNode.replaceChild(d,l)}else{l.appendChild(d)}}l.onclick=function(){var t=this.childNodes;var u=this.getAttribute(“data-cycle”)-0;var m=t.length;toggleText(t[u]);u=(u+1);if(!(out&&um)){u%=m;if(v){h[v]=c[u]}}else{h[v]=“”}if((end||out)&&um-(end?1:0)){if(end){var n=this.removeChild(t[u]);n.className=rl+“End”;n.style.display=“inline”;this.parentNode.replaceChild(n,this)}else{this.parentNode.removeChild(this);return}return}toggleText(t[u]);this.setAttribute(“data-cycle”,u)}}};

1. In your twine game, click the title of your game to bring up the menu. Select “Edit Story Javascript”. Paste the copied macro in the Javascript passage, and close the passage.

2. In the passage where you want the cycling link to appear, use the following code:

<<cyclinglink “word-phrase 1” “word2” “option3”>>

1. Replace the phrases above with the words/phrases/sentences you want to cycle every time the player clicks the link.

2. If you want to define it as a variable, follow the word cyclinglink with the variable in quotation marks:

<<cyclinglink “$var” “1” “2” “3”>>

EXAMPLES:

You look around, but only see <<cyclinglink “grass” “a flower” “a cloud” “the road”>>. - This is a purely cosmetic, endlessly cycling link.

* You see a bowl containing <<cyclinglink “3 cookies” “2 cookies” “1 cookie” “a few crumbs” end>>. - This link changes to the words “a few crumbs” when you get to the end.

* You see a dial: <<cyclinglink “$heat" “off” “low” “high” “fearsome”>>. - The $heat variable will be changed to “off” when the page loads (unless it was already set to “high” or “fearsome”), and then sets it to “low”, “high” and “fearsome” as the player clicks the link.

* You see a fuel gauge: <<cyclinglink “$fuel" “100%” “50%” “10%” “0%” end>>.

* You see an air meter: <<cyclinglink “$air" “" "" “****” "” out>>.

If you want to go to a different passage based on what the cycling link is set to, use the following in the final link (has to be a different link - the cycling links only cycle):

Make sure to define the cycling link as a variable (in examples 2-4 above).

<<link “advance”>> <<if $varCL is “option1">><<set $varCL to “option1">><<goto [[passage1]]>> <<elseif $varCL is “option2">><<set $varCL to “option2">><<goto [[passage2]]>> <><<set $varCL to “option3">><<goto [[option3]]>><> <>

To style:

.cyclinglink {color: purple;}
.cyclinglink:hover {color: white;}

.cyclinglink {color: purple;}
.cyclinglink:hover {color: white;}

in the CSS will set all cycling links to purple, with white on the mouseover (can style just like elements).

.tag .cyclinglink {color: blue;}
.tag .cyclinglink:hover {color: light blue;}

.tag .cyclinglink {color: blue;}
.tag .cyclinglink:hover {color: light blue;}