mirror of
https://github.com/bitburner-official/bitburner-src.git
synced 2024-11-10 09:43:54 +01:00
Merge pull request #1210 from vmesecher/dev
Changes PurchaseServerPopup to a React element. Small CSS changes on popups.
This commit is contained in:
commit
bc33f67409
@ -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
|
||||
|
69
src/Locations/ui/PurchaseServerPopup.tsx
Normal file
69
src/Locations/ui/PurchaseServerPopup.tsx
Normal file
@ -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;
|
||||
|
Loading…
Reference in New Issue
Block a user