Advanced Chapbook Authoring

Authoring Twine
37

(and @HanonO )
The following TWEE Notation based example demonstrates one method for adding business logic to a footer.
note: The Passage named Story JavaScript in the following represents the Story > JavaScript area of your project.

:: Story JavaScript
config.footer.center = "{embed passage: 'StoryFooter'}";

:: StoryFooter
[unless passage.name === 'Final']
The footer's content

:: Start
Welcome to the Test, see the footer?
[[Second]]

:: Second
The Second passage, there should be a footer,
[[Final]]

:: Final
The Final passage, and no footer.

Because Chapbook automatically loads its auto-save each time you test or play a project there are times when the order you implement things is very important. The following explanation is example of this issue…

1: You create a new project and add a reference to the config object to the first Passage…

config.footer.center: "My Footer"
--
Hello world

…and when you Test or Play that project everything is fine.

2: You decide to extend your project by adding a Custom Insert that displays a smiley face emoji, and because you want to use that insert through out your project you define it in its Story > JavaScript area…

engine.extend('1.0.0', () => {
    config.template.inserts = [{
        match: /^smiley face$/i,
        render: () => '😀'
    }, ...config.template.inserts];
});

3: And you update the first Passage to use the new insert…

config.footer.center: "My Footer"
--
Hello world
{smiley face}

…however when you use the Test or Play option this time you see the text {smiley face} instead of the expected emoji, and there is a “Cannot read properties of undefined” related error message in your web-browser’s Console.

4: But if you create another new project and reverse the order of two enhancements (define & test the Custom Insert before adding the config.footer.center reference and testing that) everything works as expected! So what is happening?

The loading of the auto-save seems to be done early in the engine start-up process. And after testing/playing step 1 that auto-save contains a config.footer.center variable, and the parent config object part of that variable reference doesn’t have any of the other properties normally expected on engine’s built-in config object.

note: This can be seen in the web-browser’s Console by typing config in it.

So when the Custom Insert defined in step 2 tries to access config.template.inserts it fails because the ‘global like’ config object no longer has a template property.

And the only way I’ve found to resolve that above error is to delete the relevant entry in my web-browser’s Local Storage. The key will start with chapbook-state-<project-name>

3 Likes