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:

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

Type	Description	Extra Properties
toggle	On/off switch	-
select	Dropdown menu	options: { label, value }[]
text	Text input	-
number	Number input	min, max
slider	Range slider	min, max, step

Setting Definition

Property	Type	Description
key	string	Unique identifier
label	string	Display label
type	string	One of the setting types above
default	any	Default value
options	array	Options for select type
min	number	Minimum value for number/slider
max	number	Maximum value for number/slider
step	number	Step increment for slider

Reading Settings

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

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 a WebView:

@RegisterModPackage
export default class MyMod extends Bootstrap {

    SettingsHTML = "settings.html";

}

Your HTML file has full control over the settings UI. The following SDK APIs are automatically injected into the WebView:

• HackhubSDK.ModSettings - read/write setting values
• HackhubSDK.Storage - access mod storage
• HackhubSDK.UI - show notifications

<script>
    const difficulty = HackhubSDK.ModSettings.get("difficulty");
    
    function saveDifficulty(value) {
        HackhubSDK.ModSettings.set("difficulty", value);
        HackhubSDK.UI.toast("Settings saved", "success");
    }
</script>

TIP

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