Update Minesweeper game UI

src/Infiltration/ui/MinesweeperGame.tsx

@@ -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>;
-                }
-              })}
-            </Typography>
-            <br />
-          </div>
-        ))}
+        <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>
+            );
+          })}
+        </Box>
         <KeyHandler onKeyDown={press} onFailure={props.onFailure} />
       </Paper>
     </>