I've used the following to split a long piece of text into two passages:
{reveal link: "Sit still. Don't fidget.", passage: "Merlin 1.1"}
But apart from the first paragraph appearing first, every other paragraph is in reverse order, i.e. the second paragraph has moved to the bottom, the third just above it etc. and the last paragraph appears just below the first.

Expected behavior
Should show paragraphs in the order written.

App version
On Twine 2.3.5 using Chapbook 1.0.0

Environment
Windows 10 1903 x64

Right now there doesn't seem to be any place to assign global default variables that get set every time you load the game. This means you have to assign these variables in the starting passage, which in turn makes it hard to use the "Test story starting here" feature to begin the game at a particular passage, since any variables are likely to be undefined.

SugarCube gets around this by having a special StoryInit passage that always gets interpreted however you start the story. This could be very useful in Chapbook as well.

Describe the bug
If you set config.style.page.link.active.lineColor, then Restart throws a Javascript Error:

[Error] Error: Only strings can be parsed as colors.
	(anonymous function) (header.html:66:51403)
	p (header.html:16:34428)
	(anonymous function) (header.html:16:32367)
	(anonymous function) (header.html:16:39113)
	(anonymous function) (header.html:16:36609)
	(anonymous function) (header.html:10:3541)
	forEach
	e (header.html:10:3388)
	(anonymous function) (header.html:10:3595)
	forEach
	e (header.html:10:3388)
	(anonymous function) (header.html:10:3595)
	forEach
	e (header.html:10:3388)
	(anonymous function) (header.html:10:3595)
	forEach
	e (header.html:10:3388)
	(anonymous function) (header.html:10:3595)
	forEach
	e (header.html:10:3388)
	(anonymous function) (header.html:10:3595)
	forEach
	e (header.html:10:3388)
	v (header.html:10:3606)
	d (header.html:16:35932)
	(anonymous function) (header.html:16:36134)
	(anonymous function) (header.html:16:39113)
	(anonymous function) (header.html:16:36609)
	(anonymous function) (header.html:10:18718)

To Reproduce
Create a twee file containing the following:

::Start
config.style.page.link.active.lineColor: "gray"
--
Test one two.

On the resulting Start page, click the Restart link at bottom right.

Expected behavior
I expected it to restart the game!

Stories and screenshots
If at all possible, please attach a story file demonstrating the problem. If applicable, add screenshots to help explain your problem.

Environment
tweego and epiphany-browser on Ubuntu Linux 20.04

Additional context
Add any other context about the problem here.

Super excited to see the release of Chapbook. I've jumped straight into developing an interactive book using Twee and Chapbook.

The biggest stand-out issue for me is that currently the use of undefined variables (booleans in particular) is not allowed. We had a lively debate on this issue today on the Twine discord.

Personally, I would like to see [if playerHasMagicMirror] return false even if the variable has not been defined. I have been planning to have a lot of variables tracking unique objects (playerHasWhiteKey) unique states (playerHasKilledTheKing), and also things like player traits (playerIsCannibal, playerIsIntelligent). These could be referenced many passages apart from one another.

Not nearly as important, but if possible I would also like to see integers return 0 and strings return '' if interrogated before they have been defined.

The design goal I am targeting is "Forgiving of Mistakes". If I must declare variables at the top of the file each time I use them (I'm writing a larger book with a lot of variables) there'll be a large block of variables all setting "false false false". Additionally, at the moment, accessing an undefined variable crashes out the story entirely.

Story created with chapbook doesn't render on iPad Safari. I'm referring to default Cloak of Darkness example. It's just blank page with page title. Alternatively, story created with Harlowe is rendered fine.

Describe the bug
{back link, label: '"I couldn\'t possibly comment," he replied.'}
Instead of creating a link, it just displays the text like this:
{back link, label: '"I couldn't possibly comment," he replied.'}

It appears the \ is not making the link ignore the ' in couldn't.

Environment
Windows 10 1903 x64, Chrome, Edge and Firefox

Indented paragraphs can be achieved by adding article p { text-indent: 2em; } to a story's stylesheet.

It would be preferable for paragraph indentation to be more easily accessible.

Describe the bug
The guide specifies that the config.style.pageStyle variable can be used to change the text-box border effect around the text. However, the variable should be config.style.page.style.

Place in the guide: https://klembot.github.io/chapbook/guide/customization/page-style.html

Additional context
Thank you to Greyelf on the Twine Discord for figuring this out :)

Is your feature request related to a problem? Please describe.

I'd like to use input values in numeric calculations.

How many coins will you wager?

{text input for: 'wager'}

Now I have, e.g.,

// State:
wager: "5"

and after

winnings: wager + 5

I have

// State:
wager: "5"
winnings: "55"

Describe the solution you'd like

{text input for: 'wager', as: 'number'}

would convert to number, or (better IMO)

{number input for: 'wager'}

would render a number input, good for users on touch devices.

Describe alternatives you've considered

wager: Number(wager)
winnings: wager + 5

This is not beginner-friendly, you have to remember to do it everywhere you use the value, and it still leaves the original string value in History.

Describe the bug
Right now, there's no functionality to stop playing any ambient sound.

To Reproduce
{ambient sound: ''} works but displays the modifier source.

Expected behavior
Either use {ambient sound: ''} correctly, some reserved word for no sound, or add a second insert.

Stories and screenshots
n/a

Environment
n/a

Additional context
n/a

Describe the bug
If two consecutive lengthy pages of text are linked from one to another by a fork at the bottom, the second page loads at the bottom of the page instead of the top.

To Reproduce
Create 2 consecutive pages of lengthy text, longer than the height of your browser, such that scrolling is required. Put a fork at the bottom of the first page that points to the second page. Play the story and click the fork.

Expected behavior
I expect each page to load at the top, thus preventing spoilers and ensuring no text gets missed by the reader.

Environment
Windows 10. Firefox 75. Twine 2.3.8. Chapbook 1.1

Describe the bug
If a font size includes a decimal number in a variable like config.style.page.font, Chapbook ignores the decimal part and the unit. For example, 1.25rem becomes 1px.

To Reproduce
In any passage, set a font variable with a decimal number.

config.style.page.font: "Arial/serif 1.25rem"

That sets the font-size of #page to 1px.

Expected behavior
The font-size should be set to 1.25rem.

Stories and screenshots

:: Start
config.style.page.font: "Arial/serif 1.25rem"
--

Test.

Environment
Irrelevant in this specific case.

Additional context
The regex /\b\d+(ch|cm|ex|in|mm|pc|pt|px|r?em|vh|vmax|vmin|vw|%)?/i in the parseFont(source) function has 2 matches on 1.25rem. Both 1 and 25rem matches.

Describe the bug
When using Random lookups, there is a "random" not defined, error. I don't know if all random lookups fail with this, but I have seen it clearly with random.d4.

To Reproduce
Use the 1.1.0 format.js and use one of the random lookups.

Expected behavior
It should return a random value of the expected range. Or if for some reason it can't it should give some error which can be better handled.

Stories and screenshots
https://jigmedatse.itch.io/lets-build-a-chapbook-using-tee-wee though this is using 1.0.0 to get it to work...

Environment
This is on Linux with Firefox 75.0

Additional context
this is failing no matter how I've tried to build it. Including in the Twine editor.

Is your feature request related to a problem? Please describe.
I would like to use tags to perform certain duties programmatically using the [JavaScript] modifier. (One duty, for example, is looking for tags existing within a certain namespace and using those to automatically create output of who the narrator of the current passage is for display in the header.) Since there is no way to access the list of tags currently, this can't yet be done.

Describe the solution you'd like
A variable should be added located at passage.tags that exposes the tags of the current passage.

Describe alternatives you've considered
I have considered leaving a naive implementation of my narrator header in place that simply reads a variable, but it's prone to errors; since variables don't unset themselves at the beginning of each passage, if a passage accidentally forgets to set the variable, it will simply use the one from the previous passage, whereas with a JavaScript based solution using tags, we can display an error when no tag from the appropriate namespace (or one not in our pre-approved list) appears.

Additional context
This would, of course, be useful for other uses outside of my specific use case -- anyone who wants to read the tags of their passages from within their story would appreciate this feature.

Describe the bug
If you create an object inside of an object using the dotted vars syntax in the vars section, then try to set the value of the nested object's members to 0, it causes a recursion error.

To Reproduce
Code As Follows:

player: {}
player.inventory: {}
player.inventory.number_of_swords: 0
--

{player.inventory.number_of_swords}

Output: ```Error: too much recursion

```

Note That The Following Does Not Cause This Issue:

player.inventory.number_of_swords: 0
--

{player.inventory.number_of_swords}

Expected behavior

Output: 0

Stories and screenshots
EasyD6 Adventure.txt

Environment
Windows 10 64bit, Firefox 73.0

Describe the bug
This is something I have discovered. I'm not entirely certain where this bug exists, but when I use a variable display of {now.datestamp} it displays it like that rather than a datestamp.

To Reproduce
I have looked to see if I can get this to work, or if I did something wrong (and I might have), but so far I don't see what I might be doing wrong.

Expected behavior
I expect this to display a datestamp.

Stories and screenshots
A version with this not working hasn't been published yet, but I expect this to be published in the next little while (maybe before the day is done?) at: https://jigmedatse.itch.io/lets-build-a-chapbook-using-tee-wee

Environment
I have been working with this using the Tee-Wee editor on a Gentoo linux system. I am testing the compiled code in Firefox 75.0...

Additional context
This is using Chapbook format 1.1.0 micro. I will test in Twine and see if I get different behaviour.

I'm running into a thing where ambient sound won't play until after I've switched to loading a second ambient sound or until I've restarted the game using the built-in "restart" button. (Edit: this may just be a Chrome issue. It works in Firefox and in Edge.)

There are a lot of files being loaded, so I thought this might just be a buffering problem, but no matter how long I hang around on the first screen it doesn't load the first ambient sound, and it does load the second ambient sound no matter how quickly I click through to the screen that loads it.

Example file

Clicking through to "Remember Who You Are" will load the second ambient sound.

All audio files are in the correct directory, and restarting the game causes the initial file to load properly. (Indeed, I switched the order in which the ambient sounds load, and experienced the same problem with the different file set to load on the first screen, so it doesn't seem to be a problem with file naming or a typo in my code.)

I also tried manually running the ambient sound with .playing:true but it didn't make a difference.

Describe the bug
'setup is not defined' when load google adsense js in chapbook

To Reproduce

• usually the google adsense js code is like this, for user to embed into html directly

<script data-ad-client="ca-pub-xxx" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

• reference code is from here: "Importing External JavaScript": Chapbook (v1.0.0)
• add pre-load script, especially the line of "newScript.data-ad-client = 'ca-pub-xxx';"

// The following code is used from MDN for
// dynamically importing scripts
// https://developer.mozilla.org/en-US/docs/Web/API/HTMLScriptElement#Dynamically_importing_scripts

window.setup = {};

setup.loadError = function(oError) {
  throw new URIError("The script " + oError.target.src + " didn't load correctly.");
};

setup.loadScript = function(url, onloadFunction) {
  var newScript = document.createElement("script");
  newScript.onerror = setup.loadError;
  if (onloadFunction) { newScript.onload = onloadFunction; }
  document.head.appendChild(newScript);
	newScript.async = true;
        newScript.src = url;
	newScript.data-ad-client = 'ca-pub-xxx';
};

• then load adsesne js in chapter

[JavaScript]
setup.loadScript("https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js", function(){});

Expected behavior
google adsense should be loaded successfully

Stories and screenshots

Environment
Mac OS 10.14.6
Browser Chrome 80.0.3987.132 (64bit)

Additional context

Describe the bug
Changing 'config.style.page.link.active.font' at the start of a story breaks any restart link, giving the error: "An unexpected error has occurred. TypeError: f is undefined".

To Reproduce
Create a new file in chapbook story format. Test (open backstage). Go to Style > Page > Active Link font, and write any font in that box. Click the restart link on the bottom right footer.

OR

Add config.style.page.link.active.font: 'any font' to the variable section at the start of a story. Open story or test. Click restart link.

Expected behavior
Story should be restarted normally.

Environment
Using Firefox 75.0 on Windows 10. Using Chapbook 1.1 on the latest release of Twine

Additional context
I'm very new at this so my apologies if I am missing something obvious.

Hello, not sure if this is a bug. I've looked through the docs, the cookbook and even your source code... Nowhere does it say how do manipulate a list.

If I define an array like this.

myList: []

…then on the next page add to it like this...

myList: myList.push( "banana")

The backstage tells me that myList is 1

…or If I try this…

myList: myList + "banana"

… and then add an apple, backstage tells me myList is "bananaapple"

What's the correct way to add items to an inventory like list. I appreciate I may need Javascript to display the contents of the list, but can I use the passage header to set and get and delete items from an Array. It's so tantalising because underneath my variable in the backstage is the "trails" variable, which is a list of strings, exactly what I want.

I'd prefer not use a Javascript engine state simply because I will be teaching this to students... and that might come later.

Thank you.

Is your feature request related to a problem? Please describe.
Twine-style games often have links within passage paragraphs that highlight something of particular focus (perhaps an object or person, a thought, memory, or emotion) but which, when clicked on, don't lead to new choices: instead the new passage simply describes the linked "keyword" in more detail and then allows the player to go back to the originating passage. It is a nice touch in such cases to be able to "deactivate" those contextualizing links once the player has clicked on them once, to let the player focus on whichever choices the player still has left in the original passage.

Describe the solution you'd like
Make it simpler for a game author to write a link that can only be used once, or only a specified number of times, by use of an "expiring link" insert. Format:

{expiring link: 'passage title', label: 'link label', uses: --number of times the link can be followed--}

Similar format to manual links.

"label" parameter is optional. Label is equal to passage title if label parameter is not used.

The optional "uses" parameter is where you can specify how many times the link can be followed before it becomes plain-text. The default number of allowed uses is 1.

Describe alternatives you've considered
This would simply be an enhancement. I used [if] and [else] and a variable to the same effect (I did not try to make the link usable more than once).

I have previously done this with Sugarcube, but wonder if I can add jQuery UI elements, like sliders to Chapbook.

In my Javascript file I have...

`
var script = document.createElement('script');
document.head.appendChild(script);
script.type = 'text/javascript';
script.src = "https://code.jquery.com/jquery-1.12.4.js";

//jQUERY UI
script.onload = function(){
console.log("jQuery loaded");
var ui = document.createElement('script');
document.head.appendChild(ui);
ui.type = 'text/javascript';
ui.src = "https://code.jquery.com/ui/1.12.1/jquery-ui.min.js";
ui.onload = function(){
console.log("UI loaded");
}
}`

..which all loads fine, but I don't seem to be able to add < chars to my page, which is like this...

`
slider: "

"

Let's Count Example

[Javascript]
write(engine.state.get("slider") );

// Accessing jQuery, this works fine.
write("There are : " + $("p").length + " p tags on this page");

write('2 + 2 is ' + (2 + 2) + '.\n\n');

for (let i = 1; i <= 10; i++) {
write(i + ',');
}

//var $div = $('

Describe the bug
Using lookup variables of the random object is causing issues

To Reproduce
//This code:

rnum: random.d4

ABC

//Produces the following error:
//An unexpected error has occurred.

//Uncaught TypeError: Cannot read property 'd4' of undefined"

//Similarly, this code produces an error

[if random.coinFlip]
Heads!

[else]
Tails!

//This code does not:

{random.d4}

Expected behavior
A clear and concise description of what you expected to happen.

Stories and screenshots
If at all possible, please attach a story file demonstrating the problem. If applicable, add screenshots to help explain your problem.

Environment
I'm using a PC with Windows, and testing on a google chrome browser

Additional context
Add any other context about the problem here.

Is your feature request related to a problem? Please describe.
Users may want to style text, etc., inside {cycling link} like they can outside it.

Describe the solution you'd like
Run text options in {cycling link} through render(). Needs a special case where render output contains a link itself -- this will conflict with the cycling link.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

Describe the bug
Creating nested dotted vars in the vars section does not create the related container object.

To Reproduce
Code Block As Following:

stats.str: 1
stats.dex: 2
stats.con: 3
stats.int: 4
stats.wis: 5
stats.cha: 6
--
[JavaScript]
write(JSON.stringify(stats));

Output: {}

Expected behavior

Output: {“str”:1,”dex”:2,”con”:3,”int”:4,”wis”:5,”cha”:6}

Note That:

stats: {}
stats.str: 1
stats.dex: 2
stats.con: 3
stats.int: 4
stats.wis: 5
stats.cha: 6
--
[JavaScript]
write(JSON.stringify(stats));

Creates the correct output.

Stories and screenshots
See Attached Story File, renamed to .txt as github does not support html upload
EasyD6 Adventure.txt

Environment
Windows 10 64 Bit, Firefox 73.0

Additional context
Add any other context about the problem here.

Describe the bug
This code in story JS doesn't work:

config.style.page.font = "Arial 32"

However, putting it in the vars block of the first passage does.

Expected behavior
Should work in both cases.

Stories and screenshots
n/a

Environment
n/a

Additional context
Add any other context about the problem here.

Describe the bug
Editing individual values in the Style tab doesn't cause the copy/paste block to update.

To Reproduce
Test a story and make changes to the page section under Style. Note that the change isn't updated in the block above.

Expected behavior
It should update.

Stories and screenshots
If at all possible, please attach a story file demonstrating the problem. If applicable, add screenshots to help explain your problem.

Environment
Confirmed on both Chrome and Safari.

Additional context
Add any other context about the problem here.

Describe the bug
When a story that contains custom inserts is restarted, the custom and regular inserts fails with JavaScript errors.

The default restart link in the footer will be displayed as {restart link}, since the restart insert is now broken.

Restarting the browser or refreshing the page doesn't remove the errors, it's necessary to clear the browser cache and local storage.

An error occurred while rendering "{restart link}": e.match.test is not a function

An error occurred while rendering "{
        match: /^smiley face$/i,
        render: () => '😀'
    }": e.match.test is not a function

To Reproduce

Create a story with at least 2 passages, a custom insert and a restart link. Follow a link to a different passage than the initial passage, then click on a Restart link.

Expected behavior

Both the custom and regular inserts should still work as expected after a story reset.

Stories and screenshots

The following story can be used to reproduce the issue.

Click on the link "Second passage", then click on the "Restart" link in the footer.

:: Start

The first passage. Go to [[Second passage]].

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

:: Second passage

The second passage.

Environment

Reproduced on Linux with Firefox and Chrome.

Additional context

The issue has been reproduced with many different custom inserts. The one in the example above is an example from the Chapbook guide.

{no ambient sound} displays an error if there are no ambient sounds playing.

I want to be able to close off all sounds when returning to my Start page.
Ideally, I would prefer to be able to have a tag that stopped a sound on leaving a passage.

Warning: An error occurred while rendering "{no ambient sound}": Cannot convert undefined or null to object

Describe the bug
I cannot change the page transitions as described here

To Reproduce

config.page.transition.name: 'none'
--
passage

Expected behavior
This passage and all following passages use no transition animation, the new text immediately replaces the old

Environment
MacOS 10.14.5, Twine 2.3.2, Chapbook 1.0.0 beta 2

Chapbook should use the IFID if available as key, not the story name, so that two stories with the same name don’t collide (most likely during testing).

Describe the bug
The header and footer font settings described in the documentation have no effect.

To Reproduce
Create a story that sets config.style.header.font like so:

::Start
config.style.googleFont: '<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@700&display=swap" rel="stylesheet">'
config.style.header.font: 'Orbitron 18'
config.style.footer.font: 'Orbitron 18'
config.header.center: "Test one two three"
--
Test one two

Expected behavior
I expected the header and footer to be Orbitron, instead of the default.

Stories and screenshots
If at all possible, please attach a story file demonstrating the problem. If applicable, add screenshots to help explain your problem.

Environment
I am using tweego on Ubuntu Linux with Chapbook 1.1.1

Additional context
Add any other context about the problem here.

At the top of my page I have

`chosen:random.d6

--

You rolled a {chosen}

[if chosen === 1]
One.

[if chosen === 2]
Two.

[if chosen === 3]
Three.

[if chosen === 4]
Four.

[if chosen === 5]
Five.

[if chosen === 6]
Six.`

I get...

`An unexpected error has occurred.

Uncaught TypeError: Cannot read property 'd6' of undefined

Stack trace:
TypeError: Cannot read property 'd6' of undefined
at Object.eval [as value] (eval at (file:///private/var/folders/h5/m5x7b1x90b5801n_20mqcf540000gn/T/5f103c67-0401-4eb0-bc4d-d61651064e53.html:57:31787), :3:16)`

Describe the bug

If the "embed passage" insert is used in a conditional branch, any assignments and declarations in the embedded passage execute whether or not the branch with the embedded passage renders.

To Reproduce
See attached file

Expected behavior
Assignments in embedded passages should only execute if the passage is rendered.

Environment
macOS 10.14.5

Attachments
I changed the file extension to .txt because Github doesn't allow attaching .html files

embedded passages in unrendered branches.txt

Hello,

I discovered Chapbook and think it is beautiful in many ways.

For a student project I would like to use Chapbook with Twine-js. I can get Twine-js running, but it doesn't let me add new Story formats to it. If I add it, under-the-hood, it doesn't recognise it as a story format.

Can chapbook be provided as a folder that can be dropped into Twine-js? Like this...

Chapbook-1.0.0
format.js
icon.svg
LICENCE

...at the moment, somewhere in the repo there is just a format.js file.

Thanks.

I would like to individually configure config.footer.left.transition.name and config.footer.right.transition.name, so that I can use the left footer to show the name of items in a story and have that text fade in sync with the body text, while the right footer appears to remain static.

In the current version, setting the footer transition to crossfade causes the {restart link} to fade out and back in every time a new passage is printed. This is undesirable.

Describe the bug
Spam-clicking cycling link in Firefox causes excessive memory usage and slowdowns.

To Reproduce

1. In the latest (stable) version of Firefox, make a cycling link such as
   {cycling link for: "_.", choices: ["AAA","BBB"]}
   (An empty passage with JUST this Cycling link works)

2. Click on the cycling link multiple times, as fast as possible. Keep an eye on memory usage.

Expected behavior
Clicking multiple times on a cycling link doesn't cause performance issues.

Stories and screenshots
{cycling link for: "_.", choices: ["AAA","BBB"]}

Environment
Firefox 72.0.2, Windows 10 64 bits

Additional context
N/A

Is your feature request related to a problem? Please describe.
Authors may use variable names like location which conflict with variables in browser scope, which can cause mysterious errors.

Describe the solution you'd like
I think a check on initial set for existence of the property on window but the key does not exist in state yet should do it.

If I add...

{no ambient sound} to my home page... I get...

Warning: An error occurred while rendering "{no ambient sound}": Cannot convert undefined or null to object

I want to fire off arbitrary sounds as I go to various passages, but stop them on certain pages.

IDEALLY, I'd like to be able to say, {FADE-OUT-AS-YOU-LEAVE-PASSAGE}... that would make more sense... I don't want to have to "manage" the creation of variables, isSoundPlaying, type thing, for what is a basic feature... it'll get too complicated.

Thanks

Describe the bug

When playing through the Cloak of Darkness demonstration game, it's possible to get stuck.

To Reproduce

• From the beginning, click "Begin"
• Enter the Opera House
• Go west to the cloak room
• Examine the one remaining hook
• Hang your cloak on it
• Examine the one remaining hook again

Expected behavior

A message like "It's just a small brass hook, with a cloak hanging on it", followed by a "back" link to return to the cloak room.

Stories and screenshots

If at all possible, please attach a story file demonstrating the problem. If applicable, add screenshots to help explain your problem.

Instead, I get a description of the empty hook, with a no way to return:

Unlike Harlowe, Chapbook doesn't seem to automatically provide an undo button.

Environment

Firefox Nightly (72.0a1) on Linux.

Additional context

I understand this isn't strictly-speaking a problem with Chapbook itself, but it seems like this changing-the-hook-description problem is the kind of thing that crops up a lot in IF, and it would be useful for the Cloak of Darkness demo to demonstrate an idiomatic way of handling it.

Is your feature request related to a problem? Please describe.
My problem is that I want to use Chapbook only if it supports Firefox.

The current way of knowing which browsers are supported by Chapbook appears to be the Babel browserslist. That list currently includes only 3 browsers: Chrome, IE 11 and Safari for iOS.

The list of browsers that match iOS > 9, IE 11, >10% can be viewed on Browserl.ist. The global coverage is 74.08%. Many browsers with a usage that is greater or equivalent to IE 11 are excluded, like Firefox, Edge, Safari on Desktop and Opera.

I suppose that in practice, the fact that IE 11 is on the list will make Babel generate JavaScript compatible with Firefox and the other browsers.

Describe the solution you'd like
An easy way of knowing which browsers are supported by Chapbook. That could be done by adding browsers in the Babel configuration or by adding a browser list in the Chapbook documentation. I would personally want Firefox to be supported, since it's my main browser.

Describe alternatives you've considered
Not relevant.

Additional context
If we set babel-loader in debug, we can see during the build of Chapbook that the list of supported browsers is the following one.

babel-preset-env: `DEBUG` option

Using targets:
{
  "chrome": "72",
  "ie": "11",
  "ios": "9.3"
}

So that if you are poking around in the story format dialog, you see it.

Encountered a bug on Chapbook, reported it to klembot on the Twine server, reposting it here.
The game retains the scroll position when displaying new pages. Aka if someone clicks on a link at the bottom of the page then they'll be taken to the bottom of the next page.

Apologies if there's some way to do this that I haven't seen, but it isn't described in the guide.

Is your feature request related to a problem? Please describe.

I cannot find a way to define a function to use later. For example, if I write a JavaScript section in a passage that defines a function:

:: Start
…
[JavaScript]
function advanceTime() {
  timeOfDay += 2;
  if (timeOfDay >= 6) {
    timeOfDay %= 6;
    dayOfWeek = (dayOfWeek+1)%7;
  }
}

[cont]
…

It seems to crash if I call it later, saying the function is undefined:

You go to sleep.

[JavaScript]
advanceTime(); /* Crashes here */

[cont]
…

If I add it to the global state with engine.state.set, it's not a function (typeof returns undefined), and trying to call it results in an error.

I would like the ability to do this as it'd make dynamic tasks involving JavaScript a lot easier if I could define functions.

Describe the solution you'd like

Either allow the above to work somehow, or allow me to use a JavaScript passage (something like including a .js file in my source directory when using Twee), or add some other way to add library functionality.

Describe alternatives you've considered

• Inlining all my function calls. It's messy, but it works for short functions.
• Copy-pasting a function definition block everywhere I need the function. Crap solution, really.

Describe the bug
Whenever I test my WIP story in Chapbook 1.0.0-beta2 using Twine 2.3.2 for Windows, I can see the history populating in the History tab of the Backstage. However, if I try to click the back button for any history entry, it always goes back to the beginning of the story instead.

Further examination and attempts to reproduce with smaller stories have produced other results. Sometimes the back buttons go back to the preceding entry in the list instead of the one I clicked on. Other times they go back to the beginning. When they do go back to the beginning this way, the start passage is referred to with an empty string ("") instead of its name.

The differentiating factor between stories that exhibit and that do not exhibit the issue is whether the story uses state. I can confirm it always occurs if the start passage sets state. I have never managed to reproduce it without using state. Possibly it only affects stories that set state in the start passage; I have not checked whether it occurs if state changes only occur in non-start passages.

On a possibly-related note, the start passage does not appear in the history list at all once I have clicked a link away from it. It does appear (named "") if I click to the History tab right after restarting the story, but once I follow a link away, it is replaced with the next passage I visited.

To Reproduce

1. Create a new story.
2. Have the start passage set some state (even testtest: true worked for me) and link to a second passage.
3. Have the second passage link to a third passage.
4. To really explore this, I found it useful to have the third passage link to a fourth passage.
5. Click the 🐞Test button
6. Switch the Backstage to the History tab.
7. Click all the links, and watch how the History changes.
8. Now try using the back buttons in the History tab and watch if you go to the page you expected.

Expected behavior
I expect clicking the back button next to a History entry will take me to that entry, including that specific passage. This is the behavior when state is not used. When state is in use, I expect the state to be in the form it was at that point in history when I go back.

Stories and screenshots
I have attached a story file with the minimum possible repro, Verify.zip.
I have also attached a story file with a stripped-down version of my WIP that demonstrates the "always reset the story" behavior I have not been able to otherwise reproduce, WIP_Stripped.zip.

Environment
Windows 10, Twine 2.3.2, Chapbook 1.0.0-beta2

Describe the bug
If a custom insert is declared earlier in a passage, it should work if it is used later in the passage. This would allow for nice code encapsulation, e.g. if an insert is only used in one passage.

I'm calling this a bug report not a feature request because it seems like an implementation detail, not a design decision.

To Reproduce

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

Expected behavior
😀

Actual behavior
{smiley face}

Environment
MacOS 10.14.5, Twine 2.3.2, Chapbook 1.0.0 beta 2

Is your feature request related to a problem? Please describe.
I want to style some passages in a similar way easily, based on their type.

In some story their type is a location, in other a time period (Medieval, Renaissance, Modern Ages), or architectural style (Roman, Art Nouveau), all with a matching color scheme, font and text/boxes decorations, background image or more...

Styling each passage manually is repetitive and error prone. Including a styling passage is possible but not nice looking.

Describe the solution you'd like
I would like the passage tag to enable styling.

Tag a passage "medieval" or "art-nouveau", and include elsewhere the definition for all these different styles, in a single place easy to update.

CSS based classes is an easy option, others are welcome.

Describe alternatives you've considered
Including a generic styling passage with some variable triggering the inclusion of some styling command is possible... but setting the variable manually in each passage is not nice.

Additional context
all to make visual novel more visually dynamic.

Describe the bug
Please enter a clear and concise description of what the bug is.
The [after time] block when used with [append] in combination of [javascript] blocks will produce an error.
Using [append] with [javascript] is fine and works as intended, it only comes when chaining it with a delay.
compatibility
To Reproduce
Just place the following code in a Passage and run it:

[after 500]
[append]
[javascript]
write("Appended Text.");
[continued]

Expected behavior
Well that it simply would run the code at a delayed time.

Stories and screenshots
Test Story:
Chapbook Delay Append Javascript Bug.zip
Passage Screenshot:

Error Screenshot:

Environment
Only tested with Windows 10 and Firefox so far.

Describe the bug

When setting config.body.transition.name to 'none', the passage text is broken up into three columns (see screenshot below).

As soon as I switch the transition to 'crossfade' or 'fadeInOut', the columns disappear and the passage appears as it should.

To Reproduce

To reproduce the bug, include this line in the variable section of the Start passage:

config.body.transition.name: "none"

Expected behavior

I expect the transition between passages to be immediate, rather than fading or a crossfade. Indeed, the transition does change to none, but the columns also appear.

Stories and screenshots

Here is the complete code for the start passage:

config.header.center: "Midday"
config.body.transition.name: "none"
--
Pretty exciting day! The sun is shining, you got your new loafers on, and it's your first day of work!

In your right hand you've got a briefcase, because, it's your first day of work!

You're standing on the street, outside your new office, admiring the facade spelling out your employer's name.

It's the {cycling link for: 'Company_Name_1', choices: ['Human', 'Species', 'European']} {cycling link for: 'Company_Name_2', choices: ['Betterment', 'Advancement', 'Purity']} {cycling link for: 'Company_Name_3', choices: ['League','Board','Organization']}


You head to the [[Office]].

Environment

This appears on Windows, running the Twine 2.3.3 desktop client. It appears when I open the story in both Firefox and Chrome.

Describe the Bug

If you put more than one paragraph in a div, using two line breaks to separate them as you would anywhere else in the passage, anything after the first paragraph will be formatted with markdown.

To Reproduce

In a passage put two lines of text in a div separated by one line as shown below:

<div>This is a **paragraph**

This is also a **paragraph**</div>

Running this passage should reproduce the described issue.

Expected Behavior

I expected all of the content of the div to be left as it was and not formatted through markdown.

Stories and Screenshots

A simple story showing this behavior

Environment

Microsoft Windows [Version 10.0.17134.885]

Additional Context

In the guide for getting started with Chapbook it says:

Markdown has a quirk where if you enter Markdown code inside of an inline element such as <b> or <span>, it will convert it to HTML. But in block elements such as <p> or <div>, it won't.

This explains why the first paragraph of a block element isn't formatted with markup, but it seems like subsequent paragraphs being styled is unintentional.