Merge pull request #3611 from nickofolas/improvement/work-in-progress-ui

UI: Refactor and redesign WorkInProgress interface

src/Infiltration/ui/GameTimer.tsx

@@ -1,19 +1,8 @@
-import { LinearProgress, Paper } from "@mui/material";
-import { Theme } from "@mui/material/styles";
-import withStyles from "@mui/styles/withStyles";
+import { Paper } from "@mui/material";
 import React, { useEffect, useState } from "react";
 import { AugmentationNames } from "../../Augmentation/data/AugmentationNames";
 import { use } from "../../ui/Context";
-
-const TimerProgress = withStyles((theme: Theme) => ({
-  root: {
-    backgroundColor: theme.palette.background.paper,
-  },
-  bar: {
-    transition: "none",
-    backgroundColor: theme.palette.primary.main,
-  },
-}))(LinearProgress);
+import { ProgressBar } from "../../ui/React/Progress";
 
 interface IProps {
   millis: number;
@@ -43,10 +32,10 @@ export function GameTimer(props: IProps): React.ReactElement {
   // TODO(hydroflame): there's like a bug where it triggers the end before the
   // bar physically reaches the end
   return props.noPaper ? (
-    <TimerProgress variant="determinate" value={v} color="primary" />
+    <ProgressBar variant="determinate" value={v} color="primary" />
   ) : (
     <Paper sx={{ p: 1, mb: 1 }}>
-      <TimerProgress variant="determinate" value={v} color="primary" />
+      <ProgressBar variant="determinate" value={v} color="primary" />
     </Paper>
   );
 }

src/PersonObjects/Sleeve/ui/SleeveElem.tsx

@@ -1,23 +1,19 @@
+import { Box, Button, Paper, Tooltip, Typography } from "@mui/material";
 import React, { useState } from "react";
-
-import { Box, Paper, Typography, Button, Tooltip } from "@mui/material";
-
 import { CONSTANTS } from "../../../Constants";
 import { Crimes } from "../../../Crime/Crimes";
-import { numeralWrapper } from "../../../ui/numeralFormat";
-import { createProgressBarText } from "../../../utils/helpers/createProgressBarText";
-import { use } from "../../../ui/Context";
 import { FactionWorkType } from "../../../Faction/FactionWorkTypeEnum";
-
+import { use } from "../../../ui/Context";
+import { numeralWrapper } from "../../../ui/numeralFormat";
+import { ProgressBar } from "../../../ui/React/Progress";
 import { Sleeve } from "../Sleeve";
 import { SleeveTaskType } from "../SleeveTaskTypesEnum";
-
-import { SleeveAugmentationsModal } from "./SleeveAugmentationsModal";
-import { TravelModal } from "./TravelModal";
-import { StatsElement, EarningsElement } from "./StatsElement";
-import { MoreStatsModal } from "./MoreStatsModal";
 import { MoreEarningsModal } from "./MoreEarningsModal";
+import { MoreStatsModal } from "./MoreStatsModal";
+import { SleeveAugmentationsModal } from "./SleeveAugmentationsModal";
+import { EarningsElement, StatsElement } from "./StatsElement";
 import { TaskSelector } from "./TaskSelector";
+import { TravelModal } from "./TravelModal";
 
 interface IProps {
   sleeve: Sleeve;
@@ -131,74 +127,70 @@ export function SleeveElem(props: IProps): React.ReactElement {
   }
 
   return (
-    <Box component={Paper} sx={{ width: "auto" }}>
-      <Box sx={{ m: 1 }}>
-        <Box display="grid" sx={{ gridTemplateColumns: "1fr 1fr", width: "100%", gap: 1 }}>
-          <Box>
-            <StatsElement sleeve={props.sleeve} />
-            <Box display="grid" sx={{ gridTemplateColumns: "1fr 1fr", width: "100%" }}>
-              <Button onClick={() => setStatsOpen(true)}>More Stats</Button>
-              <Button onClick={() => setEarningsOpen(true)}>More Earnings Info</Button>
-              <Tooltip title={player.money < CONSTANTS.TravelCost ? <Typography>Insufficient funds</Typography> : ""}>
-                <span>
-                  <Button
-                    onClick={() => setTravelOpen(true)}
-                    disabled={player.money < CONSTANTS.TravelCost}
-                    sx={{ width: "100%", height: "100%" }}
-                  >
-                    Travel
-                  </Button>
-                </span>
-              </Tooltip>
-              <Tooltip
-                title={
-                  props.sleeve.shock < 100 ? <Typography>Unlocked when sleeve has fully recovered</Typography> : ""
-                }
-              >
-                <span>
-                  <Button
-                    onClick={() => setAugmentationsOpen(true)}
-                    disabled={props.sleeve.shock < 100}
-                    sx={{ width: "100%", height: "100%" }}
-                  >
-                    Manage Augmentations
-                  </Button>
-                </span>
-              </Tooltip>
-            </Box>
+    <>
+      <Paper sx={{ p: 1, display: "grid", gridTemplateColumns: "1fr 1fr", width: "auto", gap: 1 }}>
+        <span>
+          <StatsElement sleeve={props.sleeve} />
+          <Box display="grid" sx={{ gridTemplateColumns: "1fr 1fr", width: "100%" }}>
+            <Button onClick={() => setStatsOpen(true)}>More Stats</Button>
+            <Button onClick={() => setEarningsOpen(true)}>More Earnings Info</Button>
+            <Tooltip title={player.money < CONSTANTS.TravelCost ? <Typography>Insufficient funds</Typography> : ""}>
+              <span>
+                <Button
+                  onClick={() => setTravelOpen(true)}
+                  disabled={player.money < CONSTANTS.TravelCost}
+                  sx={{ width: "100%", height: "100%" }}
+                >
+                  Travel
+                </Button>
+              </span>
+            </Tooltip>
+            <Tooltip
+              title={props.sleeve.shock < 100 ? <Typography>Unlocked when sleeve has fully recovered</Typography> : ""}
+            >
+              <span>
+                <Button
+                  onClick={() => setAugmentationsOpen(true)}
+                  disabled={props.sleeve.shock < 100}
+                  sx={{ width: "100%", height: "100%" }}
+                >
+                  Manage Augmentations
+                </Button>
+              </span>
+            </Tooltip>
           </Box>
-          <Box>
-            <EarningsElement sleeve={props.sleeve} />
-            <Box>
-              <TaskSelector player={player} sleeve={props.sleeve} setABC={setABC} />
-              <Button onClick={setTask} sx={{ width: "100%" }}>
-                Set Task
-              </Button>
-              <Typography>{desc}</Typography>
-              <Typography>
-                {props.sleeve.currentTask === SleeveTaskType.Crime &&
-                  createProgressBarText({
-                    progress: props.sleeve.currentTaskTime / props.sleeve.currentTaskMaxTime,
-                    totalTicks: 25,
-                  })}
-              </Typography>
-            </Box>
-          </Box>
-          <MoreStatsModal open={statsOpen} onClose={() => setStatsOpen(false)} sleeve={props.sleeve} />
-          <MoreEarningsModal open={earningsOpen} onClose={() => setEarningsOpen(false)} sleeve={props.sleeve} />
-          <TravelModal
-            open={travelOpen}
-            onClose={() => setTravelOpen(false)}
-            sleeve={props.sleeve}
-            rerender={props.rerender}
-          />
-          <SleeveAugmentationsModal
-            open={augmentationsOpen}
-            onClose={() => setAugmentationsOpen(false)}
-            sleeve={props.sleeve}
-          />
-        </Box>
-      </Box>
-    </Box>
+        </span>
+        <span>
+          <EarningsElement sleeve={props.sleeve} />
+          <TaskSelector player={player} sleeve={props.sleeve} setABC={setABC} />
+          <Button onClick={setTask} sx={{ width: "100%" }}>
+            Set Task
+          </Button>
+          <Typography>{desc}</Typography>
+          <Typography>
+            {props.sleeve.currentTask === SleeveTaskType.Crime && (
+              <ProgressBar
+                variant="determinate"
+                value={(props.sleeve.currentTaskTime / props.sleeve.currentTaskMaxTime) * 100}
+                color="primary"
+              />
+            )}
+          </Typography>
+        </span>
+      </Paper>
+      <MoreStatsModal open={statsOpen} onClose={() => setStatsOpen(false)} sleeve={props.sleeve} />
+      <MoreEarningsModal open={earningsOpen} onClose={() => setEarningsOpen(false)} sleeve={props.sleeve} />
+      <TravelModal
+        open={travelOpen}
+        onClose={() => setTravelOpen(false)}
+        sleeve={props.sleeve}
+        rerender={props.rerender}
+      />
+      <SleeveAugmentationsModal
+        open={augmentationsOpen}
+        onClose={() => setAugmentationsOpen(false)}
+        sleeve={props.sleeve}
+      />
+    </>
   );
 }

src/ui/React/Progress.tsx

@@ -0,0 +1,13 @@
+import LinearProgress from "@mui/material/LinearProgress";
+import { Theme } from "@mui/material/styles";
+import withStyles from "@mui/styles/withStyles";
+
+export const ProgressBar = withStyles((theme: Theme) => ({
+  root: {
+    backgroundColor: theme.palette.background.paper,
+  },
+  bar: {
+    transition: "none",
+    backgroundColor: theme.palette.primary.main,
+  },
+}))(LinearProgress);

src/ui/React/StatsRow.tsx

@@ -16,19 +16,21 @@ interface IProps {
   name: string;
   color: string;
   classes?: any;
-  data: ITableRowData;
+  data?: ITableRowData;
   children?: React.ReactElement;
 }
 
 export const StatsRow = ({ name, color, classes = useStyles(), children, data }: IProps): React.ReactElement => {
-  let content;
+  let content = "";
 
-  if (data.content !== undefined) {
-    content = data.content;
-  } else if (data.level !== undefined && data.exp !== undefined) {
-    content = `${formatNumber(data.level, 0)} (${numeralWrapper.formatExp(data.exp)} exp)`;
-  } else if (data.level !== undefined && data.exp === undefined) {
-    content = `${formatNumber(data.level, 0)}`;
+  if (data) {
+    if (data.content !== undefined) {
+      content = data.content;
+    } else if (data.level !== undefined && data.exp !== undefined) {
+      content = `${formatNumber(data.level, 0)} (${numeralWrapper.formatExp(data.exp)} exp)`;
+    } else if (data.level !== undefined && data.exp === undefined) {
+      content = `${formatNumber(data.level, 0)}`;
+    }
   }
 
   return (