Personal_mirrors/bitburner-src
1
0
Fork 0
mirror of https://github.com/bitburner-official/bitburner-src.git synced 2024-11-27 01:53:48 +01:00
Code Issues Packages Projects Releases Wiki Activity

added navigation to the UI

Browse Source
This commit is contained in:
Your Name 2023-07-30 18:11:16 -04:00
parent 95ecd3e97e
commit d2667fd0fb
2 changed files with 90 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

100
src/Myrian/ui/MyrianRoot.tsx
View File

@ -8,9 +8,19 @@ import BatteryFullIcon from "@mui/icons-material/BatteryFull";
import Battery20Icon from "@mui/icons-material/Battery20";
import FavoriteIcon from "@mui/icons-material/Favorite";
import LandscapeIcon from "@mui/icons-material/Landscape";
import { IconButton } from "@mui/material";
import KeyboardArrowUpIcon from "@mui/icons-material/KeyboardArrowUp";
import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
import KeyboardArrowLeftIcon from "@mui/icons-material/KeyboardArrowLeft";
import KeyboardArrowRightIcon from "@mui/icons-material/KeyboardArrowRight";
const iterator = (i: number): number[] => {
return Array(i).fill(0);
import ZoomInMapIcon from "@mui/icons-material/ZoomInMap";
import ZoomOutMapIcon from "@mui/icons-material/ZoomOutMap";
const iterator = (i: number, offset = 0): number[] => {
return Array(i)
.fill(0)
.map((_, v) => v + offset);
};
interface ICellProps {
@ -50,6 +60,8 @@ interface IProps {
}
export function MyrianRoot({ myrian }: IProps): React.ReactElement {
const [center, setCenter] = useState([myrian.world[0].length / 2, myrian.world.length / 2]);
const [size, setSize] = useState(11);
const [, setRerender] = useState(false);
const rerender = () => setRerender((old) => !old);
useEffect(() => {
@ -59,16 +71,84 @@ export function MyrianRoot({ myrian }: IProps): React.ReactElement {
const sleeves = Object.fromEntries(myrian.sleeves.map((s) => [`${s.x}_${s.y}`, s]));
const move = (x: number, y: number) => () => {
setCenter((c) => [Math.max(Math.floor(size / 2), c[0] + x), Math.max(Math.floor(size / 2), c[1] + y)]);
};
const zoom = (size: number) => () => {
setSize((s) => s + size);
};
return (
<Container maxWidth="lg" disableGutters sx={{ mx: 0 }}>
<Box sx={{ display: "flex", flexDirection: "column", m: 0, p: 0 }}>
{iterator(myrian.world.length).map((_, j) => (
<Box key={myrian.world[j].join("") + j} sx={{ display: "flex", flexDirection: "row" }}>
{iterator(myrian.world[j].length).map((_, i) => (
<Cell key={i + "" + j + "" + myrian.world[j][i]} tile={sleeves[`${i}_${j}`] ? "s" : myrian.world[j][i]} />
))}
<Container maxWidth="lg" disableGutters sx={{ mx: 0, display: "flex", flexDirection: "column" }}>
<Box sx={{ display: "flex" }}>
<Box
sx={{
display: "flex",
flexDirection: "column",
m: 0,
p: 0,
borderColor: "white",
borderStyle: "solid",
borderWidth: "1px",
}}
>
{iterator(size, center[1] - Math.floor(size / 2)).map((j) => (
<Box key={myrian.world[j].join("") + j} sx={{ display: "flex", flexDirection: "row" }}>
{iterator(size, center[0] - Math.floor(size / 2)).map((i) => (
<Cell
key={i + "" + j + "" + myrian.world[j][i]}
tile={sleeves[`${i}_${j}`] ? "s" : myrian.world[j][i]}
/>
))}
</Box>
))}
</Box>
</Box>
<Box sx={{ display: "flex" }}>
<Box sx={{ display: "flex", flexDirection: "column" }}>
<Box sx={{ display: "flex" }}>
<Box sx={{ width: "40px", height: "40px" }} />
<Box sx={{ width: "40px", height: "40px" }}>
<IconButton onClick={move(0, -1)}>
<KeyboardArrowUpIcon />
</IconButton>
</Box>
<Box sx={{ width: "40px", height: "40px" }} />
</Box>
))}
<Box sx={{ display: "flex" }}>
<Box sx={{ width: "40px", height: "40px" }}>
<IconButton onClick={move(-1, 0)}>
<KeyboardArrowLeftIcon />
</IconButton>
</Box>
<Box sx={{ width: "40px", height: "40px" }} />
<Box sx={{ width: "40px", height: "40px" }}>
<IconButton onClick={move(1, 0)}>
<KeyboardArrowRightIcon />
</IconButton>
</Box>
</Box>
<Box sx={{ display: "flex" }}>
<Box sx={{ width: "40px", height: "40px" }} />
<Box sx={{ width: "40px", height: "40px" }}>
<IconButton onClick={move(0, 1)}>
<KeyboardArrowDownIcon />
</IconButton>
</Box>
<Box sx={{ width: "40px", height: "40px" }} />
</Box>
</Box>
<Box>
<IconButton onClick={zoom(-2)}>
<ZoomInMapIcon />
</IconButton>
<IconButton onClick={zoom(2)}>
<ZoomOutMapIcon />
</IconButton>
</Box>
</Box>
</Container>
);

30
src/Myrian/world.txt
View File

@ -1,30 +0,0 @@
mmmmmmm
mmmmmmmm
mmmmmmmmmmmm
bbbb mmmmm
mmmm
c mmmm
mmmm
ddddd mmmm
mmmmmmmmmm
mmmmmmmm
mmmmmmmm mmmm