Removed safari work around for data connection and added cleaner nickname syncing

package.json

@@ -1,6 +1,6 @@
 {
   "name": "owlbear-rodeo",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "private": true,
   "homepage": "https://owlbear.rodeo",
   "dependencies": {

src/helpers/shared.js

@@ -8,24 +8,3 @@ export function omit(obj, keys) {
   }
   return tmp;
 }
-
-/**
- * This asks for audio permission on safari based devices
- * this is needed to fix a implementation detail in safari
- * where webRTC data channels cannot be opened without first
- * using getUserMedia see:
- * https://github.com/webrtc/samples/issues/1123
- * https://bugs.webkit.org/show_bug.cgi?id=189503
- * https://github.com/w3c/webrtc-nv-use-cases/issues/58
- */
-export async function enableDataConnectionForSafari() {
-  if (
-    navigator.userAgent.match(/iPad/i) ||
-    navigator.userAgent.match(/iPhone/i) ||
-    (navigator.userAgent.match(/Safari/i) &&
-      !navigator.userAgent.match(/Chrome/i))
-  ) {
-    let stream = await navigator.mediaDevices.getUserMedia({ audio: true });
-    stream.getTracks().forEach(t => t.stop());
-  }
-}

src/helpers/useSession.js

@@ -1,8 +1,6 @@
 import { useEffect, useState } from "react";
 import Peer from "peerjs";
 
-import { enableDataConnectionForSafari } from "./shared";
-
 function useSession(onConnectionOpen, onConnectionSync) {
   const [peerId, setPeerId] = useState(null);
   const [peer, setPeer] = useState(null);
@@ -31,7 +29,6 @@ function useSession(onConnectionOpen, onConnectionSync) {
     function handleOpen(id) {
       console.log("Peer open", id);
       setPeerId(id);
-      enableDataConnectionForSafari();
     }
 
     function handleConnection(connection) {
@@ -87,7 +84,7 @@ function useSession(onConnectionOpen, onConnectionSync) {
     };
   }, [peer, peerId, connections, onConnectionOpen, onConnectionSync]);
 
-  function connectTo(connectionId) {
+  function connectTo(connectionId, payload) {
     console.log("Connecting to", connectionId);
     if (connectionId in connections) {
       return;
@@ -113,6 +110,9 @@ function useSession(onConnectionOpen, onConnectionSync) {
               if (onConnectionOpen) {
                 onConnectionOpen(syncConnection);
               }
+              if (payload) {
+                syncConnection.send(payload);
+              }
             });
           }
         }
@@ -120,6 +120,9 @@ function useSession(onConnectionOpen, onConnectionSync) {
       if (onConnectionOpen) {
         onConnectionOpen(connection);
       }
+      if (payload) {
+        connection.send(payload);
+      }
     });
   }
 

src/routes/Game.js

@@ -17,6 +17,8 @@ import Party from "../components/Party";
 import Tokens from "../components/Tokens";
 import Map from "../components/Map";
 
+const defaultNickname = getRandomMonster();
+
 function Game() {
   const { gameId } = useContext(GameContext);
   const handleConnectionOpenCallback = useCallback(handleConnectionOpen);
@@ -26,11 +28,20 @@ function Game() {
     handleConnectionSyncCallback
   );
 
+  const [nicknames, setNicknames] = useState({});
+
   useEffect(() => {
-    if (gameId !== null && peerId !== null && !(gameId in connections)) {
-      connectTo(gameId);
+    // Initialize nickname state
+    if (peerId !== null && !(peerId in nicknames)) {
+      setNicknames({ [peerId]: defaultNickname });
     }
-  }, [gameId, peerId, connectTo, connections]);
+    if (gameId !== null && peerId !== null && !(gameId in connections)) {
+      connectTo(gameId, {
+        id: "nickname",
+        data: { [peerId]: nicknames[peerId] || defaultNickname }
+      });
+    }
+  }, [gameId, peerId, connectTo, connections, nicknames]);
 
   const [mapSource, setMapSource] = useState(null);
   const mapDataRef = useRef(null);
@@ -70,10 +81,7 @@ function Game() {
     }
   }
 
-  const currentNicknameRef = useRef(getRandomMonster());
-  const [nicknames, setNicknames] = useState({});
   function handleNicknameChange(nickname) {
-    currentNicknameRef.current = nickname;
     setNicknames(prevNicknames => ({
       ...prevNicknames,
       [peerId]: nickname
@@ -83,15 +91,6 @@ function Game() {
       connection.send({ id: "nickname", data });
     }
   }
-  useEffect(() => {
-    // If we don't have a nickname generate one when we have a peer
-    if (peerId !== null && !(peerId in nicknames)) {
-      setNicknames(prevNicknames => ({
-        ...prevNicknames,
-        [peerId]: currentNicknameRef.current
-      }));
-    }
-  }, [peerId, nicknames, currentNicknameRef]);
 
   function handleConnectionOpen(connection) {
     connection.on("data", data => {
@@ -118,13 +117,10 @@ function Game() {
         }));
       }
     });
-    connection.on("error", () => {
+    connection.on("error", error => {
+      console.error("Data Connection error", error);
       setNicknames(prevNicknames => omit(prevNicknames, [connection.peer]));
     });
-    connection.send({
-      id: "nickname",
-      data: { [peerId]: currentNicknameRef.current }
-    });
   }
 
   function handleConnectionSync(connection) {

src/routes/Home.js

@@ -38,7 +38,7 @@ function Home() {
           Join Game
         </Button>
         <Text variant="caption" sx={{ textAlign: "center" }}>
-          Alpha v0.2.0
+          Alpha v0.2.1
         </Text>
       </Flex>
     </Container>