From c8feb017234365be54cdaee71e0c4f7521fdfc3f Mon Sep 17 00:00:00 2001 From: nairobi <61069237+nyairobi@users.noreply.github.com> Date: Mon, 1 Jun 2026 02:41:14 +0200 Subject: [PATCH] fix frontend issues with ongeki having too much data (#1607) * fix frontend issues with ongeki having too much data * probably better * I'm so done --- .../sessions/SessionRaiseBreakdown.tsx | 36 +++++++++++++------ .../tables/cells/DifficultyCell.tsx | 8 +++-- .../tables/cells/OngekiScoreRatingCell.tsx | 21 +++++++---- .../components/tables/cells/TimestampCell.tsx | 36 +++++++++++++++---- .../src/components/tables/cells/TitleCell.tsx | 6 ++-- .../components/DocumentComponent.tsx | 8 +++-- .../components/tables/folders/FolderTable.tsx | 2 +- .../history-scores/HistoryScoreTable.tsx | 2 +- .../src/components/tables/pbs/PBTable.tsx | 2 +- .../tables/rivals/RivalChartTable.tsx | 2 +- .../components/tables/scores/ScoreTable.tsx | 2 +- .../client/src/styles/legacy/_index.scss | 8 +++++ typescript/client/src/util/time.ts | 6 ++-- 13 files changed, 102 insertions(+), 37 deletions(-) diff --git a/typescript/client/src/components/sessions/SessionRaiseBreakdown.tsx b/typescript/client/src/components/sessions/SessionRaiseBreakdown.tsx index 9949f81bf..9e40d754e 100644 --- a/typescript/client/src/components/sessions/SessionRaiseBreakdown.tsx +++ b/typescript/client/src/components/sessions/SessionRaiseBreakdown.tsx @@ -38,6 +38,13 @@ import { type ConfEnumScoreMetric } from "tachi-common/types/metrics"; type SetScores = (scores: ScoreDocument[]) => void; +const Plural = (str: string) => str + (str.trimEnd().endsWith("s") ? "" : "s"); + +const FormatEnumTitle = (str: string) => + Plural(UppercaseFirst(str)) + .split(/(?=[A-Z])/u) + .join("\u00a0"); // nbsp + export default function SessionRaiseBreakdown({ sessionData, setScores, @@ -48,7 +55,9 @@ export default function SessionRaiseBreakdown({ setScores?: SetScores; }) { const game = sessionData.session.game; - const lampName = game === "ongeki" || game === "chunithm" ? "noteLamp" : "lamp"; + const gameConfig = GetGameConfig(game); + const enumMetrics = GetScoreMetrics(gameConfig, "ENUM"); + const gptImpl = GPT_CLIENT_IMPLEMENTATIONS[game]; const { user } = useContext(UserContext); @@ -82,15 +91,21 @@ export default function SessionRaiseBreakdown({
- - Lamps Only - All - - Grades Only - + {enumMetrics.map((metric) => ( + + {/* @ts-expect-error ctrl+f `enumIcons[` - standard procedure */} + {" "} + {FormatEnumTitle(metric)} + + ))}
@@ -197,10 +212,11 @@ function SessionScoreStatBreakdown({ {enumMetrics.map((metric) => (
2 ? "no-max-width" : ""} colSpan={[1, 100]} headers={[ - `${UppercaseFirst(metric)}s`, - `New ${UppercaseFirst(metric)}s`, + FormatEnumTitle(metric), + `New ${FormatEnumTitle(metric)}`, ]} > {prefix} diff --git a/typescript/client/src/components/tables/cells/OngekiScoreRatingCell.tsx b/typescript/client/src/components/tables/cells/OngekiScoreRatingCell.tsx index f377e5a0a..747fb7c82 100644 --- a/typescript/client/src/components/tables/cells/OngekiScoreRatingCell.tsx +++ b/typescript/client/src/components/tables/cells/OngekiScoreRatingCell.tsx @@ -8,6 +8,14 @@ import { type PBScoreDocument, type ScoreDocument } from "tachi-common"; import MiniTable from "../components/MiniTable"; import LampCell from "./LampCell"; +const CoreCell = ({ ratingValue }: { ratingValue: number }) => ( + +
+ {FormatScoreRating("ongeki", "scoreRating", ratingValue)} +
+ +); + export default function OngekiScoreRatingCell({ score, }: { @@ -33,7 +41,12 @@ export default function OngekiScoreRatingCell({ ? 0.1 : 0; const bellRating = bellLamp === "FULL BELL" ? 0.05 : 0; - const techRating = ratingValue - gradeRating - noteRating - bellRating; + const techRating = ratingValue === 0 ? 0 : ratingValue - gradeRating - noteRating - bellRating; + + if (techRating <= 0) { + // This value is N/A if techRating isn't positive + return ; + } return ( <> @@ -88,11 +101,7 @@ export default function OngekiScoreRatingCell({ } wide > - -
- {FormatScoreRating("ongeki", "scoreRating", ratingValue)} -
- + ); diff --git a/typescript/client/src/components/tables/cells/TimestampCell.tsx b/typescript/client/src/components/tables/cells/TimestampCell.tsx index 4d5acf355..3266ad26b 100644 --- a/typescript/client/src/components/tables/cells/TimestampCell.tsx +++ b/typescript/client/src/components/tables/cells/TimestampCell.tsx @@ -1,6 +1,7 @@ -import { FormatTime, MillisToSince } from "#util/time"; +import { IsNullish } from "#util/misc"; +import { FormatTime, FormatTimeOfDay, FormatTimeSmall, MillisToSince } from "#util/time"; import React from "react"; -import { type integer } from "tachi-common"; +import { type integer, type V3Game } from "tachi-common"; /** Same truncation pattern as TitleCell metadata lines. */ const truncLineCls = "d-block w-100 text-truncate"; @@ -9,14 +10,26 @@ export default function TimestampCell({ service, tableFixedLayoutCompat, time, + alwaysShort, + game, }: { + alwaysShort?: boolean; + game?: V3Game; service?: string | null; tableFixedLayoutCompat?: boolean; time: integer | null; }) { + if (game === "ongeki" && IsNullish(service)) { + alwaysShort = true; + } + const widthStyle = tableFixedLayoutCompat ? undefined - : { maxWidth: "200px", minWidth: "140px", overflow: "hidden" as const }; + : { + maxWidth: "200px", + minWidth: alwaysShort ? "50px" : "140px", + overflow: "hidden" as const, + }; return ( {time ? ( <> - {MillisToSince(time)} + {MillisToSince(time, alwaysShort)}
- {FormatTime(time)} + + {alwaysShort ? FormatTimeSmall(time) : FormatTime(time)} + + {alwaysShort && ( + <> +
+ {FormatTimeOfDay(time)} + + )} ) : ( - Played On: {service} + {!alwaysShort && "Played On: "} + {service} )} diff --git a/typescript/client/src/components/tables/cells/TitleCell.tsx b/typescript/client/src/components/tables/cells/TitleCell.tsx index 2b4e227c4..b278931fe 100644 --- a/typescript/client/src/components/tables/cells/TitleCell.tsx +++ b/typescript/client/src/components/tables/cells/TitleCell.tsx @@ -50,6 +50,8 @@ export default function TitleCell({ ? tooltipParts.filter(Boolean).join(" — ") : undefined; + const maxWidth = game === "ongeki" ? TITLE_CELL_WIDTH_PX * 0.6 : TITLE_CELL_WIDTH_PX; + if (game === "popn" && chart) { backgroundImage = `url(${ToCDNURL( `/misc/popn/banners/${(chart as any).data.inGameID}.png`, @@ -71,11 +73,11 @@ export default function TitleCell({ className="fading-image-td-left title-cell-wrapper" style={{ boxSizing: "border-box", - maxWidth: `${TITLE_CELL_WIDTH_PX}px`, + maxWidth: `${maxWidth}px`, minWidth: 0, overflow: "hidden", textAlign: "left", - width: `${TITLE_CELL_WIDTH_PX}px`, + width: `${maxWidth}px`, ["--image-url" as string]: backgroundImage, backgroundPosition: center ? "center" : undefined, }} diff --git a/typescript/client/src/components/tables/dropdowns/components/DocumentComponent.tsx b/typescript/client/src/components/tables/dropdowns/components/DocumentComponent.tsx index 4d329b22d..49df31c12 100644 --- a/typescript/client/src/components/tables/dropdowns/components/DocumentComponent.tsx +++ b/typescript/client/src/components/tables/dropdowns/components/DocumentComponent.tsx @@ -40,8 +40,12 @@ export function ScoreInfo({ - {/* @ts-expect-error yeah we know service doesnt necessarily exist */} - + diff --git a/typescript/client/src/components/tables/folders/FolderTable.tsx b/typescript/client/src/components/tables/folders/FolderTable.tsx index 3163a7431..d7501c27b 100644 --- a/typescript/client/src/components/tables/folders/FolderTable.tsx +++ b/typescript/client/src/components/tables/folders/FolderTable.tsx @@ -211,7 +211,7 @@ const RowInner = memo( rankingViewMode={rankingViewMode} userID={score.userID} /> - + ); }, diff --git a/typescript/client/src/components/tables/history-scores/HistoryScoreTable.tsx b/typescript/client/src/components/tables/history-scores/HistoryScoreTable.tsx index d5f72edf5..208f377d2 100644 --- a/typescript/client/src/components/tables/history-scores/HistoryScoreTable.tsx +++ b/typescript/client/src/components/tables/history-scores/HistoryScoreTable.tsx @@ -80,7 +80,7 @@ function Row({ nested > - + ); diff --git a/typescript/client/src/components/tables/pbs/PBTable.tsx b/typescript/client/src/components/tables/pbs/PBTable.tsx index e9147f492..4416f1262 100644 --- a/typescript/client/src/components/tables/pbs/PBTable.tsx +++ b/typescript/client/src/components/tables/pbs/PBTable.tsx @@ -137,7 +137,7 @@ function Row({ rankingViewMode={rankingViewMode} userID={pb.userID} /> - + {showPlaycount && {pb.__playcount ?? 0}} diff --git a/typescript/client/src/components/tables/rivals/RivalChartTable.tsx b/typescript/client/src/components/tables/rivals/RivalChartTable.tsx index a2d85b192..8cf5b44da 100644 --- a/typescript/client/src/components/tables/rivals/RivalChartTable.tsx +++ b/typescript/client/src/components/tables/rivals/RivalChartTable.tsx @@ -110,7 +110,7 @@ function Row({ rankingViewMode={rankingViewMode} userID={pb.userID} /> - + ); } diff --git a/typescript/client/src/components/tables/scores/ScoreTable.tsx b/typescript/client/src/components/tables/scores/ScoreTable.tsx index 522f71015..556ea45ae 100644 --- a/typescript/client/src/components/tables/scores/ScoreTable.tsx +++ b/typescript/client/src/components/tables/scores/ScoreTable.tsx @@ -119,7 +119,7 @@ function Row({ song={sc.__related.song} /> - + ); diff --git a/typescript/client/src/styles/legacy/_index.scss b/typescript/client/src/styles/legacy/_index.scss index 8a5811c35..223e63e77 100644 --- a/typescript/client/src/styles/legacy/_index.scss +++ b/typescript/client/src/styles/legacy/_index.scss @@ -24,6 +24,8 @@ .session-raise-container { width: 100%; display: flex; + flex-direction: row; + flex-wrap: wrap; } } @include media-breakpoint-down(md) { @@ -34,6 +36,12 @@ } } +@include media-breakpoint-up(lg) { + .session-raise-container .no-max-width { + max-width: 400px; + } +} + .MuiTabs-scrollButtons.Mui-disabled { opacity: 0.3; } diff --git a/typescript/client/src/util/time.ts b/typescript/client/src/util/time.ts index a04e2b592..520f46d4d 100644 --- a/typescript/client/src/util/time.ts +++ b/typescript/client/src/util/time.ts @@ -1,8 +1,8 @@ import humaniseDuration from "humanize-duration"; import { DateTime } from "luxon"; -export function MillisToSince(ms: number) { - return DateTime.fromMillis(ms).toRelative(); +export function MillisToSince(ms: number, short?: boolean) { + return DateTime.fromMillis(ms).toRelative({ style: short ? "narrow" : "long" }); } export function FormatTime(ms: number) { @@ -33,5 +33,5 @@ export function FormatDurationHours(ms: number) { } export function FormatTimeSmall(ms: number) { - return DateTime.fromMillis(ms).toLocaleString(DateTime.DATE_SHORT); + return DateTime.fromMillis(ms).toISODate(); }