UI

• Screens
• Screen inheritance
• Utilities
• Mod Settings
• Keybinds

Screens

MSU adds features to drastically reduce the time and effort required to make new UI screens.

registerConnection

::MSU.UI.registerConnection(_screen);
// _screen must be the squirrel UI screen

This registers a screen to be connected. This will call .connect() on the screen,
which should connect the 'JSHandle' to the corresponding JS screen.

addOnConnectCallback(_function)

::MSU.UI.addOnConnectCallback(_function);
// _function must be a function

This registers a function to be executed on after all JS code in !mods_preload is run and all screens are connected.
The function will be called with a simple .call() so you will need to bindenv if you require any local variables.

Screen Inheritance

MSU created screen templates for both squirrel and javascript that can be inherited to reduce the time and duplicate code required.

ui_screen.nut

this.my_mod_screen <- ::inherit("scripts/mods/msu/ui_screen", {...

A squirrel screen template. Inherits from js_connection. Both combined introduce a number of common members and methods, such as:

• JSHandle management
• visible / animating management
• connect/disconnect functions and listeners
• show/hide
• basic popup management

ui_screen.js

The javascript counterpart to ui_screen.nut JavaScript inheritance is uncommon, due to the old version BB uses. We recommend you simply copy the code from the example below.

Example

Squirrel:

// create a new screen file
this.my_mod_screen <- ::inherit("scripts/mods/msu/ui_screen", {
    m = {
        ID = "MyModScreen"
    },
})

// register the screen using modhooks.
::mods_registerJS("MyModScreen.js");

// create a new sq screen and set it in our mod table.
::MyMod.Screen <- this.new("scripts/ui/screens/my_mod_screen");

// register the screen to be connected.
::MSU.UI.registerConnection(::MyMod.Screen);

// add a keybind to the mod to call the show toggle function of the screen.
::MyMod.Mod.Keybinds.addSQKeybind("toggleScriptFightScreen", "ctrl+p", ::MSU.Key.State.All, ::MyMod.Screen.toggle.bindenv(::MyMod.Screen));

JavaScript:

// make sure the name of the variable matches the ID of the squirrel screen
var MyModScreen = function(_parent)
{
    MSUUIScreen.call(this);
    // other constructor variables go here
}

MyModScreen.prototype = Object.create(MSUUIScreen.prototype);
Object.defineProperty(MyModScreen.prototype, 'constructor', {
    value: MyModScreen,
    enumerable: false,
    writable: true
});
... other functions of the prototype ...
// DO NOT forget this line, as it creates the screen in the first place
registerScreen("MyModScreen", new MyModScreen());

Utilities

MSU adds some useful debugging functions to the JavaScript section of the codebase

printData

MSU.printData( _data, _depth = 1, _maxLen = 0 )
// _object is any data type
// _maxDepth and _maxLen are integers

_maxLen defaults to the length of _data if it is an array or object.
Prints _data so that if it is an array or table, any elements inside of it will also be displayed as appropriate for their type.
Calls itself recursively on the elements of any arrays or objects up to _maxDepth.
Only prints array and object elements if the length of the array or object is _maxLen.

capitalizeFirst

MSU.capitalizeFirst( _string )
// _string is a string

Returns _string with the first character capitalized.

iterateObject

MSU.iterateObject( _object, _function, _every )
// _object is the object to be iterated
// _function is the function that is applied to each key:value pair. _function requires two parameters that will be key and value.
// every specifies if every should be used

This function iterates over the key:value pairs of an object and applies a function to them, using either forEach or every.

toggleDisplay

MSU.toggleDisplay(_object, _bool)
// _object is the jQuery element that this should be applied to
// _bool is an optional boolean parameter

Sets the display-block and display-none classes of an object. This is commonly used in the codebase to show or hide an element. If no _bool is supplied, the value is toggled. Otherwise, it is set to display-block (true) or display-none (false).

Mod Settings

The Mod Settings system has helper functions to allow the modder to easily manipulate the system from the JS side.

Keybinds

The Keybinds system's JavaScript Keybind requires using the functions described to interact with JavaScript.