registration experience

components/play/RegisterHeader.tsx

@@ -4,18 +4,16 @@ import {
   AlertTitle,
   Box,
   Button,
-  HStack,
   Input,
   useToast,
 } from "@chakra-ui/react";
 import { t, Trans } from "@lingui/macro";
-import UserAvatar from "components/common/UserAvatar";
 import { useLadderTeams } from "hooks/play";
 import { getToastOptions } from "lib/getToastOptions";
 import { sendData } from "lib/postData";
 import useUser from "lib/useUser";
-import { useState } from "react";
-import { FiTrash } from "react-icons/fi";
+import { useEffect, useState } from "react";
+import { FiCheck, FiTrash } from "react-icons/fi";
 
 interface Props {}
 
@@ -25,6 +23,17 @@ const RegisterHeader: React.FC<Props> = ({}) => {
   const { data, mutate } = useLadderTeams();
 
   const [sending, setSending] = useState(false);
+  const [copied, setCopied] = useState(false);
+
+  useEffect(() => {
+    if (!copied) return;
+
+    const timer = setTimeout(() => {
+      setCopied(false);
+    }, 750);
+
+    return () => clearTimeout(timer);
+  }, [copied]);
 
   const createNewTeam = async () => {
     setSending(true);
@@ -91,19 +100,35 @@ const RegisterHeader: React.FC<Props> = ({}) => {
           </AlertTitle>
           <AlertDescription>
             {ownTeam.inviteCode && (
-              <Box>
+              <Box mt={2}>
                 <Input
                   name="code"
                   value={`https://sendou.ink/play/join?code=${ownTeam.inviteCode}`}
                   readOnly
                 />
+                <Button
+                  onClick={() => {
+                    navigator.clipboard.writeText(
+                      `https://sendou.ink/play/join?code=${ownTeam.inviteCode}`
+                    );
+                    setCopied(true);
+                  }}
+                  h="1.75rem"
+                  size="sm"
+                  isDisabled={sending || copied}
+                  my={2}
+                  variant="outline"
+                  width={36}
+                >
+                  {copied ? <FiCheck /> : <Trans>Copy invite link</Trans>}
+                </Button>
               </Box>
             )}
-            <HStack my={2} justify="center">
-              {ownTeam.roster.map((member) => (
-                <UserAvatar user={member} />
-              ))}
-            </HStack>
+            <Box fontWeight="bold" mt={2}>
+              {ownTeam.roster
+                .map((member) => `${member.username}#${member.discriminator}`)
+                .join(", ")}
+            </Box>
             <Box mt={4}>
               {ownTeam.ownerId === user.id ? (
                 <Button

pages/play/index.tsx

@@ -1,11 +1,16 @@
-import { Box } from "@chakra-ui/react";
+import { Box, Flex, HStack } from "@chakra-ui/react";
 import { t } from "@lingui/macro";
 import Breadcrumbs from "components/common/Breadcrumbs";
 import MyContainer from "components/common/MyContainer";
+import SubText from "components/common/SubText";
+import TwitterAvatar from "components/common/TwitterAvatar";
+import UserAvatar from "components/common/UserAvatar";
 import RegisterHeader from "components/play/RegisterHeader";
 import { useLadderTeams } from "hooks/play";
+import { useMyTheme } from "lib/useMyTheme";
 
 const PlayPage = () => {
+  const { gray } = useMyTheme();
   const { data } = useLadderTeams();
 
   console.log({ data });
@@ -16,6 +21,60 @@ const PlayPage = () => {
         Next event: testing
       </Box>
       <RegisterHeader />
+      <Box mt={4}>
+        {data
+          ?.sort((a, b) => b.roster.length - a.roster.length)
+          .map((team) => {
+            const teamTuple = team.roster
+              .filter((member) => member.team)
+              .map((member) => member.team)
+              .reduce(
+                (
+                  acc: [
+                    { name: string; twitterName: string; nameForUrl: string },
+                    number
+                  ][],
+                  cur
+                ) => {
+                  const tuple = acc.find(([{ name }]) => name === cur!.name);
+                  if (tuple) tuple[1]++;
+
+                  acc.push([{ ...(cur as any) }, 1]);
+                  return acc;
+                },
+                []
+              )
+              .find((tuple) => tuple[1] >= 3);
+            return (
+              <Box my={4}>
+                {teamTuple ? (
+                  <Flex fontWeight="bold" align="center">
+                    {teamTuple[0].twitterName && (
+                      <TwitterAvatar
+                        twitterName={teamTuple[0].twitterName}
+                        size="sm"
+                        mr={1}
+                      />
+                    )}
+                    {teamTuple[0].name}
+                    {teamTuple[1] === 3 && <SubText ml={1}>+1</SubText>}
+                  </Flex>
+                ) : (
+                  <HStack>
+                    {team.roster.map((member) => (
+                      <UserAvatar user={member} size="sm" />
+                    ))}
+                  </HStack>
+                )}
+                <Box color={gray} fontSize="sm" mt={2}>
+                  {team.roster
+                    .map((user) => `${user.username}#${user.discriminator}`)
+                    .join(", ")}
+                </Box>
+              </Box>
+            );
+          })}
+      </Box>
     </MyContainer>
   );
 };