felixfoertsch/bitburner-src
1
0
Fork 0
mirror of https://github.com/bitburner-official/bitburner-src.git synced 2026-05-02 05:47:14 +02:00
Code Issues Packages Projects Releases Wiki Activity

corp in mui

Browse Source
This commit is contained in:
Olivier Gagnon
2021-09-30 17:24:08 -04:00
parent b0e4a2a775
commit c05be66c60
5 changed files with 130 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dist/vendor.bundle.js
Vendored
+12 -12
View File
File diff suppressed because one or more lines are too long
main.bundle.js
+2 -2
View File
File diff suppressed because one or more lines are too long
main.bundle.js.map
+1 -1
View File
File diff suppressed because one or more lines are too long
src/BitNode/ui/BitverseRoot.tsx
+93 -60
View File
@@ -3,10 +3,43 @@ import { SourceFileFlags } from "../../SourceFile/SourceFileFlags";
import { IRouter } from "../../ui/Router"; import { IRouter } from "../../ui/Router";
import { BitNodes } from "../BitNode"; import { BitNodes } from "../BitNode";
import { enterBitNode, setRedPillFlag } from "../../RedPill"; import { enterBitNode, setRedPillFlag } from "../../RedPill";
import { PortalPopup } from "./PortalPopup"; import { PortalModal } from "./PortalModal";
import { createPopup } from "../../ui/React/createPopup";
import { CinematicText } from "../../ui/React/CinematicText"; import { CinematicText } from "../../ui/React/CinematicText";
import { use } from "../../ui/Context"; import { use } from "../../ui/Context";
import { Theme } from "@mui/material";
import makeStyles from "@mui/styles/makeStyles";
import createStyles from "@mui/styles/createStyles";
import Typography from "@mui/material/Typography";
import Tooltip from "@mui/material/Tooltip";
const useStyles = makeStyles((theme: Theme) =>
createStyles({
level0: {
color: "red",
"&:hover": {
color: "#fff",
},
},
level1: {
color: "yellow",
"&:hover": {
color: "#fff",
},
},
level2: {
color: "#48d1cc",
"&:hover": {
color: "#fff",
},
},
level3: {
color: "blue",
"&:hover": {
color: "#fff",
},
},
}),
);
interface IPortalProps { interface IPortalProps {
n: number; n: number;
@@ -16,51 +49,51 @@ interface IPortalProps {
enter: (router: IRouter, flume: boolean, destroyedBitNode: number, newBitNode: number) => void; enter: (router: IRouter, flume: boolean, destroyedBitNode: number, newBitNode: number) => void;
} }
function BitNodePortal(props: IPortalProps): React.ReactElement { function BitNodePortal(props: IPortalProps): React.ReactElement {
const [portalOpen, setPortalOpen] = useState(false);
const classes = useStyles();
const router = use.Router(); const router = use.Router();
const bitNode = BitNodes[`BitNode${props.n}`]; const bitNode = BitNodes[`BitNode${props.n}`];
if (bitNode == null) { if (bitNode == null) {
return <>O</>; return <>O</>;
} }
let cssClass; let cssClass = classes.level0;
if (props.n === 12 && props.level >= 2) { if (props.n === 12 && props.level >= 2) {
// Repeating BitNode // Repeating BitNode
cssClass = "level-2"; cssClass = classes.level2;
} else if (props.level === 1) {
cssClass = classes.level1;
} else { } else {
cssClass = `level-${props.level}`; cssClass = classes.level3;
}
function openPortalPopup(): void {
const popupId = "bitverse-portal-popup";
createPopup(popupId, PortalPopup, {
n: props.n,
level: props.level,
enter: props.enter,
router: router,
destroyedBitNode: props.destroyedBitNode,
flume: props.flume,
popupId: popupId,
});
} }
return ( return (
<button <>
className={`bitnode ${cssClass} tooltip`} <Tooltip
aria-label={`enter-bitnode-${bitNode.number.toString()}`} title={
onClick={openPortalPopup} <Typography>
> <strong>
<strong>O</strong> BitNode-{bitNode.number.toString()}: {bitNode.name}
<span className="tooltiptext"> </strong>
<strong> <br />
BitNode-{bitNode.number.toString()} {bitNode.desc}
<br /> </Typography>
{bitNode.name} }
</strong> >
<br /> <span onClick={() => setPortalOpen(true)} className={cssClass}>
{bitNode.desc} <b>O</b>
<br /> </span>
</span> </Tooltip>
</button> <PortalModal
open={portalOpen}
onClose={() => setPortalOpen(false)}
n={props.n}
level={props.level}
enter={props.enter}
destroyedBitNode={props.destroyedBitNode}
flume={props.flume}
/>
</>
); );
} }
@@ -116,31 +149,31 @@ export function BitverseRoot(props: IProps): React.ReactElement {
return ( return (
// prettier-ignore // prettier-ignore
<div className="noselect"> <div className="noselect">
<pre> O </pre> <Typography sx={{lineHeight: '1em',whiteSpace: 'pre'}}> O </Typography>
<pre> | O O | O O | </pre> <Typography sx={{lineHeight: '1em',whiteSpace: 'pre'}}> | O O | O O | </Typography>
<pre> O | | / __| \ | | O </pre> <Typography sx={{lineHeight: '1em',whiteSpace: 'pre'}}> O | | / __| \ | | O </Typography>
<pre> O | O | | O / | O | | O | O </pre> <Typography sx={{lineHeight: '1em',whiteSpace: 'pre'}}> O | O | | O / | O | | O | O </Typography>
<pre> | | | | |_/ |/ | \_ \_| | | | | </pre> <Typography sx={{lineHeight: '1em',whiteSpace: 'pre'}}> | | | | |_/ |/ | \_ \_| | | | | </Typography>
<pre> O | | | O | | O__/ | / \__ | | O | | | O </pre> <Typography sx={{lineHeight: '1em',whiteSpace: 'pre'}}> O | | | O | | O__/ | / \__ | | O | | | O </Typography>
<pre> | | | | | | | / /| O / \| | | | | | | </pre> <Typography sx={{lineHeight: '1em',whiteSpace: 'pre'}}> | | | | | | | / /| O / \| | | | | | | </Typography>
<pre>O | | | \| | O / _/ | / O | |/ | | | O</pre> <Typography sx={{lineHeight: '1em',whiteSpace: 'pre'}}>O | | | \| | O / _/ | / O | |/ | | | O</Typography>
<pre>| | | |O / | | O / | O O | | \ O| | | |</pre> <Typography sx={{lineHeight: '1em',whiteSpace: 'pre'}}>| | | |O / | | O / | O O | | \ O| | | |</Typography>
<pre>| | |/ \/ / __| | |/ \ | \ | |__ \ \/ \| | |</pre> <Typography sx={{lineHeight: '1em',whiteSpace: 'pre'}}>| | |/ \/ / __| | |/ \ | \ | |__ \ \/ \| | |</Typography>
<pre> \| O | |_/ |\| \ O \__| \_| | O |/ </pre> <Typography sx={{lineHeight: '1em',whiteSpace: 'pre'}}> \| O | |_/ |\| \ O \__| \_| | O |/ </Typography>
<pre> | | |_/ | | \| / | \_| | | </pre> <Typography sx={{lineHeight: '1em',whiteSpace: 'pre'}}> | | |_/ | | \| / | \_| | | </Typography>
<pre> \| / \| | / / \ |/ </pre> <Typography sx={{lineHeight: '1em',whiteSpace: 'pre'}}> \| / \| | / / \ |/ </Typography>
<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} /> | </pre> <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>
<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} /> </pre> <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>
<pre> | | | / / \ \ | | | </pre> <Typography sx={{lineHeight: '1em',whiteSpace: 'pre'}}> | | | / / \ \ | | | </Typography>
<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} /> \ | |/ </pre> <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>
<pre> \ | / / | | \ \ | / </pre> <Typography sx={{lineHeight: '1em',whiteSpace: 'pre'}}> \ | / / | | \ \ | / </Typography>
<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/ / </pre> <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>
<pre> \|| | | | | | | | | ||/ </pre> <Typography sx={{lineHeight: '1em',whiteSpace: 'pre'}}> \|| | | | | | | | | ||/ </Typography>
<pre> \| \_ | | | | | | _/ |/ </pre> <Typography sx={{lineHeight: '1em',whiteSpace: 'pre'}}> \| \_ | | | | | | _/ |/ </Typography>
<pre> \ \| / \ / \ |/ / </pre> <Typography sx={{lineHeight: '1em',whiteSpace: 'pre'}}> \ \| / \ / \ |/ / </Typography>
<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} /> </pre> <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>
<pre> | | | | | | | | </pre> <Typography sx={{lineHeight: '1em',whiteSpace: 'pre'}}> | | | | | | | | </Typography>
<pre> \JUMP3R|JUMP|3R| |R3|PMUJ|R3PMUJ/ </pre> <Typography sx={{lineHeight: '1em',whiteSpace: 'pre'}}> \JUMP3R|JUMP|3R| |R3|PMUJ|R3PMUJ/ </Typography>
<br /> <br />
<br /> <br />
<br /> <br />
src/BitNode/ui/PortalPopup.tsx → src/BitNode/ui/PortalModal.tsx
+22 -16
View File
@@ -2,18 +2,23 @@ import React from "react";
import { BitNodes } from "../BitNode"; import { BitNodes } from "../BitNode";
import { IRouter } from "../../ui/Router"; import { IRouter } from "../../ui/Router";
import { removePopup } from "../../ui/React/createPopup"; import { use } from "../../ui/Context";
import { Modal } from "../../ui/React/Modal";
import Typography from "@mui/material/Typography";
import Button from "@mui/material/Button";
interface IProps { interface IProps {
open: boolean;
onClose: () => void;
n: number; n: number;
level: number; level: number;
destroyedBitNode: number; destroyedBitNode: number;
flume: boolean; flume: boolean;
router: IRouter;
enter: (router: IRouter, flume: boolean, destroyedBitNode: number, newBitNode: number) => void; enter: (router: IRouter, flume: boolean, destroyedBitNode: number, newBitNode: number) => void;
popupId: string;
} }
export function PortalPopup(props: IProps): React.ReactElement { export function PortalModal(props: IProps): React.ReactElement {
const router = use.Router();
const bitNodeKey = "BitNode" + props.n; const bitNodeKey = "BitNode" + props.n;
const bitNode = BitNodes[bitNodeKey]; const bitNode = BitNodes[bitNodeKey];
if (bitNode == null) throw new Error(`Could not find BitNode object for number: ${props.n}`); if (bitNode == null) throw new Error(`Could not find BitNode object for number: ${props.n}`);
@@ -21,29 +26,30 @@ export function PortalPopup(props: IProps): React.ReactElement {
const newLevel = Math.min(props.level + 1, props.n === 12 ? Infinity : 3); const newLevel = Math.min(props.level + 1, props.n === 12 ? Infinity : 3);
return ( return (
<> <Modal open={props.open} onClose={props.onClose}>
<h1> <Typography variant="h4">
BitNode-{props.n}: {bitNode.name} BitNode-{props.n}: {bitNode.name}
</h1> </Typography>
<br /> <br />
Source-File Level: {props.level} / {maxSourceFileLevel} <Typography>
Source-File Level: {props.level} / {maxSourceFileLevel}
</Typography>
<br /> <br />
<br /> <br />
Difficulty: {["easy", "normal", "hard"][bitNode.difficulty]} <Typography> Difficulty: {["easy", "normal", "hard"][bitNode.difficulty]}</Typography>
<br /> <br />
<br /> <br />
{bitNode.info} <Typography>{bitNode.info}</Typography>
<br /> <br />
<br /> <br />
<button <Button
className="std-button"
onClick={() => { onClick={() => {
props.enter(props.router, props.flume, props.destroyedBitNode, props.n); props.enter(router, props.flume, props.destroyedBitNode, props.n);
removePopup(props.popupId); props.onClose();
}} }}
> >
Enter BN{props.n}.{newLevel} Enter BN{props.n}.{newLevel}
</button> </Button>
</> </Modal>
); );
} }