Update Backward Game

src/Infiltration/ui/BackwardGame.tsx

@@ -6,10 +6,10 @@ import { GameTimer } from "./GameTimer";
 import { random } from "../utils";
 import { interpolate } from "./Difficulty";
 import { BlinkingCursor } from "./BlinkingCursor";
-import Typography from "@mui/material/Typography";
 import { KEY } from "../../utils/helpers/keyCodes";
 import { Player } from "../../Player";
 import { AugmentationNames } from "../../Augmentation/data/AugmentationNames";
+import { Paper, Typography, Box } from "@mui/material";
 
 interface Difficulty {
   [key: string]: number;
@@ -48,24 +48,18 @@ export function BackwardGame(props: IMinigameProps): React.ReactElement {
   }
 
   return (
-    <Grid container spacing={3}>
+    <>
       <GameTimer millis={timer} onExpire={props.onFailure} />
-      <Grid item xs={12}>
+      <Paper sx={{ display: "grid", justifyItems: "center", pb: 1 }}>
         <Typography variant="h4">Type it{!hasAugment ? " backward" : ""}</Typography>
         <KeyHandler onKeyDown={press} onFailure={props.onFailure} />
-      </Grid>
-      <Grid item xs={6}>
-        <Typography style={{ transform: hasAugment ? "none" : "scaleX(-1)", marginLeft: hasAugment ? "50%" : "none" }}>
-          {answer}
-        </Typography>
-      </Grid>
-      <Grid item xs={6}>
+        <Typography style={{ transform: hasAugment ? "none" : "scaleX(-1)" }}>{answer}</Typography>
         <Typography>
           {guess}
           <BlinkingCursor />
         </Typography>
-      </Grid>
-    </Grid>
+      </Paper>
+    </>
   );
 }
 

src/Infiltration/ui/BlinkingCursor.tsx

@@ -6,5 +6,5 @@ export function BlinkingCursor(): React.ReactElement {
     const i = setInterval(() => setOn((old) => !old), 1000);
     return () => clearInterval(i);
   });
-  return <>{on ? "|" : ""}</>;
+  return <>{on ? "|" : <>&nbsp;</>}</>;
 }