Adding custom stats to the HUD (Heads up Display)

Customise your stats HUD using secret built-in hooks, and a little bit of scripting.

Poking Around

This game encourages you to look beyond the UI, beyond the documentation. You're encouraged to inspect the DOM, and even look at the source code itself. You'll find there's much you can do once you start thinking outside the box.

For example, a quick look at the stats HUD (heads-up-display) section of the UI will reveal that there is an empty section:

id="overview-extra-hook-0"

It was placed there deliberately to allow any sort of custom stat you like to be added to this UI element.

Sample Code

Did you know you can access the document (UI) from within the game itself? With a little bit of scripting you can hook these placeholder elements and put whatever you want in them. Here's an example:

nano custom-stats.js

/** @param {NS} ns **/
export async function main(ns) {
    const doc = document; // This is expensive! (25GB RAM) Perhaps there's a way around it? ;)
    const hook0 = doc.getElementById('overview-extra-hook-0');
    const hook1 = doc.getElementById('overview-extra-hook-1');
    while (true) {
        try {
            const headers = []
            const values = [];
            // Add script income per second
            headers.push("ScrInc");
            values.push(ns.getScriptIncome()[0].toPrecision(5) + '/sec');
            // Add script exp gain rate per second
            headers.push("ScrExp");
            values.push(ns.getScriptExpGain().toPrecision(5) + '/sec');
            // TODO: Add more neat stuff

            // Now drop it into the placeholder elements
            hook0.innerText = headers.join(" \n");
            hook1.innerText = values.join("\n");
        } catch (err) { // This might come in handy later
            ns.print("ERROR: Update Skipped: " + String(err));
        }
        await ns.sleep(1000);
    }
}

Here's what it looks like coded up in-game (Steam's rendering of code isn't the greatest)


Run your program from the terminal (make sure you have enough free RAM):

run custom-stats.js

And there you have it, custom stats on the HUD, updated every second:

[SuperSamwise]

can use this to get rid of that cost too
const doc = eval("document");

[Harg "Orange"]

Perfect to display hidden stats like karma and kill count. Thanks a lot :)

[DragoonWise]

I also added :
ns.atExit(() => { hook0.innerHTML = ""; hook1.innerHTML = ""; });
so that when script is killed, these line disappear

[DragoonWise]

//const doc = document;
//const hook0 = doc.getElementById('overview-extra-hook-0');
//const hook1 = doc.getElementById('overview-extra-hook-1');
const hook0 = eval("document.getElementById('overview-extra-hook-0')");
const hook1 = eval("document.getElementById('overview-extra-hook-1')");

That delete the cost of document.

[In-sight-]

@Catch-22, sounds like you accidentally deleted line 8 of the script.

[Twilight]

issue saying the
"headers is not defined
stack:
ReferenceError: headers is not defined
at HUD.js:2:13"
what would this reference be considering the Header is defined in the code already? (changing lowercase h to capital H shows it as defined, but still shows issue)

[Krankenstein]

stuff i added:

hacknet income
ram usage home & pserver




https://pastebin.com/1HabcZ1S

[Dusty the Regulus]

Okay yeah, making it a .js let it run, that was me not paying attention there.

[MonkeyNutHead3]

You can format the numbers to make them more pretty using nFormat, which i did.
Instead of
values.push(ns.getScriptIncome()[0].toPrecision(5) + '/sec');
I got:
values.push(ns.nFormat(ns.getScriptIncome()[0],'$0.00a') + '/sec');
This is just to remove the excess decimals, add the dollar sign, and add some shortening suffixes when necessary. I recommend you play around with nFormat() a little bit. To find what to do for the 2nd part of nFormat, click here[url/]. No problem :) [numeraljs.com]

[In-sight-]

@camh128 - the code contains a comment "// This is expensive! (25GB RAM) Perhaps there's a way around it? ;)" This means the script will require quite a lot of home RAM before you can use it.

@Dust_the_Dragon, this is a ".js" (ns2) script, the error you got is because you tried to put this code inside a ".script" file (ns1) which means you don't need to export a main function, or use async/await, or call functions using the "ns" object.