Superpowers Game fGui plugin

The fGUI namespace is a super easy solution to create simple HTML GUIs in the Superpowers Game system for Superpowers, the extensible HTML5 2D+3D game engine.

Documentation

http://florentpoujol.github.io/superpowers-game-fgui-plugin

You can also access it offline in Superpowers' client with the Plugins documentation plugin, or find it directly in the plugin's public/docs folder.

Installation

Download the latest release, unzip it, rename the folder to fGui, move it inside app/systems/supGame/plugins/florentpoujol/ then restart your server.

__Advanced:__

Get it via npm:

cd app/systems/supGame/plugins
npm install superpowers-game-fgui-plugin

The name of the vendors or plugins in the app/systems/supGame/plugins/ folder don't matter.
So you can leave the plugin path as node_modules/superpowers-game-fgui-plugin.

But if you want to use fGui's default styles, you __have to__ rename the vendor folder to florentpoujol and the plugin folder to fGui.

Quick look

!Simple UI without style

This UI is produced by this code:

// simple text, with independant value
let score = new fGui.Text("Score: ", 0);

// link
let link = new fGui.Text("More awesome games");
link.url = "http://itch.io";

// paragraph
let asset = Sup.get("My wall of text", fText);
let paragraph = new fGui.Text(asset.text);

// button
let button = new fGui.Button("Click me !", "button1");
button.on("click", function(i: fGui.Button) {
console.log("Button '"+i.value+"' has been clicked"); // "Button 'button1' has been clicked
});

// text input
let textinput = new fGui.Input("text", "Your name:", { placeholder: "Please enter your name", readonly: "false" });
textinput.on("change", function(i: fGui.Input) {
console.log("text", i.value);
});

// number input
let input = new fGui.Input("number", "Your age: ", 27, {
min: 0,
max: 100,
onChange: function(i: fGui.Input) {
console.log("New age", i.value);
}
});

// checkbox
let box = new fGui.Checkbox("Are you a human ? ", false);

// radio
let onGenderChange = function(i: fGui.Radio) {
console.log("New gender set:", i.value)
};

let radio = new fGui.Radio("gender", "{{input}} Male", true, { value: "male", onChange: onGenderChange } );
radio.value = "female";
let radio2 = new fGui.Radio("gender", "{{input}} Female");
radio2.on("change", onGenderChange);