UI - MSUTeam/MSU GitHub Wiki
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.