BitNode-9 initial implementation

src/Hacknet/ui/HashUpgradePopup.jsx

@@ -0,0 +1,137 @@
+/**
+ * Create the pop-up for purchasing upgrades with hashes
+ */
+import React from "react";
+
+import { purchaseHashUpgrade } from "../HacknetHelpers";
+import { HashManager } from "../HashManager";
+import { HashUpgrades } from "../HashUpgrades";
+
+import { Player } from "../../Player";
+import { AllServers } from "../../Server/AllServers";
+import { Server } from "../../Server/Server";
+
+import { numeralWrapper } from "../../ui/numeralFormat";
+
+import { removePopup } from "../../ui/React/createPopup";
+import { ServerDropdown,
+         ServerType } from "../../ui/React/ServerDropdown"
+
+import { dialogBoxCreate } from "../../../utils/DialogBox";
+
+class HashUpgrade extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            selectedServer: "foodnstuff",
+        }
+
+        this.changeTargetServer = this.changeTargetServer.bind(this);
+        this.purchase = this.purchase.bind(this, this.props.hashManager, this.props.upg);
+    }
+
+    changeTargetServer(e) {
+        this.setState({
+            selectedServer: e.target.value
+        });
+    }
+
+    purchase(hashManager, upg) {
+        const canPurchase = hashManager.hashes >= hashManager.getUpgradeCost(upg.name);
+        if (canPurchase) {
+            const res = purchaseHashUpgrade(upg.name, this.state.selectedServer);
+            if (res) {
+                this.props.rerender();
+            } else {
+                dialogBoxCreate("Failed to purchase upgrade. This may be because you do not have enough hashes, " +
+                                "or because you do not have access to the feature this upgrade affects.");
+            }
+        }
+    }
+
+    render() {
+        const hashManager = this.props.hashManager;
+        const upg = this.props.upg;
+        const cost = hashManager.getUpgradeCost(upg.name);
+
+        // Purchase button
+        const canPurchase = hashManager.hashes >= cost;
+        const btnClass = canPurchase ? "std-button" : "std-button-disabled";
+
+        // We'll reuse a Bladeburner css class
+        return (
+            <div className={"bladeburner-action"}>
+                <h2>{upg.name}</h2>
+                <p>Cost: {numeralWrapper.format(cost, "0.000a")}</p>
+                <p>{upg.desc}</p>
+                <button className={btnClass} onClick={this.purchase}>
+                    Purchase
+                </button>
+                {
+                    upg.hasTargetServer &&
+                    <ServerDropdown
+                        serverType={ServerType.Foreign}
+                        onChange={this.changeTargetServer}
+                        style={{margin: "5px"}}
+                    />
+                }
+            </div>
+        )
+    }
+}
+
+export class HashUpgradePopup extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.closePopup = this.closePopup.bind(this);
+
+        this.state = {
+            totalHashes: Player.hashManager.hashes,
+        }
+    }
+
+    componentDidMount() {
+        this.interval = setInterval(() => this.tick(), 1e3);
+    }
+
+    componentWillUnmount() {
+        clearInterval(this.interval);
+    }
+
+    closePopup() {
+        removePopup(this.props.popupId);
+    }
+
+    tick() {
+        this.setState({
+            totalHashes: Player.hashManager.hashes,
+        })
+    }
+
+    render() {
+        const rerender = this.props.rerender;
+
+        const hashManager = Player.hashManager;
+        if (!(hashManager instanceof HashManager)) {
+            throw new Error(`Player does not have a HashManager)`);
+        }
+
+        const upgradeElems = Object.keys(HashUpgrades).map((upgName) => {
+            const upg = HashUpgrades[upgName];
+            return <HashUpgrade upg={upg} hashManager={hashManager} key={upg.name} rerender={rerender} />
+        });
+
+        return (
+            <div>
+                <button className={"std-button"} onClick={this.closePopup}>
+                    Close
+                </button>
+                <p>Spend your hashes on a variety of different upgrades</p>
+                <p>Hashes: {numeralWrapper.formatBigNumber(this.state.totalHashes)}</p>
+                {upgradeElems}
+            </div>
+        )
+    }
+}