few fixes in the purchase server popup

This commit is contained in:
Olivier Gagnon 2021-09-11 02:16:14 -04:00
parent bc33f67409
commit 99e82cd867

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