Node map of your apartment

Your apartment, as seen from above

“So, can I trust you with my source code?”

In the interest of sharing resources with others using Twine to create, here’s the code snippets for all the things that used javascript in Reset:

Color Changing

This is what is used to create the color changing effects. The passage they were placed in was called “Style Changer”. The macro layout here was modified from the Timer script by Stefano Russo (right click to download).

The macros were then called by <<display “Style Changer”>> <<typical>>, <<redgreen>> etc…

<<silently>>
<<set $StyleChanger = 
function()
{
 macros['typical'] =
 {
 handler: function(){
 document.getElementsByTagName("body")[0].style.backgroundColor="#333";
 document.getElementById("passages").style.color="#ddd";
 }

 }
 macros['redgreen'] =
 {
 handler: function(){
 document.getElementsByTagName("body")[0].style.backgroundColor="#333";
 document.getElementById("passages").style.color="#ddd";
 }

 }
 macros['cb'] =
 {
 handler: function(){
 document.getElementsByTagName("body")[0].style.backgroundColor="LightSteelBlue";
 document.getElementById("passages").style.color="DarkSlateBlue";

 }

 }
 macros['badcolor'] =
 {
 handler: function(){
 document.getElementsByTagName("body")[0].style.backgroundColor="#b38201";
 document.getElementById("passages").style.color="#009900";
 }

 }
}>>
<<print $StyleChanger()>>
<<endsilently>>

Prompt Box

Rather than just show off how to create a prompt box, this is the segment in which the result the user types in is actually used immediately to determine which of the color schemes should be displayed. Since the user is given one of the Ishihara plates and asked which number they see, the two common answers are 29(typical) and 70 (red-green deficiency), and I also included a guaranteed answer in case either they saw nothing or entered something other than the two options. This is from the “erozha gnuj” passage.

<<set $numberSeen = prompt('#?')>>Not-you see you. Not-noise.
<<if $numberSeen eq 29>>[[Two touch things. Five-and-four touch things.|typical]]<<endif>>
<<if $numberSeen eq 70>>[[Five-and-two touch things. No touch things.|redgreen]]<<endif>>

The useful thing to note about this is that you can use a variable collected in a prompt on the very same screen the prompt appears.

Alert Box

For the alerts, I wasn’t able to find a macro to simply display the alert. So I set it to dump the result into a variable which means it has to be evaluated as JS. You can find this in the “Plug it in.” passage.

<<set $alert = alert('Warning: Attaching device could allow unauthorized access to digital as well as biological function.')>>

I think(?) the value  $alert will evaluate to is true if the player clicks “Ok” and false if the user escapes/closes the box without responding. But I’m not certain on that.

Confirm Box

Ah, yes. Turning yourself over to Alison’s control. I wanted to use this moment to mimic the normal experience of having to explicitly permit a different user to use administrator or root privileges.

The way this works is that clicking “Ok” sets the value returned from confirm() to true, while clicking “cancel” or “X” sets it to false.

<<set $confirm = confirm('You are about to grant user [Administratrix] ALL access privileges. Are you sure?')>>
<<if $confirm eq false>><<display "wrong">><<else>><<display "surrender">><<endif>>

Again, just like with the prompt box, you can use the result of clicking “Ok” or “Cancel” right away. In this case, I have two other passages, and whichever gets displayed depends upon whether the user accepts Alison’s control or not.

Full Source

You can download the full source of Reset here.

With regard to the license, this was a tough one for me. 99% of the work of this lies in the writing, not the code, though the interaction between JS and Twee code makes some obvious things in JS not so obvious in Twine, which is why I wanted to share those insights here. As far as the “code” stuff, I don’t really have any particular attachment to it. Use the JS stuff as you see fit, since much of this is so trivial (from a development standpoint, not necessarily a learning standpoint) that protecting a function call under copyright seems a crass assertion of that power. The CC license is meant to protect the prose, setting, and story arc from unattributed use before I turned it loose.

Creative Commons License
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.

Complete nodemap of Reset

Complete Nodemap

Tagged with →  
Share →

4 Responses to Reset: Code Snipets and Source

  1. [...] Das Twine eine HTML-Seite produziert ist hierbei eine der Stärken des Programm: Nicht nur, kann man als Autor diese durch einfaches Hochladen ins Netz sofort publizieren, sondern sie erlaubt auch durch einfache Bearbeitung des HTML-Codes sie in entsprechend aufzuwerten. Sei es indem man ihr ein passenderes Layout gibt, sei es indem man Bilder oder Videos einfügt. Zudem unterstützt eine lebendige Community die Entwicklung durch Makros, kleine Programmschnipsel, die für fortgeschrittenere Nutzer weitere technische Optionen in einer Geschichte eröffnen oder das Layout verändern. [...]

  2. João Silveira says:

    Hello, I’ve been having some problems using the code for changing background color with the “Squillions” stylesheet, whenever I use the <> macro the link to a new passage just won’t work!
    I’m fairly new to this so it’s probably my fault.
    Any pointers as to what I’m doing wrong would be much appreciated, thanks!
    João

    • Life In Neon says:

      Hey there! Sorry for the slow approval of the comment, I just got back on my desktop after a month. I don’t quite understand the problem you’re having from the way you’ve described it right now.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>