sleeves to mui

src/PersonObjects/Sleeve/ui/SleeveRoot.tsx

@@ -1,28 +1,30 @@
 import React, { useState, useEffect } from "react";
 
-import { IPlayer } from "../../IPlayer";
+import { SleeveElem } from "./SleeveElem";
+import { FAQModal } from "./FAQModal";
+import { use } from "../../../ui/Context";
 
-import { SleeveElem } from "../ui/SleeveElem";
+import Typography from "@mui/material/Typography";
+import Button from "@mui/material/Button";
+import Link from "@mui/material/Link";
 
-interface IProps {
-  player: IPlayer;
-}
-
-export function SleeveRoot(props: IProps): React.ReactElement {
+export function SleeveRoot(): React.ReactElement {
+  const player = use.Player();
+  const [FAQOpen, setFAQOpen] = useState(false);
   const setRerender = useState(false)[1];
   function rerender(): void {
     setRerender((old) => !old);
   }
 
   useEffect(() => {
-    const id = setInterval(rerender, 150);
+    const id = setInterval(rerender, 200);
     return () => clearInterval(id);
   }, []);
 
   return (
     <>
-      <h1>Sleeves</h1>
-      <p>
+      <Typography variant="h4">Sleeves</Typography>
+      <Typography>
         Duplicate Sleeves are MK-V Synthoids (synthetic androids) into which your consciousness has been copied. In
         other words, these Synthoids contain a perfect duplicate of your mind.
         <br />
@@ -30,26 +32,19 @@ export function SleeveRoot(props: IProps): React.ReactElement {
         Sleeves can be used to perform different tasks synchronously.
         <br />
         <br />
-      </p>
+      </Typography>
 
-      <button className="std-button" style={{ display: "inline-block" }}>
-        FAQ
-      </button>
-      <a
-        className="std-button"
-        style={{ display: "inline-block" }}
+      <Button onClick={() => setFAQOpen(true)}>FAQ</Button>
+      <Link
         target="_blank"
         href="https://bitburner.readthedocs.io/en/latest/advancedgameplay/sleeves.html#duplicate-sleeves"
       >
         Documentation
-      </a>
-      <ul>
-        {props.player.sleeves.map((sleeve, i) => (
-          <li key={i}>
-            <SleeveElem rerender={rerender} player={props.player} sleeve={sleeve} />
-          </li>
-        ))}
-      </ul>
+      </Link>
+      {player.sleeves.map((sleeve, i) => (
+        <SleeveElem key={i} rerender={rerender} sleeve={sleeve} />
+      ))}
+      <FAQModal open={FAQOpen} onClose={() => setFAQOpen(false)} />
     </>
   );
 }