Sugarcube/Universal Inventory: Configure Radial Menu Event Handlers

Authoring Twine
1

Hi there,

Recently I started looking at Twine/Sugarcube and implemented some rough ideas I had for a game.
Then started using Universal Inventory, using it to dress up a avatar/paperdoll from a “worn clothing” bag and so on.

So far everything is working and now I am looking into the radial menu to implement a basic shopping system.
Opening a custom radial menu when dragging from a shop bag to the inventory bag and vice versa. Just to confirm/cancel the transaction.

Something like:

var radialMenuWedgeItems = [
                        { icon: "fa-check", hint: "Confirm transaction", data: "confirm" },
 			{ icon: "fa-ban", hint: "Cancel transaction", data: "cancel" }
		];

And here I am a little bit stuck. I read through the code, looking at the current implementation of the “dropHandler” and radialMenuHandler.
The WedgeItems are easy to understand.
But I am not sure how to configure the handler for the events “confirm” and “cancel”.

Has anybody tried something like this?
Do you have to define a custom function like the “wedgeClickHandler”? Or just setting up a custom EventHandler for the WedgeClick Event?

Thanks in advance

2

Sorry, yeah, I know I need to work on the documentation and sample code for that there. If you take a look at “Passage 9” in the included UInv sample code, it should help out a bit with that.

Work on UInv is on-hold for a bit due to another project, but in the next release I plan to include a “clothing mannequin” object for dressing characters and the like.

As for your question, yeah, you have to use the AddEventHandler() function to tell UInv to call a specific widget or a specific function on the setup object when a radialMenu “WedgeClick” event happens. For example:

<<run UInv.AddEventHandler("radialMenu", "WedgeClick", "wedgeClick")>>

and if you had a function like this in your JavaScript section:

setup.wedgeClick = function (event) {
	/* Code goes in this function. */
};

then that function would get called when you clicked on the radial menu. See the AddEventHandler() function in the UInv help file to see all of the UInv properties which passed through the “event” object (in addition to the normal MouseEvent properties).

So your function might look something like:

setup.wedgeClick = function (event) {
	if (event.data === "cancel") {
		return { keepOpen: false };  // Close radial menu.
	} else if (event.data === "confirm") {
		// Do "confirm" code here.
		return { keepOpen: false };  // Close radial menu.
	}
};

Hope that helps! :slight_smile: