Hotfix: Popups no longer show up during infiltration (#847)

src/Faction/ui/InvitationModal.tsx

@@ -9,7 +9,7 @@ import Button from "@mui/material/Button";
 
 export const InvitationEvent = new EventEmitter<[Faction]>();
 
-export function InvitationModal(): React.ReactElement {
+export function InvitationModal({ hidden }: { hidden: boolean }): React.ReactElement {
   const [faction, setFaction] = useState<Faction | null>(null);
   function join(): void {
     if (faction === null) return;
@@ -25,10 +25,10 @@ export function InvitationModal(): React.ReactElement {
   useEffect(() => InvitationEvent.subscribe((faction) => setFaction(faction)), []);
 
   return (
-    <Modal open={faction !== null} onClose={() => setFaction(null)}>
+    <Modal open={!hidden && faction !== null} onClose={() => setFaction(null)}>
       <Typography variant="h4">You have received a faction invitation.</Typography>
       <Typography>
-        Would you like to join {(faction || { name: "" }).name}? <br />
+        Would you like to join {faction?.name}? <br />
         <br />
         Warning: Joining this faction may prevent you from joining other factions during this run!
       </Typography>

src/ui/GameRoot.tsx

@@ -398,13 +398,11 @@ export function GameRoot(): React.ReactElement {
                 <Box className={classes.root}>{mainPage}</Box>
               )}
               <Unclickable />
-              <div style={{ display: withPopups ? "inherit" : "none", position: "absolute" }}>
+              <LogBoxManager hidden={!withPopups} />
-                <LogBoxManager />
+              <AlertManager hidden={!withPopups} />
-                <AlertManager />
+              <PromptManager hidden={!withPopups} />
-                <PromptManager />
+              <InvitationModal hidden={!withPopups} />
-                <InvitationModal />
+              <Snackbar hidden={!withPopups} />
-                <Snackbar />
-              </div>
               <Apr1 />
             </SnackbarProvider>
           </HistoryProvider>

src/ui/React/AlertManager.tsx

@@ -14,7 +14,7 @@ interface Alert {
 }
 
 let i = 0;
-export function AlertManager(): React.ReactElement {
+export function AlertManager({ hidden }: { hidden: boolean }): React.ReactElement {
   const [alerts, setAlerts] = useState<Alert[]>([]);
   useEffect(
     () =>
@@ -49,6 +49,8 @@ export function AlertManager(): React.ReactElement {
     return () => document.removeEventListener("keydown", handle);
   }, []);
 
+  const alertMessage = alerts[0]?.text || "No alert to show";
+
   function getMessageHash(text: string | JSX.Element): string {
     if (typeof text === "string") return sha256(text);
     return sha256(JSON.stringify(text.props));
@@ -61,14 +63,10 @@ export function AlertManager(): React.ReactElement {
   }
 
   return (
-    <>
+    <Modal open={!hidden && alerts.length > 0} onClose={close}>
-      {alerts.length > 0 && (
+      <Box overflow="scroll" sx={{ overflowWrap: "break-word", whiteSpace: "pre-line" }}>
-        <Modal open={true} onClose={close}>
+        <Typography component={"span"}>{alertMessage}</Typography>
-          <Box overflow="scroll" sx={{ overflowWrap: "break-word", whiteSpace: "pre-line" }}>
+      </Box>
-            <Typography component={"span"}>{alerts[0].text}</Typography>
+    </Modal>
-          </Box>
-        </Modal>
-      )}
-    </>
   );
 }

src/ui/React/LogBoxManager.tsx

@@ -78,7 +78,7 @@ interface Log {
 
 let logs: Log[] = [];
 
-export function LogBoxManager(): React.ReactElement {
+export function LogBoxManager({ hidden }: { hidden: boolean }): React.ReactElement {
   const rerender = useRerender();
 
   //Close tail windows by their pid.
@@ -130,7 +130,7 @@ export function LogBoxManager(): React.ReactElement {
   return (
     <>
       {logs.map((log) => (
-        <LogWindow key={log.id} script={log.script} onClose={() => close(log.id)} />
+        <LogWindow hidden={hidden} key={log.id} script={log.script} onClose={() => close(log.id)} />
       ))}
     </>
   );
@@ -139,6 +139,7 @@ export function LogBoxManager(): React.ReactElement {
 interface LogWindowProps {
   script: RunningScript;
   onClose: () => void;
+  hidden: boolean;
 }
 
 const useStyles = makeStyles(() =>
@@ -164,10 +165,9 @@ const useStyles = makeStyles(() =>
 
 export const logBoxBaseZIndex = 1500;
 
-function LogWindow(props: LogWindowProps): React.ReactElement {
+function LogWindow({ hidden, script, onClose }: LogWindowProps): React.ReactElement {
   const draggableRef = useRef<HTMLDivElement>(null);
   const rootRef = useRef<Draggable>(null);
-  const script = props.script;
   const classes = useStyles();
   const container = useRef<HTMLDivElement>(null);
   const textArea = useRef<HTMLDivElement>(null);
@@ -316,7 +316,7 @@ function LogWindow(props: LogWindowProps): React.ReactElement {
   return (
     <Draggable handle=".drag" onDrag={onDrag} ref={rootRef} onMouseDown={updateLayer}>
       <Box
-        display="flex"
+        display={hidden ? "none" : "flex"}
         sx={{
           flexFlow: "column",
           position: "fixed",
@@ -377,12 +377,7 @@ function LogWindow(props: LogWindowProps): React.ReactElement {
                 >
                   {minimized ? <ExpandMoreIcon /> : <ExpandLessIcon />}
                 </IconButton>
-                <IconButton
+                <IconButton title="Close window" className={classes.titleButton} onClick={onClose} onTouchEnd={onClose}>
-                  title="Close window"
-                  className={classes.titleButton}
-                  onClick={props.onClose}
-                  onTouchEnd={props.onClose}
-                >
                   <CloseIcon />
                 </IconButton>
               </span>

src/ui/React/PromptManager.tsx

@@ -16,7 +16,7 @@ interface Prompt {
   resolve: (result: boolean | string) => void;
 }
 
-export function PromptManager(): React.ReactElement {
+export function PromptManager({ hidden }: { hidden: boolean }): React.ReactElement {
   const [prompt, setPrompt] = useState<Prompt | null>(null);
   useEffect(() => {
     return PromptEvent.subscribe((p: Prompt) => {
@@ -24,10 +24,6 @@ export function PromptManager(): React.ReactElement {
     });
   }, []);
 
-  if (prompt === null) {
-    return <></>;
-  }
-
   function close(): void {
     if (prompt === null) return;
     if (["text", "select"].includes(prompt.options?.type ?? "")) {
@@ -44,19 +40,23 @@ export function PromptManager(): React.ReactElement {
   };
 
   let PromptContent = PromptMenuBoolean;
-  if (prompt.options?.type && ["text", "select"].includes(prompt.options.type))
+  if (prompt?.options?.type && ["text", "select"].includes(prompt.options.type))
     PromptContent = types[prompt.options.type];
   const resolve = (value: boolean | string): void => {
-    prompt.resolve(value);
+    prompt?.resolve(value);
     setPrompt(null);
   };
 
   return (
-    <Modal open={true} onClose={close}>
+    <Modal open={!hidden && prompt !== null} onClose={close}>
-      <pre>
+      {prompt && (
-        <Typography>{prompt.txt}</Typography>
+        <>
-      </pre>
+          <pre>
-      <PromptContent prompt={prompt} resolve={resolve} />
+            <Typography>{prompt.txt}</Typography>
+          </pre>
+          <PromptContent prompt={prompt} resolve={resolve} />
+        </>
+      )}
     </Modal>
   );
 }

src/ui/React/Snackbar.tsx

@@ -40,18 +40,19 @@ export function SnackbarProvider(props: IProps): React.ReactElement {
 
 export const SnackbarEvents = new EventEmitter<[string | React.ReactNode, ToastVariant, number | null]>();
 
-export function Snackbar(): React.ReactElement {
+export function Snackbar({ hidden }: { hidden: boolean }): React.ReactElement {
   const { enqueueSnackbar, closeSnackbar } = useSnackbar();
 
-  useEffect(() =>
+  useEffect(() => {
-    SnackbarEvents.subscribe((s, variant, duration) => {
+    if (hidden) return;
+    return SnackbarEvents.subscribe((s, variant, duration) => {
       const id = enqueueSnackbar(<Alert severity={variant}>{s}</Alert>, {
         content: (k, m) => <Paper key={k}>{m}</Paper>,
         variant: variant,
         autoHideDuration: duration,
         onClick: () => closeSnackbar(id),
       });
-    }),
+    });
-  );
+  }, [closeSnackbar, enqueueSnackbar, hidden]);
   return <></>;
 }

src/ui/React/SoftResetButton.tsx

@@ -1,8 +1,7 @@
 import React, { useState } from "react";
 
+import { Button, Tooltip } from "@mui/material";
 import { ConfirmationModal } from "./ConfirmationModal";
-import Button from "@mui/material/Button";
-import { Tooltip, Typography } from "@mui/material";
 import RestartAltIcon from "@mui/icons-material/RestartAlt";
 
 interface IProps {
@@ -50,7 +49,7 @@ Are you sure?
         onConfirm={onTriggered}
         open={modalOpened}
         onClose={() => setModalOpened(false)}
-        confirmationText={<Typography style={{ whiteSpace: "pre-wrap" }}>{confirmationMessage}</Typography>}
+        confirmationText={<span style={{ whiteSpace: "pre-wrap" }}>{confirmationMessage}</span>}
         additionalButton={<Button onClick={() => setModalOpened(false)}>Cancel</Button>}
       />
     </>