Update boardgame.io (#143)

* WIP: Update dependencies

* Use provided LobbyClient instead of custom implementation

* Remove old API client implementation

* Update media queries

* Fix storybooks

* Revert reformatting svg images

* Fix lobby client

* Fix page reload when sending first chat message

* Rename gameMetadata to matchData

* WIP: Update socketio connection

* Update bg.io to 0.43.2

* Use messages system for sending drawings

* Change unsafe to ignoreStaleStateID

* Sync connected players and fix API changes

* Fix hook dependencies

* Fix import

* Fix media query

Co-authored-by: Patryk Pastewski <[email protected]>

Author: glowacki-dev

.prettierignore

@@ -0,0 +1 @@
+*.svg

.storybook/preview.js

@@ -5,6 +5,7 @@ import { withKnobs } from "@storybook/addon-knobs";
 import StoryRouter from "storybook-react-router";
 import { HelmetProvider } from "react-helmet-async";
 import UserContextMock from "./UserContextMock";
+import { MediaContextProvider } from "config/media";
 import "../src/i18n";
 
 import "semantic-ui-css/semantic.min.css";
@@ -13,6 +14,7 @@ import "../src/index.css";
 addDecorator(withKnobs);
 addDecorator(StoryRouter());
 addDecorator((storyFn) => <Suspense fallback="Loading...">{storyFn()}</Suspense>);
+addDecorator((storyFn) => <MediaContextProvider>{storyFn()}</MediaContextProvider>);
 addDecorator((storyFn) => <HelmetProvider>{storyFn()}</HelmetProvider>);
 addDecorator((storyFn) => <UserContextMock>{storyFn()}</UserContextMock>);
 addDecorator((storyFn) => <Suspense fallback="Loading">{storyFn()}</Suspense>);

package-lock.json

@@ -4,34 +4,35 @@
   "private": true,
   "dependencies": {
     "@airbrake/browser": "^1.0.6",
+    "@artsy/fresnel": "^1.2.2",
     "@testing-library/jest-dom": "^4.2.4",
-    "@testing-library/react": "^9.5.0",
+    "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^7.2.1",
-    "boardgame.io": "file:vendor/boardgame.io-0.39.7-with-unsafe-calls.tgz",
+    "boardgame.io": "^0.43.2",
     "esm": "^3.2.25",
-    "firebase": "^7.12.0",
-    "firebase-admin": "^8.10.0",
+    "firebase": "^7.24.0",
+    "firebase-admin": "^9.2.0",
     "husky": "^4.2.3",
     "i18next": "^19.3.4",
     "i18next-browser-languagedetector": "^4.0.2",
     "i18next-xhr-backend": "^3.2.2",
-    "lodash": "^4.17.15",
+    "lodash": "^4.17.20",
     "moment": "^2.24.0",
     "mongodb": "^3.5.5",
     "pretty-quick": "^2.0.1",
     "prop-types": "^15.7.2",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
-    "react-dom-confetti": "^0.1.3",
-    "react-helmet-async": "^1.0.4",
-    "react-i18next": "^11.3.4",
-    "react-query": "^1.2.0",
-    "react-router-dom": "^5.1.2",
-    "react-scripts": "3.4.1",
-    "react-toastify": "^5.5.0",
+    "react": "^16.14.0",
+    "react-dom": "^16.14.0",
+    "react-dom-confetti": "^0.2.0",
+    "react-helmet-async": "^1.0.7",
+    "react-i18next": "^11.7.3",
+    "react-query": "^2.23.1",
+    "react-router-dom": "^5.2.0",
+    "react-scripts": "^3.4.3",
+    "react-toastify": "^6.0.9",
     "remove-accents": "^0.4.2",
     "semantic-ui-css": "^2.4.1",
-    "semantic-ui-react": "^0.88.2"
+    "semantic-ui-react": "^2.0.0"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -60,15 +61,17 @@
     ]
   },
   "devDependencies": {
-    "@prettier/plugin-xml": "^0.7.2",
-    "@storybook/addon-actions": "^5.3.18",
-    "@storybook/addon-knobs": "^5.3.18",
-    "@storybook/addon-storysource": "^5.3.18",
-    "@storybook/addon-viewport": "^5.3.18",
-    "@storybook/addons": "^5.3.18",
-    "@storybook/preset-create-react-app": "^2.1.1",
-    "@storybook/react": "^5.3.18",
-    "prettier": "^2.0.5",
+    "@prettier/plugin-xml": "^0.12.0",
+    "@storybook/addon-actions": "^6.0.26",
+    "@storybook/addon-knobs": "^6.0.26",
+    "@storybook/addon-storysource": "^6.0.26",
+    "@storybook/addon-viewport": "^6.0.26",
+    "@storybook/addons": "^6.0.26",
+    "@storybook/cli": "^6.0.26",
+    "@storybook/preset-create-react-app": "^3.1.4",
+    "@storybook/react": "^6.0.26",
+    "prettier": "^2.1.2",
+    "storybook": "^6.0.26",
     "storybook-react-router": "^1.0.8"
   },
   "husky": {

package.json

@@ -7,9 +7,9 @@
     "subheader": "We are connecting you to the game lobby."
   },
   "list": {
-    "title": "Available rooms",
-    "empty": "No rooms available at the moment",
-    "loading": "Loading rooms",
+    "title": "Available matches",
+    "empty": "No matches available at the moment",
+    "loading": "Loading matches",
     "game": {
       "full": "Full",
       "join": "Join",
@@ -18,13 +18,13 @@
     }
   },
   "create": {
-    "title": "Create room",
+    "title": "Create match",
     "game_type": "Game",
     "max_players": "Maximum number of players",
     "button": "Create",
     "private": {
-      "true": "Private room 🙈",
-      "false": "Public room 🐵"
+      "true": "Private match 🙈",
+      "false": "Public match 🐵"
     }
   },
   "login": {
@@ -39,7 +39,7 @@
   "errors": {
     "no_game": "Game not found",
     "not_in_game": "You are not in a game",
-    "no_space": "No space left in this room",
+    "no_space": "No space left in this match",
     "already_in_game": "You are currently in another game"
   },
   "sidebar": {

public/locales/en/lobby.json

@@ -6,9 +6,9 @@
   },
   "game": {
     "leave": {
-      "button": "Leave Room",
+      "button": "Leave Match",
       "modal": {
-        "content": "Do you really want to leave this room?",
+        "content": "Do you really want to leave this match?",
         "confirm": "Yes",
         "cancel": "No"
       }

public/locales/en/translation.json

@@ -1,10 +1,11 @@
 import React, { Suspense } from "react";
 import { Router, Switch, Route } from "react-router-dom";
-import { HelmetProvider } from "react-helmet-async";
+import { Helmet, HelmetProvider } from "react-helmet-async";
 import { Dimmer, Loader } from "semantic-ui-react";
 
 import { routes } from "config/routes";
 import history from "config/history";
+import { mediaStyle, MediaContextProvider } from "config/media";
 
 import { UserProvider } from "contexts/UserContext";
 import { PrivateRoute } from "utils/router/Private";
@@ -27,34 +28,39 @@ const Loading = () => (
 const App = () => {
   return (
     <Suspense fallback={<Loading />}>
-      <ErrorBoundary>
-        <UserProvider>
-          <HelmetProvider>
-            <Router history={history}>
-              <Switch>
-                <Route exact path={routes.lobby()}>
-                  <LobbyPage />
-                </Route>
-                <NotLoggedInRoute exact path={routes.login()}>
-                  <LoginPage />
-                </NotLoggedInRoute>
-                <NotLoggedInRoute exact path={routes.login_guest()}>
-                  <AnonymousLoginPage />
-                </NotLoggedInRoute>
-                <NotLoggedInRoute exact path={routes.register()}>
-                  <RegisterPage />
-                </NotLoggedInRoute>
-                <PrivateRoute path={routes.game()}>
-                  <GamePage />
-                </PrivateRoute>
-                <PrivateRoute path={routes.change_password()}>
-                  <ChangePassword />
-                </PrivateRoute>
-              </Switch>
-            </Router>
-          </HelmetProvider>
-        </UserProvider>
-      </ErrorBoundary>
+      <MediaContextProvider>
+        <ErrorBoundary>
+          <UserProvider>
+            <HelmetProvider>
+              <Helmet>
+                <style type="text/css">{mediaStyle}</style>
+              </Helmet>
+              <Router history={history}>
+                <Switch>
+                  <Route exact path={routes.lobby()}>
+                    <LobbyPage />
+                  </Route>
+                  <NotLoggedInRoute exact path={routes.login()}>
+                    <LoginPage />
+                  </NotLoggedInRoute>
+                  <NotLoggedInRoute exact path={routes.login_guest()}>
+                    <AnonymousLoginPage />
+                  </NotLoggedInRoute>
+                  <NotLoggedInRoute exact path={routes.register()}>
+                    <RegisterPage />
+                  </NotLoggedInRoute>
+                  <PrivateRoute path={routes.game()}>
+                    <GamePage />
+                  </PrivateRoute>
+                  <PrivateRoute path={routes.change_password()}>
+                    <ChangePassword />
+                  </PrivateRoute>
+                </Switch>
+              </Router>
+            </HelmetProvider>
+          </UserProvider>
+        </ErrorBoundary>
+      </MediaContextProvider>
     </Suspense>
   );
 };

src/App.js

@@ -14,10 +14,10 @@ const BoardGameContextMock = ({ children }) => {
         actions: [
           { action: "message", text: text("Message text", "Hello there, shall we begin?", ref) },
         ],
-        privateRoom: boolean("Private", true, ref),
+        privateMatch: boolean("Private", true, ref),
         players: {
-          "0": {},
-          "1": {},
+          0: {},
+          1: {},
         },
       }}
       moves={{}}
@@ -28,8 +28,7 @@ const BoardGameContextMock = ({ children }) => {
         numPlayers: number("Player count", 4, { range: true, min: 2, max: 10, step: 1 }, ref),
       }}
       playerID={"0"}
-      gameID={"qwe123"}
-      rawClient={{ transport: { socket: null } }}
+      matchID={"qwe123"}
       gameMetadata={[
         { id: 0, name: "user-0", isConnected: true },
         { id: 1, name: "user-1", isConnected: false },

src/components/game/GameContextMock.js

@@ -3,24 +3,24 @@ import { useTranslation } from "react-i18next";
 import { useHistory, Redirect } from "react-router-dom";
 import { Button, Icon, Confirm } from "semantic-ui-react";
 import { useUser } from "contexts/UserContext";
-import { apiRequests } from "services/API";
+import { lobbyClient } from "services/LobbyClient";
 import DataStore from "services/DataStore";
 import { useBoardGame } from "contexts/BoardGameContext";
 import { routes } from "config/routes";
 
 const LeaveButton = () => {
   const history = useHistory();
   const { t } = useTranslation();
-  const { playerID, gameID, gameName, credentials } = useBoardGame();
+  const { playerID, matchID, gameName, credentials } = useBoardGame();
   const [confirmOpen, setConfirmOpen] = useState(false);
   const [error, setError] = useState();
   const user = useUser();
 
   const handleLeave = () => {
-    apiRequests
-      .leaveGame(gameName, gameID, playerID, credentials)
+    lobbyClient
+      .leaveMatch(gameName, matchID, { playerID, credentials })
       .then(async () => {
-        await DataStore.deleteCredentials(user.uid, gameID);
+        await DataStore.deleteCredentials(user.uid, matchID);
         history.push(routes.lobby());
       })
       .catch((e) => {

src/components/game/LeaveButton.js

@@ -2,17 +2,17 @@ import React from "react";
 import { Icon, Label } from "semantic-ui-react";
 import { useTranslation } from "react-i18next";
 
-const RoomTypeBadge = ({ privateRoom, detailed, style }) => {
+const MatchTypeBadge = ({ privateMatch, detailed, style }) => {
   const { t } = useTranslation("lobby");
 
   return (
     <Label as="span" size="small" style={style || {}}>
-      <Icon name={privateRoom ? "lock" : "open lock"} />
+      <Icon name={privateMatch ? "lock" : "open lock"} />
       {detailed && (
-        <Label.Detail>{privateRoom ? t("game.private") : t("game.public")}</Label.Detail>
+        <Label.Detail>{privateMatch ? t("game.private") : t("game.public")}</Label.Detail>
       )}
     </Label>
   );
 };
 
-export default RoomTypeBadge;
+export default MatchTypeBadge;