UI: Makeover of Records > Players page

rcongui/package.json

@@ -46,7 +46,6 @@
     "country-list": "^2.2.0",
     "dayjs": "^1.11.10",
     "emoji-mart": "^5.6.0",
-    "emoji-picker-react": "^4.12.0",
     "google-palette": "^1.1.0",
     "immutable": "^5.0.3",
     "localforage": "^1.10.0",

rcongui/src/App.js

@@ -1,5 +1,6 @@
 import { RouterProvider } from 'react-router-dom';
 import dayjs from 'dayjs';
+import utc from 'dayjs/plugin/utc';
 import relativeTimePlugin from 'dayjs/plugin/relativeTime';
 import durationPlugin from 'dayjs/plugin/duration';
 import adminRouter from "./router"
@@ -14,6 +15,7 @@ const App = () => {
   // Dayjs plugins
   dayjs.extend(relativeTimePlugin);
   dayjs.extend(durationPlugin);
+  dayjs.extend(utc);
 
   // Configure LocalForage
   localforage.config({

rcongui/src/components/FlagDialog.jsx

@@ -0,0 +1,102 @@
+import { Component } from "react";
+import {
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogActions,
+  Button,
+  Grid2 as Grid,
+  TextField,
+} from "@mui/material";
+import { Suspense, lazy } from "react";
+
+const EmojiPicker = lazy(() => import("@emoji-mart/react"));
+
+export class FlagDialog extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      flag: null,
+      comment: "",
+      data: {},
+    };
+  }
+
+  componentDidMount() {
+    import("@emoji-mart/data").then((d) =>
+      this.setState((s) => {
+        return { ...s, data: d.default };
+      })
+    );
+  }
+
+  render() {
+    const { open, handleClose, handleConfirm, SummaryRenderer } = this.props;
+    const { flag, comment, data } = this.state;
+
+    return (
+      <Dialog open={open} aria-labelledby="form-dialog-title">
+        <DialogTitle id="form-dialog-title">
+          <SummaryRenderer player={open} flag={flag} />
+        </DialogTitle>
+        <DialogContent>
+          <Grid
+            container
+            alignContent="center"
+            alignItems="center"
+            justifyContent="center"
+            spacing={2}
+          >
+            <Grid size={12}>
+              <TextField
+                label="Comment"
+                value={comment}
+                onChange={(e) => this.setState({ comment: e.target.value })}
+              />
+            </Grid>
+          </Grid>
+          <Grid
+            container
+            alignContent="center"
+            alignItems="center"
+            justifyContent="center"
+            spacing={2}
+          >
+            <Grid size={12}>
+              <Suspense>
+                <EmojiPicker
+                  style={{ border: "1px solid red" }}
+                  perLine={8}
+                  data={data}
+                  onEmojiSelect={(emoji) =>
+                    this.setState({ flag: emoji.native })
+                  }
+                />
+              </Suspense>
+            </Grid>
+          </Grid>
+        </DialogContent>
+        <DialogActions>
+          <Button
+            onClick={() => {
+              this.setState({ flag: "" });
+              handleClose();
+            }}
+            color="primary"
+          >
+            Cancel
+          </Button>
+          <Button
+            onClick={() => {
+              handleConfirm(open, flag, comment);
+              this.setState({ flag: "", comment: "" });
+            }}
+            color="primary"
+          >
+            Confirm
+          </Button>
+        </DialogActions>
+      </Dialog>
+    );
+  }
+}

rcongui/src/components/PlayerProfileDrawer/index.jsx

@@ -56,6 +56,7 @@ import WorkspacePremiumIcon from "@mui/icons-material/WorkspacePremium";
 import PersonIcon from "@mui/icons-material/Person";
 import PublicIcon from '@mui/icons-material/Public';
 import FlagIcon from '@mui/icons-material/Flag';
+import Emoji from "../shared/Emoji";
 
 const OnlineStatusBadge = styled(Badge, {
   shouldForwardProp: (props) => props !== "isOnline",
@@ -165,7 +166,7 @@ const BasicProfileDetails = ({
         </Typography>
         {flags.map(({ flag, comment, modified }) => (
           <Stack key={flag}>
-            <Typography>{flag} - {comment}</Typography>
+            <Typography><Emoji emoji={flag} /> - {comment}</Typography>
             <Typography>Modified: {dayjs(modified).format("LLL")}</Typography>
           </Stack>
         ))}

rcongui/src/components/PlayerView/playerList.js

@@ -15,7 +15,7 @@ import { faSteam, faWindows } from "@fortawesome/free-brands-svg-icons";
 import Link from "@mui/material/Link";
 import Icon from "@mui/material/Icon";
 import OpenInNewIcon from "@mui/icons-material/OpenInNew";
-import { getEmojiFlag } from "@/utils/emoji";
+import { getEmoji } from "@/utils/emoji";
 import { Map } from "immutable";
 import { getName } from "country-list";
 import Popover from "@mui/material/Popover";
@@ -135,7 +135,7 @@ const Flag = ({ data, onDeleteFlag }) => {
       }
     >
       <WithPopOver content={`Comment: ${data.get("comment")}`}>
-        {getEmojiFlag(data.get("flag"), 22)}
+        {getEmoji(data.get("flag"), 22)}
       </WithPopOver>
     </Link>
   )

rcongui/src/components/shared/CopyableText.jsx

@@ -0,0 +1,59 @@
+import { Stack, IconButton, Tooltip } from "@mui/material";
+import React, { useState, useEffect } from "react";
+import ContentCopyIcon from "@mui/icons-material/ContentCopy";
+import DoneAllIcon from '@mui/icons-material/DoneAll';
+
+export default function CopyableText({ text }) {
+  const [isClipboardAvailable, setIsClipboardAvailable] = useState(false);
+  const [isCopied, setIsCopied] = useState(false);
+
+  useEffect(() => {
+    // Check if the Clipboard API is available
+    setIsClipboardAvailable(
+      navigator?.clipboard !== undefined &&
+        typeof navigator?.clipboard?.writeText === "function"
+    );
+  }, []);
+
+  useEffect(() => {
+    if (isCopied) {
+      setTimeout(() => {
+        setIsCopied(false);
+      }, 2000);
+    }
+  }, [isCopied]);
+
+  const handleCopy = () => {
+    navigator.clipboard.writeText(text);
+    setIsCopied(true);
+  };
+
+  return (
+    <Stack direction="row" alignItems="center" gap={1}>
+      {text}
+      {isClipboardAvailable && (
+        <Tooltip title={isCopied ? "Copied!" : "Copy"}>
+          <IconButton
+            onClick={handleCopy}
+            sx={{
+              width: "1rem",
+              height: "1rem",
+              color: "text.secondary",
+              "&:hover": {
+                color: "text.primary",
+              },
+            }}
+            size="small"
+            disableRipple
+          >
+            {isCopied ? (
+              <DoneAllIcon sx={{ width: "1rem", height: "1rem", color: "success.main" }} />
+            ) : (
+              <ContentCopyIcon sx={{ width: "1rem", height: "1rem" }} />
+            )}
+          </IconButton>
+        </Tooltip>
+      )}
+    </Stack>
+  );
+}

rcongui/src/components/shared/CountryFlag.jsx

@@ -1,9 +1,16 @@
-export const CountryFlag = ({ country }) => (
+import { getName } from "country-list";
+
+export const CountryFlag = ({ country }) => {
+  const countryName = getName(country);
+  return (
     <img
       src={`https://flagcdn.com/w20/${country.toLowerCase()}.png`}
       width={20}
       height={10}
-      alt={country}
+      aria-label={`Flag of ${countryName}`}
+      alt={countryName}
+      title={countryName}
     />
   );
+};
 

rcongui/src/components/shared/Emoji.jsx

@@ -0,0 +1,35 @@
+import { getEmojiDataFromNative, init } from 'emoji-mart'
+import data from "@emoji-mart/data/sets/14/twitter.json";
+import React from 'react';
+
+init({ data, set: "twitter" })
+
+export default function Emoji({ emoji: anEmoji, size = 18 }) {
+  const [emojiData, setEmojiData] = React.useState(null);
+
+  React.useEffect(() => {
+    async function loadEmoji() {
+      try {
+        // If emoji from emoji-mart is provided, use it directly
+        if (anEmoji.id) {
+          setEmojiData(anEmoji);
+          return;
+        }
+
+        // If just an emoji string is provided, find it in the data
+        const data = await getEmojiDataFromNative(anEmoji);
+        if (data) {
+          setEmojiData(data);
+        }
+      } catch (error) {
+        console.error('Error loading emoji:', error);
+      }
+    }
+
+    loadEmoji();
+  }, [anEmoji]);
+
+  if (!emojiData) return null;
+
+  return <em-emoji id={emojiData.id} set="twitter" size={size}></em-emoji>;
+}