2019-04-14 11:08:10 +02:00
|
|
|
/**
|
|
|
|
* React component for a donate option on the Faction UI
|
|
|
|
*/
|
2021-09-04 07:39:34 +02:00
|
|
|
import React, { useState } from "react";
|
2019-04-14 11:08:10 +02:00
|
|
|
|
|
|
|
import { CONSTANTS } from "../../Constants";
|
|
|
|
import { Faction } from "../../Faction/Faction";
|
|
|
|
import { IPlayer } from "../../PersonObjects/IPlayer";
|
2021-09-04 07:39:34 +02:00
|
|
|
import { repFromDonation } from "../formulas/donation";
|
2019-04-14 11:08:10 +02:00
|
|
|
|
2021-03-31 06:45:21 +02:00
|
|
|
import { Money } from "../../ui/React/Money";
|
|
|
|
import { Reputation } from "../../ui/React/Reputation";
|
2019-04-14 11:08:10 +02:00
|
|
|
|
|
|
|
import { StdButton } from "../../ui/React/StdButton";
|
|
|
|
|
2021-05-04 19:00:38 +02:00
|
|
|
import { numeralWrapper } from "../../ui/numeralFormat";
|
|
|
|
|
2019-04-14 11:08:10 +02:00
|
|
|
import { dialogBoxCreate } from "../../../utils/DialogBox";
|
2021-09-04 07:39:34 +02:00
|
|
|
import { MathComponent } from 'mathjax-react';
|
2019-04-14 11:08:10 +02:00
|
|
|
|
|
|
|
type IProps = {
|
|
|
|
faction: Faction;
|
2021-05-03 06:37:53 +02:00
|
|
|
disabled: boolean;
|
|
|
|
favorToDonate: number;
|
2019-04-14 11:08:10 +02:00
|
|
|
p: IPlayer;
|
|
|
|
rerender: () => void;
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
const inputStyleMarkup = {
|
|
|
|
margin: "5px",
|
2021-06-13 17:05:40 +02:00
|
|
|
height: "26px",
|
2019-04-14 11:08:10 +02:00
|
|
|
}
|
|
|
|
|
2021-09-04 07:39:34 +02:00
|
|
|
const blockStyle = { display: "block" };
|
2019-04-14 11:08:10 +02:00
|
|
|
|
2021-09-04 07:39:34 +02:00
|
|
|
export function DonateOption(props: IProps): React.ReactElement {
|
|
|
|
const [donateAmt, setDonateAmt] = useState<number | null>(null);
|
|
|
|
const digits = (CONSTANTS.DonateMoneyToRepDivisor+'').length-1;
|
2021-05-03 06:37:53 +02:00
|
|
|
|
2021-09-04 07:39:34 +02:00
|
|
|
function canDonate(): boolean {
|
|
|
|
if(donateAmt === null) return false;
|
|
|
|
if (isNaN(donateAmt) || donateAmt <= 0) return false;
|
|
|
|
if(props.p.money.lt(donateAmt)) return false;
|
|
|
|
return true;
|
2019-04-14 11:08:10 +02:00
|
|
|
}
|
|
|
|
|
2021-09-04 07:39:34 +02:00
|
|
|
function onChange(event: React.ChangeEvent<HTMLInputElement>): void {
|
|
|
|
const amt = numeralWrapper.parseMoney(event.target.value);
|
|
|
|
if(event.target.value === "" || isNaN(amt)) setDonateAmt(null);
|
|
|
|
else setDonateAmt(amt);
|
2019-04-14 11:08:10 +02:00
|
|
|
}
|
|
|
|
|
2021-09-04 07:39:34 +02:00
|
|
|
function donate(): void {
|
|
|
|
const fac = props.faction;
|
|
|
|
const amt = donateAmt;
|
|
|
|
if(amt === null) return;
|
|
|
|
if(!canDonate()) return;
|
|
|
|
props.p.loseMoney(amt);
|
|
|
|
const repGain = repFromDonation(amt, props.p);
|
|
|
|
props.faction.playerReputation += repGain;
|
|
|
|
dialogBoxCreate(<>
|
2021-09-04 09:27:31 +02:00
|
|
|
You just donated <Money money={amt} /> to {fac.name} to gain {Reputation(repGain)} reputation.
|
2021-09-04 07:39:34 +02:00
|
|
|
</>);
|
|
|
|
props.rerender();
|
2019-04-14 11:08:10 +02:00
|
|
|
}
|
|
|
|
|
2021-09-04 07:39:34 +02:00
|
|
|
function Status(): React.ReactElement {
|
|
|
|
if(donateAmt === null) return (<></>);
|
|
|
|
if(!canDonate()) {
|
|
|
|
if(props.p.money.lt(donateAmt))
|
|
|
|
return (<p>Insufficient funds</p>);
|
|
|
|
return (<p>Invalid donate amount entered!</p>);
|
2019-04-14 11:08:10 +02:00
|
|
|
}
|
2021-09-04 07:39:34 +02:00
|
|
|
return (<p>This donation will result in {Reputation(repFromDonation(donateAmt, props.p))} reputation gain</p>);
|
2019-04-14 11:08:10 +02:00
|
|
|
}
|
|
|
|
|
2021-09-04 07:39:34 +02:00
|
|
|
|
|
|
|
return (<div className={"faction-work-div"}>
|
|
|
|
<div className={"faction-work-div-wrapper"}>
|
|
|
|
<input
|
|
|
|
className="text-input"
|
|
|
|
onChange={onChange}
|
|
|
|
placeholder={"Donation amount"}
|
|
|
|
style={inputStyleMarkup}
|
|
|
|
disabled={props.disabled}
|
|
|
|
/>
|
|
|
|
<StdButton
|
|
|
|
onClick={donate}
|
|
|
|
text={"Donate Money"}
|
|
|
|
disabled={props.disabled || !canDonate()}
|
|
|
|
/>
|
|
|
|
<Status />
|
|
|
|
{
|
|
|
|
props.disabled ?
|
|
|
|
<p>Unlocked at {props.favorToDonate} favor with {props.faction.name}</p> :
|
|
|
|
<div className="text">
|
|
|
|
<MathComponent tex={String.raw`reputation = \frac{\text{donation amount} \times \text{reputation multiplier}}{10^{${digits}}}`} />
|
|
|
|
</div>
|
|
|
|
}
|
|
|
|
</div>
|
|
|
|
</div>);
|
2019-04-14 11:08:10 +02:00
|
|
|
}
|