Added a session expired modal

This commit is contained in:
Mitchell McCaffrey 2021-02-20 18:09:49 +11:00
parent 1f665674a4
commit 064ccbf65f
3 changed files with 57 additions and 0 deletions

View File

@ -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;

View File

@ -41,6 +41,7 @@ import { logError } from "../helpers/logging";
* @fires Session#status * @fires Session#status
* @fires Session#playerJoined * @fires Session#playerJoined
* @fires Session#playerLeft * @fires Session#playerLeft
* @fires Session#gameExpired
*/ */
class Session extends EventEmitter { class Session extends EventEmitter {
/** /**
@ -95,6 +96,7 @@ class Session extends EventEmitter {
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("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));
@ -349,6 +351,15 @@ class Session extends EventEmitter {
this.emit("status", "joined"); this.emit("status", "joined");
} }
_handleGameExpired() {
/**
* Game Expired Event - A joining game has expired
*
* @event Session#gameExpired
*/
this.emit("gameExpired");
}
_handlePlayerJoined(id) { _handlePlayerJoined(id) {
/** /**
* Player Joined Event - A player has joined the game * Player Joined Event - A player has joined the game

View File

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