added arcade

src/Arcade/ui/ArcadeRoot.tsx

@@ -0,0 +1,43 @@
+import React, { useState } from "react";
+import { BBCabinetRoot } from "./BBCabinet";
+
+import Button from "@mui/material/Button";
+import { use } from "../../ui/Context";
+import { AlertEvents } from "../../ui/React/AlertManager";
+
+enum Page {
+  None,
+  Megabyteburner2000,
+}
+
+export function ArcadeRoot(): React.ReactElement {
+  const player = use.Player();
+  const [page, setPage] = useState(Page.None);
+
+  function mbBurner2000(): void {
+    if (player.sourceFileLvl(1) === 0) {
+      AlertEvents.emit("This machine is broken.");
+    } else {
+      setPage(Page.Megabyteburner2000);
+    }
+  }
+
+  if (page === Page.None) {
+    return (
+      <>
+        <Button onClick={mbBurner2000}>Megabyte burner 2000</Button>
+      </>
+    );
+  }
+  let currentGame = <></>;
+  switch (page) {
+    case Page.Megabyteburner2000:
+      currentGame = <BBCabinetRoot />;
+  }
+  return (
+    <>
+      <Button onClick={() => setPage(Page.None)}>Back</Button>
+      {currentGame}
+    </>
+  );
+}

src/Arcade/ui/BBCabinet.tsx

@@ -0,0 +1,52 @@
+import React from "react";
+import Typography from "@mui/material/Typography";
+
+const metaBB = "https://bitburner-official.github.io/bitburner-legacy/";
+
+const style = {
+  width: "1060px",
+  height: "800px",
+  border: "0px",
+} as any;
+
+export function BBCabinetRoot(): React.ReactElement {
+  // prettier-ignore
+  const joystick =
+    <>
+        <Typography sx={{lineHeight: '1em',whiteSpace: 'pre'}}>                                                                      </Typography>
+        <Typography sx={{lineHeight: '1em',whiteSpace: 'pre'}}>                     ,'" "',                                  .-.     </Typography>
+        <Typography sx={{lineHeight: '1em',whiteSpace: 'pre'}}>                    /       \                                (   )     </Typography>
+        <Typography sx={{lineHeight: '1em',whiteSpace: 'pre'}}>                    |       |                            .-.  '-'  .-. </Typography>
+        <Typography sx={{lineHeight: '1em',whiteSpace: 'pre'}}>                    \       /                           (   )     (   )</Typography>
+        <Typography sx={{lineHeight: '1em',whiteSpace: 'pre'}}>                     '.___.'                             '-'  .-.  '-'</Typography>
+        <Typography sx={{lineHeight: '1em',whiteSpace: 'pre'}}>                       |||                                   (   )  </Typography>
+        <Typography sx={{lineHeight: '1em',whiteSpace: 'pre'}}>                       |||                                    '-'   </Typography>
+    </>;
+  return (
+    <>
+      <div
+        style={{
+          width: "1060px",
+          height: "800px",
+          padding: "0",
+          overflow: "hidden",
+          borderColor: "white",
+          borderStyle: "solid",
+          borderWidth: "5px",
+        }}
+      >
+        <iframe src={metaBB} style={style} />
+      </div>
+      <div
+        style={{
+          width: "1060px",
+          borderColor: "white",
+          borderStyle: "solid",
+          borderWidth: "5px",
+        }}
+      >
+        {joystick}
+      </div>
+    </>
+  );
+}