From c01967113cfe69c2779ca40ce6969bdb40e7de29 Mon Sep 17 00:00:00 2001 From: "Kalle (Sendou)" <38327916+Sendouc@users.noreply.github.com> Date: Sat, 12 Dec 2020 14:33:16 +0200 Subject: [PATCH] quad table --- .husky/pre-commit | 2 +- .prettierignore | 2 +- components/player/QuadTable.tsx | 126 ++++++++++++++++++++++ components/player/TwinTable.tsx | 23 ++-- components/player/XRankTable.tsx | 6 +- locale/de/messages.json | 3 +- locale/el/messages.json | 3 +- locale/en/messages.json | 3 +- locale/es/messages.json | 3 +- locale/fr/messages.json | 3 +- locale/it/messages.json | 3 +- locale/ja/messages.json | 3 +- locale/ko/messages.json | 3 +- locale/nl/messages.json | 3 +- locale/pt/messages.json | 3 +- locale/ru/messages.json | 3 +- locale/sv/messages.json | 3 +- pages/player/[id].tsx | 10 +- prisma/queries/getPlayerWithPlacements.ts | 7 +- 19 files changed, 180 insertions(+), 32 deletions(-) create mode 100644 components/player/QuadTable.tsx diff --git a/.husky/pre-commit b/.husky/pre-commit index 1581e836d..19cfb6195 100755 --- a/.husky/pre-commit +++ b/.husky/pre-commit @@ -1,4 +1,4 @@ #!/bin/sh . "$(dirname $0)/_/husky.sh" -npm run prettier:pre-commit && npm run ex:pre-commit \ No newline at end of file +npm run ex:pre-commit diff --git a/.prettierignore b/.prettierignore index 1b71ded9c..61d21d526 100644 --- a/.prettierignore +++ b/.prettierignore @@ -1,3 +1,3 @@ .next prisma/migrations -locales/**/* \ No newline at end of file +locales/**/*.js \ No newline at end of file diff --git a/components/player/QuadTable.tsx b/components/player/QuadTable.tsx new file mode 100644 index 000000000..879c3d40d --- /dev/null +++ b/components/player/QuadTable.tsx @@ -0,0 +1,126 @@ +import { Box, Flex, Text } from "@chakra-ui/react"; +import { Trans } from "@lingui/macro"; +import { useLingui } from "@lingui/react"; +import { Player } from "@prisma/client"; +import MyLink from "components/common/MyLink"; +import { + Table, + TableBody, + TableCell, + TableHead, + TableHeader, + TableRow, +} from "components/common/Table"; +import WeaponImage from "components/common/WeaponImage"; +import { getRankingString } from "lib/strings"; +import { useMyTheme } from "lib/useMyTheme"; +import { GetPlayerWithPlacementsData } from "prisma/queries/getPlayerWithPlacements"; + +interface Props { + player: NonNullable; +} + +const QuadTable: React.FC = ({ player }) => { + const { i18n } = useLingui(); + const { gray } = useMyTheme(); + return ( + + + + + + Date + + + Power + + + Weapon + + + Mates + + + + + {player.leaguePlacements.QUAD.map(({ squad }, index) => { + return ( + + {getRankingString(index + 1)} + + {new Date(squad.startTime).toLocaleString(i18n.locale, { + month: "numeric", + year: "numeric", + hour: "numeric", + day: "numeric", + })} + + + {squad.leaguePower} + + + + member.player.switchAccountId === player.switchAccountId + )!.weapon + } + size={32} + /> + + + + member.player.switchAccountId !== player.switchAccountId + )} + /> + + + ); + })} + +
+ ); +}; + +function LeagueMates({ + mates, +}: { + mates: { + player: Player & { + user: { + username: string; + discriminator: string; + discordId: string; + discordAvatar: string | null; + } | null; + }; + weapon: string; + }[]; +}) { + return ( + <> + {mates.map((mate) => ( + + + + + {mate.player.name ?? "???"} + + + + ))} + + ); +} + +export default QuadTable; diff --git a/components/player/TwinTable.tsx b/components/player/TwinTable.tsx index 979378ddd..9f64fba86 100644 --- a/components/player/TwinTable.tsx +++ b/components/player/TwinTable.tsx @@ -18,10 +18,10 @@ import { useMyTheme } from "lib/useMyTheme"; import { GetPlayerWithPlacementsData } from "prisma/queries/getPlayerWithPlacements"; interface Props { - placements: GetPlayerWithPlacementsData; + player: NonNullable; } -const TwinTable: React.FC = ({ placements }) => { +const TwinTable: React.FC = ({ player }) => { const { i18n } = useLingui(); const { gray } = useMyTheme(); return ( @@ -47,7 +47,7 @@ const TwinTable: React.FC = ({ placements }) => { - {placements?.leaguePlacements.TWIN.map(({ squad }, index) => { + {player.leaguePlacements.TWIN.map(({ squad }, index) => { return ( {getRankingString(index + 1)} @@ -67,8 +67,7 @@ const TwinTable: React.FC = ({ placements }) => { name={ squad.members.find( (member) => - member.player.switchAccountId === - placements.switchAccountId + member.player.switchAccountId === player.switchAccountId )!.weapon } size={32} @@ -79,8 +78,7 @@ const TwinTable: React.FC = ({ placements }) => { mate={ squad.members.find( (member) => - member.player.switchAccountId !== - placements.switchAccountId + member.player.switchAccountId !== player.switchAccountId )!.player } /> @@ -90,8 +88,7 @@ const TwinTable: React.FC = ({ placements }) => { name={ squad.members.find( (member) => - member.player.switchAccountId !== - placements.switchAccountId + member.player.switchAccountId !== player.switchAccountId )!.weapon } size={32} @@ -120,7 +117,7 @@ function LeagueMate({ if (!mate.user && !mate.name) return <>{"???"}; if (mate.user) return ( - + {mate.user.username} @@ -128,7 +125,11 @@ function LeagueMate({ ); - return {mate.name}; + return ( + + {mate.name} + + ); } export default TwinTable; diff --git a/components/player/XRankTable.tsx b/components/player/XRankTable.tsx index 9f22460c2..e0e1c084d 100644 --- a/components/player/XRankTable.tsx +++ b/components/player/XRankTable.tsx @@ -15,10 +15,10 @@ import { useMyTheme } from "lib/useMyTheme"; import { GetPlayerWithPlacementsData } from "prisma/queries/getPlayerWithPlacements"; interface Props { - placements: NonNullable["placements"]; + player: NonNullable; } -const XRankTable: React.FC = ({ placements }) => { +const XRankTable: React.FC = ({ player }) => { const { gray } = useMyTheme(); return ( @@ -47,7 +47,7 @@ const XRankTable: React.FC = ({ placements }) => { - {placements.map((record) => { + {player.placements.map((record) => { return ( diff --git a/locale/de/messages.json b/locale/de/messages.json index 00cee5f7c..dc09414d3 100644 --- a/locale/de/messages.json +++ b/locale/de/messages.json @@ -52,6 +52,7 @@ "Date": "", "Power": "", "Weapon": "Waffe", + "Mates": "", "Mate": "", "Mate's weapon": "", "Name": "Name", @@ -244,4 +245,4 @@ "Search for users by their Discord tag or Twitter name": "", "Top 500 Tier Lists": "", "Here you can find X Rank Top 500 usage tier lists. For example for a weapon to be in the X tier it needs at least 30 placements in that mode that month. Below the weapon count and X Power average are shown.": "" -} +} \ No newline at end of file diff --git a/locale/el/messages.json b/locale/el/messages.json index 74197b497..220f330c3 100644 --- a/locale/el/messages.json +++ b/locale/el/messages.json @@ -52,6 +52,7 @@ "Date": "", "Power": "", "Weapon": "Όπλο", + "Mates": "", "Mate": "", "Mate's weapon": "", "Name": "Όνομα", @@ -244,4 +245,4 @@ "Search for users by their Discord tag or Twitter name": "", "Top 500 Tier Lists": "", "Here you can find X Rank Top 500 usage tier lists. For example for a weapon to be in the X tier it needs at least 30 placements in that mode that month. Below the weapon count and X Power average are shown.": "" -} +} \ No newline at end of file diff --git a/locale/en/messages.json b/locale/en/messages.json index d0f1f52d5..50523aeef 100644 --- a/locale/en/messages.json +++ b/locale/en/messages.json @@ -52,6 +52,7 @@ "Date": "Date", "Power": "Power", "Weapon": "Weapon", + "Mates": "Mates", "Mate": "Mate", "Mate's weapon": "Mate's weapon", "Name": "Name", @@ -244,4 +245,4 @@ "Search for users by their Discord tag or Twitter name": "Search for users by their Discord tag or Twitter name", "Top 500 Tier Lists": "Top 500 Tier Lists", "Here you can find X Rank Top 500 usage tier lists. For example for a weapon to be in the X tier it needs at least 30 placements in that mode that month. Below the weapon count and X Power average are shown.": "Here you can find X Rank Top 500 usage tier lists. For example for a weapon to be in the X tier it needs at least 30 placements in that mode that month. Below the weapon count and X Power average are shown." -} +} \ No newline at end of file diff --git a/locale/es/messages.json b/locale/es/messages.json index 54ada3190..a9168b23f 100644 --- a/locale/es/messages.json +++ b/locale/es/messages.json @@ -52,6 +52,7 @@ "Date": "", "Power": "", "Weapon": "Arma", + "Mates": "", "Mate": "", "Mate's weapon": "", "Name": "Nombre", @@ -244,4 +245,4 @@ "Search for users by their Discord tag or Twitter name": "", "Top 500 Tier Lists": "", "Here you can find X Rank Top 500 usage tier lists. For example for a weapon to be in the X tier it needs at least 30 placements in that mode that month. Below the weapon count and X Power average are shown.": "" -} +} \ No newline at end of file diff --git a/locale/fr/messages.json b/locale/fr/messages.json index 6802e0884..5f2de2034 100644 --- a/locale/fr/messages.json +++ b/locale/fr/messages.json @@ -52,6 +52,7 @@ "Date": "", "Power": "", "Weapon": "Arme", + "Mates": "", "Mate": "", "Mate's weapon": "", "Name": "Nom", @@ -244,4 +245,4 @@ "Search for users by their Discord tag or Twitter name": "", "Top 500 Tier Lists": "", "Here you can find X Rank Top 500 usage tier lists. For example for a weapon to be in the X tier it needs at least 30 placements in that mode that month. Below the weapon count and X Power average are shown.": "" -} +} \ No newline at end of file diff --git a/locale/it/messages.json b/locale/it/messages.json index 1d182ab4f..3966a5287 100644 --- a/locale/it/messages.json +++ b/locale/it/messages.json @@ -52,6 +52,7 @@ "Date": "", "Power": "", "Weapon": "Arma", + "Mates": "", "Mate": "", "Mate's weapon": "", "Name": "Nome", @@ -244,4 +245,4 @@ "Search for users by their Discord tag or Twitter name": "", "Top 500 Tier Lists": "", "Here you can find X Rank Top 500 usage tier lists. For example for a weapon to be in the X tier it needs at least 30 placements in that mode that month. Below the weapon count and X Power average are shown.": "" -} +} \ No newline at end of file diff --git a/locale/ja/messages.json b/locale/ja/messages.json index 022fb77c0..04c0acc79 100644 --- a/locale/ja/messages.json +++ b/locale/ja/messages.json @@ -52,6 +52,7 @@ "Date": "", "Power": "", "Weapon": "", + "Mates": "", "Mate": "", "Mate's weapon": "", "Name": "", @@ -244,4 +245,4 @@ "Search for users by their Discord tag or Twitter name": "", "Top 500 Tier Lists": "", "Here you can find X Rank Top 500 usage tier lists. For example for a weapon to be in the X tier it needs at least 30 placements in that mode that month. Below the weapon count and X Power average are shown.": "" -} +} \ No newline at end of file diff --git a/locale/ko/messages.json b/locale/ko/messages.json index 455910edd..d56dd8490 100644 --- a/locale/ko/messages.json +++ b/locale/ko/messages.json @@ -52,6 +52,7 @@ "Date": "", "Power": "", "Weapon": "무기", + "Mates": "", "Mate": "", "Mate's weapon": "", "Name": "이름", @@ -244,4 +245,4 @@ "Search for users by their Discord tag or Twitter name": "", "Top 500 Tier Lists": "", "Here you can find X Rank Top 500 usage tier lists. For example for a weapon to be in the X tier it needs at least 30 placements in that mode that month. Below the weapon count and X Power average are shown.": "" -} +} \ No newline at end of file diff --git a/locale/nl/messages.json b/locale/nl/messages.json index 022fb77c0..04c0acc79 100644 --- a/locale/nl/messages.json +++ b/locale/nl/messages.json @@ -52,6 +52,7 @@ "Date": "", "Power": "", "Weapon": "", + "Mates": "", "Mate": "", "Mate's weapon": "", "Name": "", @@ -244,4 +245,4 @@ "Search for users by their Discord tag or Twitter name": "", "Top 500 Tier Lists": "", "Here you can find X Rank Top 500 usage tier lists. For example for a weapon to be in the X tier it needs at least 30 placements in that mode that month. Below the weapon count and X Power average are shown.": "" -} +} \ No newline at end of file diff --git a/locale/pt/messages.json b/locale/pt/messages.json index 6c5b3601a..15d44af95 100644 --- a/locale/pt/messages.json +++ b/locale/pt/messages.json @@ -52,6 +52,7 @@ "Date": "", "Power": "", "Weapon": "Arma", + "Mates": "", "Mate": "", "Mate's weapon": "", "Name": "Nome", @@ -244,4 +245,4 @@ "Search for users by their Discord tag or Twitter name": "", "Top 500 Tier Lists": "", "Here you can find X Rank Top 500 usage tier lists. For example for a weapon to be in the X tier it needs at least 30 placements in that mode that month. Below the weapon count and X Power average are shown.": "" -} +} \ No newline at end of file diff --git a/locale/ru/messages.json b/locale/ru/messages.json index 022fb77c0..04c0acc79 100644 --- a/locale/ru/messages.json +++ b/locale/ru/messages.json @@ -52,6 +52,7 @@ "Date": "", "Power": "", "Weapon": "", + "Mates": "", "Mate": "", "Mate's weapon": "", "Name": "", @@ -244,4 +245,4 @@ "Search for users by their Discord tag or Twitter name": "", "Top 500 Tier Lists": "", "Here you can find X Rank Top 500 usage tier lists. For example for a weapon to be in the X tier it needs at least 30 placements in that mode that month. Below the weapon count and X Power average are shown.": "" -} +} \ No newline at end of file diff --git a/locale/sv/messages.json b/locale/sv/messages.json index e4b69f10f..2b0d3fde8 100644 --- a/locale/sv/messages.json +++ b/locale/sv/messages.json @@ -52,6 +52,7 @@ "Date": "", "Power": "", "Weapon": "Vapen", + "Mates": "", "Mate": "", "Mate's weapon": "", "Name": "Namn", @@ -244,4 +245,4 @@ "Search for users by their Discord tag or Twitter name": "", "Top 500 Tier Lists": "", "Here you can find X Rank Top 500 usage tier lists. For example for a weapon to be in the X tier it needs at least 30 placements in that mode that month. Below the weapon count and X Power average are shown.": "" -} +} \ No newline at end of file diff --git a/pages/player/[id].tsx b/pages/player/[id].tsx index cd0c05f96..2ec9fd404 100644 --- a/pages/player/[id].tsx +++ b/pages/player/[id].tsx @@ -1,5 +1,6 @@ import { t } from "@lingui/macro"; import Breadcrumbs from "components/common/Breadcrumbs"; +import QuadTable from "components/player/QuadTable"; import TwinTable from "components/player/TwinTable"; import XRankTable from "components/player/XRankTable"; import { GetStaticPaths, GetStaticProps } from "next"; @@ -17,7 +18,9 @@ interface Props { const PlayerPage = (props: Props) => { const player = props.player!; - const [tab, setTab] = useState<"XRANK" | "TWIN" | "QUAD">("XRANK"); + const [tab, setTab] = useState<"XRANK" | "TWIN" | "QUAD">("QUAD"); + + console.log({ player }); return ( <> @@ -28,8 +31,9 @@ const PlayerPage = (props: Props) => { ]} /> - {tab === "XRANK" && } - {tab === "TWIN" && } + {tab === "XRANK" && } + {tab === "TWIN" && } + {tab === "QUAD" && } ); diff --git a/prisma/queries/getPlayerWithPlacements.ts b/prisma/queries/getPlayerWithPlacements.ts index 950b0dea6..43cf56629 100644 --- a/prisma/queries/getPlayerWithPlacements.ts +++ b/prisma/queries/getPlayerWithPlacements.ts @@ -28,7 +28,6 @@ export const getPlayerWithPlacements = async (switchAccountId: string) => { }; function getTopLeaguePlacements() { - // TODO: remove duplicates const result: { TWIN: LeaguePlacementArray; QUAD: LeaguePlacementArray } = { TWIN: [], QUAD: [], @@ -36,7 +35,13 @@ export const getPlayerWithPlacements = async (switchAccountId: string) => { if (!player) return result; + const timeScoreSet = new Set(); for (const placement of player.leaguePlacements) { + const identifier = + placement.squad.startTime.toString() + placement.squad.leaguePower; + if (timeScoreSet.has(identifier)) continue; + timeScoreSet.add(identifier); + result[placement.squad.members.length === 2 ? "TWIN" : "QUAD"].push( placement );