Merge branch 'dev' into issues/2308

src/ui/React/PromptManager.tsx

@@ -53,7 +53,9 @@ export function PromptManager(): React.ReactElement {
 
   return (
     <Modal open={true} onClose={close}>
-      <Typography>{prompt.txt}</Typography>
+      <pre>
+        <Typography>{prompt.txt}</Typography>
+      </pre>
       <PromptContent prompt={prompt} resolve={resolve} />
     </Modal>
   );

src/ui/React/StatsRow.tsx

@@ -0,0 +1,49 @@
+import React from "react";
+
+import {
+  Typography,
+  TableCell,
+  TableRow,
+} from "@mui/material";
+
+import { numeralWrapper } from "../numeralFormat";
+import { formatNumber } from "../../utils/StringHelperFunctions";
+import { characterOverviewStyles as useStyles } from "./CharacterOverview";
+
+interface ITableRowData {
+  content?: string;
+  level?: number;
+  exp?: number;
+}
+
+interface IProps {
+  name: string;
+  color: string;
+  classes?: any;
+  data: ITableRowData;
+}
+
+export const StatsRow = ({ name, color, classes = useStyles(), data }: IProps): React.ReactElement => {
+  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)}`;
+  }
+
+  return (
+    <TableRow>
+      <TableCell classes={{ root: classes.cellNone }}>
+        <Typography style={{ color: color }}>{name}</Typography>
+      </TableCell>
+      <TableCell align="right" classes={{ root: classes.cellNone }}>
+        <Typography style={{ color: color }}>
+          {content}
+        </Typography>
+      </TableCell>
+    </TableRow>
+  )
+}

src/ui/WorkInProgressRoot.tsx

@@ -37,23 +37,12 @@ export function WorkInProgressRoot(): React.ReactElement {
 
   if (player.workType == CONSTANTS.WorkTypeFaction) {
     const faction = Factions[player.currentWorkFactionName];
-    if (!faction) {
-      return (
-        <Grid container direction="column" justifyContent="center" alignItems="center" style={{ minHeight: "100vh" }}>
-          <Grid item>
-            <Typography>
-              Something has gone wrong, you cannot work for {player.currentWorkFactionName || "(Faction not found)"} at
-              this time.
-            </Typography>
-          </Grid>
-        </Grid>
-      );
-    }
     if (!faction) {
       return (
         <>
           <Typography variant="h4" color="primary">
-            You have not joined {faction} yet!
+            You have not joined {player.currentWorkFactionName || "(Faction not found)"} yet or cannot work at this time,
+            please try again if you think this should have worked
           </Typography>
           <Button onClick={() => router.toFactions()}>Back to Factions</Button>
         </>