[SugarCube 2.14 Twine 2.1] Printing a widget into a passage using a macro defined in JS.

Disane

Hey there,

I'm using:

Twine 2.1
SugarCube 2.14

I'm trying to call a widget inside my JS function to print out actions that would apply to transferable game items (basically moving an item from one container to the other). This would solve a problem to which I find no work around at the moment in sugarcube and it would allow me to stream line moving items from containers to other containers and between NPC characters and the player (later on I would want to turn my containers into objects with their own names, inventory, size, etc.).

var $list = $(document.createDocumentFragment());
$list.append('<<transferContainerItemToPlayer' +' $' + container_name + '\"' + item.id + '\"' + ">>").append('<br>');

Widget code that I'm trying to call from "InventoryManagmentWidgets" passage ("widget" tag has been defined in this passage).

@
	<</if>>\
<</widget>>\

Now, what I get is something like this:

<>

When I tried escaping the '<' character and '>' character respectively I ended up with the same results.

Is there any way to call widgets defined in a passage and calling it somehow with arguments?

Thank you for your help in advance!

TheMadExile

First. Your concatenated widget invocation is incorrect. The example code you've shown produces:

<<transferContainerItemToPlayer ${container_name}"{item.id}">>

Note the lack of a space between the container name and the quoted item ID. Beyond that, it also includes some redundant concatenation and pointlessly escaped double quotes.



Second. You cannot use the standard <jQuery>.append() method with non-HTML and/or non-standard-HTML markup. For SugarCube's own markup and/or its HTML extensions, you need to use SugarCube's <jQuery>.wiki() extension method.


Here's a corrected example:

var $list = $(document.createDocumentFragment());
$list.wiki('<<transferContainerItemToPlayer $' + container_name + ' "' + item.id + '">><br>');

I moved the <br> inside the same invocation as the widget, since with the code as shown there was no point in it being separate.

Disane

Hey there TheMadExile!

Thank you again for answering in such a rapid pace.

The problem unfortunately still remains.
I still get "<>" instead of the linkreplace stuff that I specified for the user to click.

I tried to simplify the example and implement a very simple widget:

<<widget "myWidget">>
this is my widget!
<</widget>>

$list.wiki('<<myWidget>><br>');

This would still yield this: "<>" instead of "this is my widget!".

TheMadExile

What does the function where you're creating $list look like and how are you calling it in SugarCube?

Disane

@TheMadExile:
I tried the following test cases:

Macro.add(['printWidget'],
{
	// transferItem(srcContainer,destContainer,item)
	handler : function()
	{
		// Test #1
		var $list1 = $(document.createDocumentFragment());
		$list1.text('<<myWidget>>');
		$list1.appendTo(this.output);
		
		//Test #2
		var $list2 = $(document.createDocumentFragment());
		$list2.wiki('<<myWidget>>');
		$list2.appendTo(this.output);
	}
});

The second one worked as intended.

So here is what I'm trying to do in the code that prints the items and the actions corresponding to each item:

getPlayerInventory().forEach(function (item) 
{
    // check if the object has a game object type
    if (isItem(item))
    {					 
         $list.wiki('<<myWidget>>' + '<br>')
		.append('[[' + item.name + ']]')
		.append('\u00A0\u00D7' + item.count)
		.append('<br>')	
   }
}

Passages were printed (appeneded using append()) unclickable text:

There's nothing inside cabinet_inventory 
this is my widget!

[[Baseball Hat]] ×1

this is my widget!

[[Old Trousers]] ×1

this is my widget!

[[T Shirt]] ×1

this is my widget!

[[Sneakers]] ×1

<<myWidget>>
this is my widget!

In the previous case where I had the '<>'s appear I called my JS function this way:

<<listContainerItems $cabinet_inventory "cabinet_inventory">>
where $cabinet_inventory is an array and "cabinet_inventory" string is used to form the story variable name.

Now calling this alone worked nicely:

$list.wiki('<<transferPlayerItemToContainer $' + container_name + ' "' + item.id + '">><br>');

but if I try to call append() to add more of these entries they would get transformed into normal text.

The solution was using wiki in every entry where I needed to call a widget.

So, what we learn here today is not to use append on content that needs to be "wikified".
Thanks for your patience @TheMadExile, I really appreciate the quick and accurate help!

Disane

Nice, it's working! I can list all the items that are inside the container, print the actions that can be performed on them (moving between other containers such as the player's) and do the same to the player's items.

Thanks again TheMadExile! I'll donate next week! You are being extremely helpful and competent! I think this needs rewarding