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

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);