Phone Apps

Create apps that appear on the in-game phone home screen. Like Desktop Apps, phone app UI is defined with HTML and rendered inside a sandboxed WebView - but the phone also gives you native mobile navigation chrome (a title bar with a back button) that you drive from your HTML.

Basic Phone App

import { PhoneApp, RegisterPhoneApp } from "@hotbunny/hackhub-content-sdk";
import appHTML from "./app.html";

@RegisterPhoneApp
export class Wallet extends PhoneApp {

    AppName = "wallet";
    Title = "Wallet";
    Icon = "./assets/wallet.png";
    HTML = appHTML;

}

The app icon is added to the phone home screen automatically once your mod loads.

Properties

Property	Type	Description
AppName	string	Unique app identifier
Title	string	Default header title shown on the phone
Icon	string	App icon path (falls back to a default icon if empty)
HTML	string	Path to the HTML file
Exports	Record<string, any>	Functions/values exposed to HTML

Navigation (HackhubSDK.Phone)

The phone renders a native header above your content. Control it from your HTML through the HackhubSDK.Phone bridge, mirroring how a real mobile app pushes pages:

Method	Description
setTitle(title)	Set the current header title
pushPage(title)	Open a sub-page - the header shows a back button automatically
popPage()	Go back one page programmatically
onBack(callback)	Called when the user taps the native back button
alert(options)	Show an iOS-style alert box ({ title?, message, buttons? })
close()	Close the app and return to the home screen

Pages example

<div id="mainView">
    <div onclick="openItem('Transaction #1')">Transaction #1</div>
</div>
<div id="detailView" style="display:none"></div>

<script>
    HackhubSDK.Phone.setTitle("Wallet");

    function openItem(title) {
        document.getElementById("mainView").style.display = "none";
        document.getElementById("detailView").style.display = "block";
        // Native header now shows `title` with a back button.
        HackhubSDK.Phone.pushPage(title);
    }

    // React to the native back button.
    HackhubSDK.Phone.onBack(function () {
        document.getElementById("detailView").style.display = "none";
        document.getElementById("mainView").style.display = "block";
    });
</script>

The native back button appears whenever you are at least one page deep (after a pushPage). At the root, players return to the home screen using the phone's home indicator.

Alerts

<script>
    HackhubSDK.Phone.alert({
        title: "Wallet",
        message: "Transfer complete!",
        buttons: [
            { label: "Cancel", style: "cancel" },
            { label: "OK" },
        ],
    });
</script>

Button style can be "default", "cancel", or "destructive".

Exports

Expose TypeScript functions/values to your app's HTML, exactly like desktop apps:

@RegisterPhoneApp
class Wallet extends PhoneApp {
    AppName = "wallet";
    Title = "Wallet";
    Icon = "";
    HTML = appHTML;

    Exports = {
        format: (n: number) => "$" + n.toFixed(2),
    };
}

<script>
    document.getElementById("balance").textContent = format(1234.5);
</script>

SDK Access in HTML

All other SDK APIs are available via the HackhubSDK global, just like desktop apps:

<script>
    HackhubSDK.Storage.set("balance", 1000);
    HackhubSDK.Events.emit("Wallet.Opened");
</script>

See the WebView Context Bridge reference for the full list of available APIs.