From 5e70df10c2dab4502f1b62fbdfb4331ed0cf1dbb Mon Sep 17 00:00:00 2001 From: Mitchell McCaffrey Date: Sun, 5 Sep 2021 09:19:15 +1000 Subject: [PATCH] Add maintenance modal --- src/modals/MaintenanceModal.tsx | 34 +++++++++++++++++ src/network/Session.ts | 68 +++++++++++++++++---------------- src/routes/Game.tsx | 29 ++++++++------ 3 files changed, 87 insertions(+), 44 deletions(-) create mode 100644 src/modals/MaintenanceModal.tsx diff --git a/src/modals/MaintenanceModal.tsx b/src/modals/MaintenanceModal.tsx new file mode 100644 index 0000000..94508e0 --- /dev/null +++ b/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 ( + + + + + Continue offline? + + + + + + + ); +} + +export default MaintenanceModal; diff --git a/src/network/Session.ts b/src/network/Session.ts index a85b8ad..116f7c5 100644 --- a/src/network/Session.ts +++ b/src/network/Session.ts @@ -1,5 +1,6 @@ -import io, { Socket } from "socket.io-client"; -import msgParser from "socket.io-msgpack-parser"; +// import io, { Socket } from "socket.io-client"; +// 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 { - if (!process.env.REACT_APP_ICE_SERVERS_URL) { - return; - } - const response = await fetch(process.env.REACT_APP_ICE_SERVERS_URL); - if (!response.ok) { - throw Error("Unable to fetch ICE servers"); - } - const data = await response.json(); - this._iceServers = data.iceServers; + this.emit("status", "offline"); + // try { + // if (!process.env.REACT_APP_ICE_SERVERS_URL) { + // return; + // } + // const response = await fetch(process.env.REACT_APP_ICE_SERVERS_URL); + // if (!response.ok) { + // throw Error("Unable to fetch ICE servers"); + // } + // const data = await response.json(); + // this._iceServers = data.iceServers; - if (!process.env.REACT_APP_BROKER_URL) { - return; - } - this.socket = io(process.env.REACT_APP_BROKER_URL, { - withCredentials: true, - parser: msgParser, - }); + // if (!process.env.REACT_APP_BROKER_URL) { + // return; + // } + // this.socket = io(process.env.REACT_APP_BROKER_URL, { + // withCredentials: true, + // parser: msgParser, + // }); - this.socket.on("player_joined", this._handlePlayerJoined.bind(this)); - this.socket.on("player_left", this._handlePlayerLeft.bind(this)); - 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)); - this.socket.on("force_update", this._handleForceUpdate.bind(this)); + // this.socket.on("player_joined", this._handlePlayerJoined.bind(this)); + // this.socket.on("player_left", this._handlePlayerLeft.bind(this)); + // 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)); + // this.socket.on("force_update", this._handleForceUpdate.bind(this)); - this.emit("status", "ready"); - } catch (error) { - logError(error); - this.emit("status", "offline"); - } + // this.emit("status", "ready"); + // } catch (error) { + // logError(error); + // this.emit("status", "offline"); + // } } disconnect() { diff --git a/src/routes/Game.tsx b/src/routes/Game.tsx index 9d9e20e..8dde676 100644 --- a/src/routes/Game.tsx +++ b/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(); - useEffect(() => { - async function connect() { - await session.connect(); - } - connect(); - - return () => { - session.disconnect(); - }; - }, [session]); - // Handle session errors const [peerError, setPeerError] = useState(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(null); @@ -155,6 +158,10 @@ function Game() { + setMaintenance(false)} + /> {!sessionStatus && } {sessionStatus && databaseStatus === "upgrading" && (