diff --git a/components/common/LinkButton.tsx b/components/common/LinkButton.tsx new file mode 100644 index 000000000..807a2db10 --- /dev/null +++ b/components/common/LinkButton.tsx @@ -0,0 +1,29 @@ +import { IconButton } from "@chakra-ui/react"; +import { FiLink, FiTwitter, FiYoutube } from "react-icons/fi"; + +const LinkButton = ({ link }: { link: string }) => { + return ( + + } + isRound + variant="ghost" + /> + + ); +}; + +function LinkIcon({ link }: { link: string }) { + if (link.includes("youtube") || link.includes("youtu.be")) { + return ; + } + + if (link.includes("twitter")) { + return ; + } + + return ; +} + +export default LinkButton; diff --git a/components/common/Section.tsx b/components/common/Section.tsx index 5720782c9..7299af98d 100644 --- a/components/common/Section.tsx +++ b/components/common/Section.tsx @@ -5,6 +5,7 @@ const Section: React.FC = (props) => { const { secondaryBgColor } = useMyTheme(); return ( ; @@ -199,12 +199,14 @@ const AvatarWithInfo: React.FC = ({ href={`/player/${user.player?.switchAccountId}`} prefetch={true} > - )} @@ -213,12 +215,27 @@ const AvatarWithInfo: React.FC = ({ href={`/freeagents?id=${user.freeAgentPost.id}`} prefetch={true} > - + + )} + {true && ( + + )} diff --git a/pages/sr/leaderboards/index.tsx b/pages/sr/leaderboards/index.tsx index c71cfd666..f60f695be 100644 --- a/pages/sr/leaderboards/index.tsx +++ b/pages/sr/leaderboards/index.tsx @@ -7,7 +7,6 @@ import { Checkbox, CheckboxGroup, Flex, - IconButton, Radio, RadioGroup, Select, @@ -17,6 +16,7 @@ import { Plural, t, Trans } from "@lingui/macro"; import { useLingui } from "@lingui/react"; import { SalmonRunRecordCategory } from "@prisma/client"; import Breadcrumbs from "components/common/Breadcrumbs"; +import LinkButton from "components/common/LinkButton"; import { Table, TableBody, @@ -32,7 +32,6 @@ import { salmonRunStages } from "lib/lists/stages"; import { getRankingString } from "lib/strings"; import Image from "next/image"; import Link from "next/link"; -import { FiLink, FiTwitter, FiYoutube } from "react-icons/fi"; import { salmonRunCategoryToNatural } from "./new"; const SalmonRunLeaderboardsPage = ({}) => { @@ -232,14 +231,7 @@ const SalmonRunLeaderboardsPage = ({}) => { {record.links.map((link) => ( - - } - isRound - variant="ghost" - /> - + ))} @@ -255,16 +247,4 @@ const SalmonRunLeaderboardsPage = ({}) => { ); }; -function LinkIcon({ link }: { link: string }) { - if (link.includes("youtube") || link.includes("youtu.be")) { - return ; - } - - if (link.includes("twitter")) { - return ; - } - - return ; -} - export default SalmonRunLeaderboardsPage; diff --git a/pages/sr/player/[id].tsx b/pages/sr/player/[id].tsx new file mode 100644 index 000000000..f11e0b5ec --- /dev/null +++ b/pages/sr/player/[id].tsx @@ -0,0 +1,182 @@ +import { Box, Flex, Heading, Wrap, WrapItem } from "@chakra-ui/react"; +import { t, Trans } from "@lingui/macro"; +import Breadcrumbs from "components/common/Breadcrumbs"; +import LinkButton from "components/common/LinkButton"; +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 UserAvatar from "components/common/UserAvatar"; +import WeaponImage from "components/common/WeaponImage"; +import { salmonRunStages } from "lib/lists/stages"; +import { useMyTheme } from "lib/useMyTheme"; +import { GetStaticPaths, GetStaticProps } from "next"; +import Image from "next/image"; +import { salmonRunCategoryToNatural } from "pages/sr/leaderboards/new"; +import { + getUsersSalmonRunRecords, + GetUsersSalmonRunRecordsData, +} from "prisma/queries/getUsersSalmonRunRecords"; + +interface Props { + user: GetUsersSalmonRunRecordsData; +} + +const SalmonRunPlayerPage = (props: Props) => { + const { gray } = useMyTheme(); + const user = props.user!; + + return ( + + + + + + + {user.username}#{user.discriminator} + + + Salmon Run Records + + + + + {Object.keys(salmonRunCategoryToNatural) + .filter((key) => + user.salmonRunRecords.some((record) => record.category === key) + ) + .map((category) => { + return ( + + + {/* @ts-ignore */} + {salmonRunCategoryToNatural[category]} + + + {salmonRunStages + .filter((stage) => + user.salmonRunRecords.some( + (record) => + record.category === category && + record.rotation.stage === stage + ) + ) + .map( + (stage) => + user.salmonRunRecords.find( + (record) => + record.category === category && + record.rotation.stage === stage + )! + ) + .map((record) => ( + +
+ + {record.rotation.stage} + + + {new Date( + record.rotation.startTime + ).toLocaleDateString()}{" "} + -{" "} + {new Date( + record.rotation.endTime + ).toLocaleDateString()} + + + + {record.goldenEggCount} + + SR + + + {record.rotation.weapons.map((wpn, i) => ( + + + + ))} + + {record.roster.length > 1 && ( + + {record.roster + .filter( + (rosterUser) => + rosterUser.discordId !== user.discordId + ) + .map((user) => ( + + + + + + ))} + + )} + + {record.links.map((link) => ( + + ))} + +
+ + ))} + + + ); + })} + + + ); +}; + +export const getStaticPaths: GetStaticPaths = async () => { + return { + paths: [], + fallback: "blocking", + }; +}; + +export const getStaticProps: GetStaticProps = async ({ params }) => { + const user = await getUsersSalmonRunRecords(parseInt(params!.id as string)); + + if (!user || !user.salmonRunRecords.length) return { notFound: true }; + + const categoryStages = new Set(); + + user.salmonRunRecords = user.salmonRunRecords + .sort((a, b) => b.goldenEggCount - a.goldenEggCount) + .filter((record) => { + if (!record.approved) return false; + + const id = record.category + record.rotation.stage; + if (categoryStages.has(id)) return false; + + categoryStages.add(id); + return true; + }); + + return { + props: { + user: JSON.parse(JSON.stringify(user)), + }, + revalidate: 1, + }; +}; + +export default SalmonRunPlayerPage; diff --git a/prisma/queries/getUsersSalmonRunRecords.ts b/prisma/queries/getUsersSalmonRunRecords.ts new file mode 100644 index 000000000..8e921776e --- /dev/null +++ b/prisma/queries/getUsersSalmonRunRecords.ts @@ -0,0 +1,43 @@ +import { Prisma } from "@prisma/client"; +import prisma from "prisma/client"; + +export type GetUsersSalmonRunRecordsData = Prisma.PromiseReturnType< + typeof getUsersSalmonRunRecords +>; + +export const getUsersSalmonRunRecords = async (id: number) => + prisma.user.findUnique({ + where: { id }, + select: { + discordId: true, + discordAvatar: true, + username: true, + discriminator: true, + salmonRunRecords: { + select: { + id: true, + category: true, + goldenEggCount: true, + links: true, + approved: true, + rotation: { + select: { + grizzcoWeapon: true, + stage: true, + startTime: true, + endTime: true, + weapons: true, + }, + }, + roster: { + select: { + discordId: true, + discordAvatar: true, + username: true, + discriminator: true, + }, + }, + }, + }, + }, + });