SOTT Quick Krunker Docs

User interface

Adding an element/div client-side

You can add your own UI elements to krunker using KrunkScript. If needed, you can disable the default krunker UI.

# Create a div (and get its str id)
# Specifying the parent div will make the div a child of that parent
str id = GAME.UI.addDIV(
    "minimap",                       # str id of div
    true,                            # bool is shown (display: none)
    "width: 10px; height: 10px",     # str CSS styling as string
	"gameUI"                         # str parent div id (default: "customGUIHolder")
);
1
2
3
4
5
6
7
8

Changing div properties

# Update div style property
GAME.UI.updateDIV(
    "minimap",              # str id of div
    "background-color",     # str property
    "red"                   # str value
);
1
2
3
4
5
6

Getting div properties

# Get property of div, returns str css value
    GAME.UI.getProp(
        "minimap"           # str id of div
        "background-color"  # property to get value of
    );
1
2
3
4
5

Changing div text

# Update div text
GAME.UI.updateDIVText(
    "minimap",      # str id of div
    "hello world"   # str text
);
1
2
3
4
5

Get div text

# Get div text
GAME.UI.getDIVText(
    "book"      # str id of div
);
1
2
3
4

Moving the div

Tags: clone

# Create element
GAME.UI.addDIV("sott_test", true, "");

# Move element to a different parent
GAME.UI.moveDIV(
    "sott_test",            # Current child id
    "gameUI",               # New parent to move to
    "sott_test_2"           # New child id
);
1
2
3
4
5
6
7
8
9

Removing the div

# Remove the div
GAME.UI.removeDIV(
    "minimap"       #str id of div
);
1
2
3
4

Onclick event listener

# Runs when div is clicked
public action onDIVClicked(str id) {
    if (id == "minimap") {
        # do something
    };
}
1
2
3
4
5
6

Changing document title

# Set document title to string
GAME.setTitle(
    "My krunker map"    #str document name
);
1
2
3
4

Image element client-side

Tags: img

# Add image element
str id = GAME.UI.addImage(
    "39190",                        # str image asset id
    "image",                        # str element id
    true,                           # bool is shown (display: none)
    "width: 10px; height: 10px"     # str CSS styling as string
    "gameUI"                        # str parent div id (default: "customGUIHolder")
);
1
2
3
4
5
6
7
8

Custom CSS & phone compatability client-side

Using pure css, you can create phone compatable UI's. For more on mods check out Mod/Resource packs

You can detect and adjust UI to phones using some of the following code:

/* Hide by div id on mobile*/
#uiBase .isMobile #div_id {
    display: none;
}

/* Hide div based on screensize */
@media only screen and (max-width: 600px) {
    #div_id {
        display: none;
    }
}
1
2
3
4
5
6
7
8
9
10
11

Mobile specific elements client-side

Some elements are specific to mobile and can be edited and repositioned with CSS. Here is a list of the Mobile specific elements available by default:

#mobileJoystick{}     /*Joystick to move with*/
#mobileJump{}         /*Jump button*/
#mobileCrouch{}       /*Crouch button*/
#mobileEsc{}          /*Return to menu button*/
#mobileShoot{}        /*Shoot button*/
#mobileAimShoot{}     /*Button to aim & shoot at the same time*/
#mobileScope{}        /*Aim down sight button*/
#mobileReload{}       /*Reload button*/
#mobileSwap{}         /*Button to swap between primary and secondary*/
#mobileKSwap{}        /*Button to swap between knife and primary*/
1
2
3
4
5
6
7
8
9
10