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 && }