From 021d794d67f63c954c8b37da2decab4837104ef7 Mon Sep 17 00:00:00 2001
From: Mitchell McCaffrey <mitchemmc@gmail.com>
Date: Tue, 14 Apr 2020 11:49:45 +1000
Subject: [PATCH] Removed too verbose error messages in UI

Updated FAQ
Handled connection closure on refresh
---
 src/helpers/useSession.js | 19 ++++++++++++++++++-
 src/routes/FAQ.js         | 12 ++++++++++--
 src/routes/Game.js        | 21 ++++++++++++++++-----
 3 files changed, 44 insertions(+), 8 deletions(-)

diff --git a/src/helpers/useSession.js b/src/helpers/useSession.js
index 0030af7..caf67cf 100644
--- a/src/helpers/useSession.js
+++ b/src/helpers/useSession.js
@@ -21,6 +21,20 @@ function useSession(
 
   const [peers, setPeers] = useState({});
 
+  // Signal connected peers of a closure on refresh
+  useEffect(() => {
+    function handleUnload() {
+      for (let peer of Object.values(peers)) {
+        peer.connection.send({ id: "close" });
+      }
+    }
+    window.addEventListener("beforeunload", handleUnload);
+
+    return () => {
+      window.removeEventListener("beforeunload", handleUnload);
+    };
+  }, [peers]);
+
   // Setup event listeners for peers
   useEffect(() => {
     let peerEvents = [];
@@ -37,6 +51,10 @@ function useSession(
       }
 
       function handleDataComplete(data) {
+        if (data.id === "close") {
+          // Close connection when signaled to close
+          peer.connection.destroy();
+        }
         onPeerData && onPeerData({ peer, data });
       }
 
@@ -53,7 +71,6 @@ function useSession(
 
       function handleError(error) {
         onPeerError && onPeerError({ peer, error });
-        console.error(error);
       }
 
       peer.connection.on("signal", handleSignal);
diff --git a/src/routes/FAQ.js b/src/routes/FAQ.js
index f3e1b15..b95c58e 100644
--- a/src/routes/FAQ.js
+++ b/src/routes/FAQ.js
@@ -62,10 +62,10 @@ function FAQ() {
           on the Mozilla Developer Network.
         </Text>
         <Text my={1} variant="heading" as="h2" sx={{ fontSize: 3 }}>
-          Connection Failed
+          Connection
         </Text>
         <Text my={1} variant="heading" as="h3">
-          Ice connection failed / Connection failed.
+          Connection failure.
         </Text>
         <Text variant="body2" as="p">
           If you are getting a Connection failed error when trying to connect to
@@ -120,6 +120,14 @@ function FAQ() {
           </Link>
           .
         </Text>
+        <Text my={1} variant="heading" as="h3">
+          WebRTC not supported.
+        </Text>
+        <Text variant="body2" as="p">
+          Owlbear Rodeo uses WebRTC to communicate between players. Ensure your
+          browser supports WebRTC. A list of supported browsers can be found{" "}
+          <Link href="https://caniuse.com/#feat=rtcpeerconnection">here</Link>.
+        </Text>
       </Flex>
       <Footer />
     </Flex>
diff --git a/src/routes/Game.js b/src/routes/Game.js
index ddc1e01..5f125f7 100644
--- a/src/routes/Game.js
+++ b/src/routes/Game.js
@@ -122,11 +122,22 @@ function Game() {
 
   const [peerError, setPeerError] = useState(null);
   function handlePeerError({ error, peer }) {
-    setPeerError(
-      `${
-        peer.id === socket.id ? "" : `(${partyNicknames[peer.id] || "Unknown"})`
-      } ${error.message || "Unknown Error Occurred."}`
-    );
+    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");
+    }
   }
 
   function handlePeerTrackAdded({ peer, stream: remoteStream }) {