Merge pull request #1210 from vmesecher/dev

Changes PurchaseServerPopup to a React element. Small CSS changes on popups.

css/_reset.scss

@@ -11,5 +11,5 @@
   margin: 0;
   padding: 0;
   box-sizing: border-box;
-  vertical-align: top;
+  vertical-align: middle;
 }

css/popupboxes.scss

@@ -27,6 +27,10 @@
   color: var(--my-font-color);
 }
 
+.popup-box-input-div {
+  margin: 2px;
+}
+
 .popup-box-button,
 .popup-box-button-inactive {
   color: #aaa;
@@ -189,11 +193,6 @@
   background-color: #000;
 }
 
-/* Generic Yes No Box */
-#yes-no-text-input-box-input {
-  color: #fff;
-}
-
 /* Game Options */
 #game-options-container {
   transition: opacity 400ms ease-in;

src/Locations/LocationsHelpers.tsx

@@ -9,11 +9,9 @@ import { CityName } from "./data/CityNames";
 import { IPlayer } from "../PersonObjects/IPlayer";
 import { AddToAllServers, createUniqueRandomIp } from "../Server/AllServers";
 import { safetlyCreateUniqueServer } from "../Server/ServerHelpers";
-import { getPurchaseServerCost, purchaseServer } from "../Server/ServerPurchases";
 import { SpecialServerIps } from "../Server/SpecialServerIps";
 import { Settings } from "../Settings/Settings";
 
-import { numeralWrapper } from "../ui/numeralFormat";
 import { Money } from "../ui/React/Money";
 
 import { dialogBoxCreate } from "../../utils/DialogBox";
@@ -22,10 +20,6 @@ import {
   yesNoBoxGetNoButton,
   yesNoBoxClose,
   yesNoBoxCreate,
-  yesNoTxtInpBoxGetYesButton,
-  yesNoTxtInpBoxGetNoButton,
-  yesNoTxtInpBoxClose,
-  yesNoTxtInpBoxCreate,
 } from "../../utils/YesNoBox";
 
 import { createElement } from "../../utils/uiHelpers/createElement";
@@ -78,45 +72,6 @@ export function createTravelPopup(destination: CityName, travelFn: TravelFunctio
   );
 }
 
-/**
- * Create a pop-up box that lets the player purchase a server.
- * @param {number} ram - Amount of RAM (GB) on server
- * @param {IPlayer} p - Player object
- */
-export function createPurchaseServerPopup(ram: number, p: IPlayer): void {
-  const cost = getPurchaseServerCost(ram);
-  if (cost === Infinity) {
-    dialogBoxCreate("Something went wrong when trying to purchase this server. Please contact developer.");
-    return;
-  }
-
-  const yesBtn = yesNoTxtInpBoxGetYesButton();
-  const noBtn = yesNoTxtInpBoxGetNoButton();
-  if (yesBtn == null || noBtn == null) {
-    return;
-  }
-  yesBtn.innerHTML = "Purchase Server";
-  noBtn.innerHTML = "Cancel";
-  yesBtn.addEventListener("click", function () {
-    purchaseServer(ram, p);
-    yesNoTxtInpBoxClose();
-  });
-  noBtn.addEventListener("click", function () {
-    yesNoTxtInpBoxClose();
-  });
-
-  yesNoTxtInpBoxCreate(
-    <>
-      Would you like to purchase a new server with {numeralWrapper.formatRAM(ram)} of RAM for{" "}
-      <Money money={cost} player={p} />?
-      <br />
-      <br />
-      Please enter the server hostname below:
-      <br />
-    </>,
-  );
-}
-
 /**
  * Create a popup that lets the player start a Corporation
  * @param {IPlayer} p - Player object

src/Locations/ui/PurchaseServerPopup.tsx

@@ -0,0 +1,69 @@
+/**
+ * React Component for the popup used to purchase a new server.
+ */
+ import React, { useState } from "react";
+ import { removePopup } from "../../ui/React/createPopup";
+ import { purchaseServer } from "../../Server/ServerPurchases";
+ import { numeralWrapper } from "../../ui/numeralFormat";
+ import { Money } from "../../ui/React/Money";
+ import { IPlayer } from "../../PersonObjects/IPlayer";
+ import { StdButton } from "../../ui/React/StdButton";
+ 
+ interface IPurchaseServerPopupProps {
+   ram: number;
+   cost: number;
+   p: IPlayer;
+   popupId: string;
+   rerender: () => void;
+ }
+ 
+ export function PurchaseServerPopup(props: IPurchaseServerPopupProps): React.ReactElement {
+   const [hostname, setHostname] = useState("");
+ 
+   function tryToPurchaseServer(): void {
+     purchaseServer(hostname, props.ram, props.cost, props.p);
+
+     removePopup(props.popupId);
+   }
+ 
+   function cancel(): void {
+     removePopup(props.popupId);
+   }
+ 
+   function onKeyUp(event: React.KeyboardEvent<HTMLInputElement>): void {
+     if (event.keyCode === 13) tryToPurchaseServer();
+     if (event.keyCode === 27) cancel();
+   }
+ 
+   function onChange(event: React.ChangeEvent<HTMLInputElement>): void {
+     setHostname(event.target.value);
+     props.rerender();
+   }
+ 
+   return (
+    <>
+      Would you like to purchase a new server with {numeralWrapper.formatRAM(props.ram)} of RAM for{" "}
+      <Money money={props.cost} player={props.p} />?
+      <br />
+      <br />
+      Please enter the server hostname below:
+      <br />
+      <div className="popup-box-input-div">
+        <input
+            autoFocus
+            onKeyUp={onKeyUp}
+            onChange={onChange}
+            className="text-input noselect"
+            type="text"
+            placeholder="Unique Hostname"
+        />
+        <StdButton
+          onClick={tryToPurchaseServer}
+          text="Purchase Server"
+          disabled={!props.p.canAfford(props.cost)}
+        />
+      </div>
+    </>
+   );
+ }
+ 

src/Locations/ui/TechVendorLocation.tsx

@@ -6,7 +6,6 @@
 import React, { useState, useEffect } from "react";
 
 import { Location } from "../Location";
-import { createPurchaseServerPopup } from "../LocationsHelpers";
 import { RamButton } from "./RamButton";
 import { TorButton } from "./TorButton";
 import { CoresButton } from "./CoresButton";
@@ -14,8 +13,12 @@ import { CoresButton } from "./CoresButton";
 import { IPlayer } from "../../PersonObjects/IPlayer";
 import { getPurchaseServerCost } from "../../Server/ServerPurchases";
 
+
 import { StdButton } from "../../ui/React/StdButton";
 import { Money } from "../../ui/React/Money";
+import { createPopup } from "../../ui/React/createPopup";
+import { PurchaseServerPopup } from "./PurchaseServerPopup";
+
 
 type IProps = {
   loc: Location;
@@ -23,10 +26,24 @@ type IProps = {
 };
 
 export function TechVendorLocation(props: IProps): React.ReactElement {
+  
+
   const setRerender = useState(false)[1];
   function rerender(): void {
     setRerender((old) => !old);
   }
+
+  function openPurchaseServer(ram: number, cost: number, p: IPlayer): void {
+    const popupId = "purchase-server-popup";
+    createPopup(popupId, PurchaseServerPopup, {
+      ram: ram,
+      cost: cost,
+      p: p,
+      popupId: popupId,
+      rerender: rerender
+    });
+  }
+
   useEffect(() => {
     const id = setInterval(rerender, 1000);
     return () => clearInterval(id);
@@ -39,7 +56,7 @@ export function TechVendorLocation(props: IProps): React.ReactElement {
     purchaseServerButtons.push(
       <StdButton
         key={i}
-        onClick={() => createPurchaseServerPopup(i, props.p)}
+        onClick={() => openPurchaseServer(i, cost, props.p)}
         style={btnStyle}
         text={
           <>

src/Server/ServerPurchases.ts

@@ -10,7 +10,6 @@ import { CONSTANTS } from "../Constants";
 import { IPlayer } from "../PersonObjects/IPlayer";
 
 import { dialogBoxCreate } from "../../utils/DialogBox";
-import { yesNoTxtInpBoxGetInput } from "../../utils/YesNoBox";
 import { isPowerOfTwo } from "../../utils/helpers/isPowerOfTwo";
 
 // Returns the cost of purchasing a server with the given RAM
@@ -44,9 +43,7 @@ export function getPurchaseServerMaxRam(): number {
 }
 
 // Manually purchase a server (NOT through Netscript)
-export function purchaseServer(ram: number, p: IPlayer): void {
+export function purchaseServer(hostname: string, ram: number, cost: number, p: IPlayer): void {
-  const cost = getPurchaseServerCost(ram);
-
   //Check if player has enough money
   if (!p.canAfford(cost)) {
     dialogBoxCreate("You don't have enough money to purchase this server!", false);
@@ -65,7 +62,6 @@ export function purchaseServer(ram: number, p: IPlayer): void {
     return;
   }
 
-  const hostname = yesNoTxtInpBoxGetInput();
   if (hostname == "") {
     dialogBoxCreate("You must enter a hostname for your new server!");
     return;