0 votes
by (140 points)
Hey!

So, I've started playing around with Twine and implemented and inventory system that I found here... I am curious if people can help me out with an issue and maybe also help me out with a question I've got...

First of all, the issue: - the inventory opens, you have items which you can click to see a passage, say:

(click: "ItemOne")[(display: "ItemOnePassage")]

(click: "ItemTwo")[(display: "ItemTwoPassage")]

So my problem here is that if I click the first item and then the second, the text just bunches up instead of showing just one at the time. When I open ItemTwoPassage, ItemOnePassage should disappear. Anyone know how I can solve that?

As for my question, any way I can arrange things so a description is shown below the item in question without the player having to press anything?

Say, you enter the inventory and it shows you the following thing:

Item1 - Short Description

Item2 - Short Description

Item3 - Short Description

Also, I implemented the inventory from here...

https://gersande.com/blog/designing-inventories-in-twine-2-with-the-built-in-harlowe-macros/

If you know any other inventory implementations for Harlowe, please do let me know as I'm curious if there are any alternatives out there that may fit my intentions better.

1 Answer

0 votes
by (159k points)

I would like to suggest a couple of 'corrections' / enchancements to Gersandelf's inventory system.

1. Initialisation of your story variable(s).

In point 2 of the article they told you to initialise your story variable within the 'start' (starting point) passage of your project, for a Harlowe based project this should be done within your project's startup tagged special passage.  If your project doesn't have such a passage then simply add a new Passage to you project, you can name this new Passage whatever you like because that name isn't important, and then assign this new Passage a tag of startup (all lower case).

I suggest you move all variable initialsation code you have in your 'start' passage into your startup tagged special passage. You will need to also add CSS like the following to your project's Story Stylesheet area to suppress any visual output generated by the startup tagged special passage.

tw-include[type="startup"] {
	display: none;
}


2. Conditionally displaying the inventory link.

In point 3.1 of the article they told you to use a (if:) / (else-if:) combination to control the displaying of the link, and the associated hook of the (if:) macro does nothing (except inject a HTML comment). Using an (if:) (related) macro to do nothing is wasteful, what you should be doing instead is using them to determine when something should be done.

eg. Assuming you only want to do something when the name of the current passage isn't equal to"inventory"

<!-- BAD -->
(if: (passage:)'s name is "inventory")[<!--Do nothing-->]
(else:)[Do the thing!]

<!-- GOOD - Using the NOT operator -->
(if: not (passage:)'s name is "inventory")[Do the thing!]

<!-- GOOD - Using the unless macro -->
(unless: (passage:)'s name is "inventory")[Do the thing!]


I would replace the current inventory related content within your existing footer tagged special passage with the following which should achieve the same result.

(unless: (passage:)'s name is "inventory" or (passage:)'s tags contains "donotshowinventory")[
	Check [[inventory]].
]


3. Using block based HTML elements like H1.

Due to how Harlowe's passage transition (fade-in) effect is implemented any block based HTML element you add to you passages will result in a change in the appearance of this effect. To fix this change you will need to add CSS like the following to your project's Story Stylesheet area.

div,h1,h2,h3,h4,h5,h6,ul,ol {
	display: inline-block;
	min-width: 100%;
}


4. Your inventory Passage and the usage of the (click:) macro.

Due to how the (click:) related macros works internally it is generally recommended to only use them when absolutely necessary, and to use one of the (link:) related macros instead whenever possible.

The following example replaces the article's usage of the JavaScript <Array>.join() function with Harlowe's (for:) macro, it uses the (link:) macro instead of the (click:), and it also includes your requested displaying of an item's decription. (note: the displaying of the descript assumes that each item has an assocated Passage with the same name as that item.)

<h2>Inventory</h2>
{
	(if: $inv's length is 0)[
		Your inventory is empty.
	]
	(else:)[
		Your inventory contains:
		<ul>
		(for: each _item, ...$inv)[
			<li>_item - (display: _item)</li>
		]
		</ul>
	]
}

(link-goto: "Return", (history:)'s last)


> When I open ItemTwoPassage, ItemOnePassage should disappear. Anyone know how I can solve that?

One common method used to control the dynamic appearance of text is to use a named hook combined with the (replace:) macro to force that text to appear in a pre-determined location on the page. (note: the following assumes there are text 1 and text 2 named passages in the project.)

(link-repeat: "Display Text 1")[{
	(replace: ?output)[(display: "text 1")]
}]
(link-repeat: "Display Text 2")[{
	(replace: ?output)[(display: "text 2")]
}]

|output>[]

 

by (140 points)
Thank you so much for the detailed answer! The things you've mentioned were extremely helpful :D
...