From 77bb13e8e651274c4b9b4c843e54da8f709872f1 Mon Sep 17 00:00:00 2001 From: Mitchell McCaffrey Date: Sat, 20 Feb 2021 14:40:00 +1100 Subject: [PATCH] Combine session status events into one event --- src/contexts/AuthContext.js | 4 --- src/modals/AuthModal.js | 10 +++--- src/network/Session.js | 52 ++++++++---------------------- src/routes/Game.js | 64 +++++++++++++++---------------------- 4 files changed, 44 insertions(+), 86 deletions(-) diff --git a/src/contexts/AuthContext.js b/src/contexts/AuthContext.js index b5584a5..868fe7e 100644 --- a/src/contexts/AuthContext.js +++ b/src/contexts/AuthContext.js @@ -26,8 +26,6 @@ export function AuthProvider({ children }) { storage.setItem("auth", password); }, [password]); - const [authenticationStatus, setAuthenticationStatus] = useState("unknown"); - const [userId, setUserId] = useState(); useEffect(() => { if (!database || databaseStatus === "loading") { @@ -51,8 +49,6 @@ export function AuthProvider({ children }) { userId, password, setPassword, - authenticationStatus, - setAuthenticationStatus, }; return {children}; } diff --git a/src/modals/AuthModal.js b/src/modals/AuthModal.js index 4e2dfdf..0c19e13 100644 --- a/src/modals/AuthModal.js +++ b/src/modals/AuthModal.js @@ -5,8 +5,8 @@ import { useAuth } from "../contexts/AuthContext"; import Modal from "../components/Modal"; -function AuthModal({ isOpen }) { - const { password, setPassword, setAuthenticationStatus } = useAuth(); +function AuthModal({ isOpen, onSubmit }) { + const { password, setPassword } = useAuth(); const [tmpPassword, setTempPassword] = useState(password); function handleChange(event) { @@ -15,8 +15,8 @@ function AuthModal({ isOpen }) { function handleSubmit(event) { event.preventDefault(); - setAuthenticationStatus("unknown"); setPassword(tmpPassword); + onSubmit(tmpPassword); } const inputRef = useRef(); @@ -38,9 +38,7 @@ function AuthModal({ isOpen }) { autoComplete="off" /> - + diff --git a/src/network/Session.js b/src/network/Session.js index d8c941c..c01f5e5 100644 --- a/src/network/Session.js +++ b/src/network/Session.js @@ -21,6 +21,13 @@ import { logError } from "../helpers/logging"; * @param {string} channel - The channel to send to */ +/** + * Session Status Event - Status of the session has changed + * + * @event Session#status + * @property {"ready"|"joining"|"joined"|"offline"|"reconnecting"|"auth"} status + */ + /** * * Handles connections to multiple peers @@ -31,10 +38,7 @@ import { logError } from "../helpers/logging"; * @fires Session#peerTrackRemoved * @fires Session#peerDisconnect * @fires Session#peerError - * @fires Session#authenticationSuccess - * @fires Session#authenticationError - * @fires Session#connected - * @fires Session#disconnected + * @fires Session#status * @fires Session#playerJoined * @fires Session#playerLeft */ @@ -53,13 +57,6 @@ class Session extends EventEmitter { */ peers; - /** - * The state of the session - * - * @type {('unknown'|'online'|'offline')} - */ - state; - get id() { return this.socket && this.socket.id; } @@ -73,7 +70,6 @@ class Session extends EventEmitter { constructor() { super(); this.peers = {}; - this.state = "unknown"; // Signal connected peers of a closure on refresh window.addEventListener("beforeunload", this._handleUnload.bind(this)); } @@ -102,10 +98,10 @@ class Session extends EventEmitter { this.socket.on("disconnect", this._handleSocketDisconnect.bind(this)); this.socket.io.on("reconnect", this._handleSocketReconnect.bind(this)); - this.state = "online"; + this.emit("status", "ready"); } catch (error) { logError(error); - this.state = "offline"; + this.emit("status", "offline"); } } @@ -194,6 +190,7 @@ class Session extends EventEmitter { this._gameId = gameId; this._password = password; this.socket.emit("join_game", gameId, password); + this.emit("status", "joining"); } /** @@ -345,18 +342,7 @@ class Session extends EventEmitter { } _handleJoinedGame() { - /** - * Authentication Success Event - Successfully authenticated when joining a game - * - * @event Session#authenticationSuccess - */ - this.emit("authenticationSuccess"); - /** - * Connected Event - You have connected to the game - * - * @event Session#connected - */ - this.emit("connected"); + this.emit("status", "joined"); } _handlePlayerJoined(id) { @@ -394,12 +380,7 @@ class Session extends EventEmitter { } _handleAuthError() { - /** - * Authentication Error Event - Unsuccessfully authenticated when joining a game - * - * @event Session#authenticationError - */ - this.emit("authenticationError"); + this.emit("status", "auth"); } _handleUnload() { @@ -409,12 +390,7 @@ class Session extends EventEmitter { } _handleSocketDisconnect() { - /** - * Disconnected Event - You have disconnected from the party - * - * @event Session#disconnected - */ - this.emit("disconnected"); + this.emit("status", "reconnecting"); for (let peer of Object.values(this.peers)) { peer.connection && peer.connection.destroy(); } diff --git a/src/routes/Game.js b/src/routes/Game.js index e862309..500c05d 100644 --- a/src/routes/Game.js +++ b/src/routes/Game.js @@ -22,36 +22,19 @@ import Session from "../network/Session"; function Game() { const { id: gameId } = useParams(); - const { authenticationStatus, password, setAuthenticationStatus } = useAuth(); + const { password } = useAuth(); const { databaseStatus } = useDatabase(); const [session] = useState(new Session()); - const [offline, setOffline] = useState(); + const [sessionStatus, setSessionStatus] = useState(); + useEffect(() => { async function connect() { await session.connect(); - setOffline(session.state === "offline"); } connect(); }, [session]); - // Handle authentication status - useEffect(() => { - function handleAuthSuccess() { - setAuthenticationStatus("authenticated"); - } - function handleAuthError() { - setAuthenticationStatus("unauthenticated"); - } - session.on("authenticationSuccess", handleAuthSuccess); - session.on("authenticationError", handleAuthError); - - return () => { - session.off("authenticationSuccess", handleAuthSuccess); - session.off("authenticationError", handleAuthError); - }; - }, [setAuthenticationStatus, session]); - // Handle session errors const [peerError, setPeerError] = useState(null); useEffect(() => { @@ -68,32 +51,30 @@ function Game() { }; }, [session]); - // Handle connection - const [connected, setConnected] = useState(false); useEffect(() => { - function handleConnected() { - setConnected(true); + function handleStatus(status) { + setSessionStatus(status); } - function handleDisconnected() { - setConnected(false); - } - - session.on("connected", handleConnected); - session.on("disconnected", handleDisconnected); + session.on("status", handleStatus); return () => { - session.off("connected", handleConnected); - session.off("disconnected", handleDisconnected); + session.off("status", handleStatus); }; }, [session]); // Join game useEffect(() => { - if (session.state === "online" && databaseStatus !== "loading") { + if (sessionStatus === "ready" && databaseStatus !== "loading") { session.joinGame(gameId, password); } - }, [gameId, password, databaseStatus, session, offline]); + }, [gameId, password, databaseStatus, session, sessionStatus]); + + function handleAuthSubmit(newPassword) { + if (databaseStatus !== "loading") { + session.joinGame(gameId, newPassword); + } + } // A ref to the Konva stage // the ref will be assigned in the MapInteraction component @@ -126,7 +107,11 @@ function Game() { - {}} allowClose={false}> + {}} + allowClose={false} + > Unable to connect to game, refresh to reconnect. @@ -134,7 +119,7 @@ function Game() { {}} allowClose={false} > @@ -144,8 +129,11 @@ function Game() { - - {authenticationStatus === "unknown" && !offline && } + + {!sessionStatus && }