asd

2024-12-19 12:45:45 +01:00 · 2021-10-13 02:15:29 -04:00 · 2021-10-13 02:15:29 -04:00 · a5a28db47f
commit a5a28db47f
parent c66a8b5974
7 changed files with 61 additions and 48 deletions
--- a/package-lock.json
+++ b/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",
--- a/package.json
+++ b/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",
--- a/src/Corporation/ui/IndustryProductEquation.tsx
+++ b/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
-      display={false}
-      tex={reqs.join("+") + String.raw`\Rightarrow` + prod.map((p) => String.raw`1\text{ }${p}`).join("+")}
-    />
+    <MathJaxContext>
+      <MathJax>
+        {reqs.join("+") + String.raw`\Rightarrow` + prod.map((p) => String.raw`1\text{ }${p}`).join("+")}
+      </MathJax>
+    </MathJaxContext>
  );
 }
--- a/src/Faction/ui/DonateOption.tsx
+++ b/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
-              tex={String.raw`reputation = \frac{\text{donation amount} \times \text{reputation multiplier}}{10^{${digits}}}`}
-            />
+            <MathJaxContext>
+              <MathJax>{String.raw`reputation = \frac{\text{donation amount} \times \text{reputation multiplier}}{10^{${digits}}}`}</MathJax>
+            </MathJaxContext>
          </Typography>
        </>
      )}
--- a/src/Faction/ui/Info.tsx
+++ b/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}}`} />
-              <MathComponent
-                tex={String.raw`\large{favor=\left\lfloor\log_{1.02}\left(\frac{r+25000}{25500}\right)\right\rfloor}`}
-              />
+              <MathJaxContext>
+                <MathJax>{String.raw`\large{r = \text{total faction reputation}}`}</MathJax>
+              </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>
            </>
          }
        >
--- a/src/Locations/ui/CoresButton.tsx
+++ b/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;
--- a/src/Locations/ui/RamButton.tsx
+++ b/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;