Atlas48/grungnet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add maintenance modal

Browse Source
This commit is contained in:
Mitchell McCaffrey 2021-09-05 09:19:15 +10:00
parent 99a27365ae
commit 5e70df10c2
3 changed files with 87 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
src/modals/MaintenanceModal.tsx Normal file
View File

@ -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 (
<Modal
isOpen={isOpen}
onRequestClose={onRequestClose}
style={{ content: { maxWidth: "450px" } }}
>
<Box>
<Label py={2}>Site under maintenance</Label>
<Text as="p" mb={2} variant="caption">
Continue offline?
</Text>
<Flex py={2}>
<Button sx={{ flexGrow: 1 }} m={1} ml={0} onClick={onRequestClose}>
Ok
</Button>
</Flex>
</Box>
</Modal>
);
}
export default MaintenanceModal;

72
src/network/Session.ts
View File

@ -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;
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.emit("status", "ready");
} catch (error) {
logError(error);
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,
// });
// 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");
// }
}
disconnect() {

29
src/routes/Game.tsx
View File

@ -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<SessionStatus>();
useEffect(() => {
async function connect() {
await session.connect();
}
connect();
return () => {
session.disconnect();
};
}, [session]);
// Handle session errors
const [peerError, setPeerError] = useState<string | null>(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<Konva.Stage | null>(null);
@ -155,6 +158,10 @@ function Game() {
<ForceUpdateModal
isOpen={sessionStatus === "needs_update"}
/>
<MaintenanceModal
isOpen={maintenance}
onRequestClose={() => setMaintenance(false)}
/>
{!sessionStatus && <LoadingOverlay />}
{sessionStatus && databaseStatus === "upgrading" && (
<UpgradingLoadingOverlay />