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

src/ui/React/FavorInfo.tsx

@@ -1,11 +1,11 @@
 import React from "react";
-import { MathJax } from "better-react-mathjax";
-
 import InfoIcon from "@mui/icons-material/Info";
 import Tooltip from "@mui/material/Tooltip";
 import Typography from "@mui/material/Typography";
 
 import { Favor } from "../../ui/React/Favor";
+import MathNotation from "../../Documentation/data/MathNotation.json";
+import { MathNotationOutput } from "../../Documentation/ui/MathNotationOutput";
 
 export function FavorInfo({ favor, boldLabel }: { favor: number; boldLabel?: boolean }): React.ReactElement {
   return (
@@ -17,8 +17,8 @@ export function FavorInfo({ favor, boldLabel }: { favor: number; boldLabel?: boo
             favor is gained whenever you install an Augmentation. The amount of favor you gain depends on the total
             amount of reputation you earned with this faction across all resets.
           </Typography>
-          <MathJax>{"\\(\\huge{r = reputation}\\)"}</MathJax>
-          <MathJax>{"\\(\\huge{\\Delta r = \\Delta r \\times \\frac{100+favor}{100}}\\)"}</MathJax>
+          <Typography style={{ fontSize: "2rem" }}>r = Reputation gain</Typography>
+          <MathNotationOutput notation={MathNotation.FavorBonus} />
         </>
       }
     >

src/ui/React/ReputationInfo.tsx

@@ -1,5 +1,4 @@
 import React from "react";
-import { MathJax } from "better-react-mathjax";
 
 import InfoIcon from "@mui/icons-material/Info";
 import Tooltip from "@mui/material/Tooltip";
@@ -8,6 +7,8 @@ import Typography from "@mui/material/Typography";
 import { addRepToFavor } from "../../Faction/formulas/favor";
 import { Favor } from "../../ui/React/Favor";
 import { Reputation } from "./Reputation";
+import MathNotation from "../../Documentation/data/MathNotation.json";
+import { MathNotationOutput } from "../../Documentation/ui/MathNotationOutput";
 
 export function ReputationInfo({
   favor,
@@ -26,8 +27,8 @@ export function ReputationInfo({
             You will have <Favor favor={addRepToFavor(favor, playerReputation)} /> faction favor after installing an
             Augmentation.
           </Typography>
-          <MathJax>{"\\(\\huge{r = \\text{total faction reputation}}\\)"}</MathJax>
-          <MathJax>{"\\(\\huge{favor=\\log_{1.02}\\left(1+\\frac{r}{25000}\\right)}\\)"}</MathJax>
+          <Typography style={{ fontSize: "2rem" }}>r = Total faction reputation</Typography>
+          <MathNotationOutput notation={MathNotation.RepToFavor} />
         </>
       }
     >