diff --git a/client/src/app/pages/dashboard/users/games/_game/_playtype/folders/SpecificFolderPage.tsx b/client/src/app/pages/dashboard/users/games/_game/_playtype/folders/SpecificFolderPage.tsx index bf2d54e06..d45371840 100644 --- a/client/src/app/pages/dashboard/users/games/_game/_playtype/folders/SpecificFolderPage.tsx +++ b/client/src/app/pages/dashboard/users/games/_game/_playtype/folders/SpecificFolderPage.tsx @@ -1,9 +1,10 @@ import { ONE_DAY } from "util/constants/time"; import { CreateChartIDMap, CreateChartLink, CreateSongMap } from "util/data"; -import { DistinctArr, NO_OP } from "util/misc"; +import { ChangeAtPosition, DistinctArr, NO_OP } from "util/misc"; import { NumericSOV, StrSOV } from "util/sorts"; import { GetScaleAchievedFn } from "util/tierlist"; import { FormatDate, FormatTime } from "util/time"; +import { ChangeOpacity } from "util/color-opacity"; import FolderInfoHeader from "components/game/folder/FolderInfoHeader"; import QuickTooltip from "components/layout/misc/QuickTooltip"; import Card from "components/layout/page/Card"; @@ -35,9 +36,12 @@ import { ScoreDocument, SongDocument, Playtype, + COLOUR_SET, } from "tachi-common"; import { UGPTFolderReturns } from "types/api-returns"; import { FolderDataset } from "types/tables"; +import MiniTable from "components/tables/components/MiniTable"; +import DifficultyCell from "components/tables/cells/DifficultyCell"; import FolderComparePage from "./FolderComparePage"; import FolderQuestsPage from "./FolderQuestsPage"; @@ -562,23 +566,61 @@ function TierlistInfoLadder({ ) - {bucket.map((tierlistInfo, i) => ( - - ))} + ))} ); } +function TierlistBucket({ + bucket, + dataMap, + game, + reqUser, +}: { + dataMap: Map; + game: Game; + playtype: Playtype; + reqUser: UserDocument; + bucket: TierlistInfo[]; +}) { + // xs view is tabular + if (window.screen.width <= 576) { + return ( + + {bucket.map((tierlistInfo, i) => ( + + ))} + + ); + } + + return ( + <> + {bucket.map((tierlistInfo, i) => ( + + ))} + + ); +} + function TierlistInfoBucketValues({ tierlistInfo, game, @@ -612,14 +654,38 @@ function TierlistInfoBucketValues({ statusClass = ""; } + // xs view + if (window.screen.width <= 576) { + return ( + + + + + {data.__related.song.title} + {" "} +
+
+ {tierlistInfo.key} ({tierlistInfo.data.text}) + {tierlistInfo.data.individualDifference && ( + + + + )} +
+ + + + ); + } + return ( <> {lastKey && lastKey.key !== tierlistInfo.key && } + {text} + + ); +} + interface NullableTierlistInfo { chartID: string; key: GPTTierlists[IDStrings]; diff --git a/client/src/components/tables/cells/DifficultyCell.tsx b/client/src/components/tables/cells/DifficultyCell.tsx index ff36c26c6..b935330e6 100644 --- a/client/src/components/tables/cells/DifficultyCell.tsx +++ b/client/src/components/tables/cells/DifficultyCell.tsx @@ -19,10 +19,12 @@ export default function DifficultyCell({ game, chart, alwaysShort, + noTierlist, }: { game: Game; chart: ChartDocument; alwaysShort?: boolean; + noTierlist?: boolean; }) { const gptConfig = GetGamePTConfig(game, chart.playtype); @@ -68,7 +70,7 @@ export default function DifficultyCell({ )} - {Object.keys(chart.tierlistInfo).length > 0 && ( + {!noTierlist && Object.keys(chart.tierlistInfo).length > 0 && ( )} {!chart.isPrimary && (