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

Update Minesweeper game UI

Browse Source
This commit is contained in:
nickofolas 2022-04-30 00:27:49 -05:00
parent 1bcb0099f4
commit 437cd66ffe
1 changed files with 56 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
src/Infiltration/ui/MinesweeperGame.tsx
View File

@ -1,7 +1,10 @@
import { Paper, Typography } from "@mui/material";
import { Close, Flag, Report } from "@mui/icons-material";
import { Box, Paper, Typography } from "@mui/material";
import { uniqueId } from "lodash";
import React, { useEffect, useState } from "react";
import { AugmentationNames } from "../../Augmentation/data/AugmentationNames";
import { Player } from "../../Player";
import { Settings } from "../../Settings/Settings";
import { KEY } from "../../utils/helpers/keyCodes";
import { downArrowSymbol, getArrow, leftArrowSymbol, rightArrowSymbol, upArrowSymbol } from "../utils";
import { interpolate } from "./Difficulty";
@ -80,29 +83,62 @@ export function MinesweeperGame(props: IMinigameProps): React.ReactElement {
return () => clearInterval(id);
}, []);
const flatGrid: { flagged?: boolean; current?: boolean; marked?: boolean }[] = [];
minefield.map((line, y) =>
line.map((cell, x) => {
if (memoryPhase) {
flatGrid.push({ flagged: Boolean(minefield[y][x]) });
return;
} else if (x === pos[0] && y === pos[1]) {
flatGrid.push({ current: true });
} else if (answer[y][x]) {
flatGrid.push({ marked: true });
} else if (hasAugment && minefield[y][x]) {
flatGrid.push({ flagged: true });
} else {
flatGrid.push({});
}
}),
);
return (
<>
<GameTimer millis={timer} onExpire={props.onFailure} />
<Paper sx={{ display: "grid", justifyItems: "center" }}>
<Paper sx={{ display: "grid", justifyItems: "center", pb: 1 }}>
<Typography variant="h4">{memoryPhase ? "Remember all the mines!" : "Mark all the mines!"}</Typography>
{minefield.map((line, y) => (
<div key={y}>
<Typography>
{line.map((cell, x) => {
if (memoryPhase) {
if (minefield[y][x]) return <span key={x}>[?]&nbsp;</span>;
return <span key={x}>[&nbsp;]&nbsp;</span>;
} else {
if (x == pos[0] && y == pos[1]) return <span key={x}>[X]&nbsp;</span>;
if (answer[y][x]) return <span key={x}>[.]&nbsp;</span>;
if (hasAugment && minefield[y][x]) return <span key={x}>[?]&nbsp;</span>;
return <span key={x}>[&nbsp;]&nbsp;</span>;
}
})}
<Box
sx={{
display: "grid",
gridTemplateColumns: `repeat(${Math.round(difficulty.width)}, 1fr)`,
gridTemplateRows: `repeat(${Math.round(difficulty.height)}, 1fr)`,
gap: 1,
}}
>
{flatGrid.map((item) => {
const color = item.current
? Settings.theme.infolight
: item.marked
? Settings.theme.warning
: Settings.theme.error;
return (
<Typography
key={`${item}${uniqueId()}`}
sx={{
color: color,
border: `2px solid ${item.current ? Settings.theme.infolight : Settings.theme.primary}`,
height: "32px",
width: "32px",
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
>
{item.current ? <Close /> : item.flagged ? <Report /> : item.marked ? <Flag /> : <></>}
</Typography>
<br />
</div>
))}
);
})}
</Box>
<KeyHandler onKeyDown={press} onFailure={props.onFailure} />
</Paper>
</>