0 votes
by (3.5k points)
edited by

There is a javascript library called ''baffle.js'' which I want to add to my Harlowe project. (https://camwiegert.github.io/baffle/) The library is based on this one simple reveal() function which creates a text from an animated gibberish and I want the content of every passage to appear in this way.
How should I better go about installing it?

Any help appreciated!

1 Answer

+1 vote
by (159k points)

warning: Harlowe isn't designed to play well with JavaScript.

1. Preparing your project's Story Javascript area.

The Baffle JavaScript library makes certain assumptions that are not correct for a HTML file built using Twine, to over come this fact you will need to add the following code to your project's Story Javascript area.

(function (define){

	/* The Baffle library's source code will go here! */

}).call(window);


2. Adding the Baffle library source code to your project's Story Javascript area.

The Baffle web-site (you linked to) has a Download button, which when selected should show the contents of a baffle.min.js named JS file. You need to highlight and that contents and then paste it into the code from point 1 so that it appears between the line that reads (function (define){ and the line that reads }).call(window);

If everything was done correctly you should now have access to a baffle() JavaScript function.

3. Using the baffle() and related functions within a Passage.

As stated before Harlowe has limited support for using JavaScript within a project, the following example (based on those on the Baffle web-site) shows one method of using a <script> HTML element within a (link:) to call the once() function on a HTML element that has been assigned a demo-text CSS class.

<div class="demo-text js-demo">The quick brown fox jumps over the lazy dog.</div>

(link: "Once")[{
	<script>
		var b = baffle('.demo-text');
		b.once();
	</script>
}]

 

...