mirror of
https://github.com/bitburner-official/bitburner-src.git
synced 2024-11-14 03:33:52 +01:00
Update Minesweeper game UI
This commit is contained in:
parent
1bcb0099f4
commit
437cd66ffe
@ -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 React, { useEffect, useState } from "react";
|
||||||
import { AugmentationNames } from "../../Augmentation/data/AugmentationNames";
|
import { AugmentationNames } from "../../Augmentation/data/AugmentationNames";
|
||||||
import { Player } from "../../Player";
|
import { Player } from "../../Player";
|
||||||
|
import { Settings } from "../../Settings/Settings";
|
||||||
import { KEY } from "../../utils/helpers/keyCodes";
|
import { KEY } from "../../utils/helpers/keyCodes";
|
||||||
import { downArrowSymbol, getArrow, leftArrowSymbol, rightArrowSymbol, upArrowSymbol } from "../utils";
|
import { downArrowSymbol, getArrow, leftArrowSymbol, rightArrowSymbol, upArrowSymbol } from "../utils";
|
||||||
import { interpolate } from "./Difficulty";
|
import { interpolate } from "./Difficulty";
|
||||||
@ -80,29 +83,62 @@ export function MinesweeperGame(props: IMinigameProps): React.ReactElement {
|
|||||||
return () => clearInterval(id);
|
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 (
|
return (
|
||||||
<>
|
<>
|
||||||
<GameTimer millis={timer} onExpire={props.onFailure} />
|
<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>
|
<Typography variant="h4">{memoryPhase ? "Remember all the mines!" : "Mark all the mines!"}</Typography>
|
||||||
{minefield.map((line, y) => (
|
<Box
|
||||||
<div key={y}>
|
sx={{
|
||||||
<Typography>
|
display: "grid",
|
||||||
{line.map((cell, x) => {
|
gridTemplateColumns: `repeat(${Math.round(difficulty.width)}, 1fr)`,
|
||||||
if (memoryPhase) {
|
gridTemplateRows: `repeat(${Math.round(difficulty.height)}, 1fr)`,
|
||||||
if (minefield[y][x]) return <span key={x}>[?] </span>;
|
gap: 1,
|
||||||
return <span key={x}>[ ] </span>;
|
}}
|
||||||
} else {
|
>
|
||||||
if (x == pos[0] && y == pos[1]) return <span key={x}>[X] </span>;
|
{flatGrid.map((item) => {
|
||||||
if (answer[y][x]) return <span key={x}>[.] </span>;
|
const color = item.current
|
||||||
if (hasAugment && minefield[y][x]) return <span key={x}>[?] </span>;
|
? Settings.theme.infolight
|
||||||
return <span key={x}>[ ] </span>;
|
: 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>
|
</Typography>
|
||||||
<br />
|
);
|
||||||
</div>
|
})}
|
||||||
))}
|
</Box>
|
||||||
<KeyHandler onKeyDown={press} onFailure={props.onFailure} />
|
<KeyHandler onKeyDown={press} onFailure={props.onFailure} />
|
||||||
</Paper>
|
</Paper>
|
||||||
</>
|
</>
|
||||||
|
Loading…
Reference in New Issue
Block a user