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" && (