I have an inventory/notes section in my game keeping track of everything the character has picked up. Currently it just appears as a sidebar within each section, but I'd like to be able to hide it by default and have the panel toggle open/closed or slide in/out on click. I'd normally do it with a bit of javascript, but any script that uses (document).ready doesn't seem to work in Squiffy. Has anyone had any success doing something similar?

(There's a game called Choice of Zombies listed in the textadventures.co.uk list which has a fantastic slide-in stats/inventory panel, - it's not Squiffy, but I'd love to be able to do that with my inventory!)

Do you mean $(document).ready? It works fine for me.

Though all the Squiffy examples I'd seen use jQuery instead of $, so I had assumed the shorthand option was disabled for some reason. That means I can write shorter code now :)

Hmm, any idea then why the below doesn't work for me in Squiffy? (Button and box appear but the button doesn't toggle the box in and out - lifted from the second example at https://www.tutorialrepublic.com/faq/how-to-create-jquery-slide-left-and-right-toggle-effect.php)

$(document).ready(function(){
$(".slide-toggle").click(function(){
$(".box").animate({
width: "toggle"
});
});
});
});

<button type="button" class="slide-toggle">Slide Toggle</button>
<div class="box" style="float:left;overflow:hidden; background: #f0e68c;">
<div class="box-inner">Lorem ipsum dolor sit amet...</div>
</div>

I assume you mean:

    $(document).ready(function(){
      $(".slide-toggle").click(function(){
        $(".box").animate({
          width: "toggle"
        });
      });
    });

<button type="button" class="slide-toggle">Slide Toggle</button>
<div class="box" style="float:left;overflow:hidden; background: #f0e68c;">
<div class="box-inner">Lorem ipsum dolor sit amet...</div>
</div>

The issue here is that the JS is being run before the elements have been added to the page. There is no .slide-toggle for the event to be attached to. You'll need to bind the event to the document, with a selector, like this:

    $(document).ready(function(){
      $(document).on('click', '.slide-toggle', function(){
        $(".box").animate({
          width: "toggle"
        });
      });
    });

<button type="button" class="slide-toggle">Slide Toggle</button>
<div class="box" style="float:left;overflow:hidden; background: #f0e68c;">
<div class="box-inner">Lorem ipsum dolor sit amet...</div>
</div>

Although I would comment that there is no reason to be using $(document).ready here. Squiffy waits for the document to be ready before it even runs your code, so this basically does nothing. It would be just as easy to do:

    $(document).on('click', '.slide-toggle', function(){
      $(".box").animate({
        width: "toggle"
      });
    });

<button type="button" class="slide-toggle">Slide Toggle</button>
<div class="box" style="float:left;overflow:hidden; background: #f0e68c;">
<div class="box-inner">Lorem ipsum dolor sit amet...</div>
</div>

(and now I realise I've done the same thing in some code I posted in another thread, so probably need to change it…)

I see - well, by that I mean 'I don't understand jQuery nearly well enough but I can paste your code and it works and I bow to your knowledge' : ))

Naturally it's thrown up some further questions!

• I don't seem to be able to put this in a section eg [[inventory]] and then call it into the relevant passages with {inventory} - the script doesn't work. It does if I put it in the master section, but there are some sections where I don't want it, and the master section puts it everywhere!
• That leads to my second problem, which is that when I have my div.box in multiple sections all displaying consecutively, the toggle button opens and closes all of them (with some funky repeated opens/closes). Is there a way I can make those buttons target only within their own section, so only the inventory panel of the current section opens/closes?

Bumping this in case someone has an inventory solution!

Does each section need its own inventory section? I've only seen a box that slides off the side like that in a game where it doesn't move with the text. In which case you'd have a single inventory pane, created at the start of the game, and each section after that just changes its contents.

Not sure I understand what you're trying to do with it here.

I think that's what I'm trying to achieve - having the inventory pane slideable in and out regardless of what section the user is in - but I couldn't see a way to have just one instance of it updating as the player progresses.

Currently I have a sidebar which shows the inventory at all times, called individually in each section with {inventory}. Of course that means the div with the inventory in its appears in each section. But each instance doesn't update itself with later pickups, so I couldn't see a way of having an inventory panel called just once with {inventory} that would stay current.

I also don't know how to have a user go into their inventory and use, for example, a healing item without losing their place in the main flow of the game! (I can give them the option to use an item, but I'd rather they could use stuff ad hoc.)

I can do the javascript, but not sure about the Squiffy bits.

I think in the first section, you'd want to add the HTML. Something like:

<button style="position: fixed; top: 6px; left: 2px; display: hidden;" id="showinv" onclick="$('#inventorycontainer').animate({left: 2},500);" type="button">Show inventory</button>
<div class="sidebar" id="inventorycontainer" style="background-color: white; position: fixed; left: 1px; top: 4px; bottom: 4px; width: 20%; overflow-y: auto; border: 1px double blue;"><button style="position: absolute; top: 2px; right: 2px;" id="hideinv" onclick="$('#inventorycontainer').animate({left: -$('#inventorycontainer').width()}, 500);" type="button">Hide inventory</button></div>
<style>
.inventoryitem {
  display: block;
  border: 1px solid grey;
  left: 2px; right: 2px;
}
</style>

Edit: I omitted the first ``` so that I could test the JS on the forum preview. What I didn't expect was that it randomly submitted my post. Sorry if that was confusing.

Then in any section which adds an item to the inventory, you'd do something like:

    setTimeout(function () {
      $('.inventoryitem').last().appendTo('#inventorycontainer').click(function () {
        // This should run the javascript and display the text for a section without actually going there; and then remove this button from the inventory box
        squiffy.story.sections['healingpotion'].js();
        squiffy.ui.write(squiffy.story.sections['healingpotion'].text);
        $(this).remove();
      });
    }, 100);

<div class="inventoryitem"><a>Healing potion</a></div>

If you want a section not to have an inventory pane at the side, you do:

$('#showinv, #inventorycontainer').hide();

and when you want them back again, you do:

$('#showinv, #inventorycontainer').show();

Does that work?

I think the forum's maybe garbled it - I bunged it into Squiffy and tried running it - the inventory pane appears but doesn't show/hide.

The inventory also doesn't reliably update. If you pick up the potion it shows you have it; however if you drink the poition, it should change your status to 'healthy' and remove the potion from inventory - however it prints Healthy over the top of Unhealthy in the inventory pane, and doesn't remove the potion from inventory. (It does however reflect the correct true/false values in the main pane - just not in the sidebar).

Here it is running: https://www.dragonchoice.com/inventory/index.html

And the Squiffy markup:

@title Inventory test

@set potion = false
@set key = false
@set health = false

[[start]]

[[]]:

<div class="sidebar" id="inventorycontainer" style="position: fixed; left: 1px; top: 4px; bottom: 4px; width: 20%; overflow-y: auto; border: 1px double blue;"><button style="position: absolute; top: 2px; right: 2px;" id="hideinv" onclick="$('#inventorycontainer').animate({left: 'toggle'}); $('#showinv').show();" type="button">Hide inventory</button>
<p><strong>Inventory</strong></p>

<p>You are {if health=true:healthy}{else: unhealthy}.</p>

{if potion=true:<p>Has potion</p>}
{if key=true:<p>Has key</p>}</div>

<button style="position: fixed; top: 6px; left: 2px; display: hidden;" id="showinv" onclick="$('#inventorycontainer').animate({left: 'toggle'}); $('#showinv').hide();" type="button">Show inventory</button>

[[start]]:

<p>You see a potion and a key.</p>
<p>[[Get the potion]](get potion, potion=true)</p>
<p>[[Get the key]](get key,key=true)</p>
<p>[[Move on]](move on)</p>

[[get potion]]:

<p>You pick up the potion</p>

{if key=true:}{else:<p>[[Get the key]](get key,key=true)</p>}
<p>[[Move on]](move on)</p>

[[get key]]:

<p>you pick up the key</p>
{if potion=true:}{else:<p>Get the potion(get potion,potion=true)</p>}

<p>[[Move on]](move on)</p>

[[move on]]:

{if potion=true:<p>You have a potion. [[Drink potion]](drink potion,health=true,potion=false)</p>}
{if key=true:<p>You have a key</p>}
{if potion=false:{if key=false:<p>you have nothing</p>}}

[[drink potion]]:

<p>Gulp! You are now {if health=true: healthy}.</p>

[[move on]]

Cross-posting I think :) I've just tried out your edited version, and I can't get that to work either. It would also present some logistical problems - I have a lot of inventory stuff (I'm simplifying for test purposes), plus I'm also using that panel to track quests/event flags for the user, so needing to use the code block from your second quote wouldn't be practical to use on the hundreds of occasions when the inventory changes, or a quest, or a character attribute!

So right now I'm back to my existing suboptimal solution of just calling the inventory into a sidebar in each section (which means it's always updated with the latest values) and having it always visible. It's lame because the sidebar then has to repeat down the page - it would just be nice if the user could toggle its visibility off when they don't need it.

EDIT: Updated to fix a few small issues in the second option below; I think this is usable now.

Hmm… trying to think of other ways to do it.

How about something like this:

    $('#inventorycontainer').html(squiffy.ui.processText(squiffy.story.sections['sidebar'].text));

Will cause the contents of the sidebar to be replaced by the text from the section named sidebar.

One alternative I've thought of, which could make things more streamlined, would be modifying the core squiffy functions at runtime, so that the sidebar is automatically updated after each section is visited.

Something like (in the first section):

    $(function () {
      if (!squiffy.story.originalGo) {
        var updateSidebar = function () {
          if (!$('#sidebar').length) {
            squiffy.ui.write(squiffy.story.sections['sidebar container'].text);
          }
          if ($('#sidebar:visible').length) {
            $('#sidebar').children(':not(#hideinv)').remove();
            $('#sidebar').append(squiffy.ui.processText(squiffy.story.sections['sidebar contents'].text));
            $('#showinv').click(e => $('#sidebar').animate({left: 0}));
            $('#hideinv').click(e => $('#sidebar').animate({left: 3-$('#sidebar').width()}));
          }
        };
        squiffy.story.originalGo = squiffy.story.go;
        updateSidebar();
        squiffy.story.go = function (section) {
          squiffy.story.originalGo (section);
          updateSidebar();
          if (squiffy.afterText) {
            squiffy.afterText();
            delete(squiffy['afterText']);
          }
        };
      }
    });

Then you could have:

[[sidebar container]]:
<button style="position: fixed; top: 6px; left: 2px;" id="showinv" type="button">Show sidebar</button>
<div id="sidebar" style="background-color: white; position: fixed; left: 1px; top: 4px; bottom: 4px; width: 20%; overflow-y: auto; border: 1px double blue;"><button style="position: absolute; top: 2px; right: 2px;" id="hideinv"  type="button">Hide sidebar</button></div>
<style>
#sidebar p {
  margin: 3px;
  border: 1px dotted blue;
}
</style>

[[sidebar contents]]:
<p style="font-weight: bold;">Inventory</p>

<p>You are {if health=true:healthy}{else: unhealthy}.</p>

{if potion=true:<p>Has potion</p>}
{if key=true:<p>Has key</p>}

This is all off the top of my head so far, not tested. But I think it could be made into something workable.

(the above code also allows you to run scripts after the text of the section is displayed. For example, doing:

    squiffy.afterText = function () {
      alert ("This javascript will be run after the text is displayed. Useful if you want to move text around or something, or refer to form elements in the section's text");
    };

)

Suspect I'm missing something crucial here! (Curiously, as soon as I pasted the code uncommented here, the blue bordered sidebar appeared on this page - but this code doens't produce anything run out of Squiffy!)

@title Inventory test 3

$.ready(function () {
if (!squiffy.story.originalGo) {
var updateSidebar = function () {
if (!$('#sidebar').length) {
squiffy.ui.write(squiffy.story.sections['sidebar container'].text);
}
if ($('#sidebar:visible').length) {
$('#sidebar').children(':not(#hideinv)').remove();
$('#sidebar').append(squiffy.ui.processText(squiffy.story.sections['sidebar contents'].text));
$('#showinv,#hideinv').click(e => $('#sidebar').animate({left: 'toggle'}));
}
};
squiffy.story.originalGo = squiffy.story.go;
squiffy.story.go = function (section) {
squiffy.story.originalGo (section);
updateSidebar();
if (squiffy.afterText) {
squiffy.afterText();
delete(squiffy['afterText']);
}
};
}
});

[[start]]

[[sidebar container]]:
<button style="position: fixed; top: 6px; left: 2px; display: hidden;" id="showinv" type="button">Show sidebar</button>
<div id="sidebar" style="background-color: white; position: fixed; left: 1px; top: 4px; bottom: 4px; width: 20%; overflow-y: auto; border: 1px double blue;"><button style="position: absolute; top: 2px; right: 2px;" id="hideinv" type="button">Hide sidebar</button></div>
<style>
#sidebar p {
margin: 3px;
border: 1px solid blue;
}
</style>

[[sidebar contents]]:
<p style="font-weight: bold;">Inventory</p>

<p>You are {if health=true:healthy}{else: unhealthy}.</p>

{if potion=true:<p>Has potion</p>}
{if key=true:<p>Has key</p>}

[[start]]:

<p>You see a potion and a key.</p>
<p>[[Get the potion]](get potion, potion=true)</p>
<p>[[Get the key]](get key,key=true)</p>
<p>[[Move on]](move on)</p>

[[get potion]]:

<p>You pick up the potion</p>

{if key=true:}{else:<p>[[Get the key]](get key,key=true)</p>}
<p>[[Move on]](move on)</p>

[[get key]]:

<p>you pick up the key</p>
{if potion=true:}{else:<p>Get the potion(get potion,potion=true)</p>}

<p>[[Move on]](move on)</p>

[[move on]]:

{if potion=true:<p>You have a potion. [[Drink potion]](drink potion,health=true,potion=false)</p>}
{if key=true:<p>You have a key</p>}
{if potion=false:{if key=false:<p>you have nothing</p>}}

[[drink potion]]:

<p>Gulp! you are now {if health=true: healthy}.</p>
[[move on]]

My mistake; I used $.ready( instead of $(document).ready( or its shorter form $(.

Fixed the careless error, and it seems to work for me (although playing it in the editor is something of a pain, because the sidebar is partly covered by the bar at the top with the save/run buttons, and at the bottom by the bar with the current variables)

For me, the sidebar appears if I run it within the Squiffy editor (with the attendant display issues), but not if I hit Preview to run it directly in the browser?

OK, I'm really confused.

I'm trying with this code for testing:

[[Start]]:
    $(function () {
      console.log("trying...");
      if (!squiffy.story.originalGo) {
        console.log("Initialised!");
        window.sq = squiffy;
        var updateSidebar = function () {
        console.log("updating sidebar");
          if (!$('#sidebar').length) {
        console.log("creating sidebar");
            squiffy.ui.write(squiffy.story.sections['sidebar container'].text);
          }
          if ($('#sidebar:visible').length) {
        console.log("is not hidden");
            $('#sidebar').children(':not(#hideinv)').remove();
            $('#sidebar').append(squiffy.ui.processText(squiffy.story.sections['sidebar contents'].text));
            $('#showinv').click(e => $('#sidebar').animate({left: 0}));
            $('#hideinv').click(e => $('#sidebar').animate({left: 5-$('#sidebar').width()}));
          }
        };
        squiffy.story.originalGo = squiffy.story.go;
        squiffy.story.go = function (section) {
          squiffy.story.originalGo (section);
          updateSidebar();
          if (squiffy.afterText) {
            squiffy.afterText();
            delete(squiffy['afterText']);
          }
        };
      }
    });
    
This is the starting page! Is it working?

[[part2]]

[[sidebar container]]:
<button style="position: fixed; top: 36px; left: 2px;" id="showinv" type="button">Show sidebar</button>
<div id="sidebar" style="background-color: white; position: fixed; left: 1px; top: 34px; bottom: 4px; width: 20%; overflow-y: auto; border: 1px double blue;"><button style="position: absolute; top: 32px; right: 2px;" id="hideinv"  type="button">Hide sidebar</button></div>
<style>
#sidebar p {
  margin: 3px;
  border: 1px solid blue;
}
</style>

[[sidebar contents]]:
<p style="font-weight: bold;">Inventory</p>

<p>You are {if health=true:healthy}{else: unhealthy}.</p>

{if potion=true:<p>Has potion</p>}
{if key=true:<p>Has key</p>}

[[part2]]:
<p>You see a potion and a key.</p>
<p>[[Get the potion]](get potion, potion=true)</p>
<p>[[Get the key]](get key,key=true)</p>
<p>[[Move on]](move on)</p>

[[get potion]]:

<p>You pick up the potion</p>

{if key=true:}{else:<p>[[Get the key]](get key,key=true)</p>}
<p>[[Move on]](move on)</p>

[[get key]]:

<p>you pick up the key</p>
{if potion=true:}{else:<p>Get the potion(get potion,potion=true)</p>}

<p>[[Move on]](move on)</p>

[[move on]]:

{if potion=true:<p>You have a potion. [[Drink potion]](drink potion,health=true,potion=false)</p>}
{if key=true:<p>You have a key</p>}
{if potion=false:{if key=false:<p>you have nothing</p>}}

[[drink potion]]:

<p>Gulp! you are now {if health=true: healthy}.</p>
[[move on]]

In the editor, it works fine. But when I hit "preview", the browser's in-memory copy of the game has the sections part2 and inventory container having no text. They're just blank, as soon as the game is loaded (before my script even runs; tested by putting an extra section before the Start one)

Can anyone with more Squiffy experience work out why?

OK, this is just weird.

If my source contains the following section:

[[part2]]:

<p>You see a potion and a key.</p>
<p>[[Get the potion]](get potion, potion=true)</p>
<p>[[Get the key]](get key,key=true)</p>
<p>[[Move on]](move on)</p>

Then the section's text is blank when I load it in preview mode. Nothing appears, and examining it with the console confirms that squiffy.story.sections['part2'].text is an empty string.

If I change it to:

[[part2]]:

You see a potion and a key.
<p>[[Get the potion]](get potion, potion=true)</p>
<p>[[Get the key]](get key,key=true)</p>
<p>[[Move on]](move on)</p>

(removing the <p> tags from one line) then that line appears fine, but only that line.

Examining it with the console confirms that squiffy.story.sections['part2'].text is the string <p>You see a potion and a key.</p>

So when Squiffy compiles the game, it appears to be removing some of the text, and I have no idea why.

On further experimentation, it seems to be choking on the <style> block. If I remove that, everything works fine. So, putting a <style> element in a game's text both makes that section empty, and removes lines from the next section but one when the game is compiled.

I have no idea how this can happen; but at least we have something that seems to work now.

I'm now playing around a little, making a way to put commands like "drink potion" in the sidebar, so that clicking them will run a section without actually making it the current section. Think I got this.

Will test without the style block later tonight when family commitments are done! Would also love to see if you can crack using stuff out of the inventory without needing to go to a new section!

Just to confirm what you found, that the <style> block breaks it, and it works without it. Not a problem in the scheme of things as I'll have my own custom external stylesheet which I'll retrospectively added to index.html once I've built the game (though it would be nice if there was a default call to a custom.css embedded in the template, so I don't have to keep re-adding it every time I re-build...]

I've modified the custom go function so you can now do something like [[drink potion]](quick:potion), which visits the section 'potion' and runs its script, without changing the value of {_section} or disabling any currently-visible links.

I tried to make a quick test game, testing the different circumstances where this might be used in a real game. It mostly works, but there's one section where the game freezes completely, and I'm not sure if it's because of a bug in my code. I'll share as soon as I've fixed that.

(I'm also not sure how Squiffy attributes work, I'm learning by trial and error, so I've used javascript for most of the variables in my test game. But I don't think that makes so much difference)

OK… here's my latest attempt at the sidebar, along with a simple game I built to test it.
Hopefully you can't see any bugs in there, and a quick look at the code should tell you how I did everything.

I haven't used passages, because I was quite near the end of playing with this when I found out that they exist. If they break the sidebar, please let me know and I can work on that. If anything else you're doing in your game breaks the sidebar, again, please let me know about that.

Here is the sample game I made to test the sidebar - see if you can finish it before looking for more bugs. I know there's a few clunky bits, but I think those are more because of me not knowing how to write a CYOA that well than anything with the system. (for example, I am entirely aware that it's possible to carry -1 empty bottles. But fixing this would be so much effort for no real gain)

[broken code removed. Updated and improved version in a post below]

I've got the kitten and died twice (by drinking 2x acid, and by jumping into the acid!)

The biggest thing for me is that the sidebar show/hide works fine at the beginning, but after a few sections the show/hide gets very slow (you click, nothing happens, and then a while later it reacts - I'm not sure why there's a delay. I'm using Firefox in case that makes a difference)

There's what looks like a random event with the fortune teller gesturing which seems to result in your getting more potions in your inventory (is that intended? Is there a formula for how many you get, I've had 1 and 3? is there a formula for if/when the event occurs?)

Drinking acid from the sidebar doesn't update the health status in the sidebar until you click something in the main pane.

Finally your link here to the code isn't active - would love to see how this all works!

That's all I've found to report!

after a few sections the show/hide gets very slow

I can't replicate that on chrome. Will try on firefox later, see if it's different.

There's what looks like a random event with the fortune teller

It's just a timer. Triggers 4 seconds after you enter the carnival, converts all your empty bottles to potions. It doesn't trigger if you don't have any bottles.

The known bug is that if you get to the lab fast enough, your empty bottle becomes a potion but it doesn't disable the 'fill a bottle with acid' link. So clicking that will leave you with negative empty bottles.

Drinking acid from the sidebar doesn't update the health status in the sidebar until you click something in the main pane.

Thanks, I'll try to work out why that is.

Finally your link here to the code isn't active

Works for me. It should expand to show the code. Do you have the same issue elsewhere on the forums?

Sorry, didn't realise it was a link to expand the code! That's very useful indeed!

I've just tried the show/hide in Chrome and it does the same. Basically if you open/close it every time you progress, it gets slower to react until you can click the button and wait 5+ seconds before it slides in/out.

Changed it so that it updates the sidebar after the afterText section, so it should update immediately in all cases.

Fixed the issue with the negative bottles, and added more silly easter eggs to add to your completion percentage (it's now 37% for winning, plus 7% for each attribute with a nonzero or true value. 100% should be possible, but a lot harder)

Will publish the new version as soon as I'm back at my computer.

Still trying to figure out the delay. It seems to be the function isn't even being called, and I have no idea why.

Maybe removing and recreating the buttons each time they're used would be better. I'll try that.

OK. Here's the updated version of the game. Very small changes to the code itself.

I'll post this here before I experiment with the buttons, because I don't want to break something else and not have a copy of the code to come back to. If it fixes the slowdown, I'll update the code here.

EDIT: I'm a complete idiot. Somehow I managed to drag two lines to the wrong place and didn't notice after I read and re-read it a dozen times.
EDIT2: A small logic error in one of the puzzles.

@title Inventory test game

[[Start]]:
    $(function () {
      if (!squiffy.story.originalGo) {
        window.sq = squiffy;
        var updateSidebar = function () {
          if (!$('#sidebar').length) {
            squiffy.ui.write(squiffy.story.sections['sidebar container'].text);
            // Ugly hack to stop the sidebar being hidden by the top/bottom bars in the editor
            // and allow you to remove the sidebar so you can look at the code while testing
            //     (it will reappear as soon as you visit another section in the game)
            if ($('.ui-layout-north:visible').length) {
              $('#showinv').css('top', $('#showinv').offset()['top']+92);
              $('#sidebar').css('top', $('#sidebar').offset()['top']+92);
              $('#sidebar').css('bottom', '100px');
              $('<button>', {id: 'killsidebar', style: 'position: absolute; bottom: 4px; right: 4px'}).click(function () {
                $('#killsidebar,#sidebar,#showinv').remove();
              }).text('kill sidebar').appendTo('#sidebar');
            }
            $('#showinv').click(e => $('#sidebar').animate({left: 0}));
            $('#hideinv').click(e => $('#sidebar').animate({left: 5-$('#sidebar').width()}));
          }
          if ($('#sidebar:visible').length) {
            $('#sidebar').children(':not(#hideinv,#killsidebar)').remove();
            $('#sidebar').append(squiffy.ui.processText(squiffy.story.sections['sidebar contents'].text));
            if (squiffy.get('gameover')) {
              $('#sidebar a').remove();
            }
          }
        };
        squiffy.story.originalGo = squiffy.story.go;
        squiffy.story.go = function (section) {
          console.log("go called for "+section);
          if (section.match(/^quick:/)) {
            var sec = squiffy.story.sections[section.replace(/^quick:\s*/, '')];
            if (!sec) {
              console.log("No such section: "+section);
              return;
            }
            squiffy.story.run(sec);
            squiffy.ui.write('<blockquote style="display: block; left: 2em; right: 2em; border: 1px dotted grey;">' + sec.text + '</blockquote>');
            squiffy.story.save();
          } else {
            console.log("Running originalGo");
            squiffy.story.originalGo (section);
          }
          if (squiffy.afterText) {
            var after = squiffy.afterText;
            delete(squiffy['afterText']);
            after();
          }
          updateSidebar();
        };
        updateSidebar();
      }
    });

@set potions = 0
@set bottles = 1
@set acid = 0
    
This is the starting page! Is it working?

[[Continue]]

[[sidebar container]]:
<button style="position: fixed; top: 6px; left: 2px;" id="showinv" type="button">Show sidebar</button>
<div id="sidebar" style="background-color: white; position: fixed; left: 1px; top: 4px; bottom: 4px; width: 20%; overflow-y: auto; border: 1px double blue;"><button style="position: absolute; top: 2px; right: 2px;" id="hideinv"  type="button">Hide sidebar</button></div>

[[sidebar contents]]:

<p style="font-weight: bold;">Inventory</p>

<p>You are {if health=true:healthy}{else: unhealthy}.</p>

{if potions>0:<p>{if potions>1:Has {potions} potions}{else:Has a potion}. [[Drink potion]](quick:drink potion)</p>}
{if acid>0:<p>{if acid>1:Has {acid} flasks of acid}{else:Has an acid flask}. [[Drink acid]](quick:drink acid)</p>}
{if bottles>0:<p>{if bottles>1:Has {bottles} empty flasks}{else:Has an empty flask}.</p>}
{if mixbottle>0:<p>{if mixbottle>1:Has {mixbottle} flasks}{else:Has a flask} filled with a weird goop you can't pour out. [[Discard]](quick:discard mix)</p>}
{if key=true:<p>Has {if dissolvedkey:partially dissolved }key {if not eatenkey:[[Swallow]](quick:eat key)}{else:(swallowed)}</p>}
{if soot:<p>Covered in soot.</p>}
{if talisman=true:<p>Has weird glowing talisman [[Rub]](quick:rub talisman)</p>}

And a collapsible bit for all the stuff that's pretty much an example of how to use the code above:

[[rub talisman]]:
@set not talisman

You rub the talisman, and your hair seems to stand on end. You feel like an epic vision-quest is about to begin. {if bottles>0:{@bottles-=1}{@potions+=1}Suddenly, with a sloshing sound, one of your empty bottles fills up with a rainbow-coloured liquid. }Then the talisman vanishes.

[[eat key]]:
@set eatenkey

You know it's a really bad idea, but you swallow the key.

[[Continue]]:
<p>You see a potion and a key.</p>
<p>[[Get the potion]](get potion,takenpotion=true)</p>
<p>[[Get the key]](get key)</p>
<p>[[Move on]](hallway)</p>

[[get potion]]:

<p>You pick up the potion</p>
@set potions = 1
{if key=true:}{else:<p>[[Get the key]](get key)</p>}
<p>[[Move on]](hallway)</p>

[[get key]]:

@set key=true

<p>you pick up the key</p>
{if not takenpotion:<p>[[Get the potion]](get potion,takenpotion=true)</p>}

<p>[[Move on]](hallway)</p>

[[hallway]]:

You are in a hallway.

Doorways lead to the [[zoo]] and the [[kitchen]].

[[zoo]]:

You are in the zoo.

You can go to the [[science lab]] or the [[hallway]].

There is also a heavily locked cage door{if corroded: with acid burns on it}. You could kick it with all your strength and never make a dent. {if acid>0:Or you could try to [[melt through it with acid]].}{if key=true:Or [[use the key]] to open it.}

[[melt through it with acid]]:
@dec acid
@inc bottles

{if corroded:The bars are already melted, and drop right away. But security is charging angrily towards you, so your only option is to proceed [[into the cage]].}{else:{@corroded}The bars start to melt, but one bottle of acid isn't enough to remove them completely. And the zookeeper has called security, chasing you back towards the [[hallway]].}

[[into the cage]]:
    var completion = 30;
    $.each("bottles potions acid key health talisman eatenkey dissolvedkey mixbottle soot".split(/ /), function (i, attr) {
      if (squiffy.get(attr)) {completion+=7};
    });
    squiffy.set('complete', completion);

@set gameover

You step nervously into the zoo cage, wondering what kind of terrifying beast could lie beyond. A second later you see the cutest, most beautiful kitten you have ever laid eyes on, purring happily.

Congratulations, this is as close as this game gets to an ending. I hope you've not found any bugs along the way.

You achieved {complete}% completion on this play through.

[[use the key]]:
{if eatenkey:You stick your fingers down your throat and attempt to regurgitate the key. Unfortunately, this doesn't seem to work so well.}{else:The key doesn't seem to fit this door. But the zookeeper has seen you fiddling around, and is charging towards you. You'll have to come back later, once you found the right key.}

Would you like to flee towards the [[hallway]], or the [[science lab]]?

[[science lab]]:
You are in a science lab.

There is a huge vat of acid against one wall. If you want to, you could try [[jumping in]]{if bottles>0:, or [[fill a bottle with acid]]}.

Alternatively, you could go back up the stairs to the [[zoo]], or take the back passage to the [[carnival]].

[[jumping in]]:
    squiffy.afterText = function () {
      squiffy.story.go('gameover');
    };

That was a very silly thing to do. You are dead. In fact, you are very quickly dissolving.

[[fill a bottle with acid]]:
You reach down to the acid vat, and attempt to collect some.

{if bottles>0:{@acid+=1,bottles-=1}You quickly fill {if bottles=0:your empty bottle}{else:one of your bottles} with acid from the bath, being extra careful not to burn yourself.}{else:{@potions-=1,mixbottle+=1}But as you try to fill the bottle, it seems to be full of some sparkling rainbow liquid, very much like a health potion. You end up with a bottle filled with a weird mixture, which quickly solidifies.}

Now you can {if bottles>0:[[fill another]](fill a bottle with acid) or }go to the [[zoo]] or the [[carnival]].

[[carnival]]:
    if (!squiffy.get('talisman') && squiffy.get('bottles')) { setTimeout(function () {squiffy.story.go('quick:fortune teller');}, 4000); }

You are in some kind of carnival or circus. You don't see much of interest, but there are all kinds of snake-oil salesmen trying to sell you weird stuff, and dancers so exotic you don't know where to look.

{if tellerconfused:{if not talisman:{@talisman}A confused-looking fortune teller hands you a strange, mystic talisman. They seem to assume you will know what it means.}}

From here, crowds block most of the exits but you can see a way to get inside to either the [[science lab]] or the [[kitchen]].

[[fortune teller]]:
    squiffy.set('tellerconfused', squiffy.get('bottles')==0);
    squiffy.set('potions', squiffy.get('potions')+squiffy.get('bottles'));
    squiffy.set('bottles', 0);

As you walk away, one of the carnival fortune tellers makes a strange gesture towards your back. You're not sure what happened, but you get a strange urge to look at the bottles you were carrying.

{if tellerconfused:The bottles are exactly in the state you left them.{if not talisman: A second later, he calls out to you.}}

[[drink potion]]:
@dec potions
@inc bottles

@set health = true

<p>Gulp! you are now healthy!</p>

[[kitchen]]:

You are in a small galley kitchen that lies just off the main [[hallway]]. A back door leads outside, where there seems to be a [[carnival]] going on.

There is also a large sink, and a pile of glass [[bottles]](take bottle) which look like they have just been cleaned.

[[take bottle]]:
    if (squiffy.get('potions')+squiffy.get('bottles')+squiffy.get('acid') > 3) {
      squiffy.story.go("handsfull");
    } else {
      squiffy.set('bottles', squiffy.get('bottles')+1);
    }
    
You pick up a{if bottles>1:nother} bottle from the pile.

Would yout like to [[take another]](take bottle), or go back to the [[hallway]], or out to the [[carnival]]?

[[handsfull]]:
You're not some kind of octopus! Your hands are full

You can go to the [[hallway]], or the [[carnival]].

[[drink acid]]:
    squiffy.afterText = function () {
      if (!squiffy.get('health')) {
        squiffy.story.go('gameover');
      } else {
        squiffy.set('health', false);
      }
    };

@dec acid
@inc bottles

You drink a bottle of acid. That was a bit dumb.
{if health=true:You are no longer healthy.{if eatenkey:{@not eatenkey,dissolvedkey} You immediately throw up, and can recover a rather corroded key from the pool on the floor.}}{else:You were already sick, and now you are dead.}

[[discard mix]]:
@set mixbottle = 0
@set potions = 0
@set acid = 0
@set not health
@set soot

{if not eatenkey:{@not key}}

You throw the weird mixture away and it explodes, scorching your clothes and burning up most of the things you were carrying.

[[gameover]]:

@set gameover = true

GAME OVER

This is the end of the game for now, but there should be a restart link somewhere in the top right.

The show/hide is looking good now - what did you diagnose as the issue causing it to slow down before?

I couldn't figure out how to get the talisman running this version!

I'm going to study your code tomorrow and apply it to my game. Thanks again for all your work on this!