From 693c2967cdb9bf4f883c984f58afb5dab3bfd383 Mon Sep 17 00:00:00 2001 From: Mitchell McCaffrey Date: Tue, 16 Jun 2020 20:08:10 +1000 Subject: [PATCH 1/7] Added allow close option to banner and fixed banner min width --- src/components/Banner.js | 20 +++++++++++++------- 1 file changed, 13 insertions(+), 7 deletions(-) diff --git a/src/components/Banner.js b/src/components/Banner.js index d4a0296..521fef1 100644 --- a/src/components/Banner.js +++ b/src/components/Banner.js @@ -2,7 +2,7 @@ import React from "react"; import Modal from "react-modal"; import { useThemeUI, Close } from "theme-ui"; -function Banner({ isOpen, onRequestClose, children }) { +function Banner({ isOpen, onRequestClose, children, allowClose }) { const { theme } = useThemeUI(); return ( @@ -15,7 +15,7 @@ function Banner({ isOpen, onRequestClose, children }) { backgroundColor: theme.colors.highlight, top: "initial", left: "50%", - right: 0, + right: "initial", // Offset for iOS safe zone bottom: "env(safe-area-inset-bottom)", border: "none", @@ -28,13 +28,19 @@ function Banner({ isOpen, onRequestClose, children }) { }} > {children} - + {allowClose && ( + + )} ); } +Banner.defaultProps = { + allowClose: true, +}; + export default Banner; From 49787b560dbd71771b205993b8af723bd1bdf114 Mon Sep 17 00:00:00 2001 From: Mitchell McCaffrey Date: Tue, 16 Jun 2020 20:09:24 +1000 Subject: [PATCH 2/7] Added automatic party re-join for network error and fixed bug with connections not being destroyed with network failure --- src/helpers/useSession.js | 51 +++++++++++++++++++++++++++++---------- 1 file changed, 38 insertions(+), 13 deletions(-) diff --git a/src/helpers/useSession.js b/src/helpers/useSession.js index e728a0b..7d52331 100644 --- a/src/helpers/useSession.js +++ b/src/helpers/useSession.js @@ -1,4 +1,4 @@ -import { useEffect, useState, useContext } from "react"; +import { useEffect, useState, useContext, useCallback } from "react"; import io from "socket.io-client"; import { omit } from "../helpers/shared"; @@ -19,17 +19,24 @@ function useSession( ) { const { password, setAuthenticationStatus } = useContext(AuthContext); const [iceServers, setIceServers] = useState([]); + const [connected, setConnected] = useState(false); - useEffect(() => { - async function joinParty() { + const joinParty = useCallback(async () => { + try { const response = await fetch(process.env.REACT_APP_ICE_SERVERS_URL); const data = await response.json(); setIceServers(data.iceServers); socket.emit("join party", partyId, password); + } catch (e) { + console.error("Unable to join party:", e.message); + setConnected(false); } - joinParty(); }, [partyId, password]); + useEffect(() => { + joinParty(); + }, [partyId, password, joinParty]); + const [peers, setPeers] = useState({}); // Signal connected peers of a closure on refresh @@ -78,6 +85,8 @@ function useSession( function handleClose() { onPeerDisconnected && onPeerDisconnected(peer); + peer.connection.destroy(); + setPeers((prevPeers) => omit(prevPeers, [peer.id])); } function handleError(error) { @@ -153,8 +162,8 @@ function useSession( function handlePartyMemberLeft(id) { if (id in peers) { peers[id].connection.destroy(); + setPeers((prevPeers) => omit(prevPeers, [id])); } - setPeers((prevPeers) => omit(prevPeers, [id])); } function handleJoinedParty(otherIds) { @@ -164,6 +173,7 @@ function useSession( addPeer(id, true, sync); } setAuthenticationStatus("authenticated"); + setConnected(true); } function handleSignal(data) { @@ -177,21 +187,36 @@ function useSession( setAuthenticationStatus("unauthenticated"); } + function handleSocketDisconnect() { + setConnected(false); + } + + function handleSocketReconnect() { + setConnected(true); + joinParty(); + } + + socket.on("disconnect", handleSocketDisconnect); + socket.on("reconnect", handleSocketReconnect); + socket.on("party member joined", handlePartyMemberJoined); socket.on("party member left", handlePartyMemberLeft); socket.on("joined party", handleJoinedParty); socket.on("signal", handleSignal); socket.on("auth error", handleAuthError); return () => { - socket.removeListener("party member joined", handlePartyMemberJoined); - socket.removeListener("party member left", handlePartyMemberLeft); - socket.removeListener("joined party", handleJoinedParty); - socket.removeListener("signal", handleSignal); - socket.removeListener("auth error", handleAuthError); - }; - }, [peers, setAuthenticationStatus, iceServers]); + socket.off("disconnect", handleSocketDisconnect); + socket.off("reconnect", handleSocketReconnect); - return { peers, socket }; + socket.off("party member joined", handlePartyMemberJoined); + socket.off("party member left", handlePartyMemberLeft); + socket.off("joined party", handleJoinedParty); + socket.off("signal", handleSignal); + socket.off("auth error", handleAuthError); + }; + }, [peers, setAuthenticationStatus, iceServers, joinParty]); + + return { peers, socket, connected }; } export default useSession; From 13d682bc9c52f467bb1abe10ede7d133ac599491 Mon Sep 17 00:00:00 2001 From: Mitchell McCaffrey Date: Tue, 16 Jun 2020 20:10:06 +1000 Subject: [PATCH 3/7] Added disconnected message and removed peer connection failure message from UI --- src/routes/Game.js | 25 ++++++++++++------------- 1 file changed, 12 insertions(+), 13 deletions(-) diff --git a/src/routes/Game.js b/src/routes/Game.js index 4e0e4f8..6f2de46 100644 --- a/src/routes/Game.js +++ b/src/routes/Game.js @@ -35,7 +35,7 @@ function Game() { ); const { assetLoadStart, assetLoadFinish } = useContext(MapLoadingContext); - const { peers, socket } = useSession( + const { peers, socket, connected } = useSession( gameId, handlePeerConnected, handlePeerDisconnected, @@ -421,18 +421,6 @@ function Game() { const [peerError, setPeerError] = useState(null); function handlePeerError({ error, peer }) { console.error(error.code); - if ( - error.code === "ERR_ICE_CONNECTION_FAILURE" || - error.code === "ERR_CONNECTION_FAILURE" - ) { - setPeerError( - `${ - peer.id === socket.id - ? "" - : `(${partyNicknames[peer.id] || "Unknown"})` - } Connection failure` - ); - } if (error.code === "ERR_WEBRTC_SUPPORT") { setPeerError("WebRTC not supported"); } @@ -558,6 +546,17 @@ function Game() { + {}} + allowClose={false} + > + + + Disconnected. Attempting to reconnect... + + + {authenticationStatus === "unknown" && } From 5b2d711eff3e299cd2faa0b66979e3ebceec1d2f Mon Sep 17 00:00:00 2001 From: Mitchell McCaffrey Date: Tue, 16 Jun 2020 20:36:35 +1000 Subject: [PATCH 4/7] Changed broker to dev --- .env.production | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.env.production b/.env.production index 3305ecc..fc85f2e 100644 --- a/.env.production +++ b/.env.production @@ -1,2 +1,2 @@ -REACT_APP_BROKER_URL=https://broker.owlbear.app -REACT_APP_ICE_SERVERS_URL=https://broker.owlbear.app/iceservers \ No newline at end of file +REACT_APP_BROKER_URL=https://agent.owlbear.dev +REACT_APP_ICE_SERVERS_URL=https://agent.owlbear.dev/iceservers \ No newline at end of file From df4a813377137e96e36323b85f22464ef46c6ae5 Mon Sep 17 00:00:00 2001 From: Mitchell McCaffrey Date: Tue, 16 Jun 2020 21:18:35 +1000 Subject: [PATCH 5/7] Bump version to 1.3.3 --- package.json | 2 +- src/routes/Home.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 3939b41..02264ad 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "owlbear-rodeo", - "version": "1.3.2", + "version": "1.3.3", "private": true, "dependencies": { "@msgpack/msgpack": "^1.12.1", diff --git a/src/routes/Home.js b/src/routes/Home.js index 2fd8ea2..845478a 100644 --- a/src/routes/Home.js +++ b/src/routes/Home.js @@ -51,7 +51,7 @@ function Home() { Join Game - Beta v1.3.2 + Beta v1.3.3