Skip to content
Alejandro U. Alvarez edited this page Nov 12, 2013 · 2 revisions

Pine Client has a GUI class (assets/js/gui.js) that handles the creation and interaction with interface elements. The interface is initialized from app.js, using GUI.init()

Right sidebar buttons

You can easily add new buttons to the right sidebar, and set their behavior. GUI provides the following function: GUI.addConfigMenu(name, icon, type, fn)

  • name: A unique name for the element, it will be used as a reference to update the menu later on.
  • icon: FontAwesome icon to be used (The part after fa-)
  • type: Element type, if it is 'text' it means it will open a menu. If it is 'exec' there is no menu element, and fn is executed.
  • fn: A JavaScript function. If the type is set to 'text' this function should define the behavior of the elements inside the menu. If the type is exec, it should define the action that happens when the user clicks the button.

Example: Log out button:

GUI.addConfigMenu('Log out', 'power-off', 'exec', function(){
    window.location.reload();
});

Example: Configuration

The return is necessary because GUI needs a reference to the newly created HTML element. Using appendTo() appends the element in $('...') and returns it.

GUI.addConfigMenu('Configuration', 'gear', 'text', function(){
    return $('<div class="menuPanel"><h3>Configuration</h3>No options available</div>').appendTo('#configMain').hide();
    // Actions and events should be specified here (for now)
});

Bottom elements

You can also define little information boxes at the bottom of the interface. These are meant for small pieces of changing information. At the moment they display the online player count, the ping and the current version of the game (loaded from GitHub)

There are two methods available, one creates a new element, and another updates its content.

Creating a new block

This adds the online player count:

GUI.addBotomInfo('online', '<i class="fa fa-user"></i> 1 online');

Updating a block

This will update the online count with whatever number is in count

GUI.updateBottomInfo('online', '<i class="fa fa-user"></i> '+count+' online');