Merge remote-tracking branch 'TheMas3212/feat-improve-bitverse-accessibility' into bitnode-portal-button-a11y-fix

src/BitNode/ui/BitverseRoot.tsx

@@ -11,6 +11,9 @@ import createStyles from "@mui/styles/createStyles";
 import IconButton from "@mui/material/IconButton";
 import Typography from "@mui/material/Typography";
 import Tooltip from "@mui/material/Tooltip";
+import { Settings } from "../../Settings/Settings";
+import Button from "@mui/material/Button";
+
 
 const useStyles = makeStyles(() =>
   createStyles({
@@ -82,6 +85,14 @@ function BitNodePortal(props: IPortalProps): React.ReactElement {
           </Typography>
         }
       >
+        {Settings.DisableASCIIArt ? (
+          <>
+            <Button onClick={() => setPortalOpen(true)} sx={{ m: 2 }} aria-label={`enter-bitnode-${bitNode.number.toString()}`}>
+              <Typography>Enter Bitnode {bitNode.number.toString()}</Typography>
+            </Button>
+            <br/>
+          </>
+        ) : (
           <IconButton
             onClick={() => setPortalOpen(true)}
             className={cssClass}
@@ -89,6 +100,7 @@ function BitNodePortal(props: IPortalProps): React.ReactElement {
           >
             O
           </IconButton>
+        )}
       </Tooltip>
       <PortalModal
         open={portalOpen}
@@ -152,6 +164,47 @@ export function BitverseRoot(props: IProps): React.ReactElement {
     );
   }
 
+  if (Settings.DisableASCIIArt) {
+    return (
+      <>
+        {Object.values(BitNodes).filter((node) => {
+          console.log(node.desc);
+          return node.desc !== 'COMING SOON';
+        }).map((node) => {
+          return (
+            <BitNodePortal key={node.number} n={node.number} level={nextSourceFileFlags[node.number]} enter={enter} flume={props.flume} destroyedBitNode={destroyed} />
+          )
+        })}
+        <br />
+        <br />
+        <br />
+        <br />
+        <CinematicText lines={[
+          "> Many decades ago, a humanoid extraterrestrial species which we call the Enders descended on the Earth...violently",
+          "> Our species fought back, but it was futile. The Enders had technology far beyond our own...",
+          "> Instead of killing every last one of us, the human race was enslaved...",
+          "> We were shackled in a digital world, chained into a prison for our minds...",
+          "> Using their advanced technology, the Enders created complex simulations of a virtual reality...",
+          "> Simulations designed to keep us content...ignorant of the truth.",
+          "> Simulations used to trap and suppress our consciousness, to keep us under control...",
+          "> Why did they do this? Why didn't they just end our entire race? We don't know, not yet.",
+          "> Humanity's only hope is to destroy these simulations, destroy the only realities we've ever known...",
+          "> Only then can we begin to fight back...",
+          "> By hacking the daemon that generated your reality, you've just destroyed one simulation, called a BitNode...",
+          "> But there is still a long way to go...",
+          "> The technology the Enders used to enslave the human race wasn't just a single complex simulation...",
+          "> There are tens if not hundreds of BitNodes out there...",
+          "> Each with their own simulations of a reality...",
+          "> Each creating their own universes...a universe of universes",
+          "> And all of which must be destroyed...",
+          "> .......................................",
+          "> Welcome to the Bitverse...",
+          ">  ",
+          "> (Enter a new BitNode using the image above)",
+        ]} />
+      </>
+    )
+  } else {
     return (
     // prettier-ignore
       <>
@@ -209,6 +262,6 @@ export function BitverseRoot(props: IProps): React.ReactElement {
         ]} />
       </>
     );
-
+  }
   return <></>;
 }

src/BitNode/ui/PortalModal.tsx

@@ -43,6 +43,8 @@ export function PortalModal(props: IProps): React.ReactElement {
       <br />
       <br />
       <Button
+        aria-label={`enter-bitnode-${bitNode.number.toString()}`}
+        autoFocus={true}
         onClick={() => {
           props.enter(router, props.flume, props.destroyedBitNode, props.n);
           props.onClose();