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 { Augmentation } from "../../Augmentation/Augmentation";
|
|
|
|
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
|
|
|
import { IMap } from "../../types";
|
|
|
|
|
|
|
|
import { StdButton } from "../../ui/React/StdButton";
|
2021-03-31 06:45:21 +02:00
|
|
|
import { Augmentation as AugFormat } from "../../ui/React/Augmentation";
|
2019-04-14 11:08:10 +02:00
|
|
|
|
|
|
|
type IProps = {
|
2021-09-05 01:09:30 +02:00
|
|
|
augName: string;
|
|
|
|
faction: Faction;
|
|
|
|
p: IPlayer;
|
|
|
|
rerender: () => void;
|
|
|
|
};
|
2019-04-14 11:08:10 +02:00
|
|
|
|
|
|
|
export class PurchaseableAugmentation extends React.Component<IProps, any> {
|
2021-09-05 01:09:30 +02:00
|
|
|
aug: Augmentation;
|
|
|
|
|
|
|
|
constructor(props: IProps) {
|
|
|
|
super(props);
|
|
|
|
|
|
|
|
const aug = Augmentations[this.props.augName];
|
2021-09-09 05:47:34 +02:00
|
|
|
if (aug == null) throw new Error(`aug ${this.props.augName} does not exists`);
|
2021-09-05 01:09:30 +02:00
|
|
|
this.aug = aug;
|
|
|
|
|
|
|
|
this.handleClick = this.handleClick.bind(this);
|
|
|
|
}
|
|
|
|
|
|
|
|
getMoneyCost(): number {
|
2021-09-09 05:47:34 +02:00
|
|
|
return this.aug.baseCost * this.props.faction.getInfo().augmentationPriceMult;
|
2021-09-05 01:09:30 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
getRepCost(): number {
|
2021-09-09 05:47:34 +02:00
|
|
|
return this.aug.baseRepRequirement * this.props.faction.getInfo().augmentationRepRequirementMult;
|
2021-09-05 01:09:30 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
handleClick(): void {
|
|
|
|
if (!Settings.SuppressBuyAugmentationConfirmation) {
|
2021-09-13 00:03:07 +02:00
|
|
|
const popupId = "purchase-augmentation-popup";
|
|
|
|
createPopup(popupId, PurchaseAugmentationPopup, {
|
|
|
|
aug: this.aug,
|
|
|
|
faction: this.props.faction,
|
|
|
|
player: this.props.p,
|
|
|
|
popupId: popupId,
|
|
|
|
});
|
2021-09-05 01:09:30 +02:00
|
|
|
} else {
|
|
|
|
purchaseAugmentation(this.aug, this.props.faction);
|
2019-04-14 11:08:10 +02:00
|
|
|
}
|
2021-09-05 01:09:30 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
// Whether the player has the prerequisite Augmentations
|
|
|
|
hasPrereqs(): boolean {
|
|
|
|
return hasAugmentationPrereqs(this.aug);
|
|
|
|
}
|
|
|
|
|
|
|
|
// Whether the player has enough rep for this Augmentation
|
|
|
|
hasReputation(): boolean {
|
|
|
|
return this.props.faction.playerReputation >= this.getRepCost();
|
|
|
|
}
|
|
|
|
|
|
|
|
// Whether the player has this augmentations (purchased OR installed)
|
|
|
|
owned(): boolean {
|
|
|
|
let owned = false;
|
|
|
|
for (const queuedAug of this.props.p.queuedAugmentations) {
|
|
|
|
if (queuedAug.name === this.props.augName) {
|
|
|
|
owned = true;
|
|
|
|
break;
|
|
|
|
}
|
2019-04-14 11:08:10 +02:00
|
|
|
}
|
|
|
|
|
2021-09-05 01:09:30 +02:00
|
|
|
for (const installedAug of this.props.p.augmentations) {
|
|
|
|
if (installedAug.name === this.props.augName) {
|
|
|
|
owned = true;
|
|
|
|
break;
|
|
|
|
}
|
2019-04-14 11:08:10 +02:00
|
|
|
}
|
|
|
|
|
2021-09-05 01:09:30 +02:00
|
|
|
return owned;
|
|
|
|
}
|
2019-04-14 11:08:10 +02:00
|
|
|
|
2021-09-05 01:09:30 +02:00
|
|
|
render(): React.ReactNode {
|
|
|
|
if (this.aug == null) {
|
|
|
|
console.error(
|
|
|
|
`Invalid Augmentation when trying to create PurchaseableAugmentation display element: ${this.props.augName}`,
|
|
|
|
);
|
|
|
|
return null;
|
2019-04-14 11:08:10 +02:00
|
|
|
}
|
|
|
|
|
2021-09-05 01:09:30 +02:00
|
|
|
const moneyCost = this.getMoneyCost();
|
|
|
|
const repCost = this.getRepCost();
|
|
|
|
|
|
|
|
// Determine UI properties
|
|
|
|
let disabled = false;
|
|
|
|
let status: JSX.Element = <></>;
|
|
|
|
let color = "";
|
|
|
|
if (!this.hasPrereqs()) {
|
|
|
|
disabled = true;
|
2021-09-09 05:47:34 +02:00
|
|
|
status = <>LOCKED (Requires {this.aug.prereqs.map((aug) => AugFormat(aug))} as prerequisite)</>;
|
2021-09-05 01:09:30 +02:00
|
|
|
color = "red";
|
2021-09-09 05:47:34 +02:00
|
|
|
} else if (this.aug.name !== AugmentationNames.NeuroFluxGovernor && (this.aug.owned || this.owned())) {
|
2021-09-05 01:09:30 +02:00
|
|
|
disabled = true;
|
|
|
|
} else if (this.hasReputation()) {
|
|
|
|
status = (
|
|
|
|
<>
|
2021-09-09 05:47:34 +02:00
|
|
|
UNLOCKED (at {Reputation(repCost)} faction reputation) - <Money money={moneyCost} player={this.props.p} />
|
2021-09-05 01:09:30 +02:00
|
|
|
</>
|
|
|
|
);
|
|
|
|
} else {
|
|
|
|
disabled = true;
|
|
|
|
status = (
|
|
|
|
<>
|
2021-09-09 05:47:34 +02:00
|
|
|
LOCKED (Requires {Reputation(repCost)} faction reputation - <Money money={moneyCost} player={this.props.p} />)
|
2021-09-05 01:09:30 +02:00
|
|
|
</>
|
|
|
|
);
|
|
|
|
color = "red";
|
2019-04-14 11:08:10 +02:00
|
|
|
}
|
|
|
|
|
2021-09-05 01:09:30 +02:00
|
|
|
const txtStyle: IMap<string> = {
|
|
|
|
display: "inline-block",
|
|
|
|
};
|
|
|
|
if (color !== "") {
|
|
|
|
txtStyle.color = color;
|
2019-04-14 11:08:10 +02:00
|
|
|
}
|
|
|
|
|
2021-09-05 01:09:30 +02:00
|
|
|
// Determine button txt
|
|
|
|
let btnTxt = this.aug.name;
|
|
|
|
if (this.aug.name === AugmentationNames.NeuroFluxGovernor) {
|
|
|
|
btnTxt += ` - Level ${getNextNeurofluxLevel()}`;
|
2019-04-14 11:08:10 +02:00
|
|
|
}
|
2021-09-05 01:09:30 +02:00
|
|
|
|
|
|
|
let tooltip = <></>;
|
|
|
|
if (typeof this.aug.info === "string")
|
|
|
|
tooltip = (
|
|
|
|
<>
|
|
|
|
<span dangerouslySetInnerHTML={{ __html: this.aug.info }} />
|
|
|
|
<br />
|
|
|
|
<br />
|
|
|
|
{this.aug.stats}
|
|
|
|
</>
|
|
|
|
);
|
|
|
|
else
|
|
|
|
tooltip = (
|
|
|
|
<>
|
|
|
|
{this.aug.info}
|
|
|
|
<br />
|
|
|
|
<br />
|
|
|
|
{this.aug.stats}
|
|
|
|
</>
|
|
|
|
);
|
|
|
|
|
|
|
|
return (
|
2021-09-13 00:03:07 +02:00
|
|
|
<li key={this.aug.name}>
|
|
|
|
<span
|
|
|
|
style={{
|
|
|
|
margin: "4px",
|
|
|
|
padding: "4px",
|
|
|
|
}}
|
|
|
|
>
|
2021-09-05 01:09:30 +02:00
|
|
|
<StdButton
|
|
|
|
disabled={disabled}
|
|
|
|
onClick={this.handleClick}
|
2021-09-13 00:03:07 +02:00
|
|
|
style={{
|
|
|
|
display: "inline-block",
|
|
|
|
}}
|
2021-09-05 01:09:30 +02:00
|
|
|
text={btnTxt}
|
|
|
|
tooltip={tooltip}
|
|
|
|
/>
|
|
|
|
<p style={txtStyle}>{status}</p>
|
|
|
|
</span>
|
|
|
|
</li>
|
|
|
|
);
|
|
|
|
}
|
2019-04-14 11:08:10 +02:00
|
|
|
}
|