Working with SimpleQBN
SimpleQBN is a generic JavaScript library for creating quality-based narrative (QBN) works. It borrows heavily from other projects like TinyQBN for SugarCube in Twine 2, but is designed for more general Node.js and Web-based projects.
Part 3: Working with Web Projects
While primarily designed for use with Node.js-based projects, SimpleQBN also uses WebPack to package its code for use in web browsers or with hypertext authoring tools like Twine.
Accessing the Web Build
The build folder of the SimpleQBN project always has the latest build, but a build can also be accessed directly through services like jsDelivr.
For example, the WebPack bundle for version 1.2.6 of SimpleQBN would be the following URL using jsDelivr:
https://cdn.jsdelivr.net/gh/videlais/simple-qbn@1.2.6/build/simpleqbn.bundle.jsUsing SimpleQBN in a Browser
The WebPack version of SimpleQBN binds all classes to the global window object. This allows for using each class directly and means code usage in Node.js (when importing everything) is the same as the web browser usage.
<html>
<head>
<title>SimpleQBN Example</title>
https://cdn.jsdelivr.net/gh/videlais/simple-qbn@1.2.6/build/simpleqbn.bundle.js
</head>
<body>
<script>
// Create a deck
const d = new Deck();
// Add a value to the deck's State
d.state.add('example', 1);
// Add a card to the deck
d.addCard("Example Card", ['example-eq-1']);
// Draw a hand (array) of size 1 from the deck of available cards
// based on the internal state and each card's availability.
const hand = d.draw(1);
// Show in the console the content of the card in the first (0) position of the hand array
console.log(hand[0].content);
</script>
</body>
</html>In the above code, SimpleQBN is loaded using the service jsDelivr in the <head> element. In the <body>, the code creates a new Deck, changes its internal State, and then adds a card using the method addCard(). Finally, a hand (array) of size 1 is drawn from the deck and the content of the first (and only) card in the array is shown using console.log().
Using SimpleQBN with SugarCube in Twine 2
Following the example found in the Twine Cookbook, external JavaScript can be loaded in the SugarCube story format in Twine 2. Using the same jsDelivr URL used in the previous example, the SimpleQBN code can be loaded and, when ready, the story moved to a passage using JavaScript to create a Deck and other functionality.
:: StoryTitle
SimpleQBN with SugarCube
:: StoryData
{
"ifid": "F598307B-BD1A-4979-918E-B3BDB3E495DB",
"format": "SugarCube",
"formatVersion": "2.34.1",
"zoom": "1",
"start": "1"
}
:: Loading Message {"position":"100,97.5","size":"100,100"}
Loading...
:: Start {"position":"302,98.5","size":"100,100"}
<<script>>
// Create a deck
const d = new Deck();
// Add a value to the deck's State
d.state.add('example', 1);
// Add a card to the deck
d.addCard("Example Card", ['example-eq-1']);
// Draw a hand (array) of size 1 from the deck of available cards
// based on the internal state and each card's availability.
const hand = d.draw(1);
// Show in the console the content of the card
// in the first (0) position of the hand array
console.log(hand[0].content);
<</script>>
:: UserScript [script]
importScripts(['https://cdn.jsdelivr.net/gh/videlais/simple-qbn@1.2.6/build/simpleqbn.bundle.js']).then(() => {
Engine.play("Start");
});Note: The above code uses the Twee 3 Specification to represent passages in Twine 2 in a plain-text format. The code can be turned into HTML using Twee compilers like Tweego and Extwee. (To quickly convert a HTML file into Twee, the tool TweeConvert can be used.)
Digital Ephemera 