New users can only chat in the games they play (#188)

Author: eltoder

src/components/Chat.js

@@ -103,12 +103,13 @@ function Chat({
   history,
   gameMode,
   startedAt,
+  isPlaying = false,
 }) {
   const user = useContext(UserContext);
   const classes = useStyles();
-  const [stats, loadingStats] = useStats(gameId ? null : user.id);
+  const [stats, loadingStats] = useStats(isPlaying ? null : user.id);
   const chatDisabled =
-    !gameId && !isDev && (loadingStats || stats.all.all.totalSets < 55);
+    !isPlaying && !isDev && (loadingStats || stats.all.all.totalSets < 67);
 
   const chatEl = useRef();
   useEffect(() => {
@@ -187,7 +188,7 @@ function Chat({
   };
 
   const items = messages;
-  if (gameId && history) {
+  if (history) {
     for (let i = 0; i < history.length; i++) {
       items[`card@${i}`] = history[i];
     }
@@ -290,7 +291,7 @@ function Chat({
             arrow
             title={
               chatDisabled
-                ? "New users cannot chat. Play a couple games first!"
+                ? "New users can only chat when playing. Play a couple games first!"
                 : ""
             }
           >

src/pages/GamePage.js

@@ -124,10 +124,9 @@ function GamePage({ match }) {
 
   const [game, loadingGame] = useFirebaseRef(`games/${gameId}`);
   const [gameData, loadingGameData] = useFirebaseRef(`gameData/${gameId}`);
+  const spectating = !(game?.users && user.id in game.users);
   const [hasNextGame] = useFirebaseRef(
-    game?.status === "done" && (!game.users || !(user.id in game.users))
-      ? `games/${nextGameId}/status`
-      : null
+    spectating && game?.status === "done" ? `games/${nextGameId}/status` : null
   );
   const [playSuccess] = useSound(foundSfx);
   const [playFail1] = useSound(failSfx1);
@@ -241,7 +240,6 @@ function GamePage({ match }) {
 
   const numHints = gameData.hints ?? 0;
   const paused = gameData.pause?.start && !gameData.pause.end;
-  const spectating = !game.users || !(user.id in game.users);
   const leaderboard = Object.keys(game.users).sort(
     (u1, u2) =>
       (scores[u2] || 0) - (scores[u1] || 0) ||
@@ -268,8 +266,7 @@ function GamePage({ match }) {
   const gameEnded = !answer || game.status === "done";
   if (
     !answer &&
-    game.users &&
-    user.id in game.users &&
+    !spectating &&
     game.status === "ingame" &&
     finished.gameId !== gameId
   ) {
@@ -424,6 +421,7 @@ function GamePage({ match }) {
                   history={history}
                   startedAt={game.startedAt}
                   gameMode={gameMode}
+                  isPlaying={!spectating}
                 />
               </Paper>
             )}

src/pages/RoomPage.js

@@ -144,6 +144,7 @@ function RoomPage({ match, location }) {
                 title="Game Chat"
                 messageLimit={200}
                 gameId={gameId}
+                isPlaying={true}
                 showMessageTimes
               />
             </Paper>