diff --git a/src/modals/GameExpiredModal.js b/src/modals/GameExpiredModal.js
new file mode 100644
index 0000000..981a2b7
--- /dev/null
+++ b/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 (
+
+
+
+
+ Reselect your map to pick up where you left off.
+
+
+
+
+
+
+ );
+}
+
+export default GameExpiredModal;
diff --git a/src/network/Session.js b/src/network/Session.js
index d2afc17..188f980 100644
--- a/src/network/Session.js
+++ b/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
diff --git a/src/routes/Game.js b/src/routes/Game.js
index 210c3fb..f07196e 100644
--- a/src/routes/Game.js
+++ b/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}
/>
+ setGameExpired(false)}
+ />
{!sessionStatus && }