diff --git a/src/components/Chat.js b/src/components/Chat.js index 8661649..11a8881 100644 --- a/src/components/Chat.js +++ b/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 && ( + + {new Date(time).toLocaleTimeString(undefined, opts)} + + ) + ); + }; + return (
{timeTooltip( item.time, + {formatTime(item.time)} - + diff --git a/src/themes.js b/src/themes.js index 2e4eedc..222efd7 100644 --- a/src/themes.js +++ b/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)", },