Skip to content

Mod Settings

Let players configure your mod from the in-game Mods menu. There are two approaches: declarative settings and custom HTML panels.

Declarative Settings

Define settings in your Bootstrap class using the Settings array. These are automatically rendered in the Mods UI:

typescript
import { Bootstrap, ModSettingDefinition, RegisterModPackage } from "@hotbunny/hackhub-content-sdk";

@RegisterModPackage
export default class MyMod extends Bootstrap {

    Settings: ModSettingDefinition[] = [
        {
            key: "difficulty",
            label: "Difficulty",
            type: "select",
            default: "normal",
            options: [
                { label: "Easy", value: "easy" },
                { label: "Normal", value: "normal" },
                { label: "Hard", value: "hard" },
            ],
        },
        { key: "showHints", label: "Show Hints", type: "toggle", default: true },
        { key: "maxEnemies", label: "Max Enemies", type: "slider", default: 5, min: 1, max: 20 },
        { key: "playerName", label: "Player Name", type: "text", default: "Hacker" },
        { key: "spawnRate", label: "Spawn Rate", type: "number", default: 10, min: 1, max: 100 },
    ];

}

Setting Types

TypeDescriptionExtra Properties
toggleOn/off switch
selectDropdown menuoptions: { label, value }[]
textText input
numberNumber inputmin, max
sliderRange slidermin, max, step

Setting Definition

PropertyTypeDescription
keystringUnique identifier
labelstringDisplay label
typestringOne of the setting types above
defaultanyDefault value
optionsarrayOptions for select type
minnumberMinimum value for number/slider
maxnumberMaximum value for number/slider
stepnumberStep increment for slider

Reading Settings

Use the ModSettings namespace to read setting values. This is completely separate from the Storage API.

typescript
import { ModSettings } from "@hotbunny/hackhub-content-sdk";

const difficulty = ModSettings.get<string>("difficulty");
const hints = ModSettings.get<boolean>("showHints");
const all = ModSettings.getAll();

See the ModSettings API reference for the full API.

Custom HTML Settings

For complex settings UIs, use an HTML file rendered in an iframe:

typescript
@RegisterModPackage
export default class MyMod extends Bootstrap {

    SettingsHTML = "settings.html";

}

Your HTML file has full control over the settings UI. Use HackhubSDK.ModSettings to read and write values.

TIP

Declarative settings and custom HTML are mutually exclusive. If you define SettingsHTML, the Settings array is ignored.

HotBunny Interactive Entertainment Inc.