asd

package-lock.json

@@ -29,6 +29,7 @@
         "arg": "^5.0.0",
         "async": "^2.6.1",
         "autosize": "^4.0.2",
+        "better-react-mathjax": "^1.0.3",
         "brace": "^0.11.1",
         "codemirror": "^5.58.2",
         "decimal.js": "7.2.3",
@@ -46,7 +47,6 @@
         "loader-utils": "^1.1.0",
         "material-ui-color": "^1.2.0",
         "mathjax-full": "^3.2.0",
-        "mathjax-react": "^1.0.6",
         "memory-fs": "~0.4.1",
         "monaco-editor": "^0.27.0",
         "node-sass": "^6.0.1",
@@ -6544,6 +6544,17 @@
         "platform": "^1.3.3"
       }
     },
+    "node_modules/better-react-mathjax": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/better-react-mathjax/-/better-react-mathjax-1.0.3.tgz",
+      "integrity": "sha512-vtWGBlgGilcKO6ryDTk/1JIhv4SfzCMHb8gkMz4ZCuI70t1VGbN6XMouFBWJKoiWlsZvGVxF++6UW3fbdjI+6g==",
+      "dependencies": {
+        "mathjax-full": "^3.2.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
     "node_modules/big.js": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/big.js/-/big.js-3.2.0.tgz",
@@ -18852,24 +18863,6 @@
         "speech-rule-engine": "^3.3.3"
       }
     },
-    "node_modules/mathjax-react": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/mathjax-react/-/mathjax-react-1.0.6.tgz",
-      "integrity": "sha512-GlkPAhaY0FKc95TMdo33mxNZHb+3xRgfgc3YcnQ0cZxvnM1UaF0o8mRI5y5xIwi3JnioeYuukZJWCbIZkACIVw==",
-      "dependencies": {
-        "mathjax-full": "^3.0.4"
-      },
-      "engines": {
-        "node": ">=8",
-        "npm": ">=5"
-      },
-      "peerDependencies": {
-        "mathjax-full": "^3.0.4",
-        "prop-types": "^15.5.4",
-        "react": "^15.0.0 || ^16.0.0",
-        "react-dom": "^15.0.0 || ^16.0.0"
-      }
-    },
     "node_modules/mathml-tag-names": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/mathml-tag-names/-/mathml-tag-names-2.1.0.tgz",
@@ -33123,6 +33116,14 @@
         "platform": "^1.3.3"
       }
     },
+    "better-react-mathjax": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/better-react-mathjax/-/better-react-mathjax-1.0.3.tgz",
+      "integrity": "sha512-vtWGBlgGilcKO6ryDTk/1JIhv4SfzCMHb8gkMz4ZCuI70t1VGbN6XMouFBWJKoiWlsZvGVxF++6UW3fbdjI+6g==",
+      "requires": {
+        "mathjax-full": "^3.2.0"
+      }
+    },
     "big.js": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/big.js/-/big.js-3.2.0.tgz",
@@ -42854,14 +42855,6 @@
         "speech-rule-engine": "^3.3.3"
       }
     },
-    "mathjax-react": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/mathjax-react/-/mathjax-react-1.0.6.tgz",
-      "integrity": "sha512-GlkPAhaY0FKc95TMdo33mxNZHb+3xRgfgc3YcnQ0cZxvnM1UaF0o8mRI5y5xIwi3JnioeYuukZJWCbIZkACIVw==",
-      "requires": {
-        "mathjax-full": "^3.0.4"
-      }
-    },
     "mathml-tag-names": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/mathml-tag-names/-/mathml-tag-names-2.1.0.tgz",

package.json

@@ -30,6 +30,7 @@
     "arg": "^5.0.0",
     "async": "^2.6.1",
     "autosize": "^4.0.2",
+    "better-react-mathjax": "^1.0.3",
     "brace": "^0.11.1",
     "codemirror": "^5.58.2",
     "decimal.js": "7.2.3",
@@ -47,7 +48,6 @@
     "loader-utils": "^1.1.0",
     "material-ui-color": "^1.2.0",
     "mathjax-full": "^3.2.0",
-    "mathjax-react": "^1.0.6",
     "memory-fs": "~0.4.1",
     "monaco-editor": "^0.27.0",
     "node-sass": "^6.0.1",

src/Corporation/ui/IndustryProductEquation.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { IIndustry } from "../IIndustry";
-import { MathComponent } from "mathjax-react";
+import { MathJax, MathJaxContext } from "better-react-mathjax";
 
 interface IProps {
   division: IIndustry;
@@ -19,9 +19,10 @@ export function IndustryProductEquation(props: IProps): React.ReactElement {
   }
 
   return (
-    <MathComponent
+    <MathJaxContext>
-      display={false}
+      <MathJax>
-      tex={reqs.join("+") + String.raw`\Rightarrow` + prod.map((p) => String.raw`1\text{ }${p}`).join("+")}
+        {reqs.join("+") + String.raw`\Rightarrow` + prod.map((p) => String.raw`1\text{ }${p}`).join("+")}
-    />
+      </MathJax>
+    </MathJaxContext>
   );
 }

src/Faction/ui/DonateOption.tsx

@@ -15,7 +15,7 @@ import { Reputation } from "../../ui/React/Reputation";
 import { numeralWrapper } from "../../ui/numeralFormat";
 
 import { dialogBoxCreate } from "../../ui/React/DialogBox";
-import { MathComponent } from "mathjax-react";
+import { MathJax, MathJaxContext } from "better-react-mathjax";
 
 import Typography from "@mui/material/Typography";
 import Paper from "@mui/material/Paper";
@@ -98,9 +98,9 @@ export function DonateOption(props: IProps): React.ReactElement {
             }}
           />
           <Typography>
-            <MathComponent
+            <MathJaxContext>
-              tex={String.raw`reputation = \frac{\text{donation amount} \times \text{reputation multiplier}}{10^{${digits}}}`}
+              <MathJax>{String.raw`reputation = \frac{\text{donation amount} \times \text{reputation multiplier}}{10^{${digits}}}`}</MathJax>
-            />
+            </MathJaxContext>
           </Typography>
         </>
       )}

src/Faction/ui/Info.tsx

@@ -9,7 +9,7 @@ import { FactionInfo } from "../../Faction/FactionInfo";
 
 import { Reputation } from "../../ui/React/Reputation";
 import { Favor } from "../../ui/React/Favor";
-import { MathComponent } from "mathjax-react";
+import { MathJax, MathJaxContext } from "better-react-mathjax";
 
 import makeStyles from "@mui/styles/makeStyles";
 import createStyles from "@mui/styles/createStyles";
@@ -57,10 +57,12 @@ export function Info(props: IProps): React.ReactElement {
                 You will have <Favor favor={props.faction.favor + favorGain} /> faction favor after installing an
                 Augmentation.
               </Typography>
-              <MathComponent tex={String.raw`\large{r = \text{total faction reputation}}`} />
+              <MathJaxContext>
-              <MathComponent
+                <MathJax>{String.raw`\large{r = \text{total faction reputation}}`}</MathJax>
-                tex={String.raw`\large{favor=\left\lfloor\log_{1.02}\left(\frac{r+25000}{25500}\right)\right\rfloor}`}
+              </MathJaxContext>
-              />
+              <MathJaxContext>
+                <MathJax>{String.raw`\large{favor=\left\lfloor\log_{1.02}\left(\frac{r+25000}{25500}\right)\right\rfloor}`}</MathJax>
+              </MathJaxContext>
             </>
           }
         >
@@ -81,8 +83,13 @@ export function Info(props: IProps): React.ReactElement {
                 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>
-              <MathComponent tex={String.raw`\large{r = reputation}`} />
+
-              <MathComponent tex={String.raw`\large{\Delta r = \Delta r \times \frac{100+favor}{100}}`} />
+              <MathJaxContext>
+                <MathJax>{"\\(\\frac{10}{4x} \\approx 2^{12}\\)"}</MathJax>
+              </MathJaxContext>
+              <MathJaxContext>
+                <MathJax>{String.raw`\large{\Delta r = \Delta r \times \frac{100+favor}{100}}`}</MathJax>
+              </MathJaxContext>
             </>
           }
         >

src/Locations/ui/CoresButton.tsx

@@ -5,7 +5,7 @@ import Tooltip from "@mui/material/Tooltip";
 import { IPlayer } from "../../PersonObjects/IPlayer";
 
 import { Money } from "../../ui/React/Money";
-import { MathComponent } from "mathjax-react";
+import { MathJax, MathJaxContext } from "better-react-mathjax";
 
 type IProps = {
   p: IPlayer;
@@ -30,7 +30,13 @@ export function CoresButton(props: IProps): React.ReactElement {
   }
 
   return (
-    <Tooltip title={<MathComponent tex={String.raw`\large{cost = 10^9 \times 7.5 ^{\text{cores}}}`} />}>
+    <Tooltip
+      title={
+        <MathJaxContext>
+          <MathJax>{String.raw`\large{cost = 10^9 \times 7.5 ^{\text{cores}}}`}</MathJax>
+        </MathJaxContext>
+      }
+    >
       <span>
         <Button disabled={!props.p.canAfford(cost)} onClick={buy}>
           Upgrade 'home' cores ({homeComputer.cpuCores} -&gt; {homeComputer.cpuCores + 1}) -&nbsp;

src/Locations/ui/RamButton.tsx

@@ -7,8 +7,8 @@ import { IPlayer } from "../../PersonObjects/IPlayer";
 import { purchaseRamForHomeComputer } from "../../Server/ServerPurchases";
 
 import { Money } from "../../ui/React/Money";
-import { MathComponent } from "mathjax-react";
 import { numeralWrapper } from "../../ui/numeralFormat";
+import { MathJax, MathJaxContext } from "better-react-mathjax";
 
 type IProps = {
   p: IPlayer;
@@ -29,7 +29,13 @@ export function RamButton(props: IProps): React.ReactElement {
   }
 
   return (
-    <Tooltip title={<MathComponent tex={String.raw`\large{cost = 3.2 \times 10^3 \times 1.58^{log_2{(ram)}}}`} />}>
+    <Tooltip
+      title={
+        <MathJaxContext>
+          <MathJax>{String.raw`\large{cost = 3.2 \times 10^3 \times 1.58^{log_2{(ram)}}}`}</MathJax>
+        </MathJaxContext>
+      }
+    >
       <span>
         <Button disabled={!props.p.canAfford(cost)} onClick={buy}>
           Upgrade 'home' RAM ({numeralWrapper.formatRAM(homeComputer.maxRam)} -&gt;&nbsp;