Update Minesweeper game UI

This commit is contained in:
nickofolas 2022-04-30 00:27:49 -05:00
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}>[?]&nbsp;</span>; gap: 1,
return <span key={x}>[&nbsp;]&nbsp;</span>; }}
} else { >
if (x == pos[0] && y == pos[1]) return <span key={x}>[X]&nbsp;</span>; {flatGrid.map((item) => {
if (answer[y][x]) return <span key={x}>[.]&nbsp;</span>; const color = item.current
if (hasAugment && minefield[y][x]) return <span key={x}>[?]&nbsp;</span>; ? Settings.theme.infolight
return <span key={x}>[&nbsp;]&nbsp;</span>; : item.marked
} ? Settings.theme.warning
})} : Settings.theme.error;
</Typography> return (
<br /> <Typography
</div> 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>
);
})}
</Box>
<KeyHandler onKeyDown={press} onFailure={props.onFailure} /> <KeyHandler onKeyDown={press} onFailure={props.onFailure} />
</Paper> </Paper>
</> </>