Harlowe + jQuery: Basics
Starting as early as version 1.3, developers have wanted to include and use jQuery, a JavaScript library, with Twine. Many people figured out different ways of doing this to various degrees of success.
Starting with version 1.4, jQuery was an optional library and then, in 2.0, simply became part of how Twine works, an underlining part of its systems and functionality.
To use jQuery now, we just need to use `script` elements.
For example:
<div id="log"></div>
<script>
$( "html" ).keypress(function() {
$("#log").text( "A button was pressed!" );
});
</script>
[[Lots of functionality...]]Using jQuery opens up the ability to use anything jQuery itself supports -- everything from game controllers to advanced animations and even WebVR.
Through writing JavaScript, a Twine story can be expanded to do all manner of advanced things like easier access to requesting data from services and complex calculations.
<div id="log"></div>
<script>
var site = "https://jsonplaceholder.typicode.com/posts/1";
$.getJSON( site, {
format: "json"
}).done(function( data ) {
$("#log").text(data.body);
});
</script>
(This example cheats by using a fake server. However, keep in mind that HTTPS, as what Twine is hosted on, cannot easily make HTTP requests. Secure servers can only speak to other secure servers.)
[[...but new problems.]]While using jQuery can unlock some amazing things, getting it to talk with Twine and, Harlowe in particular, can be tricky and sometimes overly complicated.
Variables are not shared, for example, but expressions like //`$watchVar`// can be found, and value extracted, through looking for elements with the title attribute of the same name.
<div id="changes">[]<changeHook|</div>
<div id="reflection">Click for value!</div>
{
(set: $watchVar to 1)
(live: 1s)[
(set: $watchVar to it + 1)
(replace: ?changeHook)[$watchVar]
]
}
<script>
$( "#reflection" ).click(function () {
$("#reflection").text( $("[name='watchVar']").text() );
});
</script>