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";
|
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 { IPlayer } from "../../PersonObjects/IPlayer";
|
|
|
|
import { getPurchaseServerCost } from "../../Server/ServerPurchases";
|
2019-04-01 11:23:25 +02:00
|
|
|
|
2021-09-10 09:07:05 +02:00
|
|
|
|
2021-09-05 01:09:30 +02:00
|
|
|
import { StdButton } from "../../ui/React/StdButton";
|
|
|
|
import { Money } from "../../ui/React/Money";
|
2021-09-10 09:07:05 +02:00
|
|
|
import { createPopup } from "../../ui/React/createPopup";
|
|
|
|
import { PurchaseServerPopup } from "./PurchaseServerPopup";
|
|
|
|
|
2019-04-01 11:23:25 +02:00
|
|
|
|
|
|
|
type IProps = {
|
2021-09-05 01:09:30 +02:00
|
|
|
loc: Location;
|
|
|
|
p: IPlayer;
|
|
|
|
};
|
2019-04-01 11:23:25 +02:00
|
|
|
|
2021-09-04 08:21:31 +02:00
|
|
|
export function TechVendorLocation(props: IProps): React.ReactElement {
|
2021-09-10 09:07:05 +02:00
|
|
|
|
|
|
|
|
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
|
|
|
|
|
|
|
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
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2021-09-11 07:54:19 +02:00
|
|
|
useEffect(() => {
|
|
|
|
const id = setInterval(rerender, 1000);
|
|
|
|
return () => clearInterval(id);
|
|
|
|
}, []);
|
2021-09-05 01:09:30 +02:00
|
|
|
const btnStyle = { display: "block" };
|
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-09-05 01:09:30 +02:00
|
|
|
const cost = getPurchaseServerCost(i);
|
|
|
|
purchaseServerButtons.push(
|
|
|
|
<StdButton
|
|
|
|
key={i}
|
2021-09-10 09:07:05 +02:00
|
|
|
onClick={() => openPurchaseServer(i, cost, props.p)}
|
2021-09-05 01:09:30 +02:00
|
|
|
style={btnStyle}
|
|
|
|
text={
|
|
|
|
<>
|
|
|
|
Purchase {i}GB Server - <Money money={cost} player={props.p} />
|
|
|
|
</>
|
|
|
|
}
|
|
|
|
disabled={!props.p.canAfford(cost)}
|
|
|
|
/>,
|
|
|
|
);
|
|
|
|
}
|
2021-09-04 08:21:31 +02:00
|
|
|
|
2021-09-05 01:09:30 +02:00
|
|
|
return (
|
|
|
|
<div>
|
|
|
|
{purchaseServerButtons}
|
|
|
|
<br />
|
|
|
|
<p className="noselect">
|
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-05 01:09:30 +02:00
|
|
|
</p>
|
|
|
|
<br />
|
2021-09-07 23:26:49 +02:00
|
|
|
<TorButton p={props.p} rerender={rerender} />
|
|
|
|
<RamButton p={props.p} rerender={rerender} />
|
|
|
|
<CoresButton p={props.p} rerender={rerender} />
|
2021-09-05 01:09:30 +02:00
|
|
|
</div>
|
|
|
|
);
|
2019-04-01 11:23:25 +02:00
|
|
|
}
|