Add times and mentions to chat

src/components/Chat.js

@@ -22,7 +22,7 @@ import useStats from "../hooks/useStats";
 import useStorage from "../hooks/useStorage";
 import { UserContext } from "../context";
 
-const useStyles = makeStyles({
+const useStyles = makeStyles((theme) => ({
   chatPanel: {
     display: "flex",
     flexDirection: "column",
@@ -53,7 +53,23 @@ const useStyles = makeStyles({
       visibility: "visible",
     },
   },
-});
+  messageTime: {
+    color: "gray",
+    fontSize: "xx-small",
+    marginRight: "0.4em",
+    verticalAlign: "middle",
+  },
+  mentioned: {
+    backgroundColor: theme.mentioned.background,
+    borderRight: `solid ${theme.mentioned.border}`,
+  },
+}));
+
+const makeUserRE = (username) => {
+  username = username.replace(/[\\^$.*+?()[\]{}|]/g, "\\$&");
+  username = username.replace(/^anonymous /i, "($&)?");
+  return new RegExp(`@(all|${username})\\b`, "i");
+};
 
 /** A chat sidebar element, opens lobby chat when the `gameId` prop is not set. */
 function Chat({
@@ -90,6 +106,11 @@ function Chat({
     [databasePath, messageLimit]
   );
   const messages = useFirebaseQuery(messagesQuery);
+  const userRE = useMemo(() => makeUserRE(user.name), [user.name]);
+
+  const addMentioned = (cls, message) => {
+    return userRE.test(message) ? `${cls} ${classes.mentioned}` : cls;
+  };
 
   function handleSubmit(event) {
     event.preventDefault();
@@ -160,6 +181,17 @@ function Chat({
     );
   };
 
+  const formatTime = (time) => {
+    const opts = { timeStyle: "short", hour12: false };
+    return (
+      showMessageTimes && (
+        <span className={classes.messageTime}>
+          {new Date(time).toLocaleTimeString(undefined, opts)}
+        </span>
+      )
+    );
+  };
+
   return (
     <section
       className={classes.chatPanel}
@@ -184,11 +216,12 @@ function Chat({
                 <div
                   key={key}
                   style={{ display: "flex", flexDirection: "row" }}
-                  className={classes.message}
+                  className={addMentioned(classes.message, item.message)}
                 >
                   {timeTooltip(
                     item.time,
                     <Typography variant="body2" gutterBottom>
+                      {formatTime(item.time)}
                       <User
                         id={item.user}
                         component={InternalLink}

src/pages/LobbyPage.js

@@ -198,7 +198,7 @@ function LobbyPage() {
         <Box clone order={{ xs: 3, md: 1 }} className={classes.chatColumn}>
           <Grid item xs={12} sm={12} md={3}>
             <Paper className={classes.chatColumnPaper}>
-              <Chat title="Lobby Chat" messageLimit={30} showMessageTimes />
+              <Chat title="Lobby Chat" messageLimit={50} showMessageTimes />
             </Paper>
           </Grid>
         </Box>

src/themes.js

@@ -14,7 +14,6 @@ export const darkTheme = createTheme({
       main: "#ff4284",
       dark: "#c51162",
     },
-
     action: {
       hover: "#363636",
     },
@@ -34,6 +33,10 @@ export const darkTheme = createTheme({
     caretColor: "#fff",
     background: "#262626",
   },
+  mentioned: {
+    background: "#383838",
+    border: "#ffd700",
+  },
   pie: {
     noGames: "#rgba(0, 0, 0, 0.12)",
   },
@@ -69,6 +72,10 @@ export const lightTheme = createTheme({
     caretColor: "black",
     background: "#fff",
   },
+  mentioned: {
+    background: "#fffedc",
+    border: "#ffd700",
+  },
   pie: {
     noGames: "rgba(0, 0, 0, 0.12)",
   },