backpack: []
hasApple: false
hasPenknife: false
numOfItemsInBackpack: 0
inventory: ["apple", "banana", "orange"]
--
# Simple Twine Backpack example
This example is the simplest way to add items to an inventory. In this case I call a variable the **backpack**. It uses a simple Array and pushes items into that array using the **concat()** function. Because of how I used Twine code, you can only add two items to your backpack, an apple and a penknife.
Take a look at [[Your Backpack]]
# Simple JavaScript Inventory Example
In this example I create an __inventory__ variable, within this page with some fruit in it, but use slightly more complex JavaScript to add items to an Array (list). It's doing exactly the same thing, but is just a slightly different way of doing it. JavaScript is used to display all the items in the Array. Note, in this example you can any number of items to the inventory if you keep visiting those pages. The list just gets longer and longer.
Go see [[Your Inventory]] and you can see the fruit, or you can _inspect_ it in the sidebar.
# Advanced JavaScript Inventories
In [[this example->https://www-users.york.ac.uk/~tas509/Inventory%20Object%20Array.html]] we use a JavaScript Object and Javascript tags to manipulate and display the inventory, which is more geeky but incredibly powerful.# Your Inventory
[Javascript]
var inventory = engine.state.get('inventory');
for (i in inventory){
write(inventory[i] + "<br>");
}
[continued]
Is there anything there? Good.
Do you want to add [[Some Cherries]] or [[Strawberries]]?
[[Delete The First Item]][Javascript]
var inventory = engine.state.get('inventory');
inventory.push("cherries");
[continued]
# Great!
You have added some cherries to your inventory.
Now go back to [[Your Inventory]]
[Javascript]
var inventory = engine.state.get('inventory');
inventory.push("strawberries");
[continued]
# Great!
You have added some strawberries to your inventory.
Now go back to [[Your Inventory]]
This uses Twine code to display how many items are in your backpack, and checks each item, **hasApple** and **hasPenknife**, to see if it is there or not.
[align center]
# Your Backpack
[align center]
[if numOfItemsInBackpack === 0]
You have nowt in your backpack. You need two items. Go get them now.
[align center]
[if numOfItemsInBackpack > 1]
You have {numOfItemsInBackpack} items.
[align center]
[if numOfItemsInBackpack === 1]
You have an item.
[if numOfItemsInBackpack === 2]
You have two items, you are [[ready for the next level->Cheddar]]
[align center]
[if hasApple]
{embed image:"https://upload.wikimedia.org/wikipedia/commons/thumb/2/20/Apple_unbitten.svg/319px-Apple_unbitten.svg.png"}
[else]
[[Add an apple]]
[continue]
[align center]
[if hasPenknife]
{embed image:"https://upload.wikimedia.org/wikipedia/commons/thumb/c/c7/Gnome-applications-utilities.svg/240px-Gnome-applications-utilities.svg.png"}
[else]
[[Add A Penknife]]
[continue]
*Or take a look the backpack that uses [[Gwen's Chapbook Addon Collection]]*backpack: backpack.concat("🔪Penknife")
numOfItemsInBackpack: numOfItemsInBackpack + 1
hasPenknife: true
--
# Add A Penknife
Ooh, penknifes are useful aren't they?
Go back to [[Your Backpack]] backpack: backpack.concat("🍏 Apple")
numOfItemsInBackpack: numOfItemsInBackpack + 1
hasApple: true
--
# Add An Apple
Ooh, apples are tasty aren't they? If only you had a knife too...and perhaps some cheddar.
Go back to [[Your Backpack]] # You are ready for THE NEXT LEVEL!
[align center]
{embed image:"https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Somerset-Cheddar.jpg/320px-Somerset-Cheddar.jpg"}
Eating apple with cheddar is all the more delicious if you slice your apple, as you go. Trust me. Yum!
# Your Backpack
{List Collection: backpack}
This uses [[Gwen's JavaScript plugin->https://github.com/GwenTastic/Chapbook-Addon-Collection]] so that a list variable can be simply displayed.
[Javascript]
var inventory = engine.state.get('inventory');
//delete inventory[0]//do it by index...
var theItem = inventory.shift()//or delete the first?
write("You have removed the " + theItem +" from your inventory!")
[continued]
# Great!
Now go back to [[Your Inventory]]