Comments :

By clicking on this part, you lanch an interactive fiction.

Now, you can play the fiction.

Vorple | Démonstration 01

How to combine Inform and Javascript

Gaétan Darquié

You've just triggered a javascript effect with inform.

And at the same time, you've transmit a variable.

Code Inform

		"Inform/Web communication" by gaotian

Include Vorple Core by The Vorple Project.
Include Notifications by The Vorple Project.
Include Hypertext by The Vorple Project.

Release along with "Vorple" interpreter.

The Demo is a room. "This is the demo room where you can make some actions like proceeding.".
The DarkRoom is a room. "Inside the room, there is something strange...". The printed name of DarkRoom is "A dark room";
The exit is a room. It is south of the DarkRoom.

The lamp is a device in the DarkRoom.
The note is an object.

[faire d'inform un déclencheur]

_exit is a number variable. _exit is 0.
_test is a number variable. _test is 255.
_proceed is a number variable. _proceed is 0.
_noir is a number variable. _noir is 0.

When play begins:
	say "This text is an exemple of Inform text playable in a web browser, using Vorple and where Inform text and interaction can trigger some javascript action.[paragraph break]";
	say "For exemple if you write the command [bold type]'proceed'[roman type]...";
	[show notification "Welcome!";
	display "Vorple web page" linking to url "http://index.html?suite";
	eval "var yes = [_test]";
	eval "var no = document.getElementById('test')";
	eval "var okok= no.innerHTML";]
	
Instead of showing:
	say "Demo";
	
Proceeding is an action applying to nothing.
Understand "proceed" as proceeding.

A report rule for proceeding:
	say "You proceed.";

Alerting is an action applying to nothing.
Understand "alert" as alerting.

A report rule for alerting:
	say "You've called an alert.";

Continuing is an action applying to nothing.
Understand "continue" as continuing.

A report rule for continuing:
	now the player is in the darkRoom;
	now _noir is 1.

[Exceptions]

After proceeding:
	now _proceed is 1;
	say "With Vorple, you can easily create JS alert or notification.";
	show notification "This is an example of a notification.";
	say "You can create alert to. Just write [bold type]alert[roman type] to test it.[paragraph break]";
	continue one;
	[create an alert];

Scene1 is a scene. Scene1 begins when _proceed is 1. 

After alerting:
	continue one;
	eval "alert('This is an alert's example.')";

To continue one:
	say "We can also use Inform to continue the fiction outside inform. When you activate something, you finish the IF and you even can transmit a variable. To see an exemple, simply write [bold type]continue[roman type] when you're ready.";
	
Noir is a scene. Noir begins when _noir is 1. 
When Noir begins :
	say "You have to [bold type]turn on the lamp[roman type].";
	
After switching on the lamp:
	say "The light reveal a note.The exit is at south. What will you choose : [bold type]examine the note[roman type] or [bold type]going south[roman type]?";
	now the note is in the DarkRoom;

Instead of examining the note during Noir:
	say "You leave the room";
	eval "$('#hyper').fadeIn(2000)";
	eval "$('body').css('background','white')";
	eval "_answer = 1";
	eval "$('#comment').hide()";
	eval "$('#vorpleContainer').hide()";

Instead of going south during Noir:
	say "You leave the room";
	eval "$('#hyper').fadeIn(2000)";
	eval "$('body').css('background','white')";
	eval "_answer = 2";
	eval "$('#comment').hide()";
	eval "$('#vorpleContainer').hide()";

	

Code Javascript


$("body").css("background","white");

$("#vorpleContainer").hide();
$("#comment").hide();

$("#vorpleContainer").css("background","white");
$("#vorpleContainer").css("border", 0);
$("#vorpleContainer").css("-webkit-box-shadow", "0px 0px 0px #FFF");

var _answer = 0;


function intro(){
	$("#intro h1").hide();
	$("#intro h3").hide();
	$("#intro h1").fadeIn(2000);
	$("#intro h3").delay(500).fadeIn(3000);
	vertical("#intro");
	vertical("#hyper");
}

function begin(){
	$("#titres").hide();
	$("#comment").fadeIn(1000);
}

function comment(a, b){
	$(a).hide();
	$(b).show();
}

function display(x){
	$(x).fadeIn(1000);
}

function read(a,b,x){
	comment(a, b);
	display(x);
}

function answer(){

	var _texte = "";

	if(_answer == 1){
		_texte = "

That's why I know you've read the note.

"; } else if (_answer == 2){ _texte = "

That's why I know you've gone south without reading the note.

"; } else{ _texte = "

Sorry I don't understand.

"; } $("#hyper").html(_texte+""); } //Design //Afficher un bloc au centre de la page (pratique pour les titres) function vertical(x) { $(document).ready(function() { $(x).css({ position:'absolute', left:($(window).width() - $(x).outerWidth()) / 2, top:($(window).height() - $(x).outerHeight()) / 2.3 //légèrement remonté }); // $(window).resize() est appelée chaque fois que la fenêtre est redimensionnée par l'utilisateur. $(window).resize(function() { $(x).css({ position:'absolute', left:($(window).width() - $(x).outerWidth()) / 2, top:($(window).height() - $(x).outerHeight()) / 2.3 //légèrement remonté }); }); }); } function stopVertical(){ $("#intro").css("postition","relative"); $("#intro").css("top","0.5em"); } function code(){ $("#code").fadeIn(); } intro();
Vorple