diff --git a/src/Company/ui/QuitJobModal.tsx b/src/Company/ui/QuitJobModal.tsx new file mode 100644 index 000000000..7ee05b506 --- /dev/null +++ b/src/Company/ui/QuitJobModal.tsx @@ -0,0 +1,32 @@ +import React from "react"; +import { Company } from "../Company"; +import { use } from "../../ui/Context"; +import { Modal } from "../../ui/React/Modal"; +import Typography from "@mui/material/Typography"; +import Button from "@mui/material/Button"; + +interface IProps { + open: boolean; + onClose: () => void; + locName: string; + company: Company; + onQuit: () => void; +} + +export function QuitJobModal(props: IProps): React.ReactElement { + const player = use.Player(); + function quit(): void { + player.quitJob(props.locName); + props.onQuit(); + props.onClose(); + } + + return ( + + Would you like to quit your job at {props.company.name}? +
+
+ +
+ ); +} diff --git a/src/Company/ui/QuitJobPopup.tsx b/src/Company/ui/QuitJobPopup.tsx deleted file mode 100644 index b4ad9883e..000000000 --- a/src/Company/ui/QuitJobPopup.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import React from "react"; -import { Company } from "../Company"; -import { IPlayer } from "../../PersonObjects/IPlayer"; -import { removePopup } from "../../ui/React/createPopup"; - -interface IProps { - locName: string; - company: Company; - player: IPlayer; - onQuit: () => void; - popupId: string; -} - -export function QuitJobPopup(props: IProps): React.ReactElement { - function quit(): void { - props.player.quitJob(props.locName); - props.onQuit(); - removePopup(props.popupId); - } - - return ( - <> - Would you like to quit your job at {props.company.name}? -
-
- - - ); -} diff --git a/src/Corporation/ui/DiscontinueProductModal.tsx b/src/Corporation/ui/DiscontinueProductModal.tsx index 38069e5a7..00b1b614f 100644 --- a/src/Corporation/ui/DiscontinueProductModal.tsx +++ b/src/Corporation/ui/DiscontinueProductModal.tsx @@ -3,6 +3,8 @@ import React from "react"; import { Product } from "../Product"; import { Modal } from "../../ui/React/Modal"; import { useDivision } from "./Context"; +import Typography from "@mui/material/Typography"; +import Button from "@mui/material/Button"; interface IProps { open: boolean; @@ -22,13 +24,11 @@ export function DiscontinueProductModal(props: IProps): React.ReactElement { return ( -

+ Are you sure you want to do this? Discontinuing a product removes it completely and permanently. You will no longer produce this product and all of its existing stock will be removed and left unsold -

- + +
); } diff --git a/src/Corporation/ui/IndustryProductEquation.tsx b/src/Corporation/ui/IndustryProductEquation.tsx index 2eaf932e5..3a4d12122 100644 --- a/src/Corporation/ui/IndustryProductEquation.tsx +++ b/src/Corporation/ui/IndustryProductEquation.tsx @@ -19,11 +19,9 @@ export function IndustryProductEquation(props: IProps): React.ReactElement { } return ( - - String.raw`1\text{ }${p}`).join("+")} - /> - + String.raw`1\text{ }${p}`).join("+")} + /> ); } diff --git a/src/Corporation/ui/LimitProductProductionModal.tsx b/src/Corporation/ui/LimitProductProductionModal.tsx index 6e850f93c..ec087799c 100644 --- a/src/Corporation/ui/LimitProductProductionModal.tsx +++ b/src/Corporation/ui/LimitProductProductionModal.tsx @@ -2,6 +2,9 @@ import React, { useState } from "react"; import { Product } from "../Product"; import { LimitProductProduction } from "../Actions"; import { Modal } from "../../ui/React/Modal"; +import Typography from "@mui/material/Typography"; +import Button from "@mui/material/Button"; +import TextField from "@mui/material/TextField"; interface IProps { open: boolean; @@ -32,26 +35,12 @@ export function LimitProductProductionModal(props: IProps): React.ReactElement { return ( -

+ Enter a limit to the amount of this product you would like to product per second. Leave the box empty to set no limit. -

- - + + +
); } diff --git a/src/Corporation/ui/ProductMarketTaModal.tsx b/src/Corporation/ui/ProductMarketTaModal.tsx index cc93bc1c5..d2ab50afb 100644 --- a/src/Corporation/ui/ProductMarketTaModal.tsx +++ b/src/Corporation/ui/ProductMarketTaModal.tsx @@ -3,12 +3,19 @@ import { numeralWrapper } from "../../ui/numeralFormat"; import { Product } from "../Product"; import { Modal } from "../../ui/React/Modal"; import { useDivision } from "./Context"; +import Typography from "@mui/material/Typography"; +import TextField from "@mui/material/TextField"; +import FormControlLabel from "@mui/material/FormControlLabel"; +import Switch from "@mui/material/Switch"; +import Tooltip from "@mui/material/Tooltip"; interface ITa2Props { product: Product; } function MarketTA2(props: ITa2Props): React.ReactElement { + const division = useDivision(); + if (!division.hasResearch("Market-TA.II")) return <>; const markupLimit = props.product.rat / props.product.mku; const [value, setValue] = useState(props.product.pCost); const setRerender = useState(false)[1]; @@ -35,38 +42,35 @@ function MarketTA2(props: ITa2Props): React.ReactElement { return ( <> -

-
- - Market-TA.II - -
+ Market-TA.II +
+ If you sell at {numeralWrapper.formatMoney(sCost)}, then you will sell{" "} {numeralWrapper.format(markup, "0.00000")}x as much compared to if you sold at market price. -

- -
- - -
-

+ + +
+ } + label={ + + If this is enabled, then this Material will automatically be sold at the optimal price such that the + amount sold matches the amount produced. (i.e. the highest possible price, while still ensuring that all + produced materials will be sold) + + } + > + Use Market-TA.II for Auto-Sale Price + + } + /> + + Note that Market-TA.II overrides Market-TA.I. This means that if both are enabled, then Market-TA.II will take effect, not Market-TA.I -

+ ); } @@ -93,35 +97,30 @@ export function ProductMarketTaModal(props: IProps): React.ReactElement { return ( - <> -

- - Market-TA.I - -
- The maximum sale price you can mark this up to is{" "} - {numeralWrapper.formatMoney(props.product.pCost + markupLimit)}. This means that if you set the sale price - higher than this, you will begin to experience a loss in number of sales. -

-
- - -
- {division.hasResearch("Market-TA.II") && } - + Market-TA.I + + The maximum sale price you can mark this up to is{" "} + {numeralWrapper.formatMoney(props.product.pCost + markupLimit)}. This means that if you set the sale price + higher than this, you will begin to experience a loss in number of sales + + + } + label={ + + If this is enabled, then this Material will automatically be sold at the price identified by Market-TA.I + (i.e. the price shown above) + + } + > + Use Market-TA.I for Auto-Sale Price + + } + /> + +
); } diff --git a/src/DevMenu/ui/Augmentations.tsx b/src/DevMenu/ui/Augmentations.tsx index 82a4d65b8..8bdcb4b8f 100644 --- a/src/DevMenu/ui/Augmentations.tsx +++ b/src/DevMenu/ui/Augmentations.tsx @@ -8,6 +8,7 @@ import ExpandMoreIcon from "@mui/icons-material/ExpandMore"; import Select, { SelectChangeEvent } from "@mui/material/Select"; import { IPlayer } from "../../PersonObjects/IPlayer"; import { AugmentationNames } from "../../Augmentation/data/AugmentationNames"; +import Typography from "@mui/material/Typography"; import MenuItem from "@mui/material/MenuItem"; import IconButton from "@mui/material/IconButton"; import ReplyAllIcon from "@mui/icons-material/ReplyAll"; @@ -49,7 +50,7 @@ export function Augmentations(props: IProps): React.ReactElement { - Aug: + Aug: @@ -92,7 +93,7 @@ export function Companies(): React.ReactElement { - Reputation: + Reputation: - Favor: + Favor: - All Reputation: + All Reputation: @@ -131,7 +132,7 @@ export function Companies(): React.ReactElement { - All Favor: + All Favor: diff --git a/src/DevMenu/ui/Corporation.tsx b/src/DevMenu/ui/Corporation.tsx index d2ad09299..dfaf39407 100644 --- a/src/DevMenu/ui/Corporation.tsx +++ b/src/DevMenu/ui/Corporation.tsx @@ -5,6 +5,7 @@ import AccordionSummary from "@mui/material/AccordionSummary"; import AccordionDetails from "@mui/material/AccordionDetails"; import ExpandMoreIcon from "@mui/icons-material/ExpandMore"; +import Typography from "@mui/material/Typography"; import Button from "@mui/material/Button"; import { Adjuster } from "./Adjuster"; import { IPlayer } from "../../PersonObjects/IPlayer"; @@ -82,7 +83,7 @@ export function Corporation(props: IProps): React.ReactElement { - Cycles: + Cycles: - Faction: + Faction: @@ -138,7 +139,7 @@ export function Factions(props: IProps): React.ReactElement { - Reputation: + Reputation: - Favor: + Favor: - All Reputation: + All Reputation: @@ -177,7 +178,7 @@ export function Factions(props: IProps): React.ReactElement { - All Favor: + All Favor: diff --git a/src/DevMenu/ui/Gang.tsx b/src/DevMenu/ui/Gang.tsx index 9d51bd480..84a26c30e 100644 --- a/src/DevMenu/ui/Gang.tsx +++ b/src/DevMenu/ui/Gang.tsx @@ -1,5 +1,6 @@ import React from "react"; +import Typography from "@mui/material/Typography"; import Accordion from "@mui/material/Accordion"; import AccordionSummary from "@mui/material/AccordionSummary"; import AccordionDetails from "@mui/material/AccordionDetails"; @@ -45,7 +46,7 @@ export function Gang(props: IProps): React.ReactElement { - Cycles: + Cycles: - Program: + Program: @@ -98,7 +99,7 @@ export function Servers(): React.ReactElement { - Root: + Root: @@ -109,7 +110,7 @@ export function Servers(): React.ReactElement { - Security: + Security: @@ -120,7 +121,7 @@ export function Servers(): React.ReactElement { - Money: + Money: diff --git a/src/DevMenu/ui/Sleeves.tsx b/src/DevMenu/ui/Sleeves.tsx index 8ee395e0b..41279852e 100644 --- a/src/DevMenu/ui/Sleeves.tsx +++ b/src/DevMenu/ui/Sleeves.tsx @@ -6,6 +6,7 @@ import AccordionDetails from "@mui/material/AccordionDetails"; import ExpandMoreIcon from "@mui/icons-material/ExpandMore"; import Button from "@mui/material/Button"; +import Typography from "@mui/material/Typography"; import { IPlayer } from "../../PersonObjects/IPlayer"; interface IProps { @@ -47,7 +48,7 @@ export function Sleeves(props: IProps): React.ReactElement { - Shock: + Shock: @@ -58,7 +59,7 @@ export function Sleeves(props: IProps): React.ReactElement { - Sync: + Sync: diff --git a/src/DevMenu/ui/SourceFiles.tsx b/src/DevMenu/ui/SourceFiles.tsx index 2468767af..6e465313d 100644 --- a/src/DevMenu/ui/SourceFiles.tsx +++ b/src/DevMenu/ui/SourceFiles.tsx @@ -5,6 +5,7 @@ import AccordionSummary from "@mui/material/AccordionSummary"; import AccordionDetails from "@mui/material/AccordionDetails"; import ExpandMoreIcon from "@mui/icons-material/ExpandMore"; +import Typography from "@mui/material/Typography"; import Button from "@mui/material/Button"; import { PlayerOwnedSourceFile } from "../../SourceFile/PlayerOwnedSourceFile"; import { IPlayer } from "../../PersonObjects/IPlayer"; @@ -60,7 +61,7 @@ export function SourceFiles(props: IProps): React.ReactElement { - Exploits: + Exploits: @@ -68,7 +69,7 @@ export function SourceFiles(props: IProps): React.ReactElement { - All: + All: @@ -90,7 +91,7 @@ export function SourceFiles(props: IProps): React.ReactElement { {validSFN.map((i) => ( - SF-{i}: + SF-{i}: diff --git a/src/DevMenu/ui/Stats.tsx b/src/DevMenu/ui/Stats.tsx index b7f03418d..0867b09ba 100644 --- a/src/DevMenu/ui/Stats.tsx +++ b/src/DevMenu/ui/Stats.tsx @@ -5,6 +5,7 @@ import AccordionSummary from "@mui/material/AccordionSummary"; import AccordionDetails from "@mui/material/AccordionDetails"; import ExpandMoreIcon from "@mui/icons-material/ExpandMore"; +import Typography from "@mui/material/Typography"; import Button from "@mui/material/Button"; import { Adjuster } from "./Adjuster"; import { IPlayer } from "../../PersonObjects/IPlayer"; @@ -145,7 +146,7 @@ export function Stats(props: IProps): React.ReactElement { - All: + All: @@ -154,7 +155,7 @@ export function Stats(props: IProps): React.ReactElement { - Hacking: + Hacking: - Strength: + Strength: - Defense: + Defense: - Dexterity: + Dexterity: - Agility: + Agility: - Charisma: + Charisma: - Intelligence: + Intelligence: - Karma: + Karma: - Symbol: + Symbol: @@ -97,7 +98,7 @@ export function StockMarket(): React.ReactElement { - Price: + Price: @@ -106,7 +107,7 @@ export function StockMarket(): React.ReactElement { - Caps: + Caps: diff --git a/src/Faction/ui/AugmentationsPage.tsx b/src/Faction/ui/AugmentationsPage.tsx index 4dc5d9dc2..affd3ac75 100644 --- a/src/Faction/ui/AugmentationsPage.tsx +++ b/src/Faction/ui/AugmentationsPage.tsx @@ -175,7 +175,7 @@ export function AugmentationsPage(props: IProps): React.ReactElement { } return ( -
+ <> Faction Augmentations @@ -197,6 +197,6 @@ export function AugmentationsPage(props: IProps): React.ReactElement { {ownedElem}
-
+ ); } diff --git a/src/Faction/ui/PurchaseAugmentationModal.tsx b/src/Faction/ui/PurchaseAugmentationModal.tsx new file mode 100644 index 000000000..3ac4a2f96 --- /dev/null +++ b/src/Faction/ui/PurchaseAugmentationModal.tsx @@ -0,0 +1,55 @@ +import React from "react"; + +import { Augmentation } from "../../Augmentation/Augmentation"; +import { Faction } from "../Faction"; +import { purchaseAugmentation } from "../FactionHelpers"; +import { isRepeatableAug } from "../../Augmentation/AugmentationHelpers"; +import { Money } from "../../ui/React/Money"; +import { Modal } from "../../ui/React/Modal"; +import { use } from "../../ui/Context"; +import Typography from "@mui/material/Typography"; +import Button from "@mui/material/Button"; + +interface IProps { + open: boolean; + onClose: () => void; + faction: Faction; + aug: Augmentation; + rerender: () => void; +} + +export function PurchaseAugmentationModal(props: IProps): React.ReactElement { + const player = use.Player(); + const factionInfo = props.faction.getInfo(); + + function buy(): void { + if (!isRepeatableAug(props.aug) && player.hasAugmentation(props.aug)) { + return; + } + + purchaseAugmentation(props.aug, props.faction); + props.rerender(); + props.onClose(); + } + + return ( + + {props.aug.name} + + {props.aug.info} +
+
+ {props.aug.stats} +
+
+ Would you like to purchase the {props.aug.name} Augmentation for  + ? +
+
+
+ +
+ ); +} diff --git a/src/Faction/ui/PurchaseAugmentationPopup.tsx b/src/Faction/ui/PurchaseAugmentationPopup.tsx deleted file mode 100644 index 8b253a500..000000000 --- a/src/Faction/ui/PurchaseAugmentationPopup.tsx +++ /dev/null @@ -1,51 +0,0 @@ -import React from "react"; - -import { Augmentation } from "../../Augmentation/Augmentation"; -import { Faction } from "../../Faction/Faction"; -import { IPlayer } from "../../PersonObjects/IPlayer"; -import { purchaseAugmentation } from "../FactionHelpers"; -import { isRepeatableAug } from "../../Augmentation/AugmentationHelpers"; -import { Money } from "../../ui/React/Money"; -import { removePopup } from "../../ui/React/createPopup"; - -interface IProps { - player: IPlayer; - faction: Faction; - aug: Augmentation; - rerender: () => void; - popupId: string; -} - -export function PurchaseAugmentationPopup(props: IProps): React.ReactElement { - const factionInfo = props.faction.getInfo(); - - function buy(): void { - if (!isRepeatableAug(props.aug) && props.player.hasAugmentation(props.aug)) { - return; - } - - purchaseAugmentation(props.aug, props.faction); - props.rerender(); - removePopup(props.popupId); - } - - return ( - <> -

{props.aug.name}

-
- {props.aug.info} -
-
- {props.aug.stats} -
-
- Would you like to purchase the {props.aug.name} Augmentation for  - ? -
-
- - - ); -} diff --git a/src/Faction/ui/PurchaseableAugmentation.tsx b/src/Faction/ui/PurchaseableAugmentation.tsx index cbf6b6e85..b453b9d64 100644 --- a/src/Faction/ui/PurchaseableAugmentation.tsx +++ b/src/Faction/ui/PurchaseableAugmentation.tsx @@ -2,10 +2,10 @@ * React component for displaying a single augmentation for purchase through * the faction UI */ -import * as React from "react"; +import React, { useState } from "react"; import { getNextNeurofluxLevel, hasAugmentationPrereqs, purchaseAugmentation } from "../FactionHelpers"; -import { PurchaseAugmentationPopup } from "./PurchaseAugmentationPopup"; +import { PurchaseAugmentationModal } from "./PurchaseAugmentationModal"; import { Augmentations } from "../../Augmentation/Augmentations"; import { AugmentationNames } from "../../Augmentation/data/AugmentationNames"; @@ -14,7 +14,6 @@ import { IPlayer } from "../../PersonObjects/IPlayer"; import { Settings } from "../../Settings/Settings"; import { Money } from "../../ui/React/Money"; import { Reputation } from "../../ui/React/Reputation"; -import { createPopup } from "../../ui/React/createPopup"; import { Augmentation as AugFormat } from "../../ui/React/Augmentation"; import Button from "@mui/material/Button"; @@ -74,6 +73,7 @@ interface IProps { } export function PurchaseableAugmentation(props: IProps): React.ReactElement { + const [open, setOpen] = useState(false); const aug = Augmentations[props.augName]; if (aug == null) throw new Error(`aug ${props.augName} does not exists`); @@ -122,14 +122,7 @@ export function PurchaseableAugmentation(props: IProps): React.ReactElement { function handleClick(): void { if (color === "error") return; if (!Settings.SuppressBuyAugmentationConfirmation) { - const popupId = "purchase-augmentation-popup"; - createPopup(popupId, PurchaseAugmentationPopup, { - aug: aug, - faction: props.faction, - player: props.p, - rerender: props.rerender, - popupId: popupId, - }); + setOpen(true); } else { purchaseAugmentation(aug, props.faction); props.rerender(); @@ -143,6 +136,13 @@ export function PurchaseableAugmentation(props: IProps): React.ReactElement { + setOpen(false)} + aug={aug} + faction={props.faction} + rerender={props.rerender} + /> )} diff --git a/src/Locations/ui/City.tsx b/src/Locations/ui/City.tsx index 98be1b620..0c3ce8b08 100644 --- a/src/Locations/ui/City.tsx +++ b/src/Locations/ui/City.tsx @@ -37,7 +37,6 @@ function LocationLetter(location: Location): React.ReactElement { !old); @@ -179,18 +180,6 @@ export function CompanyLocation(props: IProps): React.ReactElement { } } - function quit(e: React.MouseEvent): void { - if (!e.isTrusted) return; - const popupId = `quit-job-popup`; - createPopup(popupId, QuitJobPopup, { - locName: props.locName, - company: company, - player: p, - onQuit: rerender, - popupId: popupId, - }); - } - const isEmployedHere = jobTitle != null; const favorGain = company.getFavorGain(); @@ -230,7 +219,14 @@ export function CompanyLocation(props: IProps): React.ReactElement {
     - + + setQuitOpen(false)} + /> )} {company.hasAgentPositions() && ( diff --git a/src/Locations/ui/CoresButton.tsx b/src/Locations/ui/CoresButton.tsx index 252461ee9..ed2fdac3b 100644 --- a/src/Locations/ui/CoresButton.tsx +++ b/src/Locations/ui/CoresButton.tsx @@ -31,10 +31,12 @@ export function CoresButton(props: IProps): React.ReactElement { return ( }> - + + + ); } diff --git a/src/Locations/ui/GenericLocation.tsx b/src/Locations/ui/GenericLocation.tsx index c8cbe1901..05e627c76 100644 --- a/src/Locations/ui/GenericLocation.tsx +++ b/src/Locations/ui/GenericLocation.tsx @@ -64,7 +64,7 @@ export function GenericLocation({ loc }: IProps): React.ReactElement { } if (loc.types.includes(LocationType.TechVendor)) { - content.push(); + content.push(); } if (loc.types.includes(LocationType.TravelAgency)) { diff --git a/src/Locations/ui/PurchaseServerModal.tsx b/src/Locations/ui/PurchaseServerModal.tsx new file mode 100644 index 000000000..a8e8a94c2 --- /dev/null +++ b/src/Locations/ui/PurchaseServerModal.tsx @@ -0,0 +1,67 @@ +/** + * React Component for the popup used to purchase a new server. + */ +import React, { useState } from "react"; +import { purchaseServer } from "../../Server/ServerPurchases"; +import { numeralWrapper } from "../../ui/numeralFormat"; +import { Money } from "../../ui/React/Money"; +import { Modal } from "../../ui/React/Modal"; +import { StdButton } from "../../ui/React/StdButton"; +import { use } from "../../ui/Context"; +import Typography from "@mui/material/Typography"; +import TextField from "@mui/material/TextField"; +import Button from "@mui/material/Button"; + +interface IProps { + open: boolean; + onClose: () => void; + ram: number; + cost: number; + rerender: () => void; +} + +export function PurchaseServerModal(props: IProps): React.ReactElement { + const player = use.Player(); + const [hostname, setHostname] = useState(""); + + function tryToPurchaseServer(): void { + purchaseServer(hostname, props.ram, props.cost, player); + props.onClose(); + } + + function onKeyUp(event: React.KeyboardEvent): void { + if (event.keyCode === 13) tryToPurchaseServer(); + } + + function onChange(event: React.ChangeEvent): void { + setHostname(event.target.value); + } + + return ( + + + Would you like to purchase a new server with {numeralWrapper.formatRAM(props.ram)} of RAM for{" "} + ? + +
+
+ Please enter the server hostname below: +
+ + + Buy + + ), + }} + /> +
+ ); +} diff --git a/src/Locations/ui/PurchaseServerPopup.tsx b/src/Locations/ui/PurchaseServerPopup.tsx deleted file mode 100644 index 607d04ce1..000000000 --- a/src/Locations/ui/PurchaseServerPopup.tsx +++ /dev/null @@ -1,58 +0,0 @@ -/** - * 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 onKeyUp(event: React.KeyboardEvent): void { - if (event.keyCode === 13) tryToPurchaseServer(); - } - - function onChange(event: React.ChangeEvent): void { - setHostname(event.target.value); - } - - return ( - <> - Would you like to purchase a new server with {numeralWrapper.formatRAM(props.ram)} of RAM for{" "} - ? -
-
- Please enter the server hostname below: -
-
- - -
- - ); -} diff --git a/src/Locations/ui/RamButton.tsx b/src/Locations/ui/RamButton.tsx index d3ea6edec..d3c093aa4 100644 --- a/src/Locations/ui/RamButton.tsx +++ b/src/Locations/ui/RamButton.tsx @@ -29,10 +29,12 @@ export function RamButton(props: IProps): React.ReactElement { return ( }> - + + + ); } diff --git a/src/Locations/ui/TechVendorLocation.tsx b/src/Locations/ui/TechVendorLocation.tsx index 1c4bc986d..8359767c2 100644 --- a/src/Locations/ui/TechVendorLocation.tsx +++ b/src/Locations/ui/TechVendorLocation.tsx @@ -12,36 +12,50 @@ import { RamButton } from "./RamButton"; import { TorButton } from "./TorButton"; 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"; +import { use } from "../../ui/Context"; +import { PurchaseServerModal } from "./PurchaseServerModal"; + +interface IServerProps { + ram: number; + rerender: () => void; +} + +function ServerButton(props: IServerProps): React.ReactElement { + const [open, setOpen] = useState(false); + const player = use.Player(); + const cost = getPurchaseServerCost(props.ram); + return ( + <> + + setOpen(false)} + ram={props.ram} + cost={cost} + rerender={props.rerender} + /> +
+ + ); +} type IProps = { loc: Location; - p: IPlayer; }; export function TechVendorLocation(props: IProps): React.ReactElement { + const player = use.Player(); 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); @@ -49,16 +63,7 @@ export function TechVendorLocation(props: IProps): React.ReactElement { const purchaseServerButtons: React.ReactNode[] = []; for (let i = props.loc.techVendorMinRam; i <= props.loc.techVendorMaxRam; i *= 2) { - const cost = getPurchaseServerCost(i); - purchaseServerButtons.push( - <> - -
- , - ); + purchaseServerButtons.push(); } return ( @@ -69,11 +74,11 @@ export function TechVendorLocation(props: IProps): React.ReactElement { "You can order bigger servers via scripts. We don't take custom order in person."
- +
- +
- + ); } diff --git a/src/Locations/ui/TorButton.tsx b/src/Locations/ui/TorButton.tsx index 6e4ffddd2..ed88439ef 100644 --- a/src/Locations/ui/TorButton.tsx +++ b/src/Locations/ui/TorButton.tsx @@ -25,7 +25,8 @@ export function TorButton(props: IProps): React.ReactElement { return ( ); }