Replacing Text Back and Forth without Refreshing passage...

feliwebwork · May 2015

Hi Everyone,

I am using Harlowe in Twine 2.

I am trying to make an inventory that displays items the player picks up. Ideally, I would like the Inventory to be a type of HUD that I can display all the time (with a css fixed position) in every passage. And since it is displayed all the time, I would like the player to have the option of opening and closing the Inventory.

I do not want the inventory to link to any other passage, because that changes the actual passage the person is on, or refreshes the passage they are on, which then changes the value of the variables depending on the passage. So, that is why I need some way of opening and closing without it actually refreshing to another passage or to the same one.

My idea of how to make this work would be to somehow replace a link that says "Open Inventory" with a (display: "Inventory") or with text (as shown below) and then, within the displayed inventory, to have a link that says "Close Inventory" that would replace everything displayed with the orginal "Open Inventory" link.

However, due to my newbiness, I cannot work out how to do this. I am able to get the first part going, by doing something like:

[Open Inventory]<openInventory|

(click-replace: ?openInventory)[ The Inventory Is Now Open
<br/>[Close Inventory]<closeInventory|]

And now I do not know what follows, as I have tried different things to no avail.

I imagine it starts with something like:

(click: ?closeInventory)[...]

And it's the part within the [...] that I can't work out. That part needs to somehow make it go back to the original [Open Inventory] link, without displaying the parsed "The Inventory Is Now Open" text.

Any ideas?

Thanks.

timsamoff · May 2015

If I understand you correctly, you could accomplish this by showing and hiding the inventory with jQuery toggle().

http://api.jquery.com/toggle/

feliwebwork · May 2015

sorry, timsamoff, could you explain how I incorporate that into Twine Harlowe?

Also, I would prefer, if it is an option, to use Harlowe code rather than have to resort to JQuery.

If anyone knows how this could be done within Harlowe code, I would appreciate it.

Thanks.

timsamoff · May 2015

You would have to add a <span> around the link text to give it a couple of class designations, and then create an inventory "block" of some sort (like with a <div>. Inside the <div>, you could place another link for closing the inventory. Something like this:

<p><span class="inventoryButton openButton">Open Inventory</span></p>
<div class="inventory">
<p>This is the inventory.</p>
<p><span class="inventoryButton">Close Inventory</span></p>
</div>

The CSS would look something like this:

.inventory {
   display: none;
}

And then, in the story JavaScript, you would add something like this:

$( ".inventoryButton" ).click(function() {
  $( ".inventory, .openButton" ).toggle( function() {
  });
});

Try this out:

https://jsfiddle.net/professorsamoff/dz092bnp/

greyelf · May 2015

Another option is to use three passages, my example will named them "Inventory", "Open Inventory", and "Close Inventory".

The Inventory passage contains the text description for your inventory.

(display: "Close Inventory")
Put your text description of the inventory here!

The Open Inventory passage contains the code that will show the Open link as well as the code to display the Inventory passage when the link is clicked.

|opt>[Open Inventory]
(click: ?opt)[(replace: ?inventory)[(display: "Inventory")]]

The Close Inventory passage contains the code that will show the Close link, the code to hide the Inventory passage when the link is clicked, and the code to re-show the Open Link.

|opt>[Close Inventory]
(click: ?opt)[(replace: ?inventory)[(display: "Open Inventory")]]

Add the following code to any passage you want to see the Inventory Open/Close option in.

|inventory>[(display: "Open Inventory")]

If the above does what you want then you can use CSS to style it all.

feliwebwork · May 2015

greyelf, works perfectly!! Thank you!!

timsamoff, thank you for contributing and helping out. Because I am so new to anything to do with programming, I am wanting to concentrate on learning one thing at a time (for now that means focusing on doing things as much as possible withing the Harlowe format).

However, for more advanced people who are into combining the Harlow function with JQuery, I am sure your information will be very helpful.

Thank you!

timsamoff · May 2015

No, that’s great that this can be done by using Twine techniques alone. Love it.

Howdy, Stranger!

Categories

Replacing Text Back and Forth without Refreshing passage...

Comments