CODEBASE: Generate display data for math notation at built time and remove runtime mathjax dependency (#2447)

src/Faction/ui/DonateOption.tsx

@@ -1,6 +1,5 @@
 import React, { useState } from "react";
 
-import { CONSTANTS } from "../../Constants";
 import { Faction } from "../Faction";
 import { Player } from "@player";
 import { canDonate, donate, repFromDonation } from "../formulas/donation";
@@ -10,12 +9,13 @@ import { Money } from "../../ui/React/Money";
 import { Reputation } from "../../ui/React/Reputation";
 
 import { dialogBoxCreate } from "../../ui/React/DialogBox";
-import { MathJax } from "better-react-mathjax";
 
 import Typography from "@mui/material/Typography";
 import Paper from "@mui/material/Paper";
 import Button from "@mui/material/Button";
 import { NumberInput } from "../../ui/React/NumberInput";
+import MathNotation from "../../Documentation/data/MathNotation.json";
+import { MathNotationOutput } from "../../Documentation/ui/MathNotationOutput";
 
 type DonateOptionProps = {
   faction: Faction;
@@ -27,7 +27,6 @@ type DonateOptionProps = {
 /** React component for a donate option on the Faction UI */
 export function DonateOption({ faction, favorToDonate, disabled, rerender }: DonateOptionProps): React.ReactElement {
   const [donateAmt, setDonateAmt] = useState<number>(NaN);
-  const digits = (CONSTANTS.DonateMoneyToRepDivisor + "").length - 1;
 
   function onDonate(): void {
     const repGain = donate(donateAmt, faction);
@@ -76,9 +75,7 @@ export function DonateOption({ faction, favorToDonate, disabled, rerender }: Don
               ),
             }}
           />
-          <Typography>
-            <MathJax>{`\\(reputation = \\frac{\\text{donation amount} \\cdot \\text{reputation multiplier}}{10^{${digits}}}\\)`}</MathJax>
-          </Typography>
+          <MathNotationOutput notation={MathNotation.RepDonation} />
         </>
       )}
     </Paper>