Add maintenance modal

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,5 +1,6 @@
-import io, { Socket } from "socket.io-client";
+// import io, { Socket } from "socket.io-client";
-import msgParser from "socket.io-msgpack-parser";
+// import msgParser from "socket.io-msgpack-parser";
+import { Socket } from "socket.io-client";
 import { EventEmitter } from "events";
 
 import Connection, { DataProgressEvent } from "./Connection";
@@ -65,40 +66,41 @@ class Session extends EventEmitter {
    * Connect to the websocket
    */
   async connect() {
-    try {
+    this.emit("status", "offline");
-      if (!process.env.REACT_APP_ICE_SERVERS_URL) {
+    // try {
-        return;
+    //   if (!process.env.REACT_APP_ICE_SERVERS_URL) {
-      }
+    //     return;
-      const response = await fetch(process.env.REACT_APP_ICE_SERVERS_URL);
+    //   }
-      if (!response.ok) {
+    //   const response = await fetch(process.env.REACT_APP_ICE_SERVERS_URL);
-        throw Error("Unable to fetch ICE servers");
+    //   if (!response.ok) {
-      }
+    //     throw Error("Unable to fetch ICE servers");
-      const data = await response.json();
+    //   }
-      this._iceServers = data.iceServers;
+    //   const data = await response.json();
+    //   this._iceServers = data.iceServers;
 
-      if (!process.env.REACT_APP_BROKER_URL) {
+    //   if (!process.env.REACT_APP_BROKER_URL) {
-        return;
+    //     return;
-      }
+    //   }
-      this.socket = io(process.env.REACT_APP_BROKER_URL, {
+    //   this.socket = io(process.env.REACT_APP_BROKER_URL, {
-        withCredentials: true,
+    //     withCredentials: true,
-        parser: msgParser,
+    //     parser: msgParser,
-      });
+    //   });
 
-      this.socket.on("player_joined", this._handlePlayerJoined.bind(this));
+    //   this.socket.on("player_joined", this._handlePlayerJoined.bind(this));
-      this.socket.on("player_left", this._handlePlayerLeft.bind(this));
+    //   this.socket.on("player_left", this._handlePlayerLeft.bind(this));
-      this.socket.on("joined_game", this._handleJoinedGame.bind(this));
+    //   this.socket.on("joined_game", this._handleJoinedGame.bind(this));
-      this.socket.on("signal", this._handleSignal.bind(this));
+    //   this.socket.on("signal", this._handleSignal.bind(this));
-      this.socket.on("auth_error", this._handleAuthError.bind(this));
+    //   this.socket.on("auth_error", this._handleAuthError.bind(this));
-      this.socket.on("game_expired", this._handleGameExpired.bind(this));
+    //   this.socket.on("game_expired", this._handleGameExpired.bind(this));
-      this.socket.on("disconnect", this._handleSocketDisconnect.bind(this));
+    //   this.socket.on("disconnect", this._handleSocketDisconnect.bind(this));
-      this.socket.io.on("reconnect", this._handleSocketReconnect.bind(this));
+    //   this.socket.io.on("reconnect", this._handleSocketReconnect.bind(this));
-      this.socket.on("force_update", this._handleForceUpdate.bind(this));
+    //   this.socket.on("force_update", this._handleForceUpdate.bind(this));
 
-      this.emit("status", "ready");
+    //   this.emit("status", "ready");
-    } catch (error) {
+    // } catch (error) {
-      logError(error);
+    //   logError(error);
-      this.emit("status", "offline");
+    //   this.emit("status", "offline");
-    }
+    // }
   }
 
   disconnect() {

src/routes/Game.tsx

@@ -29,6 +29,7 @@ import NetworkedMapAndTokens from "../network/NetworkedMapAndTokens";
 import NetworkedParty from "../network/NetworkedParty";
 
 import Session, { PeerErrorEvent, SessionStatus } from "../network/Session";
+import MaintenanceModal from "../modals/MaintenanceModal";
 
 function Game() {
   const { id: gameId }: { id: string } = useParams();
@@ -38,17 +39,6 @@ function Game() {
   const [session] = useState(new Session());
   const [sessionStatus, setSessionStatus] = useState<SessionStatus>();
 
-  useEffect(() => {
-    async function connect() {
-      await session.connect();
-    }
-    connect();
-
-    return () => {
-      session.disconnect();
-    };
-  }, [session]);
-
   // Handle session errors
   const [peerError, setPeerError] = useState<string | null>(null);
   useEffect(() => {
@@ -90,6 +80,8 @@ function Game() {
     };
   }, [session]);
 
+  const [maintenance, setMaintenance] = useState(true);
+
   // Join game
   useEffect(() => {
     if (
@@ -106,6 +98,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);
@@ -155,6 +158,10 @@ function Game() {
                     <ForceUpdateModal
                       isOpen={sessionStatus === "needs_update"}
                     />
+                    <MaintenanceModal
+                      isOpen={maintenance}
+                      onRequestClose={() => setMaintenance(false)}
+                    />
                     {!sessionStatus && <LoadingOverlay />}
                     {sessionStatus && databaseStatus === "upgrading" && (
                       <UpgradingLoadingOverlay />