diff --git a/pages/t/[team].tsx b/pages/t/[team].tsx index 70264c1c3..6ff34d954 100644 --- a/pages/t/[team].tsx +++ b/pages/t/[team].tsx @@ -6,6 +6,10 @@ import { Flex, Heading, IconButton, + Popover, + PopoverArrow, + PopoverContent, + PopoverTrigger, Stack, useToast, Wrap, @@ -16,6 +20,7 @@ import Markdown from "components/common/Markdown"; import MyContainer from "components/common/MyContainer"; import MyLink from "components/common/MyLink"; import Section from "components/common/Section"; +import SubText from "components/common/SubText"; import SubTextCollapse from "components/common/SubTextCollapse"; import TwitterAvatar from "components/common/TwitterAvatar"; import UserAvatar from "components/common/UserAvatar"; @@ -25,10 +30,12 @@ import TeamProfileModal from "components/t/TeamProfileModal"; import { countries, getEmojiFlag } from "countries-list"; import { getToastOptions } from "lib/getToastOptions"; import { sendData } from "lib/postData"; +import { useMyTheme } from "lib/useMyTheme"; import useUser from "lib/useUser"; import { GetStaticPaths, GetStaticProps } from "next"; +import Image from "next/image"; import { getTeam, GetTeamData } from "prisma/queries/getTeam"; -import { useEffect, useState } from "react"; +import { Fragment, useEffect, useState } from "react"; import { FaTwitter } from "react-icons/fa"; import useSWR, { mutate } from "swr"; @@ -36,7 +43,63 @@ interface Props { team: GetTeamData; } +const getTeamXPInfo = (roster: NonNullable["roster"]) => { + const placements = roster.reduce( + ( + acc: { + weapon: string; + month: number; + year: number; + mode: "SZ" | "TC" | "RM" | "CB"; + xPower: number; + username: string; + discriminator: string; + discordAvatar: string | null; + discordId: string; + }[], + cur + ) => { + const placement = cur.player?.placements[0]; + if (!placement) return acc; + + if (acc.length < 4) + acc.push({ + ...placement, + username: cur.username, + discriminator: cur.discriminator, + discordAvatar: cur.discordAvatar, + discordId: cur.discordId, + }); + else { + acc.sort((a, b) => b.xPower - a.xPower); + + if (acc[3].xPower < placement.xPower) { + acc[3] = { + ...placement, + username: cur.username, + discriminator: cur.discriminator, + discordAvatar: cur.discordAvatar, + discordId: cur.discordId, + }; + } + } + return acc; + }, + [] + ); + + return { + placements: placements.sort((a, b) => b.xPower - a.xPower), + teamXP: ( + (placements.reduce((acc, cur) => acc + cur.xPower, 0) + + 2000 * (4 - placements.length)) / + 4 + ).toFixed(1), + }; +}; + const TeamPage: React.FC = (props) => { + const { secondaryBgColor } = useMyTheme(); const { data } = useSWR(`/api/teams/${props.team!.id}`, { initialData: props.team!, }); @@ -66,6 +129,8 @@ const TeamPage: React.FC = (props) => { toast(getToastOptions(t`Left the team`, "success")); }; + const teamXPData = getTeamXPInfo(team.roster); + return ( @@ -90,6 +155,41 @@ const TeamPage: React.FC = (props) => { )} + + {teamXPData.teamXP !== "2000" && ( + + +
+ + {teamXPData.teamXP} +
+
+ + + {teamXPData.placements.map((placement, i) => ( + + + + + {placement.username}#{placement.discriminator} + + + + + + + + + {placement.xPower} + + + + {i !== teamXPData.placements.length - 1 && } + + ))} + +
+ )} {/* {team.roster .reduce((acc: [string, number][], cur) => { diff --git a/prisma/queries/getTeam.ts b/prisma/queries/getTeam.ts index a8db210b5..03aa6b970 100644 --- a/prisma/queries/getTeam.ts +++ b/prisma/queries/getTeam.ts @@ -31,6 +31,23 @@ export const getTeam = async ( country: true, }, }, + player: { + select: { + placements: { + orderBy: { + xPower: "desc", + }, + take: 1, + select: { + weapon: true, + month: true, + year: true, + mode: true, + xPower: true, + }, + }, + }, + }, }, }, },