UI: Disable buttons when player cannot buy things in tech vendor (#1881)

* UI: Disable buttons when player cannot buy things in tech vendor

* Tweak reachMaxCore warning comment

---------

Co-authored-by: David Walker <d0sboots@gmail.com>

src/Locations/ui/CoresButton.tsx

@@ -14,16 +14,18 @@ interface IProps {
 
 export function CoresButton(props: IProps): React.ReactElement {
   const homeComputer = Player.getHomeComputer();
-  const maxCores = Player.bitNodeOptions.restrictHomePCUpgrade || homeComputer.cpuCores >= 8;
-  if (maxCores) {
-    return <Button>Upgrade 'home' cores - MAX</Button>;
-  }
+  const reachMaxCore = Player.bitNodeOptions.restrictHomePCUpgrade || homeComputer.cpuCores >= 8;
 
   const cost = Player.getUpgradeHomeCoresCost();
 
   function buy(): void {
-    if (maxCores) return;
-    if (!Player.canAfford(cost)) return;
+    // Do NOT reuse reachMaxCore - it is cached (and possibly stale) at button creation time
+    if (Player.bitNodeOptions.restrictHomePCUpgrade || homeComputer.cpuCores >= 8) {
+      return;
+    }
+    if (!Player.canAfford(cost)) {
+      return;
+    }
     Player.loseMoney(cost, "servers");
     homeComputer.cpuCores++;
     props.rerender();
@@ -37,9 +39,16 @@ export function CoresButton(props: IProps): React.ReactElement {
           <i>"Cores increase the effectiveness of grow() and weaken() on 'home'"</i>
         </Typography>
         <br />
-        <Button disabled={!Player.canAfford(cost)} onClick={buy}>
-          Upgrade 'home' cores ({homeComputer.cpuCores} -&gt; {homeComputer.cpuCores + 1}) -&nbsp;
-          <Money money={cost} forPurchase={true} />
+        <Button disabled={!Player.canAfford(cost) || reachMaxCore} onClick={buy}>
+          Upgrade 'home' cores&nbsp;
+          {reachMaxCore ? (
+            "- Max"
+          ) : (
+            <>
+              ({homeComputer.cpuCores} -&gt; {homeComputer.cpuCores + 1}) -&nbsp;
+              <Money money={cost} forPurchase={true} />
+            </>
+          )}
         </Button>
       </span>
     </Tooltip>

src/Locations/ui/PurchaseServerModal.tsx

@@ -21,7 +21,7 @@ export function PurchaseServerModal(props: IProps): React.ReactElement {
   const [hostname, setHostname] = useState("");
 
   function tryToPurchaseServer(): void {
-    purchaseServer(hostname, props.ram, props.cost);
+    purchaseServer(hostname, props.ram);
     props.onClose();
   }
 

src/Locations/ui/RamButton.tsx

@@ -19,12 +19,9 @@ interface IProps {
 
 export function RamButton(props: IProps): React.ReactElement {
   const homeComputer = Player.getHomeComputer();
-  if (
+  const reachMaxRam =
     (Player.bitNodeOptions.restrictHomePCUpgrade && homeComputer.maxRam >= 128) ||
-    homeComputer.maxRam >= ServerConstants.HomeComputerMaxRam
-  ) {
-    return <Button>Upgrade 'home' RAM - MAX</Button>;
-  }
+    homeComputer.maxRam >= ServerConstants.HomeComputerMaxRam;
 
   const cost = Player.getUpgradeHomeRamCost();
 
@@ -47,10 +44,16 @@ export function RamButton(props: IProps): React.ReactElement {
           <i>"More RAM means more scripts on 'home'"</i>
         </Typography>
         <br />
-        <Button disabled={!Player.canAfford(cost)} onClick={buy}>
-          Upgrade 'home' RAM ({formatRam(homeComputer.maxRam)} -&gt;&nbsp;
-          {formatRam(homeComputer.maxRam * 2)}) -&nbsp;
-          <Money money={cost} forPurchase={true} />
+        <Button disabled={!Player.canAfford(cost) || reachMaxRam} onClick={buy}>
+          Upgrade 'home' RAM&nbsp;
+          {reachMaxRam ? (
+            "- Max"
+          ) : (
+            <>
+              ({formatRam(homeComputer.maxRam)} -&gt; {formatRam(homeComputer.maxRam * 2)}) -&nbsp;
+              <Money money={cost} forPurchase={true} />
+            </>
+          )}
         </Button>
       </span>
     </Tooltip>

src/Locations/ui/TechVendorLocation.tsx

@@ -12,23 +12,24 @@ import { RamButton } from "./RamButton";
 import { TorButton } from "./TorButton";
 import { CoresButton } from "./CoresButton";
 
-import { getPurchaseServerCost } from "../../Server/ServerPurchases";
+import { getPurchaseServerCost, getPurchaseServerLimit, getPurchaseServerMaxRam } from "../../Server/ServerPurchases";
 
 import { Money } from "../../ui/React/Money";
 import { Player } from "@player";
 import { PurchaseServerModal } from "./PurchaseServerModal";
 import { formatRam } from "../../ui/formatNumber";
 import { Box } from "@mui/material";
-import { useRerender } from "../../ui/React/hooks";
+import { useCycleRerender } from "../../ui/React/hooks";
 
 function ServerButton(props: { ram: number }): React.ReactElement {
   const [open, setOpen] = useState(false);
   const cost = getPurchaseServerCost(props.ram);
+  const reachLimitOfPrivateServer = Player.purchasedServers.length >= getPurchaseServerLimit();
   return (
     <>
-      <Button onClick={() => setOpen(true)} disabled={!Player.canAfford(cost)}>
-        Purchase {formatRam(props.ram)} Server&nbsp;-&nbsp;
-        <Money money={cost} forPurchase={true} />
+      <Button onClick={() => setOpen(true)} disabled={!Player.canAfford(cost) || reachLimitOfPrivateServer}>
+        Purchase {formatRam(props.ram)} Server -&nbsp;
+        {reachLimitOfPrivateServer ? "Max" : <Money money={cost} forPurchase={true} />}
       </Button>
       <PurchaseServerModal open={open} onClose={() => setOpen(false)} ram={props.ram} cost={cost} />
     </>
@@ -36,11 +37,14 @@ function ServerButton(props: { ram: number }): React.ReactElement {
 }
 
 export function TechVendorLocation(props: { loc: Location }): React.ReactElement {
-  const rerender = useRerender(1000);
+  const rerender = useCycleRerender();
 
   const purchaseServerButtons: React.ReactNode[] = [];
-  for (let i = props.loc.techVendorMinRam; i <= props.loc.techVendorMaxRam; i *= 2) {
-    purchaseServerButtons.push(<ServerButton key={i} ram={i} />);
+  for (let ram = props.loc.techVendorMinRam; ram <= props.loc.techVendorMaxRam; ram *= 2) {
+    if (ram > getPurchaseServerMaxRam()) {
+      break;
+    }
+    purchaseServerButtons.push(<ServerButton key={ram} ram={ram} />);
   }
 
   return (

src/Locations/ui/TorButton.tsx

@@ -46,14 +46,12 @@ export function TorButton(props: IProps): React.ReactElement {
     props.rerender();
   }
 
-  if (Player.hasTorRouter()) {
-    return <Button>TOR Router - Purchased</Button>;
-  }
+  const hasTorRouter = Player.hasTorRouter();
 
   return (
-    <Button disabled={!Player.canAfford(CONSTANTS.TorRouterCost)} onClick={buy}>
+    <Button disabled={!Player.canAfford(CONSTANTS.TorRouterCost) || hasTorRouter} onClick={buy}>
       Purchase TOR router -&nbsp;
-      <Money money={CONSTANTS.TorRouterCost} forPurchase={true} />
+      {hasTorRouter ? "Purchased" : <Money money={CONSTANTS.TorRouterCost} forPurchase={true} />}
     </Button>
   );
 }

src/Server/ServerPurchases.ts

@@ -101,7 +101,12 @@ export function getPurchaseServerMaxRam(): number {
 }
 
 // Manually purchase a server (NOT through Netscript)
-export function purchaseServer(hostname: string, ram: number, cost: number): void {
+export function purchaseServer(hostname: string, ram: number): void {
+  const cost = getPurchaseServerCost(ram);
+  if (cost === Infinity) {
+    return;
+  }
+
   //Check if player has enough money
   if (!Player.canAfford(cost)) {
     dialogBoxCreate("You don't have enough money to purchase this server!");