mirror of
https://github.com/bitburner-official/bitburner-src.git
synced 2024-11-14 11:43:50 +01:00
Merge pull request #3001 from ChrissiQ/bitnode-portal-button-a11y-fix
♿️ (Bitverse UI: Portal Button Accessibility) Makes clickable element into button.
This commit is contained in:
commit
94a6ba2c91
@ -8,38 +8,37 @@ import { CinematicText } from "../../ui/React/CinematicText";
|
|||||||
import { use } from "../../ui/Context";
|
import { use } from "../../ui/Context";
|
||||||
import makeStyles from "@mui/styles/makeStyles";
|
import makeStyles from "@mui/styles/makeStyles";
|
||||||
import createStyles from "@mui/styles/createStyles";
|
import createStyles from "@mui/styles/createStyles";
|
||||||
|
import IconButton from "@mui/material/IconButton";
|
||||||
import Typography from "@mui/material/Typography";
|
import Typography from "@mui/material/Typography";
|
||||||
import Tooltip from "@mui/material/Tooltip";
|
import Tooltip from "@mui/material/Tooltip";
|
||||||
|
import { Settings } from "../../Settings/Settings";
|
||||||
|
import Button from "@mui/material/Button";
|
||||||
|
|
||||||
|
|
||||||
const useStyles = makeStyles(() =>
|
const useStyles = makeStyles(() =>
|
||||||
createStyles({
|
createStyles({
|
||||||
level0: {
|
portal: {
|
||||||
color: "red",
|
|
||||||
cursor: "pointer",
|
cursor: "pointer",
|
||||||
|
fontFamily: "inherit",
|
||||||
|
fontSize: "1rem",
|
||||||
|
fontWeight: "bold",
|
||||||
|
lineHeight: 1,
|
||||||
|
padding: 0,
|
||||||
"&:hover": {
|
"&:hover": {
|
||||||
color: "#fff",
|
color: "#fff",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
level0: {
|
||||||
|
color: "red",
|
||||||
|
},
|
||||||
level1: {
|
level1: {
|
||||||
color: "yellow",
|
color: "yellow",
|
||||||
cursor: "pointer",
|
|
||||||
"&:hover": {
|
|
||||||
color: "#fff",
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
level2: {
|
level2: {
|
||||||
color: "#48d1cc",
|
color: "#48d1cc",
|
||||||
cursor: "pointer",
|
|
||||||
"&:hover": {
|
|
||||||
color: "#fff",
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
level3: {
|
level3: {
|
||||||
color: "blue",
|
color: "blue",
|
||||||
cursor: "pointer",
|
|
||||||
"&:hover": {
|
|
||||||
color: "#fff",
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
}),
|
}),
|
||||||
);
|
);
|
||||||
@ -71,6 +70,7 @@ function BitNodePortal(props: IPortalProps): React.ReactElement {
|
|||||||
if (props.level === 2) {
|
if (props.level === 2) {
|
||||||
cssClass = classes.level2;
|
cssClass = classes.level2;
|
||||||
}
|
}
|
||||||
|
cssClass = `${classes.portal} ${cssClass}`
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
@ -85,9 +85,24 @@ function BitNodePortal(props: IPortalProps): React.ReactElement {
|
|||||||
</Typography>
|
</Typography>
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
<span onClick={() => setPortalOpen(true)} className={cssClass} aria-label={`enter-bitnode-${bitNode.number.toString()}`}>
|
{Settings.DisableASCIIArt ? (
|
||||||
<b>O</b>
|
<Button
|
||||||
</span>
|
onClick={() => setPortalOpen(true)}
|
||||||
|
sx={{ m: 2 }}
|
||||||
|
aria-description={bitNode.desc}
|
||||||
|
>
|
||||||
|
<Typography>BitNode-{bitNode.number.toString()}: {bitNode.name}</Typography>
|
||||||
|
</Button>
|
||||||
|
) : (
|
||||||
|
<IconButton
|
||||||
|
onClick={() => setPortalOpen(true)}
|
||||||
|
className={cssClass}
|
||||||
|
aria-label={`BitNode-${bitNode.number.toString()}: ${bitNode.name}`}
|
||||||
|
aria-description={bitNode.desc}
|
||||||
|
>
|
||||||
|
O
|
||||||
|
</IconButton>
|
||||||
|
)}
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
<PortalModal
|
<PortalModal
|
||||||
open={portalOpen}
|
open={portalOpen}
|
||||||
@ -98,6 +113,10 @@ function BitNodePortal(props: IPortalProps): React.ReactElement {
|
|||||||
destroyedBitNode={props.destroyedBitNode}
|
destroyedBitNode={props.destroyedBitNode}
|
||||||
flume={props.flume}
|
flume={props.flume}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
|
{Settings.DisableASCIIArt && (
|
||||||
|
<br/>
|
||||||
|
)}
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@ -151,6 +170,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 (
|
return (
|
||||||
// prettier-ignore
|
// prettier-ignore
|
||||||
<>
|
<>
|
||||||
@ -208,6 +268,6 @@ export function BitverseRoot(props: IProps): React.ReactElement {
|
|||||||
]} />
|
]} />
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
}
|
||||||
return <></>;
|
return <></>;
|
||||||
}
|
}
|
||||||
|
@ -43,6 +43,8 @@ export function PortalModal(props: IProps): React.ReactElement {
|
|||||||
<br />
|
<br />
|
||||||
<br />
|
<br />
|
||||||
<Button
|
<Button
|
||||||
|
aria-label={`enter-bitnode-${bitNode.number.toString()}`}
|
||||||
|
autoFocus={true}
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
props.enter(router, props.flume, props.destroyedBitNode, props.n);
|
props.enter(router, props.flume, props.destroyedBitNode, props.n);
|
||||||
props.onClose();
|
props.onClose();
|
||||||
|
Loading…
Reference in New Issue
Block a user