Rpg Maker Developers Group

 This plugin require JS knowledge in order to use it fully utilize its functionality.
 Default values are set during boot inside the plugin, and not required as you could
 set them during test play.

 To open the "options menu", use the following scriptcall:

 htmlOptions.open()

 There are 4 different "type" you can use:
 type: "buttons"
 type: "radio"
 type: "selector"
 type: "range"

 Type "buttons", "radio", "selector" are all radio's, which means:
 only 1 selection can be active at the time, but each works differently.

 Each group has some of the main functions to build:

 → tab:    => optional if you categorize it
 → title:  => required (name that is being shown)
 → type:   => required (as given above)
 → group:  => required, most important as this is the target for config
 → help:   => optional to give a small description (mouse hovered)


 Buttons
 ͞ ͞ ͞ ͞ ͞ ͞ ͞
 Buttons behave like radio's, but slightly different as this is
 One of the complex functions that exist for making options.

 Recommended not more than 3 if able. (depending on the window width.)
 
 An example below on how to set up the buttons, in this case 3.
 The checked: true is the default options, multiple takes the last one.
 While this.testFunction.bind(this), the testFunction is can be anything.

 This function MUST be coded in a specific way, as group: "dMode" is
 the target (difficultyMode) and by default, it does nothing!

 tab: "Custom",
 title: "Buttons",
 type: "buttons",
 group: "dMode",
 buttons: [{
     value: "Option 1",
     btnName: "option1",
     checked: true,
     action: this.testFunction.bind(this)
 },{
     value: "Option 2",
     btnName: "option2",
     action: this.testFunction.bind(this)
 },{
     value: "Option 3",
     btnName: "option3",
     action: this.testFunction.bind(this)
 }],
 help: "Whatever this button does in-game."


 Selectors
 ͞ ͞ ͞ ͞ ͞ ͞ ͞ ͞ ͞
 Selectors have arrows on the sides, and can have many options.
 Those options can be coded in 2 ways.

 1) By using a function (coded (later explained))
 2) Directly inside the code itself, this part can be tricky.

 Two examples are given below.

 tab: "Switch Variable",
 title: "Game Variable",
 type: "selector",
 group: "optModeVariable",
 options: sampleVariables,
 default: this.resolveSelector("elementMode", sampleVariables, "Option 3"), // "option 3"
 onChange: (label, index) => {
     this.runVariable(1, index, "optModeVariable") // read index (2), use label to read name ("Option 3")
     //console.log("var1: ", $gameVariables.value(1))
 },
 help: "Whatever this variable does in-game."


 The options above, set 5 options, controlled by coding it inside the plugin,
 the options below using object (behave the same as above), but are labeled,
 bound to a switch and has a color which is optional.

 tab: "Switch Variable",
 title: "Game Switches",
 type: "selector",
 group: "elementMode",
 options: sampleElement,
 default: this.resolveSelector("elementMode", sampleElement, "Fire"),
 onChange: (label) => {
     this.runAction("elementMode", label);

     const config = this.optionsConfig.find(cfg => cfg.group === "elementMode");
     const opts = config.options;

     opts.forEach(opt => {
         if (opt.switchId != null) {
             const isOn = (opt.label === label);
             $gameSwitches.setValue(opt.switchId, isOn);
             //console.log(`Switch ID ${opt.switchId} (${opt.label}) set to ${isOn}`);
         }
     });
 },
 help: "Whatever this Switch does in-game."


 Radio's
 ͞ ͞ ͞ ͞ ͞ ͞ ͞
 Radio Type is a the basic "switch" type, as ON or OFF.
 As this is the most basic boolean to Enable or Disable a function.

 tab: "Basic Settings",
 title: "Always Dash",
 type: "radio",
 group: "alwaysDash",
 onChange: (value) => {
     this.runAction("alwaysDash", value, "Booleans");
 },
 help: "When enabled, your character will dash by default."


 Range
 ͞ ͞ ͞ ͞ ͞
 Range are sliders and can be used for options too:
 sound tag is special for "sound: true" for BGM, BGS, SE, ME and
 Master Volume, by omit it (default) make it false.

 WindowSkin color is optional, default color is 0 ~ 255 as 0 ~ -255
 does basicly nothing.

 This skin color is special created with a real time visual colorview.
 DO NOT ALTER this function, but rule out if not using it, or keep it save.

 The setup for sliders can be anything.
 sliders can have a "tick" options, default is 5.
 If tick is added with 1, it wont be accurate on a high number.
 but can be omitted sasfetly.

 tab: "Window Tone",
 title: "Red Tone",
 type: "range",
 id: "redTone",
 max: 255,
 color: "#fa1414a6",
 onInput: (value) => this.syncColorBox("redTone", "red", value),
 onChange: (value) => this.syncColorBox("redTone", "red", value),
 help: "Change the red tone of your window skin."


 tab: "Sound Settings",
 title: "Master Volume",
 type: "range",
 id: "masterVolume",
 sound: true,
 onInput: (value) => this.syncMasterVolume(value),
 onChange: (value) => this.syncMasterVolume(value),
 help: "This set all sounds to the same level."


 Coding the functions!
 ͞ ͞ ͞ ͞ ͞ ͞ ͞ ͞ ͞ ͞ ͞ ͞ ͞ ͞ ͞ ͞ ͞ ͞ ͞ ͞ ͞
 IMPORTANT to note, on slider is the color that is optional.
 Those give the slider a color, the "a6" is opacity of 75% (192 default).

 Set a color will also color the numbers (without opacity) automatically.

 Earlier, I mentions "buttons" having a funtion called:
 
 this.testFunction.bind(this);

 This function is coded in the plugin as follows:

 testFunction() {
     let mode = this.getRadioValue("dMode")
     this.runAction("dMode", mode)
     switch (mode) {
         case "Option 1":
             console.log(`Option 1: selected`);
             break;
         case "Option 2":
             console.log(`Option 2: selected`);
             break;
         case "Option 3":
             console.log(`Option 3: selected`);
             break;
     }
 }

 this.GetRadioValue(symbol) is needed, so it can run the mode, which
 hold the value you inputted on the 3 values (variables, switches, others.)

 On the following setting as an selector:

 default: this.resolveSelector("elementMode", sampleVariables, "Option 3"), // "option 3"
 onChange: (label, index) => {
     this.runVariable(1, index, "optModeVariable") // read index (2), use label to read name ("Option 3")
     //console.log("var1: ", $gameVariables.value(1))
 },

 You need to alter this code:

 setHandlers(group, label) {
     const handlers = {
         "optModeVariable": () => this.optionsMode(label),
         "insert-GroupName": () => console.log(label),
         // add more here
     };
     //!=> DO NOT CHANGE THE CODE BELOW
     if (handlers[group]) {
         handlers[group]();
     } else {
         console.log(`Group "${group}" changed to: ${label}`);
     }
 }

 The quests at the start "optModeVariable" is the groupName you set, this can
 than be used to target as a new function below.

 Only change the top part of the selection and DO NOT ALTER the code where
 you are not supposed too as this would break it, only change the symbol
 at the optionsValues["GROUP NAME HERE"].

 optionsMode(value) {
     const selectorAction = {
         "Option 1": () => console.log("Option 1 Selected"),
         "Option 2": () => console.log("Option 2 Selected"),
         "Option 3": () => console.log("Option 3 Selected"),
         "Option 4": () => console.log("Option 4 Selected"),
         "Option 5": () => console.log("Option 5 Selected")
         //=> Extend more without touching the rest
     };
     //!=> DO NOT CHANGE THE CODE BELOW
     const action = selectorAction[value];
     if (action) {
         action();
     } else {
         console.warn(`Unhandled mode: ${value}`);
     }
     this.optionsValues["optModeVariable"] = value;
     this.saveToConfigManager();
 }

 => runActions for onChange

 this.runAction(symbol, value) // Values
 this.runAction(symbol, value, "Values") // Values

 this.runAction(symbol, value, "Booleans") // booleans

 this.runAction(symbol, value, "Sounds") // Sounds

 this.runSwitch(id, value) // switches, only ID needed

 this.runVariable(id, value) // only ID needed

 => Usage
 onChange: (value) => this.runAction("shakeScreen", value, "Booleans")
 onChange: (value) => this.runAction("bgmVolume", value, "Sounds")
 onChange: (value) => this.runAction("elementMode", value)

 => Values (for selectors only)
 this.resolveSelector(symbol, sampleElement, defaultValue)