gave some love to the donations

src/Faction/formulas/donation.ts

@@ -0,0 +1,6 @@
+import { CONSTANTS } from "../../Constants";
+import { IPlayer } from "../../PersonObjects/IPlayer";
+
+export function repFromDonation(amt: number, player: IPlayer): number {
+    return amt / CONSTANTS.DonateMoneyToRepDivisor * player.faction_rep_mult;
+}

src/Faction/ui/DonateOption.tsx

@@ -1,11 +1,12 @@
 /**
  * React component for a donate option on the Faction UI
  */
-import * as React from "react";
+import React, { useState } from "react";
 
 import { CONSTANTS } from "../../Constants";
 import { Faction } from "../../Faction/Faction";
 import { IPlayer } from "../../PersonObjects/IPlayer";
+import { repFromDonation } from "../formulas/donation";
 
 import { Money } from "../../ui/React/Money";
 import { Reputation } from "../../ui/React/Reputation";
@@ -15,6 +16,7 @@ import { StdButton } from "../../ui/React/StdButton";
 import { numeralWrapper } from "../../ui/numeralFormat";
 
 import { dialogBoxCreate } from "../../../utils/DialogBox";
+import { MathComponent } from 'mathjax-react';
 
 type IProps = {
     faction: Faction;
@@ -24,93 +26,78 @@ type IProps = {
     rerender: () => void;
 }
 
-type IState = {
-    donateAmt: number;
-    status: JSX.Element;
-}
 
 const inputStyleMarkup = {
     margin: "5px",
     height: "26px",
 }
 
-export class DonateOption extends React.Component<IProps, IState> {
+const blockStyle = { display: "block" };
-    // Style markup for block elements. Stored as property
-    blockStyle: any = { display: "block" };
 
-    constructor(props: IProps) {
+export function DonateOption(props: IProps): React.ReactElement {
-        super(props);
+    const [donateAmt, setDonateAmt] = useState<number | null>(null);
+    const digits = (CONSTANTS.DonateMoneyToRepDivisor+'').length-1;
 
+    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;
+    }
 
-        this.state = {
+    function onChange(event: React.ChangeEvent<HTMLInputElement>): void {
-            donateAmt: 0,
+        const amt = numeralWrapper.parseMoney(event.target.value);
-            status: props.disabled ? <>Unlocked at {props.favorToDonate} favor with {props.faction.name}</> : <></>,
+        if(event.target.value === "" || isNaN(amt)) setDonateAmt(null);
+        else setDonateAmt(amt);
+    }
+
+    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(<>
+            You just donated {Money(amt)} to {fac.name} to gain {Reputation(repGain)} reputation.
+        </>);
+        props.rerender();
+    }
+
+    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>);
         }
-
+        return (<p>This donation will result in {Reputation(repFromDonation(donateAmt, props.p))} reputation gain</p>);
-        this.calculateRepGain = this.calculateRepGain.bind(this);
-        this.donate = this.donate.bind(this);
-        this.handleChange = this.handleChange.bind(this);
     }
 
-    // Returns rep gain for a given donation amount
-    calculateRepGain(amt: number): number {
-        return amt / CONSTANTS.DonateMoneyToRepDivisor * this.props.p.faction_rep_mult;
-    }
 
-    donate(): void  {
+    return (<div className={"faction-work-div"}>
-        const fac = this.props.faction;
+        <div className={"faction-work-div-wrapper"}>
-        const amt = this.state.donateAmt;
+            <input
-        if (isNaN(amt) || amt <= 0) {
+                className="text-input"
-            dialogBoxCreate(`Invalid amount entered!`);
+                onChange={onChange}
-        } else if (!this.props.p.canAfford(amt)) {
+                placeholder={"Donation amount"}
-            dialogBoxCreate(`You cannot afford to donate this much money!`);
+                style={inputStyleMarkup}
-        } else {
+                disabled={props.disabled}
-            this.props.p.loseMoney(amt);
+            />
-            const repGain = this.calculateRepGain(amt);
+            <StdButton
-            this.props.faction.playerReputation += repGain;
+                onClick={donate}
-            dialogBoxCreate(<>
+                text={"Donate Money"}
-                You just donated {Money(amt)} to {fac.name} to gain {Reputation(repGain)} reputation
+                disabled={props.disabled || !canDonate()}
-            </>);
+            />
-            this.props.rerender();
+            <Status />
-        }
+            {
-    }
+                props.disabled ?
-
+                    <p>Unlocked at {props.favorToDonate} favor with {props.faction.name}</p> :
-    handleChange(e: React.ChangeEvent<HTMLInputElement>): void {
+                    <div className="text">
-        const amt = numeralWrapper.parseMoney(e.target.value);
+                        <MathComponent tex={String.raw`reputation = \frac{\text{donation amount} \times \text{reputation multiplier}}{10^{${digits}}}`} />
-
+                    </div>
-        if (isNaN(amt)) {
+            }
-            this.setState({
+        </div>
-                donateAmt: 0,
+    </div>);
-                status: <>Invalid donate amount entered!</>,
-            });
-        } else {
-            const repGain = this.calculateRepGain(amt);
-            this.setState({
-                donateAmt: amt,
-                status: <>This donation will result in {Reputation(repGain)} reputation gain</>,
-            });
-        }
-    }
-
-    render(): React.ReactNode {
-        return (
-            <div className={"faction-work-div"}>
-                <div className={"faction-work-div-wrapper"}>
-                    <input
-                        className="text-input"
-                        onChange={this.handleChange}
-                        placeholder={"Donation amount"}
-                        style={inputStyleMarkup}
-                        disabled={this.props.disabled}
-                    />
-                    <StdButton
-                        onClick={this.donate}
-                        text={"Donate Money"}
-                        disabled={this.props.disabled}
-                    />
-                    <p style={this.blockStyle}>{this.state.status}</p>
-                </div>
-            </div>
-        )
-    }
 }

src/Faction/ui/Info.tsx

@@ -11,7 +11,7 @@ import { AutoupdatingParagraph } from "../../ui/React/AutoupdatingParagraph";
 import { ParagraphWithTooltip } from "../../ui/React/ParagraphWithTooltip";
 import { Reputation } from "../../ui/React/Reputation";
 import { Favor } from "../../ui/React/Favor";
-import { MathComponent } from 'mathjax-react'
+import { MathComponent } from 'mathjax-react';
 
 type IProps = {
     faction: Faction;