Add configurable maintenance modal

.env

@@ -6,3 +6,4 @@ REACT_APP_VERSION=$npm_package_version
 REACT_APP_PREVIEW=false
 REACT_APP_LOGGING=false
 REACT_APP_FATHOM_SITE_ID=VMSHBPKD
+REACT_APP_MAINTENANCE=true

.env.production

@@ -7,3 +7,4 @@ REACT_APP_PREVIEW=false
 REACT_APP_LOGGING=true
 REACT_APP_FATHOM_SITE_ID=VMSHBPKD
 REACT_APP_SENTRY_DSN=https://d6d22c5233b54c4d91df8fa29d5ffeb0@o467475.ingest.sentry.io/5493956
+REACT_APP_MAINTENANCE=true

src/modals/MaintenanceModal.tsx

@@ -0,0 +1,34 @@
+import { Box, Label, Flex, Button, Text } from "theme-ui";
+
+import Modal from "../components/Modal";
+
+import { RequestCloseEventHandler } from "../types/Events";
+
+type MaintenanceModalProps = {
+  isOpen: boolean;
+  onRequestClose: RequestCloseEventHandler;
+};
+
+function MaintenanceModal({ isOpen, onRequestClose }: MaintenanceModalProps) {
+  return (
+    <Modal
+      isOpen={isOpen}
+      onRequestClose={onRequestClose}
+      style={{ content: { maxWidth: "450px" } }}
+    >
+      <Box>
+        <Label py={2}>Site under maintenance</Label>
+        <Text as="p" mb={2} variant="caption">
+          Continue offline?
+        </Text>
+        <Flex py={2}>
+          <Button sx={{ flexGrow: 1 }} m={1} ml={0} onClick={onRequestClose}>
+            Ok
+          </Button>
+        </Flex>
+      </Box>
+    </Modal>
+  );
+}
+
+export default MaintenanceModal;

src/network/Session.ts

@@ -1,4 +1,4 @@
-import io from "socket.io-client";
+import io, { Socket } from "socket.io-client";
 import msgParser from "socket.io-msgpack-parser";
 import { EventEmitter } from "events";
 
@@ -33,11 +33,7 @@ class Session extends EventEmitter {
   /**
    * The socket io connection
    */
-  socket = io(process.env.REACT_APP_BROKER_URL!, {
+  socket: Socket;
-    withCredentials: true,
-    parser: msgParser,
-    transports: ["websocket"],
-  });
 
   /**
    * A mapping of socket ids to session peers
@@ -59,6 +55,12 @@ class Session extends EventEmitter {
   constructor() {
     super();
     this.peers = {};
+    this.socket = io(process.env.REACT_APP_BROKER_URL!, {
+      withCredentials: true,
+      parser: msgParser,
+      transports: ["websocket"],
+      autoConnect: process.env.REACT_APP_MAINTENANCE === "false",
+    });
     // Signal connected peers of a closure on refresh
     window.addEventListener("beforeunload", this._handleUnload.bind(this));
   }
@@ -68,7 +70,11 @@ class Session extends EventEmitter {
    */
   async connect() {
     try {
-      if (!process.env.REACT_APP_ICE_SERVERS_URL) {
+      if (
+        !process.env.REACT_APP_ICE_SERVERS_URL ||
+        process.env.REACT_APP_MAINTENANCE === "true"
+      ) {
+        this.emit("status", "offline");
         return;
       }
       const response = await fetch(process.env.REACT_APP_ICE_SERVERS_URL);

src/routes/Game.tsx

@@ -14,6 +14,7 @@ import UpgradingLoadingOverlay from "../components/UpgradingLoadingOverlay";
 import AuthModal from "../modals/AuthModal";
 import GameExpiredModal from "../modals/GameExpiredModal";
 import ForceUpdateModal from "../modals/ForceUpdateModal";
+import MaintenanceModal from "../modals/MaintenanceModal";
 
 import { useAuth } from "../contexts/AuthContext";
 import { MapStageProvider } from "../contexts/MapStageContext";
@@ -38,16 +39,9 @@ function Game() {
   const [session] = useState(new Session());
   const [sessionStatus, setSessionStatus] = useState<SessionStatus>();
 
-  useEffect(() => {
+  const [maintenance, setMaintenance] = useState(
-    async function connect() {
+    process.env.REACT_APP_MAINTENANCE === "true"
-      await session.connect();
+  );
-    }
-    connect();
-
-    return () => {
-      session.disconnect();
-    };
-  }, [session]);
 
   // Handle session errors
   const [peerError, setPeerError] = useState<string | null>(null);
@@ -106,6 +100,17 @@ function Game() {
     }
   }
 
+  useEffect(() => {
+    async function connect() {
+      await session.connect();
+    }
+    connect();
+
+    return () => {
+      session.disconnect();
+    };
+  }, [session]);
+
   // A ref to the Konva stage
   // the ref will be assigned in the MapInteraction component
   const mapStageRef = useRef<Konva.Stage | null>(null);
@@ -159,6 +164,10 @@ function Game() {
                     {sessionStatus && databaseStatus === "upgrading" && (
                       <UpgradingLoadingOverlay />
                     )}
+                    <MaintenanceModal
+                      isOpen={maintenance}
+                      onRequestClose={() => setMaintenance(false)}
+                    />
                     <MapLoadingOverlay />
                   </MapStageProvider>
                 </PartyProvider>