Skip to content

GUI

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, head:string, hat:string, mask:string, backbutton: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, head/hat/mask adds window icon with player look, backbutton adds a back button
  • 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.onpinch("id" or object, (event, scale, x, y) => { ... }) - catches pinch-zoom gestures (two fingers, or ctrl + mouse wheel / trackpad pinch) once per gesture; the element is CSS-scaled as preview meanwhile; limit the scale with the html attributes data-pinchmin / data-pinchmax (default 0.25 - 4)
  • 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 [, data:object]) - opens a default menu, you can also open by buttonid from menubuttons.json with optional data parameter: 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.showminimapstory(story:object [, duration:number]) - plays a (script-generated) story in the minimap area in the upper right corner, replacing one that is still showing; hides automatically after duration seconds (e.g. for job briefings)
  • GUI.hideminimapstory() - hides the minimap story
  • 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)
  • GUI.escapehtml(text:string): string - escapes text before putting it into html (innerHTML, template strings, attribute values); GUI.create, GUI.showpopup and innerHTML don't escape anything themselves, so always escape player-provided text: popup.innerHTML = `<div>${GUI.escapehtml(ticket.subject)}</div>`
  • GUI.togglevoicechat() - turns voice chat on or off (same as the V key), only if voice chat is enabled
  • GUI.isvoicechaton(): boolean - returns true if the player's voice chat is currently on
  • GUI.recordermark(weight:number [, label:string]) - marks the current moment as highlight for video clips, weight 1 = minor ... 10 = own death; with 8 or higher the clip is offered to the player, e.g. GUI.recordermark(8, "arena win")

Example#

function onPlayerGrabs(player) {
    const 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" />
        <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" />
    `;

    GUI.onclick('actionbutton1', () => {
        const textValue = GUI.get('textfield').value;
        const selectValue = GUI.get('selectfield').value;
        player.chat = `text: ${textValue} - ${selectValue}`;
        GUI.hidepopup();
    });
}

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

// Hide button by object
const button = GUI.get('actionbutton1');
GUI.hide(button);

// Get current value of text inputs or select fields
const value = GUI.get('textfield').value;
console.log(`value: ${value}`); // prints it on browser developer console

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