GUI Reference

GUI Controls are used to pop up a window on the players screen, on client-side. The functions that are used are:

• GUI.showpopup({title:string, width:integer, height:integer [, noborders:boolean, overlap:boolean, showbadge:boolean]}) - shows a popup, optional parameters noborders reduce the window borders, overlap allows content outside of the inner window frame, showbadge shows an admin badge
• GUI.setpopuptitle(title:string) - changes the title of the currently shown popup
• GUI.hidepopup() - hides a popup
• GUI.showwindow({title:string[, x:integer, y:integer, width:integer, height:integer, hideclosebutton:boolean]}) - shows a resizable window with optional initial size
• GUI.exists("id") - checks if a GUI object exists
• GUI.get("id") - finds the GUI/dom object
• GUI.find("id" or object, selector) - finds a child GUI/dom object by selector such as ".classname"
• GUI.filespath - returns string: the proper file path for both mobile and pc devices. Example: bodyimage = "url(" + GUI.filespath + "bodies/bbuilder_body1.png)";
• GUI.show("id" or object) - shows an object
• GUI.hide("id" or object) - hides an object
• GUI.isvisible("id" or object) - returns boolean depending on if the GUI object is visible
• GUI.onclick("id" or object, (event, x, y) => { ... }) - catches the click event
• GUI.onrightclick("id" or object, (event, x, y) => { ... }) - catches the right-click event / context menu
• GUI.onkeydown("id" or object, (event, ascii, char, code) => { ... }) - catches key presses on text fields
• GUI.onchange("id" or object, (event, value) => { ... }) - catches changes to input fields such as select boxes
• GUI.oninput("id" or object, (event, value) => { ... }) - catches input changes on text fields
• GUI.onback((event, x, y) => { ... }) - catches the back button click
• GUI.create(id:string, classes:string, css:string, html:string) - adds a GUI/dom object if it's not existing yet, you can define a space-separate class list, css rules such as "width:100px;" and the inner html for sub-divs
• GUI.destroy("id" or object) - removes a GUI/dom object
• GUI.ismobile - boolean, says if it's a mobile device with zoomed controls
• GUI.showmenu(name:string) - opens a default menu, you can also open by buttonid from menubuttons.json: about, accountinfo, adminactions, adminconsole, adminmenu, buycoins, checkuploads, claninfo, clans, clanshelp, clanscores, confirmlogout, createclan, discord, files, friends, furnitureshops, gamead, guide, homemenu, housemenu, inventory, invitefrieds, joinedclans, main, mailing, manageclan, map, messagelist, moreactions, news, playerscores, searchclans, searchitem, settings, stories, uploadgraphic, uploadshopitem, writeclanmessage
• GUI.currentmenu - returns string or null, the currently shown menu name
• GUI.width("id" or object) - get width of a GUI object
• GUI.height("id" or object) - get height of a GUI object
• GUI.screeneffect - string, set to "vignette" for a vignette screen effect
• GUI.addbuttons("id" or object, [{text:string, help:string, image:string, callback:function, cssid:strin, cssclass:string, subtitle:string, badgeicon:string}, ...]) - adds menu buttons to the GUI object
• GUI.addmenubuttons("id" or object, menuname:string, data:object) - adds menu buttons (from menubuttons.json) to the GUI object, data is the second parameter for onActivated, such as the profile for "profilemore"; you can define menubuttons at menubuttons.json
• GUI.getimageforitem(item: object) - returns the relative filename of the item icon
• GUI.getimageclipforitem(item: object) - returns the image clip (for css)
• GUI.drawstory(id:string, story:object) - draws a story into a dom canvas with the specified id, the story needs to have type = "game" and data is an array of waypoint objects, with optional tiles and objects array
• GUI.translate(id or object [, originaltext]) - translates a GUI object with google, optional parameter is the text if you want to change it
• GUI.viewclan(clanname:string) - display the info about that clan
• GUI.writepm(playerid:string, nickname:string) - opens a window where you can send a message to a specific player, you have to provide the id of the player and a title for the window (usually the name of the other player)

Example

function onPlayerGrabs(pl) {
    var popup = GUI.showpopup({
        title: "Welcome to " + Server.getconfig().gamename + "!",
        width: 400,
        height: 300
    });
    popup.innerHTML = '<br><center>Enter text:</center>' +
        '<input id="textfield" type="text" style="position:absolute;left:80px;top:100px;width:300px;height:30px;" value="Texttt"></input>' +
        '<select id="selectfield" style="position:absolute;left:80px;top:140px;width:300px;height:40px;font-size:24px;">' +
        '  <option>SWORD</option>' +
        '  <option selected>HEAD</option>' +
        '  <option>BODY</option>' +
        '</select>' +
        '<input id="actionbutton1" type="submit" class="button" style="left:132px;top:250px;width:200px;height:40px;" value="Finish"></input>';

    var self = this;
    GUI.onclick("actionbutton1", () => {
        pl.chat = "text: " + GUI.get("textfield").value + " - " + GUI.get("selectfield").value;
        GUI.hidepopup();
    });
}  

// Hide button by id
GUI.hide("actionbutton1");

// Hide button by object
let button = GUI.get("actionbutton1");
GUI.hide(button);

// Get current value of text inputs or select fields
let value = GUI.get("textfield").value;
echo("value: " + value); // prints it on browser developer console

// Change the text of a text input
GUI.get("textfield").value = "hmmm";