Merge pull request #25 from mitchemmc/bugfix/peer-reconnect

v1.6.2
2020-10-27 19:49:45 +11:00 · 2020-10-27 19:49:45 +11:00 · 8cac7899c5
commit 8cac7899c5
parent 4417796a11 12c1c3250c
14 changed files with 184 additions and 70 deletions
--- a/.env.production
+++ b/.env.production
@ -1,5 +1,5 @@
-REACT_APP_BROKER_URL=https://connect.owlbear.rodeo
-REACT_APP_ICE_SERVERS_URL=https://connect.owlbear.rodeo/iceservers
+REACT_APP_BROKER_URL=https://test.owlbear.rodeo
+REACT_APP_ICE_SERVERS_URL=https://test.owlbear.rodeo/iceservers
 REACT_APP_STRIPE_API_KEY=pk_live_MJjzi5djj524Y7h3fL5PNh4e00a852XD51
 REACT_APP_STRIPE_URL=https://payment.owlbear.rodeo
 REACT_APP_VERSION=$npm_package_version
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "owlbear-rodeo",
-  "version": "1.6.1",
+  "version": "1.6.2",
  "private": true,
  "dependencies": {
    "@babylonjs/core": "^4.1.0",
@ -36,6 +36,7 @@
    "react-scripts": "3.4.0",
    "react-select": "^3.1.0",
    "react-spring": "^8.0.27",
+    "react-toast-notifications": "^2.4.0",
    "react-use-gesture": "^7.0.15",
    "shortid": "^2.2.15",
    "simple-peer": "feross/simple-peer#694/head",
--- a/src/App.js
+++ b/src/App.js
@ -19,6 +19,8 @@ import { MapLoadingProvider } from "./contexts/MapLoadingContext";
 import { SettingsProvider } from "./contexts/SettingsContext";
 import { KeyboardProvider } from "./contexts/KeyboardContext";

+import { ToastProvider } from "./components/Toast";
+
 function App() {
  return (
    <ThemeProvider theme={theme}>
@ -26,38 +28,40 @@ function App() {
        <SettingsProvider>
          <AuthProvider>
            <KeyboardProvider>
-              <Router>
-                <Switch>
-                  <Route path="/donate">
-                    <Donate />
-                  </Route>
-                  {/* Legacy support camel case routes */}
-                  <Route path={["/howTo", "/how-to"]}>
-                    <HowTo />
-                  </Route>
-                  <Route path={["/releaseNotes", "/release-notes"]}>
-                    <ReleaseNotes />
-                  </Route>
-                  <Route path="/about">
-                    <About />
-                  </Route>
-                  <Route path="/faq">
-                    <FAQ />
-                  </Route>
-                  <Route path="/game/:id">
-                    <MapLoadingProvider>
-                      <MapDataProvider>
-                        <TokenDataProvider>
-                          <Game />
-                        </TokenDataProvider>
-                      </MapDataProvider>
-                    </MapLoadingProvider>
-                  </Route>
-                  <Route path="/">
-                    <Home />
-                  </Route>
-                </Switch>
-              </Router>
+              <ToastProvider>
+                <Router>
+                  <Switch>
+                    <Route path="/donate">
+                      <Donate />
+                    </Route>
+                    {/* Legacy support camel case routes */}
+                    <Route path={["/howTo", "/how-to"]}>
+                      <HowTo />
+                    </Route>
+                    <Route path={["/releaseNotes", "/release-notes"]}>
+                      <ReleaseNotes />
+                    </Route>
+                    <Route path="/about">
+                      <About />
+                    </Route>
+                    <Route path="/faq">
+                      <FAQ />
+                    </Route>
+                    <Route path="/game/:id">
+                      <MapLoadingProvider>
+                        <MapDataProvider>
+                          <TokenDataProvider>
+                            <Game />
+                          </TokenDataProvider>
+                        </MapDataProvider>
+                      </MapLoadingProvider>
+                    </Route>
+                    <Route path="/">
+                      <Home />
+                    </Route>
+                  </Switch>
+                </Router>
+              </ToastProvider>
            </KeyboardProvider>
          </AuthProvider>
        </SettingsProvider>
--- a/src/components/Banner.js
+++ b/src/components/Banner.js
@ -10,7 +10,7 @@ function Banner({ isOpen, onRequestClose, children, allowClose }) {
      isOpen={isOpen}
      onRequestClose={onRequestClose}
      style={{
-        overlay: { bottom: "0", top: "initial" },
+        overlay: { bottom: "0", top: "initial", zIndex: 2000 },
        content: {
          backgroundColor: theme.colors.highlight,
          color: "hsl(210, 50%, 96%)",
--- a/src/components/LoadingOverlay.js
+++ b/src/components/LoadingOverlay.js
@ -16,6 +16,7 @@ function LoadingOverlay(bg) {
        top: 0,
        left: 0,
        flexDirection: "column",
+        zIndex: 2,
      }}
      bg={bg}
    >
--- a/src/components/Toast.js
+++ b/src/components/Toast.js
@ -0,0 +1,31 @@
+import React from "react";
+import { Box, Text } from "theme-ui";
+import { ToastProvider as DefaultToastProvider } from "react-toast-notifications";
+
+function CustomToast({ children }) {
+  return (
+    <Box
+      m={2}
+      mb={0}
+      bg="overlay"
+      sx={{ borderRadius: "4px", padding: "12px 16px" }}
+    >
+      <Text as="p" variant="body2">
+        {children}
+      </Text>
+    </Box>
+  );
+}
+
+export function ToastProvider({ children }) {
+  return (
+    <DefaultToastProvider
+      components={{ Toast: CustomToast }}
+      autoDismiss={true}
+      autoDismissTimeout={2000}
+      placement="bottom-center"
+    >
+      {children}
+    </DefaultToastProvider>
+  );
+}
--- a/src/components/map/MapLoadingOverlay.js
+++ b/src/components/map/MapLoadingOverlay.js
@ -42,6 +42,7 @@ function MapLoadingOverlay() {
          bottom: "8px",
          flexDirection: "column",
          borderRadius: "28px",
+          zIndex: 2,
        }}
        bg="overlay"
      >
--- a/src/docs/releaseNotes/v1.6.2.md
+++ b/src/docs/releaseNotes/v1.6.2.md
@ -0,0 +1,16 @@
+## Minor Changes
+
+This is a small release fixing a few connection bugs.
+
+- Added automatic error reporting. This should hopefully make it easier for us to track down bugs and fix them.
+- Fixed a bug where player connections sometimes weren't being cleaned up on a network error.
+- Added in game notifications when players leave or join a game.
+- Changed auto reconnect timing to be a little more accurate.
+- Fixed a bug where full resolution maps weren't being sent if the map owner left the game and rejoined.
+
+[Reddit]()
+[Twitter]()
+
+---
+
+October 27 2020
--- a/src/network/NetworkedMapAndTokens.js
+++ b/src/network/NetworkedMapAndTokens.js
@ -276,7 +276,17 @@ function NetworkedMapAndTokens({ session }) {
          }
        }

-        function replyWithFile(file) {
+        function replyWithFile(resolution) {
+          let file;
+          // If the resolution exists send that
+          if (map.resolutions[resolution]) {
+            file = map.resolutions[resolution].file;
+          } else if (map.file) {
+            // The resolution might not exist for other users so send the file instead
+            file = map.file;
+          } else {
+            return;
+          }
          reply(
            "mapResponse",
            {
@ -291,19 +301,19 @@ function NetworkedMapAndTokens({ session }) {

        switch (map.quality) {
          case "low":
-            replyWithFile(map.resolutions.low.file);
+            replyWithFile("low");
            break;
          case "medium":
            replyWithPreview("low");
-            replyWithFile(map.resolutions.medium.file);
+            replyWithFile("medium");
            break;
          case "high":
            replyWithPreview("medium");
-            replyWithFile(map.resolutions.high.file);
+            replyWithFile("high");
            break;
          case "ultra":
            replyWithPreview("medium");
-            replyWithFile(map.resolutions.ultra.file);
+            replyWithFile("ultra");
            break;
          case "original":
            if (map.resolutions.medium) {
@ -311,10 +321,10 @@ function NetworkedMapAndTokens({ session }) {
            } else if (map.resolutions.low) {
              replyWithPreview("low");
            }
-            replyWithFile(map.file);
+            replyWithFile();
            break;
          default:
-            replyWithFile(map.file);
+            replyWithFile();
        }
      }
      if (id === "mapResponse") {
--- a/src/network/NetworkedParty.js
+++ b/src/network/NetworkedParty.js
@ -1,4 +1,5 @@
 import React, { useContext, useState, useEffect, useCallback } from "react";
+import { useToasts } from "react-toast-notifications";

 // Load session for auto complete
 // eslint-disable-next-line no-unused-vars
@ -29,6 +30,8 @@ function NetworkedParty({ gameId, session }) {
  const [diceRolls, setDiceRolls] = useState([]);
  const [partyDiceRolls, setPartyDiceRolls] = useState({});

+  const { addToast } = useToasts();
+
  const [shareDice, setShareDice] = useSetting("dice.shareDice");

  function handleNicknameChange(newNickname) {
@ -140,12 +143,22 @@ function NetworkedParty({ gameId, session }) {
    }

    function handlePeerDisconnect({ peer }) {
+      if (partyNicknames[peer.id]) {
+        addToast(`${partyNicknames[peer.id]} left the party`);
+      }
      setPartyNicknames((prevNicknames) => omit(prevNicknames, [peer.id]));
      setPartyTimers((prevTimers) => omit(prevTimers, [peer.id]));
    }

-    function handlePeerData({ id, data }) {
+    function handlePeerData({ id, data, peer }) {
      if (id === "nickname") {
+        if (!peer.initiator) {
+          for (let peerId in data) {
+            if (!(peerId in partyNicknames)) {
+              addToast(`${data[peerId]} joined the party`);
+            }
+          }
+        }
        setPartyNicknames((prevNicknames) => ({
          ...prevNicknames,
          ...data,
@ -204,7 +217,16 @@ function NetworkedParty({ gameId, session }) {
      session.off("trackAdded", handlePeerTrackAdded);
      session.off("trackRemoved", handlePeerTrackRemoved);
    };
-  }, [session, nickname, stream, timer, shareDice, diceRolls]);
+  }, [
+    session,
+    nickname,
+    stream,
+    timer,
+    shareDice,
+    diceRolls,
+    partyNicknames,
+    addToast,
+  ]);

  useEffect(() => {
    if (stream) {
@ -223,25 +245,27 @@ function NetworkedParty({ gameId, session }) {
  }, [stream, handleStreamEnd]);

  return (
-    <Party
-      gameId={gameId}
-      onNicknameChange={handleNicknameChange}
-      onStreamStart={handleStreamStart}
-      onStreamEnd={handleStreamEnd}
-      nickname={nickname}
-      partyNicknames={partyNicknames}
-      stream={stream}
-      partyStreams={partyStreams}
-      timer={timer}
-      partyTimers={partyTimers}
-      onTimerStart={handleTimerStart}
-      onTimerStop={handleTimerStop}
-      shareDice={shareDice}
-      onShareDiceChage={handleShareDiceChange}
-      diceRolls={diceRolls}
-      onDiceRollsChange={handleDiceRollsChange}
-      partyDiceRolls={partyDiceRolls}
-    />
+    <>
+      <Party
+        gameId={gameId}
+        onNicknameChange={handleNicknameChange}
+        onStreamStart={handleStreamStart}
+        onStreamEnd={handleStreamEnd}
+        nickname={nickname}
+        partyNicknames={partyNicknames}
+        stream={stream}
+        partyStreams={partyStreams}
+        timer={timer}
+        partyTimers={partyTimers}
+        onTimerStart={handleTimerStart}
+        onTimerStop={handleTimerStop}
+        shareDice={shareDice}
+        onShareDiceChage={handleShareDiceChange}
+        diceRolls={diceRolls}
+        onDiceRollsChange={handleDiceRollsChange}
+        partyDiceRolls={partyDiceRolls}
+      />
+    </>
  );
 }

--- a/src/network/Session.js
+++ b/src/network/Session.js
@ -173,13 +173,19 @@ class Session extends EventEmitter {

      function handleClose() {
        this.emit("disconnect", { peer });
-        peer.connection.destroy();
-        this.peers = omit(this.peers, [peer.id]);
+        if (peer.id in this.peers) {
+          peer.connection.destroy();
+          this.peers = omit(this.peers, [peer.id]);
+        }
      }

      function handleError(error) {
        logError(error);
        this.emit("error", { peer, error });
+        if (peer.id in this.peers) {
+          peer.connection.destroy();
+          this.peers = omit(this.peers, [peer.id]);
+        }
      }

      peer.connection.on("signal", handleSignal.bind(this));
@ -194,6 +200,10 @@ class Session extends EventEmitter {
    } catch (error) {
      logError(error);
      this.emit("error", { error });
+      this.emit("disconnected");
+      for (let peer of Object.values(this.peers)) {
+        peer.connection && peer.connection.destroy();
+      }
    }
  }

@ -237,10 +247,12 @@ class Session extends EventEmitter {

  _handleSocketDisconnect() {
    this.emit("disconnected");
+    for (let peer of Object.values(this.peers)) {
+      peer.connection && peer.connection.destroy();
+    }
  }

  _handleSocketReconnect() {
-    this.emit("connected");
    if (this._partyId) {
      this.joinParty(this._partyId, this._password);
    }
--- a/src/routes/ReleaseNotes.js
+++ b/src/routes/ReleaseNotes.js
@ -22,6 +22,7 @@ const v151 = raw("../docs/releaseNotes/v1.5.1.md");
 const v152 = raw("../docs/releaseNotes/v1.5.2.md");
 const v160 = raw("../docs/releaseNotes/v1.6.0.md");
 const v161 = raw("../docs/releaseNotes/v1.6.1.md");
+const v162 = raw("../docs/releaseNotes/v1.6.2.md");

 function ReleaseNotes() {
  const location = useLocation();
@ -46,6 +47,11 @@ function ReleaseNotes() {
        <Text mb={2} variant="heading" as="h1" sx={{ fontSize: 5 }}>
          Release Notes
        </Text>
+        <div id="v162">
+          <Accordion heading="v1.6.2" defaultOpen>
+            <Markdown source={v162} />
+          </Accordion>
+        </div>
        <div id="v161">
          <Accordion heading="v1.6.1" defaultOpen>
            <Markdown source={v161} />
--- a/src/theme.js
+++ b/src/theme.js
@ -8,7 +8,7 @@ export default {
    purple: "hsl(290, 100%, 80%)",
    muted: "hsla(230, 20%, 0%, 20%)",
    gray: "hsl(0, 0%, 70%)",
-    overlay: "hsla(230, 25%, 18%, 0.8)",
+    overlay: "hsla(230, 25%, 15%, 80%)",
    border: "hsla(210, 50%, 96%, 0.5)",
    modes: {
      light: {
@ -18,7 +18,7 @@ export default {
        secondary: "hsl(290, 100%, 80%)",
        highlight: "hsl(260, 20%, 40%)",
        muted: "hsla(230, 20%, 60%, 20%)",
-        overlay: "hsla(230, 100%, 97%, 0.8)",
+        overlay: "hsla(230, 100%, 97%, 80%)",
        border: "hsla(10, 20%, 20%, 0.5)",
      },
    },
--- a/yarn.lock
+++ b/yarn.lock
@ -1227,7 +1227,7 @@
    "@emotion/sheet" "0.9.4"
    "@emotion/utils" "0.11.3"

-"@emotion/core@^10.0.9":
+"@emotion/core@^10.0.14", "@emotion/core@^10.0.9":
  version "10.0.35"
  resolved "https://registry.yarnpkg.com/@emotion/core/-/core-10.0.35.tgz#513fcf2e22cd4dfe9d3894ed138c9d7a859af9b3"
  integrity sha512-sH++vJCdk025fBlRZSAhkRlSUoqSqgCzYf5fMOmqqi3bM6how+sQpg3hkgJonj8GxXM4WbD7dRO+4tegDB9fUw==
@ -9934,6 +9934,14 @@ react-spring@^8.0.27:
    "@babel/runtime" "^7.3.1"
    prop-types "^15.5.8"

+react-toast-notifications@^2.4.0:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/react-toast-notifications/-/react-toast-notifications-2.4.0.tgz#6213730bd1fe158fc01aeef200687ea94c5c5b24"
+  integrity sha512-8tkrbNh7LxkiFmtqAL/AiI55efIeI+fBk3c6ImsiZ0VObb4yvOq0cqYuJHyUiv9fuD2aBxvXGVH+n4Snt8qoWA==
+  dependencies:
+    "@emotion/core" "^10.0.14"
+    react-transition-group "^4.3.0"
+
 react-transition-group@^4.3.0:
  version "4.4.1"
  resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.1.tgz#63868f9325a38ea5ee9535d828327f85773345c9"