2019-04-14 11:08:10 +02:00
|
|
|
/**
|
|
|
|
* React component for displaying a single augmentation for purchase through
|
|
|
|
* the faction UI
|
|
|
|
*/
|
|
|
|
import * as React from "react";
|
|
|
|
|
2021-09-13 00:03:07 +02:00
|
|
|
import { getNextNeurofluxLevel, hasAugmentationPrereqs, purchaseAugmentation } from "../FactionHelpers";
|
|
|
|
import { PurchaseAugmentationPopup } from "./PurchaseAugmentationPopup";
|
2019-04-14 11:08:10 +02:00
|
|
|
|
|
|
|
import { Augmentations } from "../../Augmentation/Augmentations";
|
|
|
|
import { AugmentationNames } from "../../Augmentation/data/AugmentationNames";
|
|
|
|
import { Faction } from "../../Faction/Faction";
|
|
|
|
import { IPlayer } from "../../PersonObjects/IPlayer";
|
|
|
|
import { Settings } from "../../Settings/Settings";
|
2021-03-31 06:45:21 +02:00
|
|
|
import { Money } from "../../ui/React/Money";
|
|
|
|
import { Reputation } from "../../ui/React/Reputation";
|
2021-09-13 00:03:07 +02:00
|
|
|
import { createPopup } from "../../ui/React/createPopup";
|
2019-04-14 11:08:10 +02:00
|
|
|
|
2021-03-31 06:45:21 +02:00
|
|
|
import { Augmentation as AugFormat } from "../../ui/React/Augmentation";
|
2021-09-21 02:42:13 +02:00
|
|
|
import Button from "@mui/material/Button";
|
|
|
|
import Typography from "@mui/material/Typography";
|
|
|
|
import Tooltip from "@mui/material/Tooltip";
|
|
|
|
import Box from "@mui/material/Box";
|
|
|
|
import { TableCell } from "../../ui/React/Table";
|
|
|
|
import TableRow from "@mui/material/TableRow";
|
|
|
|
|
|
|
|
interface IReqProps {
|
|
|
|
augName: string;
|
|
|
|
p: IPlayer;
|
|
|
|
hasReq: boolean;
|
|
|
|
rep: number;
|
|
|
|
hasRep: boolean;
|
|
|
|
cost: number;
|
|
|
|
hasCost: boolean;
|
|
|
|
}
|
|
|
|
|
|
|
|
function Requirements(props: IReqProps): React.ReactElement {
|
|
|
|
const aug = Augmentations[props.augName];
|
|
|
|
if (!props.hasReq) {
|
|
|
|
return (
|
2021-09-21 19:08:05 +02:00
|
|
|
<TableCell key={1} colSpan={2}>
|
|
|
|
<Typography color="error">
|
|
|
|
Requires{" "}
|
|
|
|
{aug.prereqs.map((aug, i) => (
|
|
|
|
<AugFormat key={i} name={aug} />
|
|
|
|
))}
|
|
|
|
</Typography>
|
2021-09-21 02:42:13 +02:00
|
|
|
</TableCell>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
return (
|
2021-09-21 19:08:05 +02:00
|
|
|
<React.Fragment key="f">
|
|
|
|
<TableCell key={1}>
|
2021-09-22 08:56:15 +02:00
|
|
|
<Typography>
|
2021-09-21 02:42:13 +02:00
|
|
|
<Money money={props.cost} player={props.p} />
|
|
|
|
</Typography>
|
|
|
|
</TableCell>
|
2021-09-21 19:08:05 +02:00
|
|
|
<TableCell key={2}>
|
2021-09-22 08:56:15 +02:00
|
|
|
<Typography color={props.hasRep ? "primary" : "error"}>
|
|
|
|
Requires {Reputation(props.rep)} faction reputation
|
|
|
|
</Typography>
|
2021-09-21 02:42:13 +02:00
|
|
|
</TableCell>
|
2021-09-21 19:08:05 +02:00
|
|
|
</React.Fragment>
|
2021-09-21 02:42:13 +02:00
|
|
|
);
|
|
|
|
}
|
2019-04-14 11:08:10 +02:00
|
|
|
|
2021-09-21 02:42:13 +02:00
|
|
|
interface IProps {
|
2021-09-05 01:09:30 +02:00
|
|
|
augName: string;
|
|
|
|
faction: Faction;
|
|
|
|
p: IPlayer;
|
|
|
|
rerender: () => void;
|
2021-09-21 02:42:13 +02:00
|
|
|
owned?: boolean;
|
|
|
|
}
|
2019-04-14 11:08:10 +02:00
|
|
|
|
2021-09-18 01:43:08 +02:00
|
|
|
export function PurchaseableAugmentation(props: IProps): React.ReactElement {
|
|
|
|
const aug = Augmentations[props.augName];
|
|
|
|
if (aug == null) throw new Error(`aug ${props.augName} does not exists`);
|
2021-09-05 01:09:30 +02:00
|
|
|
|
2021-09-18 01:43:08 +02:00
|
|
|
if (aug == null) {
|
|
|
|
console.error(
|
|
|
|
`Invalid Augmentation when trying to create PurchaseableAugmentation display element: ${props.augName}`,
|
|
|
|
);
|
|
|
|
return <></>;
|
|
|
|
}
|
2019-04-14 11:08:10 +02:00
|
|
|
|
2021-09-22 08:56:15 +02:00
|
|
|
const moneyCost = aug.baseCost * props.faction.getInfo().augmentationPriceMult;
|
|
|
|
const repCost = aug.baseRepRequirement * props.faction.getInfo().augmentationRepRequirementMult;
|
|
|
|
const hasReq = hasAugmentationPrereqs(aug);
|
|
|
|
const hasRep = props.faction.playerReputation >= repCost;
|
2021-09-22 16:59:58 +02:00
|
|
|
const hasCost = aug.baseCost === 0 || props.p.money.gt(aug.baseCost * props.faction.getInfo().augmentationPriceMult);
|
2021-09-18 01:43:08 +02:00
|
|
|
|
|
|
|
// Determine UI properties
|
2021-09-21 19:08:05 +02:00
|
|
|
const color: "error" | "primary" = !hasReq || !hasRep || !hasCost ? "error" : "primary";
|
2019-04-14 11:08:10 +02:00
|
|
|
|
2021-09-18 01:43:08 +02:00
|
|
|
// Determine button txt
|
|
|
|
let btnTxt = aug.name;
|
|
|
|
if (aug.name === AugmentationNames.NeuroFluxGovernor) {
|
|
|
|
btnTxt += ` - Level ${getNextNeurofluxLevel()}`;
|
|
|
|
}
|
2021-09-05 01:09:30 +02:00
|
|
|
|
2021-09-18 01:43:08 +02:00
|
|
|
let tooltip = <></>;
|
2021-09-21 19:08:05 +02:00
|
|
|
if (typeof aug.info === "string") {
|
2021-09-18 01:43:08 +02:00
|
|
|
tooltip = (
|
|
|
|
<>
|
2021-09-21 19:08:05 +02:00
|
|
|
<span>{aug.info}</span>
|
2021-09-18 01:43:08 +02:00
|
|
|
<br />
|
|
|
|
<br />
|
|
|
|
{aug.stats}
|
|
|
|
</>
|
|
|
|
);
|
2021-09-21 19:08:05 +02:00
|
|
|
} else
|
2021-09-18 01:43:08 +02:00
|
|
|
tooltip = (
|
|
|
|
<>
|
|
|
|
{aug.info}
|
|
|
|
<br />
|
|
|
|
<br />
|
|
|
|
{aug.stats}
|
|
|
|
</>
|
|
|
|
);
|
|
|
|
|
2021-09-21 02:42:13 +02:00
|
|
|
function handleClick(): void {
|
2021-09-21 19:08:05 +02:00
|
|
|
if (color === "error") return;
|
2021-09-21 02:42:13 +02:00
|
|
|
if (!Settings.SuppressBuyAugmentationConfirmation) {
|
|
|
|
const popupId = "purchase-augmentation-popup";
|
|
|
|
createPopup(popupId, PurchaseAugmentationPopup, {
|
|
|
|
aug: aug,
|
|
|
|
faction: props.faction,
|
|
|
|
player: props.p,
|
|
|
|
rerender: props.rerender,
|
|
|
|
popupId: popupId,
|
|
|
|
});
|
|
|
|
} else {
|
|
|
|
purchaseAugmentation(aug, props.faction);
|
|
|
|
props.rerender();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2021-09-18 01:43:08 +02:00
|
|
|
return (
|
2021-09-21 02:42:13 +02:00
|
|
|
<TableRow>
|
|
|
|
{!props.owned && (
|
2021-09-21 19:08:05 +02:00
|
|
|
<TableCell key={0}>
|
|
|
|
<Button onClick={handleClick} color={color}>
|
|
|
|
Buy
|
|
|
|
</Button>
|
2021-09-21 02:42:13 +02:00
|
|
|
</TableCell>
|
|
|
|
)}
|
2021-09-21 19:08:05 +02:00
|
|
|
<TableCell key={1}>
|
2021-09-21 02:42:13 +02:00
|
|
|
<Box display="flex">
|
|
|
|
<Tooltip
|
|
|
|
title={<Typography>{tooltip}</Typography>}
|
|
|
|
placement="top"
|
|
|
|
disableFocusListener
|
|
|
|
disableTouchListener
|
2021-09-25 17:23:56 +02:00
|
|
|
disableInteractive
|
2021-09-21 02:42:13 +02:00
|
|
|
>
|
|
|
|
<Typography>{btnTxt}</Typography>
|
|
|
|
</Tooltip>
|
|
|
|
</Box>
|
|
|
|
</TableCell>
|
|
|
|
{!props.owned && (
|
|
|
|
<Requirements
|
2021-09-21 19:08:05 +02:00
|
|
|
key={2}
|
2021-09-21 02:42:13 +02:00
|
|
|
augName={props.augName}
|
|
|
|
p={props.p}
|
|
|
|
cost={moneyCost}
|
|
|
|
rep={repCost}
|
|
|
|
hasReq={hasReq}
|
|
|
|
hasRep={hasRep}
|
|
|
|
hasCost={hasCost}
|
2021-09-18 01:43:08 +02:00
|
|
|
/>
|
2021-09-21 02:42:13 +02:00
|
|
|
)}
|
|
|
|
</TableRow>
|
2021-09-18 01:43:08 +02:00
|
|
|
);
|
2019-04-14 11:08:10 +02:00
|
|
|
}
|