Interactive CEF wheel 1.0.0

This resource allows you to setup interactive wheels with actions hooked to the slices presented in the pie - all from server-side. Once you have it ready you can display it to the player. It is made possible using the wheelnav.js library by Software Tailoring that eases development of interactive wheels and  are highly customizable. I wrote a C# wrapper to control when to display the wheel and hooked server-side actions to each slice in the wheel. This was initially created as a feature for a larger gamemode that will become available at my GitHub later.

My idea was to have one primary wheel from where subwheels could spring from. It is not necessary to create subwheels, but you can simply fill it with slices with actions hooked. The wheel will automatically close and destroy itself when the user releases the designated key that you supply when instantiating the primary wheel. Oh.. and the system also supports icons for the wheels. There's a lot free to use by wheelnav.js but you can also add your own. See the source-code to see how.

How to install

To get started move the GenericWheel-Client folder to your client_packages and ensure you have included the GenericWheel-Client/js/index.js in your own index.js. You'd probably also need to include the server-side files in your namespace.

How to use

1) We first have to instantiate our primary wheel, and we supply it with id 0. The id will be used by subwheels to reference which wheel they will return to.

var wheel = new PrimaryInteractionWheel(0, "My wheel", keyToBind: "c");

2) Next, create a subwheel by instantiating an InteractionWheel. We then add this subwheel to the list of subwheels on our primary wheel. The primary wheel now knows of the subwheel and will be able to navigate to it.

var extraWheel = new InteractionWheel(1, "Walkingstyle");
wheel.AddSubWheel(extraWheel);

3) Now that we have our primary and subwheel set up we will create two slices for our primary wheel. One will be a simple action slice that takes an Action which will be invoked if the user clicks on the slice. The other slice is used to open subwheels. We supply that slice with the id of our subwheel.

var slices = new List<object>()
    {
        new WheelSliceAction("icon.play", () => player.SendChatMessage("You pressed on a play icon slice")),
        new WheelSliceSubMenu("icon.list", extraWheel.ID)
    };
wheel.Slices = slices;

4) We will now add a few slices to our subwheel. Notice that we also add a WheelSliceSubMenu to our subwheel itself in order to give the user the opportunity to navigate back to our primary wheel.

var extraSlices = new List<object>()
    {
        new WheelSliceAction("Normal", () => player.SetSharedData("walkingStyle", "Normal")),
        new WheelSliceAction("Brave", () => player.SetSharedData("walkingStyle", "Brave")),
    };
extraSlices.Add(new WheelSliceSubMenu("icon.arrowleft", wheel.ID));
extraWheel.Slices = extraSlices;

5) Finally we just need to call the display method of our primary wheel to show the user our wheel.

wheel.Display(player);

 

Demonstration

There's a video demonstration on the GitHub readme for the project.

The source code is available at Github https://github.com/Andreas1331/ragemp-wheelnav