UI: Add tooltip for reputation/favor in page of faction's augmentation list (#2268)

src/ui/React/FavorInfo.tsx

@@ -0,0 +1,32 @@
+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";
+
+export function FavorInfo({ favor, boldLabel }: { favor: number; boldLabel?: boolean }): React.ReactElement {
+  return (
+    <Tooltip
+      title={
+        <>
+          <Typography>
+            Faction favor increases the rate at which you earn reputation for this faction by 1% per favor. Faction
+            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 component="div" sx={{ display: "flex", alignItems: "center", whiteSpace: "pre-wrap" }}>
+        <Typography sx={{ fontWeight: `${boldLabel ? "bold" : "normal"}` }}>Favor: </Typography>
+        <Favor favor={favor} />
+        <InfoIcon sx={{ fontSize: "1.1em", marginLeft: "10px" }} />
+      </Typography>
+    </Tooltip>
+  );
+}

src/ui/React/ReputationInfo.tsx

@@ -0,0 +1,41 @@
+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 { addRepToFavor } from "../../Faction/formulas/favor";
+import { Favor } from "../../ui/React/Favor";
+import { Reputation } from "./Reputation";
+
+export function ReputationInfo({
+  favor,
+  playerReputation,
+  boldLabel,
+}: {
+  favor: number;
+  playerReputation: number;
+  boldLabel?: boolean;
+}): React.ReactElement {
+  return (
+    <Tooltip
+      title={
+        <>
+          <Typography>
+            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 component="div" sx={{ display: "flex", alignItems: "center", whiteSpace: "pre-wrap" }}>
+        <Typography sx={{ fontWeight: `${boldLabel ? "bold" : "normal"}` }}>Reputation: </Typography>
+        <Reputation reputation={playerReputation} />
+        <InfoIcon sx={{ fontSize: "1.1em", marginLeft: "10px" }} />
+      </Typography>
+    </Tooltip>
+  );
+}