UI: Make Source-Files devmenu page reactive (#830)

This commit is contained in:
missymae#2783
2023-10-02 22:36:51 -06:00
committed by GitHub
parent 673efb427f
commit aa5d37c7c1

View File

@ -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>
))} ))}