bitburner-src/src/Hacknet/ui/Root.jsx

/**
 * Root React Component for the Hacknet Node UI
 */
import React from "react";

import { GeneralInfo } from "./GeneralInfo";
import { HacknetNode } from "./HacknetNode";
import { HacknetServer } from "./HacknetServer";
import { HashUpgradePopup } from "./HashUpgradePopup";
import { MultiplierButtons } from "./MultiplierButtons";
import { PlayerInfo } from "./PlayerInfo";
import { PurchaseButton } from "./PurchaseButton";

import { getCostOfNextHacknetNode,
         getCostOfNextHacknetServer,
         hasHacknetServers,
         purchaseHacknet } from "../HacknetHelpers";

import { Player } from "../../Player";
import { AllServers } from "../../Server/AllServers";

import { createPopup } from "../../ui/React/createPopup";

export const PurchaseMultipliers = Object.freeze({
    "x1": 1,
    "x5": 5,
    "x10": 10,
    "MAX": "MAX",
});

export class HacknetRoot extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            purchaseMultiplier: PurchaseMultipliers.x1,
            totalProduction: 0, // Total production ($ / s) of Hacknet Nodes
        }

        this.createHashUpgradesPopup = this.createHashUpgradesPopup.bind(this);
        this.handlePurchaseButtonClick = this.handlePurchaseButtonClick.bind(this);
        this.recalculateTotalProduction = this.recalculateTotalProduction.bind(this);
    }

    componentDidMount() {
        this.recalculateTotalProduction();
    }

    createHashUpgradesPopup() {
        const id = "hacknet-server-hash-upgrades-popup";
        createPopup(id, HashUpgradePopup, { popupId: id, rerender: this.createHashUpgradesPopup });
    }

    handlePurchaseButtonClick() {
        if (purchaseHacknet() >= 0) {
            this.recalculateTotalProduction();
        }
    }

    recalculateTotalProduction() {
        let total = 0;
        for (let i = 0; i < Player.hacknetNodes.length; ++i) {
            if (hasHacknetServers()) {
                const hserver = AllServers[Player.hacknetNodes[i]];
                if (hserver) {
                    total += hserver.hashRate;
                } else {
                    console.warn(`Could not find Hacknet Server object in AllServers map (i=${i})`)
                }
            } else {
                total += Player.hacknetNodes[i].moneyGainRatePerSecond;
            }
        }

        this.setState({
            totalProduction: total,
        });
    }

    setPurchaseMultiplier(mult) {
        this.setState({
            purchaseMultiplier: mult,
        });
    }

    render() {
        // Cost to purchase a new Hacknet Node
        let purchaseCost;
        if (hasHacknetServers()) {
            purchaseCost = getCostOfNextHacknetServer();
        } else {
            purchaseCost = getCostOfNextHacknetNode();
        }

        // onClick event handlers for purchase multiplier buttons
        const purchaseMultiplierOnClicks = [
            this.setPurchaseMultiplier.bind(this, PurchaseMultipliers.x1),
            this.setPurchaseMultiplier.bind(this, PurchaseMultipliers.x5),
            this.setPurchaseMultiplier.bind(this, PurchaseMultipliers.x10),
            this.setPurchaseMultiplier.bind(this, PurchaseMultipliers.MAX),
        ];

        // HacknetNode components
        const nodes = Player.hacknetNodes.map((node) => {
            if (hasHacknetServers()) {
                const hserver = AllServers[node];
                if (hserver == null) {
                    throw new Error(`Could not find Hacknet Server object in AllServers map for IP: ${node}`);
                }
                return (
                    <HacknetServer
                        key={hserver.hostname}
                        node={hserver}
                        purchaseMultiplier={this.state.purchaseMultiplier}
                        recalculate={this.recalculateTotalProduction}
                    />
                )
            } else {
                return (
                    <HacknetNode
                        key={node.name}
                        node={node}
                        purchaseMultiplier={this.state.purchaseMultiplier}
                        recalculate={this.recalculateTotalProduction}
                    />
                )
            }
        });

        return (
            <div>
                <h1>Hacknet {hasHacknetServers() ? "Servers" : "Nodes"}</h1>
                <GeneralInfo />

                <PurchaseButton cost={purchaseCost} multiplier={this.state.purchaseMultiplier} onClick={this.handlePurchaseButtonClick} />

                <br />
                <div id={"hacknet-nodes-money-multipliers-div"}>
                    <PlayerInfo totalProduction={this.state.totalProduction} />
                    <MultiplierButtons onClicks={purchaseMultiplierOnClicks} purchaseMultiplier={this.state.purchaseMultiplier} />
                </div>

                {
                    hasHacknetServers() &&
                    <button className={"std-button"} onClick={this.createHashUpgradesPopup} style={{display: "block"}}>
                        {"Spend Hashes on Upgrades"}
                    </button>
                }

                <ul id={"hacknet-nodes-list"}>{nodes}</ul>
            </div>
        )
    }
}