Merge pull request #1210 from vmesecher/dev

Changes PurchaseServerPopup to a React element. Small CSS changes on popups.
This commit is contained in:
hydroflame 2021-09-11 02:12:32 -04:00 committed by GitHub
commit bc33f67409
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 94 additions and 58 deletions

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

@ -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;

@ -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

@ -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>
</>
);
}

@ -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={
<>

@ -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 {
const cost = getPurchaseServerCost(ram);
export function purchaseServer(hostname: string, ram: number, cost: number, p: IPlayer): void {
//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;