Added a session expired modal

src/modals/GameExpiredModal.js

@@ -0,0 +1,28 @@
+import React from "react";
+import { Box, Label, Flex, Button, Text } from "theme-ui";
+
+import Modal from "../components/Modal";
+
+function GameExpiredModal({ isOpen, onRequestClose }) {
+  return (
+    <Modal
+      isOpen={isOpen}
+      onRequestClose={onRequestClose}
+      style={{ maxWidth: "450px" }}
+    >
+      <Box>
+        <Label py={2}>Game Timed Out</Label>
+        <Text as="p" mb={2} variant="caption">
+          Reselect your map to pick up where you left off.
+        </Text>
+        <Flex py={2}>
+          <Button sx={{ flexGrow: 1 }} m={1} ml={0} onClick={onRequestClose}>
+            Ok
+          </Button>
+        </Flex>
+      </Box>
+    </Modal>
+  );
+}
+
+export default GameExpiredModal;

src/network/Session.js

@@ -41,6 +41,7 @@ import { logError } from "../helpers/logging";
  * @fires Session#status
  * @fires Session#playerJoined
  * @fires Session#playerLeft
+ * @fires Session#gameExpired
  */
 class Session extends EventEmitter {
   /**
@@ -95,6 +96,7 @@ class Session extends EventEmitter {
       this.socket.on("joined_game", this._handleJoinedGame.bind(this));
       this.socket.on("signal", this._handleSignal.bind(this));
       this.socket.on("auth_error", this._handleAuthError.bind(this));
+      this.socket.on("game_expired", this._handleGameExpired.bind(this));
       this.socket.on("disconnect", this._handleSocketDisconnect.bind(this));
       this.socket.io.on("reconnect", this._handleSocketReconnect.bind(this));
 
@@ -349,6 +351,15 @@ class Session extends EventEmitter {
     this.emit("status", "joined");
   }
 
+  _handleGameExpired() {
+    /**
+     * Game Expired Event - A joining game has expired
+     *
+     * @event Session#gameExpired
+     */
+    this.emit("gameExpired");
+  }
+
   _handlePlayerJoined(id) {
     /**
      * Player Joined Event - A player has joined the game

src/routes/Game.js

@@ -8,6 +8,7 @@ import Link from "../components/Link";
 import MapLoadingOverlay from "../components/map/MapLoadingOverlay";
 
 import AuthModal from "../modals/AuthModal";
+import GameExpiredModal from "../modals/GameExpiredModal";
 
 import { useAuth } from "../contexts/AuthContext";
 import { MapStageProvider } from "../contexts/MapStageContext";
@@ -67,6 +68,19 @@ function Game() {
     };
   }, [session]);
 
+  const [gameExpired, setGameExpired] = useState(false);
+  useEffect(() => {
+    function handleGameExpired() {
+      setGameExpired(true);
+    }
+
+    session.on("gameExpired", handleGameExpired);
+
+    return () => {
+      session.off("gameExpired", handleGameExpired);
+    };
+  }, [session]);
+
   // Join game
   useEffect(() => {
     if (sessionStatus === "ready" && databaseStatus !== "loading") {
@@ -137,6 +151,10 @@ function Game() {
             isOpen={sessionStatus === "auth"}
             onSubmit={handleAuthSubmit}
           />
+          <GameExpiredModal
+            isOpen={gameExpired}
+            onRequestClose={() => setGameExpired(false)}
+          />
           {!sessionStatus && <LoadingOverlay />}
           <MapLoadingOverlay />
         </MapStageProvider>