Working with SimpleQBN: Part 3: Working with Web Projects

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.js

Using 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.)

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.