made tech vendors button a tad smarter.

src/Locations/LocationsHelpers.tsx

@@ -248,45 +248,6 @@ Purchasing an additional core (for a total of {p.getHomeComputer().cpuCores + 1}
 cost {Money(cost)}</>);
 }
 
-/**
- * Create a popup that lets the player upgrade the RAM on his/her home computer
- * @param {IPlayer} p - Player object
- */
-export function createUpgradeHomeRamPopup(p: IPlayer): void {
-    const cost: number = p.getUpgradeHomeRamCost();
-    const ram: number = p.getHomeComputer().maxRam;
-
-    const yesBtn = yesNoBoxGetYesButton();
-    const noBtn = yesNoBoxGetNoButton();
-    if (yesBtn == null || noBtn == null) { return; }
-
-    const homeComputer = p.getHomeComputer();
-    if (homeComputer.maxRam >= CONSTANTS.HomeComputerMaxRam) {
-        dialogBoxCreate(<>
-            You have the maximum amount of RAM on your home computer.
-        </>);
-        return;
-    }
-
-    yesBtn.innerText = "Purchase";
-    yesBtn.addEventListener("click", ()=>{
-        purchaseRamForHomeComputer(cost, p);
-        yesNoBoxClose();
-    });
-
-    noBtn.innerText = "Cancel";
-    noBtn.addEventListener("click", ()=>{
-        yesNoBoxClose();
-    });
-
-    yesNoBoxCreate(<>
-        Would you like to purchase additional RAM for your home computer? <br /><br />
-        This will upgrade your RAM from {numeralWrapper.formatRAM(ram)} to {numeralWrapper.formatRAM(ram*2)}. <br /><br />
-        This will cost {Money(cost)}
-    </>);
-}
-
-
 /**
  * Attempt to purchase a TOR router
  * @param {IPlayer} p - Player object

src/Locations/ui/CoresButton.tsx

@@ -0,0 +1,64 @@
+import React, { useState } from "react";
+
+import { Location }                     from "../Location";
+import { createPurchaseServerPopup,
+         createUpgradeHomeCoresPopup,
+         purchaseTorRouter }            from "../LocationsHelpers";
+
+import { CONSTANTS }                    from "../../Constants";
+import { IPlayer }                      from "../../PersonObjects/IPlayer";
+import { purchaseRamForHomeComputer }   from "../../Server/ServerPurchases";
+
+import { StdButtonPurchased }           from "../../ui/React/StdButtonPurchased";
+import { StdButton }                    from "../../ui/React/StdButton";
+import { Money }                        from "../../ui/React/Money";
+
+type IProps = {
+    p: IPlayer;
+}
+
+export function CoresButton(props: IProps): React.ReactElement {
+    const setRerender = useState(false)[1];
+    function rerender(): void {
+        setRerender(old => !old);
+    }
+
+    const btnStyle = { display: "block" };
+
+    const homeComputer = props.p.getHomeComputer();
+    const maxCores = homeComputer.cpuCores >= 8;
+    if(maxCores) {
+        return (<StdButtonPurchased
+            style={btnStyle}
+            text={"Upgrade 'home' cores - MAX"}
+        />);
+    }
+
+    const allCosts = [
+        0,
+        10e9,
+        250e9,
+        5e12,
+        100e12,
+        1e15,
+        20e15,
+        200e15,
+    ];
+    const cost: number = allCosts[homeComputer.cpuCores];
+
+
+    function buy(): void {
+        if(maxCores) return;
+        if (!props.p.canAfford(cost)) return;
+        props.p.loseMoney(cost);
+        homeComputer.cpuCores++;
+        rerender();
+    }
+
+    return (<StdButton
+        disabled={!props.p.canAfford(cost)}
+        onClick={buy}
+        style={btnStyle}
+        text={<>Upgrade 'home' cores ({homeComputer.cpuCores} -&gt; {homeComputer.cpuCores+1}) - {Money(cost)}</>}
+    />);
+}

src/Locations/ui/RamButton.tsx

@@ -0,0 +1,49 @@
+import React, { useState } from "react";
+
+import { Location }                     from "../Location";
+import { createPurchaseServerPopup,
+         createUpgradeHomeCoresPopup,
+         purchaseTorRouter }            from "../LocationsHelpers";
+
+import { CONSTANTS }                    from "../../Constants";
+import { IPlayer }                      from "../../PersonObjects/IPlayer";
+import { purchaseRamForHomeComputer }   from "../../Server/ServerPurchases";
+
+import { StdButtonPurchased }           from "../../ui/React/StdButtonPurchased";
+import { StdButton }                    from "../../ui/React/StdButton";
+import { Money }                        from "../../ui/React/Money";
+
+type IProps = {
+    p: IPlayer;
+}
+
+export function RamButton(props: IProps): React.ReactElement {
+    const setRerender = useState(false)[1];
+    function rerender(): void {
+        setRerender(old => !old);
+    }
+
+    const btnStyle = { display: "block" };
+
+    const homeComputer = props.p.getHomeComputer();
+    if(homeComputer.maxRam >= CONSTANTS.HomeComputerMaxRam) {
+        return (<StdButtonPurchased
+            style={btnStyle}
+            text={"Upgrade 'home' RAM - MAX"}
+        />);
+    }
+
+    const cost = props.p.getUpgradeHomeRamCost();
+
+    function buy(): void {
+        purchaseRamForHomeComputer(props.p);
+        rerender();
+    }
+
+    return (<StdButton
+        disabled={!props.p.canAfford(cost)}
+        onClick={buy}
+        style={btnStyle}
+        text={<>Upgrade 'home' RAM ({homeComputer.maxRam}GB -&gt; {homeComputer.maxRam*2}GB) - {Money(cost)}</>}
+    />);
+}

src/Locations/ui/TechVendorLocation.tsx

@@ -8,8 +8,10 @@ import * as React from "react";
 import { Location }                     from "../Location";
 import { createPurchaseServerPopup,
          createUpgradeHomeCoresPopup,
-         createUpgradeHomeRamPopup,
          purchaseTorRouter }            from "../LocationsHelpers";
+import { RamButton }                    from "./RamButton";
+import { TorButton }                    from "./TorButton";
+import { CoresButton }                  from "./CoresButton";
 
 import { CONSTANTS }                    from "../../Constants";
 import { IPlayer }                      from "../../PersonObjects/IPlayer";
@@ -24,89 +26,29 @@ type IProps = {
     p: IPlayer;
 }
 
-export class TechVendorLocation extends React.Component<IProps, any> {
+export function TechVendorLocation(props: IProps): React.ReactElement {
-    /**
+    const btnStyle = { display: "block" };
-     * Stores button styling that sets them all to block display
-     */
-    btnStyle: any;
-
-    constructor(props: IProps) {
-        super(props);
-
-        this.btnStyle = { display: "block" };
-
-        this.state = {
-            torPurchased: props.p.hasTorRouter(),
-        }
-
-        this.createUpgradeHomeCoresPopup = this.createUpgradeHomeCoresPopup.bind(this);
-        this.createUpgradeHomeRamPopup = this.createUpgradeHomeRamPopup.bind(this);
-        this.purchaseTorRouter = this.purchaseTorRouter.bind(this);
-    }
-
-    createUpgradeHomeCoresPopup(): void {
-        createUpgradeHomeCoresPopup(this.props.p);
-    }
-
-    createUpgradeHomeRamPopup(): void {
-        createUpgradeHomeRamPopup(this.props.p);
-    }
-
-    purchaseTorRouter(): void {
-        purchaseTorRouter(this.props.p);
-        this.setState({
-            torPurchased: this.props.p.hasTorRouter(),
-        });
-    }
-
-    render(): React.ReactNode {
-        const loc: Location = this.props.loc;
 
     const purchaseServerButtons: React.ReactNode[] = [];
-        for (let i = loc.techVendorMinRam; i <= loc.techVendorMaxRam; i *= 2) {
+    for (let i = props.loc.techVendorMinRam; i <= props.loc.techVendorMaxRam; i *= 2) {
         const cost = getPurchaseServerCost(i);
         purchaseServerButtons.push(
             <StdButton
                 key={i}
-                    onClick={() => createPurchaseServerPopup(i, this.props.p)}
+                onClick={() => createPurchaseServerPopup(i, props.p)}
-                    style={this.btnStyle}
+                style={btnStyle}
                 text={<>Purchase {i}GB Server - {Money(cost)}</>}
             />,
         )
     }
 
-        return (
+    return (<div>
-            <div>
         {purchaseServerButtons}
         <br />
-                <p><i>"You can order bigger servers via scripts. We don't take custom order in person."</i></p>
+        <p className="noselect"><i>"You can order bigger servers via scripts. We don't take custom order in person."</i></p>
         <br />
-                {
+        <TorButton p={props.p} />
-                    this.state.torPurchased ? (
+        <RamButton p={props.p} />
-                        <StdButtonPurchased
+        <CoresButton p={props.p} />
-                        style={this.btnStyle}
+    </div>);
-                            text={"TOR Router - Purchased"}
-                        />
-                    ) : (
-                        <StdButton
-                            onClick={this.purchaseTorRouter}
-                            style={this.btnStyle}
-                            text={<>Purchase TOR Router - {Money(CONSTANTS.TorRouterCost)}</>}
-                        />
-                    )
-
-                }
-                <StdButton
-                    onClick={this.createUpgradeHomeRamPopup}
-                    style={this.btnStyle}
-                    text={`Purchase additional RAM for Home computer`}
-                />
-                <StdButton
-                    onClick={this.createUpgradeHomeCoresPopup}
-                    style={this.btnStyle}
-                    text={`Purchase additional Core for Home computer`}
-                />
-            </div>
-        )
-    }
 }

src/Locations/ui/TorButton.tsx

@@ -0,0 +1,46 @@
+import React, { useState } from "react";
+
+import { Location }                     from "../Location";
+import { createPurchaseServerPopup,
+         createUpgradeHomeCoresPopup,
+         purchaseTorRouter }            from "../LocationsHelpers";
+
+import { CONSTANTS }                    from "../../Constants";
+import { IPlayer }                      from "../../PersonObjects/IPlayer";
+import { purchaseRamForHomeComputer }   from "../../Server/ServerPurchases";
+
+import { StdButtonPurchased }           from "../../ui/React/StdButtonPurchased";
+import { StdButton }                    from "../../ui/React/StdButton";
+import { Money }                        from "../../ui/React/Money";
+
+type IProps = {
+    p: IPlayer;
+}
+
+export function TorButton(props: IProps): React.ReactElement {
+    const setRerender = useState(false)[1];
+    function rerender(): void {
+        setRerender(old => !old);
+    }
+
+    const btnStyle = { display: "block" };
+
+    function buy(): void {
+        purchaseTorRouter(props.p);
+        rerender();
+    }
+
+    if(props.p.hasTorRouter()) {
+        return (<StdButtonPurchased
+            style={btnStyle}
+            text={"TOR Router - Purchased"}
+        />);
+    }
+
+    return (<StdButton
+        disabled={!props.p.canAfford(CONSTANTS.TorRouterCost)}
+        onClick={buy}
+        style={btnStyle}
+        text={<>Purchase TOR router - {Money(CONSTANTS.TorRouterCost)}</>}
+    />);
+}

src/Server/ServerPurchases.ts

@@ -96,7 +96,8 @@ export function purchaseServer(ram: number, p: IPlayer): void {
 }
 
 // Manually upgrade RAM on home computer (NOT through Netscript)
-export function purchaseRamForHomeComputer(cost: number, p: IPlayer): void {
+export function purchaseRamForHomeComputer(p: IPlayer): void {
+    const cost = p.getUpgradeHomeRamCost();
     if (!p.canAfford(cost)) {
         dialogBoxCreate("You do not have enough money to purchase additional RAM for your home computer");
         return;
@@ -111,6 +112,4 @@ export function purchaseRamForHomeComputer(cost: number, p: IPlayer): void {
 
     homeComputer.maxRam *= 2;
     p.loseMoney(cost);
-
-    dialogBoxCreate("Purchased additional RAM for home computer! It now has " + homeComputer.maxRam + "GB of RAM.");
 }