From 71ed2eafb8132629dcc5cfdfe40e44eaede37ebd Mon Sep 17 00:00:00 2001
From: TheMas3212 <mas3212@gmail.com>
Date: Thu, 17 Feb 2022 00:48:25 +1100
Subject: [PATCH] Add A Simple Button menu to the Bitverse Screen if ascii art
 is disabled this fixed the issue that was noticed that the current ascii art
 page is not possible to navigate with a screen reader

---
 src/BitNode/ui/BitverseRoot.tsx | 173 +++++++++++++++++++++-----------
 src/BitNode/ui/PortalModal.tsx  |   2 +
 2 files changed, 115 insertions(+), 60 deletions(-)

diff --git a/src/BitNode/ui/BitverseRoot.tsx b/src/BitNode/ui/BitverseRoot.tsx
index d2f344037..1a4edaa1d 100644
--- a/src/BitNode/ui/BitverseRoot.tsx
+++ b/src/BitNode/ui/BitverseRoot.tsx
@@ -10,6 +10,9 @@ import makeStyles from "@mui/styles/makeStyles";
 import createStyles from "@mui/styles/createStyles";
 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({
@@ -85,9 +88,18 @@ function BitNodePortal(props: IPortalProps): React.ReactElement {
           </Typography>
         }
       >
-        <span onClick={() => setPortalOpen(true)} className={cssClass} aria-label={`enter-bitnode-${bitNode.number.toString()}`}>
-          <b>O</b>
-        </span>
+        {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/>
+          </>
+        ) : (
+          <span onClick={() => setPortalOpen(true)} className={cssClass} aria-label={`enter-bitnode-${bitNode.number.toString()}`}>
+            <b>O</b>
+          </span>
+        )}
       </Tooltip>
       <PortalModal
         open={portalOpen}
@@ -151,63 +163,104 @@ export function BitverseRoot(props: IProps): React.ReactElement {
     );
   }
 
-  return (
+  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
-    <>
-      <Typography sx={{lineHeight: '1em',whiteSpace: 'pre'}}>                          O                          </Typography>
-      <Typography sx={{lineHeight: '1em',whiteSpace: 'pre'}}>             |  O  O      |      O  O  |             </Typography>
-      <Typography sx={{lineHeight: '1em',whiteSpace: 'pre'}}>        O    |  | /     __|       \ |  |    O        </Typography>
-      <Typography sx={{lineHeight: '1em',whiteSpace: 'pre'}}>      O |    O  | |  O /  |  O    | |  O    | O      </Typography>
-      <Typography sx={{lineHeight: '1em',whiteSpace: 'pre'}}>    | | |    |  |_/  |/   |   \_  \_|  |    | | |    </Typography>
-      <Typography sx={{lineHeight: '1em',whiteSpace: 'pre'}}>  O | | | O  |  | O__/    |   / \__ |  |  O | | | O  </Typography>
-      <Typography sx={{lineHeight: '1em',whiteSpace: 'pre'}}>  | | | | |  |  |   /    /|  O  /  \|  |  | | | | |  </Typography>
-      <Typography sx={{lineHeight: '1em',whiteSpace: 'pre'}}>O | | |  \|  |  O  /   _/ |    /    O  |  |/  | | | O</Typography>
-      <Typography sx={{lineHeight: '1em',whiteSpace: 'pre'}}>| | | |O  /  |  | O   /   |   O   O |  |  \  O| | | |</Typography>
-      <Typography sx={{lineHeight: '1em',whiteSpace: 'pre'}}>| | |/  \/  / __| | |/ \  |   \   | |__ \  \/  \| | |</Typography>
-      <Typography sx={{lineHeight: '1em',whiteSpace: 'pre'}}> \| O   |  |_/    |\|   \ <BitNodePortal n={13} level={nextSourceFileFlags[13]} enter={enter} flume={props.flume} destroyedBitNode={destroyed} />    \__|    \_|  |   O |/ </Typography>
-      <Typography sx={{lineHeight: '1em',whiteSpace: 'pre'}}>  | |   |_/       | |    \|    /  |       \_|   | |  </Typography>
-      <Typography sx={{lineHeight: '1em',whiteSpace: 'pre'}}>   \|   /          \|     |   /  /          \   |/   </Typography>
-      <Typography sx={{lineHeight: '1em',whiteSpace: 'pre'}}>    |  <BitNodePortal n={10} level={nextSourceFileFlags[10]} enter={enter} flume={props.flume} destroyedBitNode={destroyed} />            |     |  /  |            <BitNodePortal n={11} level={nextSourceFileFlags[11]} enter={enter} flume={props.flume} destroyedBitNode={destroyed} />  |    </Typography>
-      <Typography sx={{lineHeight: '1em',whiteSpace: 'pre'}}>  <BitNodePortal n={9} level={nextSourceFileFlags[9]} enter={enter} flume={props.flume} destroyedBitNode={destroyed} /> |  |            |     |     |            |  | <BitNodePortal n={12} level={nextSourceFileFlags[12]} enter={enter} flume={props.flume} destroyedBitNode={destroyed} />  </Typography>
-      <Typography sx={{lineHeight: '1em',whiteSpace: 'pre'}}>  | |  |            /    / \    \            |  | |  </Typography>
-      <Typography sx={{lineHeight: '1em',whiteSpace: 'pre'}}>   \|  |           /  <BitNodePortal n={7} level={nextSourceFileFlags[7]} enter={enter} flume={props.flume} destroyedBitNode={destroyed} /> /   \ <BitNodePortal n={8} level={nextSourceFileFlags[8]} enter={enter} flume={props.flume} destroyedBitNode={destroyed} />  \           |  |/   </Typography>
-      <Typography sx={{lineHeight: '1em',whiteSpace: 'pre'}}>    \  |          /  / |     | \  \          |  /    </Typography>
-      <Typography sx={{lineHeight: '1em',whiteSpace: 'pre'}}>     \ \JUMP <BitNodePortal n={5} level={nextSourceFileFlags[5]} enter={enter} flume={props.flume} destroyedBitNode={destroyed} />3R |  |  |     |  |  | R3<BitNodePortal n={6} level={nextSourceFileFlags[6]} enter={enter} flume={props.flume} destroyedBitNode={destroyed} /> PMUJ/ /     </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'}}>         <BitNodePortal n={1} level={nextSourceFileFlags[1]} enter={enter} flume={props.flume} destroyedBitNode={destroyed} />       |/   <BitNodePortal n={2} level={nextSourceFileFlags[2]} enter={enter} flume={props.flume} destroyedBitNode={destroyed} />  | |  <BitNodePortal n={3} level={nextSourceFileFlags[3]} enter={enter} flume={props.flume} destroyedBitNode={destroyed} />   \|       <BitNodePortal n={4} level={nextSourceFileFlags[4]} enter={enter} flume={props.flume} destroyedBitNode={destroyed} />         </Typography>
-      <Typography sx={{lineHeight: '1em',whiteSpace: 'pre'}}>         |       |    |  | |  |    |       |         </Typography>
-      <Typography sx={{lineHeight: '1em',whiteSpace: 'pre'}}>          \JUMP3R|JUMP|3R| |R3|PMUJ|R3PMUJ/          </Typography>
-      <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)",
-      ]} />
-    </>
-  );
-
+      <>
+        <Typography sx={{lineHeight: '1em',whiteSpace: 'pre'}}>                          O                          </Typography>
+        <Typography sx={{lineHeight: '1em',whiteSpace: 'pre'}}>             |  O  O      |      O  O  |             </Typography>
+        <Typography sx={{lineHeight: '1em',whiteSpace: 'pre'}}>        O    |  | /     __|       \ |  |    O        </Typography>
+        <Typography sx={{lineHeight: '1em',whiteSpace: 'pre'}}>      O |    O  | |  O /  |  O    | |  O    | O      </Typography>
+        <Typography sx={{lineHeight: '1em',whiteSpace: 'pre'}}>    | | |    |  |_/  |/   |   \_  \_|  |    | | |    </Typography>
+        <Typography sx={{lineHeight: '1em',whiteSpace: 'pre'}}>  O | | | O  |  | O__/    |   / \__ |  |  O | | | O  </Typography>
+        <Typography sx={{lineHeight: '1em',whiteSpace: 'pre'}}>  | | | | |  |  |   /    /|  O  /  \|  |  | | | | |  </Typography>
+        <Typography sx={{lineHeight: '1em',whiteSpace: 'pre'}}>O | | |  \|  |  O  /   _/ |    /    O  |  |/  | | | O</Typography>
+        <Typography sx={{lineHeight: '1em',whiteSpace: 'pre'}}>| | | |O  /  |  | O   /   |   O   O |  |  \  O| | | |</Typography>
+        <Typography sx={{lineHeight: '1em',whiteSpace: 'pre'}}>| | |/  \/  / __| | |/ \  |   \   | |__ \  \/  \| | |</Typography>
+        <Typography sx={{lineHeight: '1em',whiteSpace: 'pre'}}> \| O   |  |_/    |\|   \ <BitNodePortal n={13} level={nextSourceFileFlags[13]} enter={enter} flume={props.flume} destroyedBitNode={destroyed} />    \__|    \_|  |   O |/ </Typography>
+        <Typography sx={{lineHeight: '1em',whiteSpace: 'pre'}}>  | |   |_/       | |    \|    /  |       \_|   | |  </Typography>
+        <Typography sx={{lineHeight: '1em',whiteSpace: 'pre'}}>   \|   /          \|     |   /  /          \   |/   </Typography>
+        <Typography sx={{lineHeight: '1em',whiteSpace: 'pre'}}>    |  <BitNodePortal n={10} level={nextSourceFileFlags[10]} enter={enter} flume={props.flume} destroyedBitNode={destroyed} />            |     |  /  |            <BitNodePortal n={11} level={nextSourceFileFlags[11]} enter={enter} flume={props.flume} destroyedBitNode={destroyed} />  |    </Typography>
+        <Typography sx={{lineHeight: '1em',whiteSpace: 'pre'}}>  <BitNodePortal n={9} level={nextSourceFileFlags[9]} enter={enter} flume={props.flume} destroyedBitNode={destroyed} /> |  |            |     |     |            |  | <BitNodePortal n={12} level={nextSourceFileFlags[12]} enter={enter} flume={props.flume} destroyedBitNode={destroyed} />  </Typography>
+        <Typography sx={{lineHeight: '1em',whiteSpace: 'pre'}}>  | |  |            /    / \    \            |  | |  </Typography>
+        <Typography sx={{lineHeight: '1em',whiteSpace: 'pre'}}>   \|  |           /  <BitNodePortal n={7} level={nextSourceFileFlags[7]} enter={enter} flume={props.flume} destroyedBitNode={destroyed} /> /   \ <BitNodePortal n={8} level={nextSourceFileFlags[8]} enter={enter} flume={props.flume} destroyedBitNode={destroyed} />  \           |  |/   </Typography>
+        <Typography sx={{lineHeight: '1em',whiteSpace: 'pre'}}>    \  |          /  / |     | \  \          |  /    </Typography>
+        <Typography sx={{lineHeight: '1em',whiteSpace: 'pre'}}>     \ \JUMP <BitNodePortal n={5} level={nextSourceFileFlags[5]} enter={enter} flume={props.flume} destroyedBitNode={destroyed} />3R |  |  |     |  |  | R3<BitNodePortal n={6} level={nextSourceFileFlags[6]} enter={enter} flume={props.flume} destroyedBitNode={destroyed} /> PMUJ/ /     </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'}}>         <BitNodePortal n={1} level={nextSourceFileFlags[1]} enter={enter} flume={props.flume} destroyedBitNode={destroyed} />       |/   <BitNodePortal n={2} level={nextSourceFileFlags[2]} enter={enter} flume={props.flume} destroyedBitNode={destroyed} />  | |  <BitNodePortal n={3} level={nextSourceFileFlags[3]} enter={enter} flume={props.flume} destroyedBitNode={destroyed} />   \|       <BitNodePortal n={4} level={nextSourceFileFlags[4]} enter={enter} flume={props.flume} destroyedBitNode={destroyed} />         </Typography>
+        <Typography sx={{lineHeight: '1em',whiteSpace: 'pre'}}>         |       |    |  | |  |    |       |         </Typography>
+        <Typography sx={{lineHeight: '1em',whiteSpace: 'pre'}}>          \JUMP3R|JUMP|3R| |R3|PMUJ|R3PMUJ/          </Typography>
+        <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)",
+        ]} />
+      </>
+    );
+  }
   return <></>;
 }
diff --git a/src/BitNode/ui/PortalModal.tsx b/src/BitNode/ui/PortalModal.tsx
index ef24ca35b..d90460b89 100644
--- a/src/BitNode/ui/PortalModal.tsx
+++ b/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();