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)",
},