mirror of
https://github.com/bitburner-official/bitburner-src.git
synced 2025-03-11 04:42:34 +01:00
UI: Make Source-Files devmenu page reactive (#830)
This commit is contained in:
@ -1,4 +1,4 @@
|
|||||||
import React from "react";
|
import React, { useState } from "react";
|
||||||
|
|
||||||
import Accordion from "@mui/material/Accordion";
|
import Accordion from "@mui/material/Accordion";
|
||||||
import AccordionSummary from "@mui/material/AccordionSummary";
|
import AccordionSummary from "@mui/material/AccordionSummary";
|
||||||
@ -12,8 +12,11 @@ import ButtonGroup from "@mui/material/ButtonGroup";
|
|||||||
|
|
||||||
// Update as additional BitNodes get implemented
|
// Update as additional BitNodes get implemented
|
||||||
const validSFN = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13];
|
const validSFN = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13];
|
||||||
|
const initialState = validSFN.reduce((obj, sfN) => ({ ...obj, [sfN]: "" }), { "": "" });
|
||||||
|
|
||||||
export function SourceFilesDev(): React.ReactElement {
|
export function SourceFilesDev(): React.ReactElement {
|
||||||
|
const [sfData, setSfData] = useState(initialState);
|
||||||
|
|
||||||
function setSF(sfN: number, sfLvl: number) {
|
function setSF(sfN: number, sfLvl: number) {
|
||||||
return function () {
|
return function () {
|
||||||
if (sfN === 9) {
|
if (sfN === 9) {
|
||||||
@ -21,9 +24,11 @@ export function SourceFilesDev(): React.ReactElement {
|
|||||||
}
|
}
|
||||||
if (sfLvl === 0) {
|
if (sfLvl === 0) {
|
||||||
Player.sourceFiles.delete(sfN);
|
Player.sourceFiles.delete(sfN);
|
||||||
|
setSfData({ ...sfData, [sfN]: sfLvl });
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
Player.sourceFiles.set(sfN, sfLvl);
|
Player.sourceFiles.set(sfN, sfLvl);
|
||||||
|
setSfData({ ...sfData, [sfN]: sfLvl });
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -39,6 +44,25 @@ export function SourceFilesDev(): React.ReactElement {
|
|||||||
Player.exploits = [];
|
Player.exploits = [];
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const setallButtonStyle = { borderColor: "", background: "black" };
|
||||||
|
const ownedStyle = { borderColor: "green", background: "" };
|
||||||
|
const notOwnedStyle = { borderColor: "", background: "black" };
|
||||||
|
|
||||||
|
const devLvls = [0, 1, 2, 3];
|
||||||
|
|
||||||
|
const buttonGroup = (sfN?: number) =>
|
||||||
|
devLvls.map((lvl) => {
|
||||||
|
return (
|
||||||
|
<Button
|
||||||
|
key={lvl}
|
||||||
|
onClick={sfN === undefined ? setAllSF(lvl) : setSF(sfN, lvl)}
|
||||||
|
style={sfN === undefined ? setallButtonStyle : Player.sourceFileLvl(sfN) >= lvl ? ownedStyle : notOwnedStyle}
|
||||||
|
>
|
||||||
|
{lvl}
|
||||||
|
</Button>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Accordion TransitionProps={{ unmountOnExit: true }}>
|
<Accordion TransitionProps={{ unmountOnExit: true }}>
|
||||||
<AccordionSummary expandIcon={<ExpandMoreIcon />}>
|
<AccordionSummary expandIcon={<ExpandMoreIcon />}>
|
||||||
@ -57,37 +81,19 @@ export function SourceFilesDev(): React.ReactElement {
|
|||||||
</tr>
|
</tr>
|
||||||
<tr key={"sf-all"}>
|
<tr key={"sf-all"}>
|
||||||
<td>
|
<td>
|
||||||
<Typography>All:</Typography>
|
<Typography>Set All:</Typography>
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<ButtonGroup>
|
<ButtonGroup>{buttonGroup()}</ButtonGroup>
|
||||||
<Button aria-label="all-sf-0" onClick={setAllSF(0)}>
|
|
||||||
0
|
|
||||||
</Button>
|
|
||||||
<Button aria-label="all-sf-1" onClick={setAllSF(1)}>
|
|
||||||
1
|
|
||||||
</Button>
|
|
||||||
<Button aria-label="all-sf-2" onClick={setAllSF(2)}>
|
|
||||||
2
|
|
||||||
</Button>
|
|
||||||
<Button aria-label="all-sf-3" onClick={setAllSF(3)}>
|
|
||||||
3
|
|
||||||
</Button>
|
|
||||||
</ButtonGroup>
|
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
{validSFN.map((i) => (
|
{validSFN.map((sfN) => (
|
||||||
<tr key={"sf-" + i}>
|
<tr key={"sf-" + sfN}>
|
||||||
<td>
|
<td>
|
||||||
<Typography>SF-{i}:</Typography>
|
<Typography>SF-{sfN}:</Typography>
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<ButtonGroup>
|
<ButtonGroup>{buttonGroup(sfN)}</ButtonGroup>
|
||||||
<Button onClick={setSF(i, 0)}>0</Button>
|
|
||||||
<Button onClick={setSF(i, 1)}>1</Button>
|
|
||||||
<Button onClick={setSF(i, 2)}>2</Button>
|
|
||||||
<Button onClick={setSF(i, 3)}>3</Button>
|
|
||||||
</ButtonGroup>
|
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
))}
|
))}
|
||||||
|
Reference in New Issue
Block a user