Here's the original question:
http://textadventures.co.uk/forum/squiffy/topic/twsu7sqjoegndwy3_g_qxq/inventory-show-hide

Anywho, I'm having a blast with this new system. I've made modifications to it to fit my own style of gameplay (once it's done, I might post the code for it on the forum).

But what I'm trying to figure out is how to make the inventory items in a chronological list of when you picked it up (most recent being at the top). This is like adding to an array, but I don't know how to do that with squiffy. Any help?

Wanted to check in if anyone has any comments on how this could be done. Thanks for any help!

I think if you want to use arrays, you'll have to work in JS. Not sure how that will interact with the sidebar; but a lot of that sidebar code is a little flaky (I originally wrote it in response to someone asking for help with the JS, so that was the first time I ever opened Squiffy and I was building it by trial and error without knowing the system). So perhaps I should work on improving it.

Or, if you want to just display stuff in chronological order and you've already guarded against (for example) picking the same item up twice, you could have an attribute which you add every new item to the end (or beginning) of; then the sidebar can just display a single attribute.

Sorry for not getting back sooner. The aim is to make the items list themselves out in chronological order as simple as possible.

"...you could have an attribute which you add every new item to the end (or beginning) of; then the sidebar can just display a single attribute."

I'm not exactly sure what you mean by this. Could you explain this a little bit more for me? Thank you!

I haven't used the sidebar inventory, nor have I looked at it properly.

For what mrangel is saying, I think something like having a string variable where you add each item to the same string, such as ending up with apple <br> ball <br> key <br> in the varaible (the <br> should end up being a newline.)

For arrays in Squiffy, it's pretty easy to do in Javascript in my opinion. I gave an example a few years ago here:
https://textadventures.co.uk/forum/squiffy/topic/spwky_zgi02bvmw3btzm2w/user-selects-multiple-from-a-list

Basically, in Javascript, you initialiase the array like set('inventory', []);, preferably at the start of your game.

Then you can use Javascript to add and remove and test.

Adding is easy, just use set('inventory', get('inventory').concat('apple')); to add an item.

Testing is also easy,

if (get('inventory').includes('apple'))
{
	//you have an apple, so probably want to go to the section with that:
	squiffy.story.go('has_apple_section');
}

Removing is a bit harder. The following should work well as long as you never have any duplicates:

set('inventory', get('inventory').filter((x => x !== 'apple'));

(If you do have duplicates, it will remove all of them)

For something that should only remove the first item that matches the given string:

let inventoryArray = get('inventory');
inventoryArray.splice(inventoryArray.indexOf('apple'), 1);
set('inventory', inventoryArray);

(Only do this if you are sure the item is in the inventory array!)

Now... I completely understand if this isn't exactly easy for someone who doesn't have a job in software development where you have to deal with Javascript.
Adding some proper array support to Squiffy is something I've thought about, but since I can get around it myself easily enough I haven't yet.

Feel free to ask any other questions, especially if I haven't been clear in my attempt at explaining things.

This is extremely helpful! I'll let you know if I need anything else. Thank you!

I just thought of an interesting way to do it using the sidebar, minimising the javascript.

If you used the modified attributes code from one of these other threads, you could add items to a list by doing something like:

@set inventory := {inventory}<li>[apple]</li>

Including the existing value of the inventory, so that it adds the apple to the end of the list.

And then in the sidebar, you would have something like:

<ul id="inventoryList">{inventory}</ul>

which you could apply style to if you want to control how all the inventory items work.

And then in the page which handles using an inventory item, you could have the common JS:

    var used = $('#inventoryList li:has(a.disabled)');
    if (used.length) {
        used.remove();
        squiffy.set('inventory', $('#inventoryList').html());
    }

This uses jQuery to remove all clicked links from the inventory, and then updates the attribute to match the page.

In the case that the player clicks on an object they can't use at the moment, you would instead do:

    $('#inventoryList a.disabled').removeClass('disabled');

which prevents the link being automatically disabled after the player clicks on it.

I'm not sure, but I think this might only work if you are using passages for your inventory items. (A version of the sidebar code which includes the master-section-passages feature)

Oooh! Looks interesting. I'll let you know how it goes once I try implementing it into my already existing code.

Now you've got me thinking about letting the player change the order of inventory items… but that would be a little silly.

I think it would actually be pretty simple to let them drag items up and down, and have little buttons to sort by order added or alphabetically. But making newly-added items appear in a sensible place would be harder; as would avoiding possible glitches that could make an item vanish (If you have some slow javascript, and the player drags an item to a new position at the same time your script ends and gives them a new item, there's a possibility for weirdness).