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 && }