diff --git a/client/src/app/pages/dashboard/users/games/_game/_playtype/OverviewPage.tsx b/client/src/app/pages/dashboard/users/games/_game/_playtype/OverviewPage.tsx index f512af5da..c9558b99d 100644 --- a/client/src/app/pages/dashboard/users/games/_game/_playtype/OverviewPage.tsx +++ b/client/src/app/pages/dashboard/users/games/_game/_playtype/OverviewPage.tsx @@ -166,6 +166,7 @@ function LastSession({ reqUser, game, playtype }: { reqUser: PublicUserDocument {...data} game={game} playtype={playtype} + reqUser={reqUser} /> @@ -183,9 +184,11 @@ function RecentSessionScoreInfo({ sessionData, game, playtype, + reqUser, }: { session: SessionDocument; sessionData: SessionReturns; + reqUser: PublicUserDocument; } & GamePT) { const highlightedScores = sessionData.scores.find(e => e.highlight); @@ -250,7 +253,7 @@ function RecentSessionScoreInfo({
- +
); diff --git a/client/src/app/pages/dashboard/users/games/_game/_playtype/ScoresPage.tsx b/client/src/app/pages/dashboard/users/games/_game/_playtype/ScoresPage.tsx index cbbcabfb2..6f8d203cc 100644 --- a/client/src/app/pages/dashboard/users/games/_game/_playtype/ScoresPage.tsx +++ b/client/src/app/pages/dashboard/users/games/_game/_playtype/ScoresPage.tsx @@ -199,7 +199,7 @@ function ScoresOverview({ reqUser, game, playtype }: { reqUser: PublicUserDocume style={{ height: 500 }} {...{ isLoading, dataset: data, error }} > - + ) : ( @@ -221,7 +221,7 @@ function ScoresSearch({ return ( - + ); } diff --git a/client/src/components/tables/pbs/IIDXPBTable.tsx b/client/src/components/tables/pbs/IIDXPBTable.tsx index a40c45829..309d3e240 100644 --- a/client/src/components/tables/pbs/IIDXPBTable.tsx +++ b/client/src/components/tables/pbs/IIDXPBTable.tsx @@ -92,7 +92,6 @@ export default function IIDXPBTable({ diff --git a/client/src/components/tables/pbs/dropdowns/IIDXPBDropdown.tsx b/client/src/components/tables/pbs/dropdowns/IIDXPBDropdown.tsx index 9ad46b814..0681e64f7 100644 --- a/client/src/components/tables/pbs/dropdowns/IIDXPBDropdown.tsx +++ b/client/src/components/tables/pbs/dropdowns/IIDXPBDropdown.tsx @@ -4,36 +4,28 @@ import IIDXLampCell from "components/tables/cells/IIDXLampCell"; import ScoreCell from "components/tables/cells/ScoreCell"; import TimestampCell from "components/tables/cells/TimestampCell"; import MiniTable from "components/tables/components/MiniTable"; -import AsyncLoader from "components/util/AsyncLoader"; import ExternalLink from "components/util/ExternalLink"; import Icon from "components/util/Icon"; import Loading from "components/util/Loading"; import SelectButton from "components/util/SelectButton"; -import SelectNav from "components/util/SelectNav"; import React, { useMemo, useState } from "react"; -import { Nav } from "react-bootstrap"; import { useQuery } from "react-query"; -import { - ChartDocument, - Lamps, - PBScoreDocument, - PublicUserDocument, - ScoreDocument, -} from "tachi-common"; +import { ChartDocument, PBScoreDocument, PublicUserDocument } from "tachi-common"; import { UGPTChartPBComposition } from "types/api-returns"; import { GamePT } from "types/react"; import { APIFetchV1 } from "util/api"; +import { IsScore } from "util/asserts"; +import DropdownStructure from "./components/DropdownStructure"; +import { IIDXGraphsComponent, ModsTable, ScoreInfo } from "./components/IIDXScoreDropdownParts"; import JudgementTable from "./components/JudgementTable"; -type LampTypes = "NORMAL" | "EASY" | "HARD" | "EX_HARD"; +import PBNote from "./components/PBNote"; export default function IIDXPBDropdown({ - pb, game, playtype, reqUser, chart, }: { - pb: PBScoreDocument<"iidx:SP" | "iidx:DP">; reqUser: PublicUserDocument; chart: ChartDocument<"iidx:SP">; } & GamePT) { @@ -67,36 +59,30 @@ export default function IIDXPBDropdown({ } return ( -
-
-
-
- - - PB Info - - - - Best Score - - - - Best Lamp - - - - Play History - -
-
- -
-
- {view === "history" ? <> : } -
-
-
-
+ + + + PB Info + + + + Best Score + + + + Best Lamp + + + + Play History + + + } + > + {view === "history" ? <> : } + ); } @@ -105,7 +91,7 @@ function DocumentDisplay({ view, }: { pbData: UGPTChartPBComposition<"iidx:SP">; - view: "pb" | "scorePB" | "lampPB" | "bpPB" | "history"; + view: "pb" | "scorePB" | "lampPB" | "bpPB"; }) { const idMap = { scorePB: pbData.pb.composedFrom.scorePB, @@ -122,134 +108,26 @@ function DocumentDisplay({ return pbData.scores.filter(e => e.scoreID === idMap[view])[0]; }, [view]); - const [lamp, setLamp] = useState(LampToKey(currentDoc.scoreData.lamp)); - - let gaugeStatus: "none" | "single" | "gsm" = "none"; - - if (currentDoc.scoreData.hitMeta.gsm) { - gaugeStatus = "gsm"; - } else if (currentDoc.scoreData.hitMeta.gaugeHistory) { - gaugeStatus = "single"; - } - - const shouldDisable = (r: LampTypes) => { - if (gaugeStatus === "gsm") { - return false; - } else if (gaugeStatus === "single") { - return r !== LampToKey(currentDoc.scoreData.lamp); - } - - return true; - }; + // @ts-expect-error temp + currentDoc.comment = "THIS IS AN EXAMPLE COMMENT."; return ( <>
-
- -
-
- {gaugeStatus === "gsm" ? ( - - ) : gaugeStatus === "single" ? ( - - ) : ( -
- No gauge data :( -
- )} -
- {view !== "pb" ? ( + + {IsScore(currentDoc) ? ( <> -
- - - - - - - - - - - - - - -
Score Info
-
- {pbData.pb.composedFrom.lampPB === pbData.pb.composedFrom.scorePB && ( + + {currentDoc.comment && (
- - Looks like your best lamp and your best score was the same - score! - + "{currentDoc.comment}"
)} ) : (
- - Your PB is the combination of your best score and your best lamp. - Read more{" "} - - {" "} - here. - - +
)}
@@ -260,74 +138,8 @@ function DocumentDisplay({ playtype="SP" judgements={currentDoc.scoreData.judgements} /> - {/* @ts-expect-error temp */} - + {IsScore(currentDoc) && }
); } - -function ModsTable({ - view, - doc, -}: { - view: "pb" | "lampPB" | "scorePB" | "bpPB"; - doc: PBScoreDocument<"iidx:SP"> | ScoreDocument<"iidx:SP">; -}) { - if (view === "pb") { - return null; - } - - const sc = doc as ScoreDocument<"iidx:SP">; - - if (!sc.scoreMeta.assist && !sc.scoreMeta.random) { - return null; - } - - return ( - - {sc.scoreMeta.random && ( - - Note - {sc.scoreMeta.random} - - )} - {sc.scoreMeta.assist && ( - - Assist - {sc.scoreMeta.assist} - - )} - - ); -} - -function GraphComponent({ type, values }: { type: LampTypes; values: (number | null)[] }) { - return ( - ({ x: i, y: e ?? 0 })), - }, - ]} - /> - ); -} - -function LampToKey(lamp: Lamps["iidx:SP"]): LampTypes { - if (lamp === "CLEAR") { - return "NORMAL"; - } else if (lamp === "EASY CLEAR") { - return "EASY"; - } else if (lamp === "HARD CLEAR") { - return "HARD"; - } else if (lamp === "EX HARD CLEAR") { - return "EX_HARD"; - } - - return "NORMAL"; -} diff --git a/client/src/components/tables/pbs/dropdowns/IIDXScoreDropdown.tsx b/client/src/components/tables/pbs/dropdowns/IIDXScoreDropdown.tsx new file mode 100644 index 000000000..5ec8f11ea --- /dev/null +++ b/client/src/components/tables/pbs/dropdowns/IIDXScoreDropdown.tsx @@ -0,0 +1,107 @@ +import Icon from "components/util/Icon"; +import Loading from "components/util/Loading"; +import SelectButton from "components/util/SelectButton"; +import React, { useState } from "react"; +import { UGPTChartPBComposition } from "types/api-returns"; +import { GamePT } from "types/react"; +import { APIFetchV1 } from "util/api"; +import DropdownStructure from "./components/DropdownStructure"; +import { PublicUserDocument, ChartDocument, ScoreDocument } from "tachi-common"; +import { useQuery } from "react-query"; +import { IsScore } from "util/asserts"; +import { IIDXGraphsComponent, ScoreInfo, ModsTable } from "./components/IIDXScoreDropdownParts"; +import JudgementTable from "./components/JudgementTable"; +import PBNote from "./components/PBNote"; + +export default function IIDXScoreDropdown({ + thisScore, + game, + playtype, + reqUser, + chart, +}: { + thisScore: ScoreDocument<"iidx:SP" | "iidx:DP">; + reqUser: PublicUserDocument; + chart: ChartDocument<"iidx:SP">; +} & GamePT) { + const [view, setView] = useState<"vsPB" | "moreInfo" | "history">("moreInfo"); + + const { isLoading, error, data } = useQuery( + `/users/${reqUser.id}/games/${game}/${playtype}/pbs/${chart.chartID}?getComposition=true`, + async () => { + const res = await APIFetchV1>( + `/users/${reqUser.id}/games/${game}/${playtype}/pbs/${chart.chartID}?getComposition=true` + ); + + if (!res.success) { + throw new Error(res.description); + } + + return res.body; + } + ); + + if (error) { + return <>An error has occured. Nice.; + } + + if (isLoading || !data) { + return ( +
+ +
+ ); + } + + let content = null; + + thisScore.comment = "THIS IS AN EXAMPLE COMMENT."; + + if (view === "moreInfo") { + content = ( + <> +
+
+ + {thisScore.comment && ( +
+ "{thisScore.comment}" +
+ )} +
+
+
+ + {IsScore(thisScore) && } +
+ + ); + } + + return ( + + + + This Score + + + + Versus PB + + + + Play History + + + } + > + {content} + + ); +} diff --git a/client/src/components/tables/pbs/dropdowns/components/DropdownStructure.tsx b/client/src/components/tables/pbs/dropdowns/components/DropdownStructure.tsx new file mode 100644 index 000000000..a5ff0d73d --- /dev/null +++ b/client/src/components/tables/pbs/dropdowns/components/DropdownStructure.tsx @@ -0,0 +1,23 @@ +import React from "react"; +import { JustChildren } from "types/react"; + +export default function DropdownStructure({ + buttons, + children, +}: { + buttons: React.ReactNode; +} & JustChildren) { + return ( +
+
+
+
{buttons}
+
+ +
+
{children}
+
+
+
+ ); +} diff --git a/client/src/components/tables/pbs/dropdowns/components/IIDXScoreDropdownParts.tsx b/client/src/components/tables/pbs/dropdowns/components/IIDXScoreDropdownParts.tsx new file mode 100644 index 000000000..9f48b28f3 --- /dev/null +++ b/client/src/components/tables/pbs/dropdowns/components/IIDXScoreDropdownParts.tsx @@ -0,0 +1,178 @@ +import DeltaCell from "components/tables/cells/DeltaCell"; +import IIDXLampCell from "components/tables/cells/IIDXLampCell"; +import ScoreCell from "components/tables/cells/ScoreCell"; +import TimestampCell from "components/tables/cells/TimestampCell"; +import SelectNav from "components/util/SelectNav"; +import React, { useState } from "react"; +import { ScoreDocument, PBScoreDocument, Lamps } from "tachi-common"; +import { Nav } from ".pnpm/react-bootstrap@1.0.1_react-dom@16.12.0+react@17.0.2/node_modules/react-bootstrap"; +import IIDXLampChart from "components/charts/IIDXLampChart"; +import MiniTable from "components/tables/components/MiniTable"; + +export function ScoreInfo({ score }: { score: ScoreDocument<"iidx:SP" | "iidx:DP"> }) { + return ( +
+ + + + + + + + + + + + + + +
Score Info
+
+ ); +} + +export function ModsTable({ score }: { score: ScoreDocument<"iidx:SP" | "iidx:DP"> }) { + if (!score.scoreMeta.assist && !score.scoreMeta.random) { + return null; + } + + return ( + + {score.scoreMeta.random && ( + + Note + + {Array.isArray(score.scoreMeta.random) + ? score.scoreMeta.random.join(" | ") + : score.scoreMeta.random} + + + )} + {score.scoreMeta.assist && ( + + Assist + {score.scoreMeta.assist} + + )} + + ); +} + +type LampTypes = "NORMAL" | "EASY" | "HARD" | "EX_HARD"; + +export function IIDXGraphsComponent({ + score, +}: { + score: ScoreDocument<"iidx:SP" | "iidx:DP"> | PBScoreDocument<"iidx:SP" | "iidx:DP">; +}) { + const [lamp, setLamp] = useState(LampToKey(score.scoreData.lamp)); + + let gaugeStatus: "none" | "single" | "gsm" = "none"; + + if (score.scoreData.hitMeta.gsm) { + gaugeStatus = "gsm"; + } else if (score.scoreData.hitMeta.gaugeHistory) { + gaugeStatus = "single"; + } + + const shouldDisable = (r: LampTypes) => { + if (gaugeStatus === "gsm") { + return false; + } else if (gaugeStatus === "single") { + return r !== LampToKey(score.scoreData.lamp); + } + + return true; + }; + + return ( + <> +
+ +
+
+ {gaugeStatus === "gsm" ? ( + + ) : gaugeStatus === "single" ? ( + + ) : ( +
+ No gauge data :( +
+ )} +
+ + ); +} + +function GraphComponent({ type, values }: { type: LampTypes; values: (number | null)[] }) { + return ( + ({ x: i, y: e ?? 0 })), + }, + ]} + /> + ); +} + +function LampToKey(lamp: Lamps["iidx:SP"]): LampTypes { + if (lamp === "CLEAR") { + return "NORMAL"; + } else if (lamp === "EASY CLEAR") { + return "EASY"; + } else if (lamp === "HARD CLEAR") { + return "HARD"; + } else if (lamp === "EX HARD CLEAR") { + return "EX_HARD"; + } + + return "NORMAL"; +} diff --git a/client/src/components/tables/pbs/dropdowns/components/PBNote.tsx b/client/src/components/tables/pbs/dropdowns/components/PBNote.tsx new file mode 100644 index 000000000..57758f6f4 --- /dev/null +++ b/client/src/components/tables/pbs/dropdowns/components/PBNote.tsx @@ -0,0 +1,14 @@ +import ExternalLink from "components/util/ExternalLink"; +import React from "react"; + +export default function PBNote() { + return ( + + Your PB is the combination of your best score and your best lamp. Read more{" "} + + {" "} + here. + + + ); +} diff --git a/client/src/components/tables/scores/IIDXScoreTable.tsx b/client/src/components/tables/scores/IIDXScoreTable.tsx index 2f34f376f..6bb98da1b 100644 --- a/client/src/components/tables/scores/IIDXScoreTable.tsx +++ b/client/src/components/tables/scores/IIDXScoreTable.tsx @@ -6,7 +6,12 @@ import BPICell from "../cells/BPICell"; import { NumericSOV, StrSOV } from "util/sorts"; import SelectableRating from "../components/SelectableRating"; import { ScoreDataset } from "types/tables"; -import { GetGamePTConfig, integer, ScoreCalculatedDataLookup } from "tachi-common"; +import { + GetGamePTConfig, + integer, + ScoreCalculatedDataLookup, + PublicUserDocument, +} from "tachi-common"; import TachiTable, { ZTableTHProps } from "../components/TachiTable"; import DifficultyCell from "../cells/DifficultyCell"; import ScoreCell from "../cells/ScoreCell"; @@ -14,11 +19,15 @@ import DeltaCell from "../cells/DeltaCell"; import { HumanFriendlyStrToGradeIndex, HumanFriendlyStrToLampIndex } from "util/str-to-num"; import { nanoid } from "nanoid"; import IIDXLampCell from "../cells/IIDXLampCell"; +import DropdownRow from "../components/DropdownRow"; +import IIDXScoreDropdown from "../pbs/dropdowns/IIDXScoreDropdown"; export default function IIDXScoreTable({ + reqUser, dataset, pageLen, }: { + reqUser: PublicUserDocument; dataset: ScoreDataset<"iidx:SP">; pageLen?: integer; }) { @@ -73,7 +82,17 @@ export default function IIDXScoreTable({ }, }} rowFunction={sc => ( - + + } + > @@ -95,7 +114,7 @@ export default function IIDXScoreTable({ )} - + )} /> );