2019-04-01 11:23:25 +02:00
|
|
|
/**
|
|
|
|
* React Subcomponent for displaying a location's UI, when that location is a tech vendor
|
|
|
|
*
|
|
|
|
* This subcomponent renders all of the buttons for purchasing things from tech vendors
|
|
|
|
*/
|
2021-09-11 07:54:19 +02:00
|
|
|
import React, { useState, useEffect } from "react";
|
2021-09-25 21:34:12 +02:00
|
|
|
import Typography from "@mui/material/Typography";
|
|
|
|
import Button from "@mui/material/Button";
|
2019-04-01 11:23:25 +02:00
|
|
|
|
2021-09-05 01:09:30 +02:00
|
|
|
import { Location } from "../Location";
|
|
|
|
import { RamButton } from "./RamButton";
|
|
|
|
import { TorButton } from "./TorButton";
|
|
|
|
import { CoresButton } from "./CoresButton";
|
2019-04-01 11:23:25 +02:00
|
|
|
|
2021-09-05 01:09:30 +02:00
|
|
|
import { getPurchaseServerCost } from "../../Server/ServerPurchases";
|
2019-04-01 11:23:25 +02:00
|
|
|
|
2021-09-05 01:09:30 +02:00
|
|
|
import { Money } from "../../ui/React/Money";
|
2021-10-01 02:06:40 +02:00
|
|
|
import { use } from "../../ui/Context";
|
|
|
|
import { PurchaseServerModal } from "./PurchaseServerModal";
|
2021-10-12 00:14:10 +02:00
|
|
|
import { numeralWrapper } from "../../ui/numeralFormat";
|
2021-10-01 02:06:40 +02:00
|
|
|
|
|
|
|
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 (
|
|
|
|
<>
|
|
|
|
<Button onClick={() => setOpen(true)} disabled={!player.canAfford(cost)}>
|
2021-10-12 00:14:10 +02:00
|
|
|
Purchase {numeralWrapper.formatRAM(props.ram)} Server -
|
2021-10-01 02:06:40 +02:00
|
|
|
<Money money={cost} player={player} />
|
|
|
|
</Button>
|
|
|
|
<PurchaseServerModal
|
|
|
|
open={open}
|
|
|
|
onClose={() => setOpen(false)}
|
|
|
|
ram={props.ram}
|
|
|
|
cost={cost}
|
|
|
|
rerender={props.rerender}
|
|
|
|
/>
|
|
|
|
<br />
|
|
|
|
</>
|
|
|
|
);
|
|
|
|
}
|
2021-09-10 09:07:05 +02:00
|
|
|
|
2019-04-01 11:23:25 +02:00
|
|
|
type IProps = {
|
2021-09-05 01:09:30 +02:00
|
|
|
loc: Location;
|
|
|
|
};
|
2019-04-01 11:23:25 +02:00
|
|
|
|
2021-09-04 08:21:31 +02:00
|
|
|
export function TechVendorLocation(props: IProps): React.ReactElement {
|
2021-10-01 02:06:40 +02:00
|
|
|
const player = use.Player();
|
2021-09-07 23:26:49 +02:00
|
|
|
const setRerender = useState(false)[1];
|
2021-09-09 09:17:01 +02:00
|
|
|
function rerender(): void {
|
2021-09-07 23:26:49 +02:00
|
|
|
setRerender((old) => !old);
|
|
|
|
}
|
2021-09-10 09:07:05 +02:00
|
|
|
|
2021-09-11 07:54:19 +02:00
|
|
|
useEffect(() => {
|
|
|
|
const id = setInterval(rerender, 1000);
|
|
|
|
return () => clearInterval(id);
|
|
|
|
}, []);
|
2021-09-04 08:21:31 +02:00
|
|
|
|
2021-09-05 01:09:30 +02:00
|
|
|
const purchaseServerButtons: React.ReactNode[] = [];
|
2021-09-09 05:47:34 +02:00
|
|
|
for (let i = props.loc.techVendorMinRam; i <= props.loc.techVendorMaxRam; i *= 2) {
|
2021-10-01 02:06:40 +02:00
|
|
|
purchaseServerButtons.push(<ServerButton key={i} ram={i} rerender={rerender} />);
|
2021-09-05 01:09:30 +02:00
|
|
|
}
|
2021-09-04 08:21:31 +02:00
|
|
|
|
2021-09-05 01:09:30 +02:00
|
|
|
return (
|
2021-10-01 19:08:37 +02:00
|
|
|
<>
|
2021-09-05 01:09:30 +02:00
|
|
|
{purchaseServerButtons}
|
|
|
|
<br />
|
2021-10-01 07:00:50 +02:00
|
|
|
<Typography>
|
2021-09-09 05:47:34 +02:00
|
|
|
<i>"You can order bigger servers via scripts. We don't take custom order in person."</i>
|
2021-09-25 21:34:12 +02:00
|
|
|
</Typography>
|
2021-09-05 01:09:30 +02:00
|
|
|
<br />
|
2021-10-01 02:06:40 +02:00
|
|
|
<TorButton p={player} rerender={rerender} />
|
2021-09-25 21:34:12 +02:00
|
|
|
<br />
|
2021-10-01 02:06:40 +02:00
|
|
|
<RamButton p={player} rerender={rerender} />
|
2021-09-25 21:34:12 +02:00
|
|
|
<br />
|
2021-10-01 02:06:40 +02:00
|
|
|
<CoresButton p={player} rerender={rerender} />
|
2021-10-01 19:08:37 +02:00
|
|
|
</>
|
2021-09-05 01:09:30 +02:00
|
|
|
);
|
2019-04-01 11:23:25 +02:00
|
|
|
}
|