Change lobby layout (#49)

Make the chat bigger on bigger screens.
eltoder · Dec 1, 2024 · bf67357 · bf67357
1 parent b2ffcf0
commit bf67357
Show file tree

Hide file tree

Showing 3 changed files with 115 additions and 125 deletions.
diff --git a/src/components/Chat.js b/src/components/Chat.js
@@ -24,9 +24,15 @@ import { UserContext } from "../context";
 
 const useStyles = makeStyles((theme) => ({
   chatPanel: {
+    height: "var(--chat-height, auto)",
     display: "flex",
     flexDirection: "column",
   },
+  chatHidden: {
+    [theme.breakpoints.down("sm")]: {
+      height: "auto !important",
+    },
+  },
   chatHeader: {
     transition: "text-shadow 0.5s",
     "&:hover": {
@@ -94,6 +100,7 @@ function Chat({
   const [input, setInput] = useState("");
   const [menuOpenIdx, setMenuOpenIdx] = useState(null);
   const [chatHidden, setChatHidden] = useStorage("chat-hidden", "no");
+  const isHidden = chatHidden === "yes";
 
   const databasePath = gameId ? `chats/${gameId}` : "lobbyChat";
   const messagesQuery = useMemo(
@@ -105,7 +112,7 @@ function Chat({
         .limitToLast(messageLimit),
     [databasePath, messageLimit]
   );
-  const messages = useFirebaseQuery(messagesQuery);
+  const messages = useFirebaseQuery(isHidden ? null : messagesQuery);
   const mentionRE = useMemo(() => makeMentionRE(user.name), [user.name]);
 
   const addMentioned = (cls, message) => {
@@ -128,7 +135,7 @@ function Chat({
   }
 
   function toggleChat() {
-    setChatHidden(chatHidden === "yes" ? "no" : "yes");
+    setChatHidden(isHidden ? "no" : "yes");
   }
 
   const [anchorEl, setAnchorEl] = useState(null);
@@ -194,11 +201,11 @@ function Chat({
 
   return (
     <section
-      className={classes.chatPanel}
+      className={`${classes.chatPanel} ${isHidden ? classes.chatHidden : ""}`}
       style={{ flexGrow: 1, overflowY: "hidden" }}
     >
       <Subheading className={classes.chatHeader} onClick={toggleChat}>
-        {title} {chatHidden === "yes" && "(Hidden)"}
+        {title} {isHidden && "(Hidden)"}
       </Subheading>
       <Scrollbox className={classes.chat} ref={chatEl}>
         {Object.entries(items)
@@ -212,70 +219,70 @@ function Chat({
                 startedAt={startedAt}
               />
             ) : (
-              chatHidden !== "yes" && (
-                <div
-                  key={key}
-                  style={{ display: "flex", flexDirection: "row" }}
-                  className={addMentioned(classes.message, item.message)}
-                >
-                  {timeTooltip(
-                    item.time,
-                    <Typography variant="body2" gutterBottom>
-                      {formatTime(item.time)}
-                      <User
-                        id={item.user}
-                        component={InternalLink}
-                        to={`/profile/${item.user}`}
-                        underline="none"
-                      />
-                      : {item.message}
-                    </Typography>
-                  )}
-                  {user.admin && (
-                    <MoreVertIcon
-                      aria-controls="admin-menu"
-                      color="inherit"
-                      className={classes.vertIcon}
-                      onClick={(e) => handleClickVertIcon(e, key)}
+              <div
+                key={key}
+                style={{ display: "flex", flexDirection: "row" }}
+                className={addMentioned(classes.message, item.message)}
+              >
+                {timeTooltip(
+                  item.time,
+                  <Typography variant="body2" gutterBottom>
+                    {formatTime(item.time)}
+                    <User
+                      id={item.user}
+                      component={InternalLink}
+                      to={`/profile/${item.user}`}
+                      underline="none"
                     />
-                  )}
+                    : {item.message}
+                  </Typography>
+                )}
+                {user.admin && (
+                  <MoreVertIcon
+                    aria-controls="admin-menu"
+                    color="inherit"
+                    className={classes.vertIcon}
+                    onClick={(e) => handleClickVertIcon(e, key)}
+                  />
+                )}
 
-                  <Menu
-                    id="admin-menu"
-                    anchorEl={anchorEl}
-                    open={Boolean(anchorEl) && key === menuOpenIdx}
-                    onClose={handleClose}
-                  >
-                    <MenuItem onClick={() => handleDelete(key)}>
-                      Delete message
-                    </MenuItem>
-                    <MenuItem onClick={() => handleDeleteAll(item.user)}>
-                      Delete all from user
-                    </MenuItem>
-                  </Menu>
-                </div>
-              )
+                <Menu
+                  id="admin-menu"
+                  anchorEl={anchorEl}
+                  open={Boolean(anchorEl) && key === menuOpenIdx}
+                  onClose={handleClose}
+                >
+                  <MenuItem onClick={() => handleDelete(key)}>
+                    Delete message
+                  </MenuItem>
+                  <MenuItem onClick={() => handleDeleteAll(item.user)}>
+                    Delete all from user
+                  </MenuItem>
+                </Menu>
+              </div>
             )
           )}
       </Scrollbox>
-      <form onSubmit={handleSubmit}>
-        <Tooltip
-          arrow
-          title={
-            chatDisabled
-              ? "New users cannot chat. Play a couple games first!"
-              : ""
-          }
-        >
-          <SimpleInput
-            value={input}
-            onChange={(e) => setInput(e.target.value)}
-            placeholder="Type a message..."
-            maxLength={250}
-            disabled={chatDisabled}
-          />
-        </Tooltip>
-      </form>
+      {!isHidden && (
+        <form onSubmit={handleSubmit}>
+          <Tooltip
+            arrow
+            title={
+              chatDisabled
+                ? "New users cannot chat. Play a couple games first!"
+                : ""
+            }
+          >
+            <SimpleInput
+              value={input}
+              onChange={(e) => setInput(e.target.value)}
+              placeholder="Type a message..."
+              maxLength={250}
+              disabled={chatDisabled}
+            />
+          </Tooltip>
+        </form>
+      )}
     </section>
   );
 }

diff --git a/src/hooks/useFirebaseQuery.js b/src/hooks/useFirebaseQuery.js
@@ -8,6 +8,8 @@ function useFirebaseQuery(query) {
   const state = useRef({});
 
   useEffect(() => {
+    if (!query) return;
+
     function update() {
       clearInterval(timer.current);
       timer.current = setTimeout(() => {

diff --git a/src/pages/LobbyPage.js b/src/pages/LobbyPage.js
@@ -35,7 +35,7 @@ const useStyles = makeStyles((theme) => ({
       "--table-height": "480px",
     },
     [theme.breakpoints.up("md")]: {
-      "--table-height": "calc(min(100vh - 140px, 720px))",
+      "--table-height": "calc(min(100vh - 200px, 720px))",
     },
   },
   gamesTable: {
@@ -64,37 +64,30 @@ const useStyles = makeStyles((theme) => ({
     },
   },
   gameCounters: {
-    "& > p": {
-      marginBottom: "0.2em",
-    },
-    [theme.breakpoints.up("sm")]: {
-      position: "absolute",
-      bottom: 4,
-    },
-    [theme.breakpoints.down("xs")]: {
-      marginTop: 4,
-      display: "flex",
-      justifyContent: "space-between",
+    margin: "1.2em 0.2em 0.2em 0.2em",
+    display: "flex",
+    justifyContent: "space-between",
+    [theme.breakpoints.down("sm")]: {
+      order: -1,
+      margin: "0 0.2em 1em 0.2em",
     },
   },
   actionButtons: {
-    [theme.breakpoints.up("sm")]: {
-      height: "100%",
-      display: "flex",
-      flexDirection: "column",
-      justifyContent: "center",
-      "& button": {
-        margin: "12px 0",
-      },
+    display: "flex",
+    margin: "1em 0 1em 0",
+    "& button:first-of-type": {
+      marginRight: "0.5em",
     },
-    [theme.breakpoints.down("xs")]: {
-      "& button": {
-        marginBottom: theme.spacing(1),
-      },
+    "& button:last-of-type": {
+      marginLeft: "0.5em",
+    },
+    [theme.breakpoints.down("sm")]: {
+      marginBottom: "0.2em",
     },
   },
   chatColumn: {
-    maxHeight: "calc(var(--table-height) + 16px)",
+    display: "flex",
+    flexDirection: "column",
     [theme.breakpoints.up("md")]: {
       marginTop: 36,
     },
@@ -103,18 +96,10 @@ const useStyles = makeStyles((theme) => ({
     padding: 8,
     display: "flex",
     flexDirection: "column",
-    height: "100%",
-  },
-  chatPanel: {
-    display: "flex",
-    flexDirection: "column",
+    "--chat-height": "calc(var(--table-height) - 16px)",
   },
-  buttonColumn: {
-    position: "relative",
-    maxHeight: "calc(var(--table-height) + 16px)",
-    [theme.breakpoints.up("sm")]: {
-      marginTop: 36,
-    },
+  gamesColumn: {
+    paddingBottom: "0 !important",
   },
 }));
 
@@ -195,15 +180,33 @@ function LobbyPage() {
   return (
     <Container>
       <Grid container spacing={2} className={classes.mainGrid}>
-        <Box clone order={{ xs: 3, md: 1 }} className={classes.chatColumn}>
-          <Grid item xs={12} sm={12} md={3}>
+        <Box clone order={{ xs: 2, md: 1 }} className={classes.chatColumn}>
+          <Grid item xs={12} sm={12} md={6}>
             <Paper className={classes.chatColumnPaper}>
               <Chat title="Lobby Chat" messageLimit={50} showMessageTimes />
             </Paper>
+            <div className={classes.gameCounters}>
+              <Typography variant="body2">
+                <strong>
+                  {loadingStats
+                    ? "---"
+                    : humanize((stats && stats.onlineUsers) || 0)}
+                </strong>{" "}
+                users online
+              </Typography>
+              <Typography variant="body2">
+                <strong>
+                  {loadingStats
+                    ? "---,---"
+                    : humanize((stats && stats.gameCount) || 0)}
+                </strong>{" "}
+                games played
+              </Typography>
+            </div>
           </Grid>
         </Box>
-        <Box clone order={{ xs: 1, md: 2 }}>
-          <Grid item xs={12} sm={8} md={6}>
+        <Box clone order={{ xs: 1, md: 2 }} className={classes.gamesColumn}>
+          <Grid item xs={12} sm={12} md={6}>
             <Tabs
               className={classes.lobbyTabs}
               indicatorColor="secondary"
@@ -241,10 +244,6 @@ function LobbyPage() {
                 </TableBody>
               </Table>
             </TableContainer>
-          </Grid>
-        </Box>
-        <Box clone order={{ xs: 2, md: 3 }} className={classes.buttonColumn}>
-          <Grid item xs={12} sm={4} md={3}>
             <div className={classes.actionButtons}>
               <Tooltip
                 arrow
@@ -276,24 +275,6 @@ function LobbyPage() {
                 </Button>
               </Tooltip>
             </div>
-            <div className={classes.gameCounters}>
-              <Typography variant="body2">
-                <strong>
-                  {loadingStats
-                    ? "---"
-                    : humanize((stats && stats.onlineUsers) || 0)}
-                </strong>{" "}
-                users online
-              </Typography>
-              <Typography variant="body2">
-                <strong>
-                  {loadingStats
-                    ? "---,---"
-                    : humanize((stats && stats.gameCount) || 0)}
-                </strong>{" "}
-                games played
-              </Typography>
-            </div>
           </Grid>
         </Box>
       </Grid>