From 4665332d16435fba0151cc8290a6bce7ebcd3447 Mon Sep 17 00:00:00 2001 From: Pinapelz Date: Sun, 6 Jul 2025 01:20:12 -0700 Subject: implement Dancerush custom scoreview --- frontend/src/assets/games/dancerush/easy.webp | Bin 0 -> 1330 bytes frontend/src/assets/games/dancerush/normal.webp | Bin 0 -> 1198 bytes .../components/displays/DancerushScoreDisplay.tsx | 429 +++++++++++++++++++++ .../components/displays/GenericScoreDisplay.tsx | 424 ++++++++++++++++++++ .../src/components/tables/GenericScoreTable.tsx | 424 -------------------- frontend/src/pages/Score.tsx | 23 +- 6 files changed, 871 insertions(+), 429 deletions(-) create mode 100644 frontend/src/assets/games/dancerush/easy.webp create mode 100644 frontend/src/assets/games/dancerush/normal.webp create mode 100644 frontend/src/components/displays/DancerushScoreDisplay.tsx create mode 100644 frontend/src/components/displays/GenericScoreDisplay.tsx delete mode 100644 frontend/src/components/tables/GenericScoreTable.tsx diff --git a/frontend/src/assets/games/dancerush/easy.webp b/frontend/src/assets/games/dancerush/easy.webp new file mode 100644 index 0000000..13be38f Binary files /dev/null and b/frontend/src/assets/games/dancerush/easy.webp differ diff --git a/frontend/src/assets/games/dancerush/normal.webp b/frontend/src/assets/games/dancerush/normal.webp new file mode 100644 index 0000000..db10798 Binary files /dev/null and b/frontend/src/assets/games/dancerush/normal.webp differ diff --git a/frontend/src/components/displays/DancerushScoreDisplay.tsx b/frontend/src/components/displays/DancerushScoreDisplay.tsx new file mode 100644 index 0000000..16ba2b2 --- /dev/null +++ b/frontend/src/components/displays/DancerushScoreDisplay.tsx @@ -0,0 +1,429 @@ +import React from "react"; +import dancerushEasyImg from "../../assets/games/dancerush/easy.webp"; +import dancerushNormalImg from "../../assets/games/dancerush/normal.webp"; + +interface Score { + // eslint-disable-next-line @typescript-eslint/no-explicit-any + [key: string]: any; + timestamp: string | number; +} + +interface ScoreDisplayProps { + scores: Score[]; + viewMode: "cards" | "table"; + sortField: string; + sortDirection: "asc" | "desc"; + onSort: (field: string) => void; +} + +const DancerushScoreDisplay: React.FC = ({ + scores, + viewMode, + sortField, + sortDirection, + onSort, +}) => { + // Key mappings for better display names. Hit or miss + const keyDisplayNames: Record = { + title: "Title", + artist: "Artist", + score: "Score", + difficulty: "Difficulty Number", + lamp: "Rank", + diff_lamp: "Chart Difficulty", + timestamp: "Date", + judgements: "Judgements", + maxCombo: "Max Combo", + perfect: "Perfect", + great: "Great", + good: "Good", + bad: "Bad", + miss: "Miss", + }; + + const skipKeys = [ + "id", + "internalname", + "internalName", + "gameInternalName", + "userId", + ]; + const primaryKeys = ["title", "artist", "song"]; + const mainStatKeys = [ + "score", + "difficulty", + "lamp", + "diff_lamp", + ]; + const expandableKeys = ["judgements", "optional"]; + // eslint-disable-next-line @typescript-eslint/no-explicit-any + const formatValue = (value: any, key: string): string => { + if (value === null || value === undefined) return "N/A"; + + // Handle timestamps + if (key === "timestamp" || key === "date") { + const date = new Date(typeof value === "number" ? value : value); + return date.toLocaleDateString(); + } + + if (typeof value === "number") { + if (key === "score" || key === "maxCombo" || key === "combo") { + return value.toLocaleString(); + } + return value.toString(); + } + + return String(value); + }; + + const getDisplayName = (key: string): string => { + return keyDisplayNames[key] || key.charAt(0).toUpperCase() + key.slice(1); + }; + + const renderValue = ( + // eslint-disable-next-line @typescript-eslint/no-explicit-any + value: any, + key: string, + compact: boolean = false, + ): React.ReactElement => { + if (value === null || value === undefined) + return N/A; + + // Handle judgements specially + if (key === "judgements" && typeof value === "object") { + const judgementEntries = Object.entries(value); + + if (compact) { + return ( +
+ {judgementEntries.map(([jKey, jValue]) => ( +
+ + {getDisplayName(jKey)}: + + {formatValue(jValue, jKey)} +
+ ))} +
+ ); + } + return ( +
+ {judgementEntries.map(([jKey, jValue]) => ( + + {getDisplayName(jKey)}:{" "} + {formatValue(jValue, jKey)} + + ))} +
+ ); + } + + if (typeof value === "object" && !Array.isArray(value)) { + return ( +
+ {Object.entries(value).map(([subKey, subValue]) => ( +
+ {getDisplayName(subKey)}: + + {formatValue(subValue, subKey)} + +
+ ))} +
+ ); + } + + if(key === "diff_lamp"){ + return + {value} + ; + } + + if(key === "lamp"){ + return { + (() => { + switch(value){ + case 1: + return "⭐️"; + case 2: + return "⭐️⭐️"; + case 3: + return "⭐️⭐️⭐️"; + case 4: + return "⭐️⭐️⭐️⭐️"; + case 5: + return "⭐️⭐️⭐️⭐️⭐️"; + default: + return value; + } + })() + }; + } + + return {formatValue(value, key)}; + }; + + const getScoreEntries = (score: Score) => { + const entries = Object.entries(score).filter( + ([key]) => !skipKeys.includes(key), + ); + + const primary = entries.filter(([key]) => primaryKeys.includes(key)); + const mainStats = entries.filter(([key]) => mainStatKeys.includes(key)); + const expandable = entries.filter(([key]) => expandableKeys.includes(key)); + const others = entries.filter( + ([key]) => + !primaryKeys.includes(key) && + !mainStatKeys.includes(key) && + !expandableKeys.includes(key) && + key !== "timestamp", + ); + + return { + primary, + mainStats, + expandable, + others, + timestamp: score.timestamp, + }; + }; + + const SortIcon = ({ field }: { field: string }) => { + if (sortField !== field) { + return ↕; + } + return sortDirection === "asc" ? ( + ↑ + ) : ( + ↓ + ); + }; + + const sortedScores = [...scores].sort((a, b) => { + const aVal = a[sortField]; + const bVal = b[sortField]; + + if (aVal === undefined || aVal === null) return 1; + if (bVal === undefined || bVal === null) return -1; + + let comparison = 0; + + if (typeof aVal === "string" && typeof bVal === "string") { + comparison = aVal.localeCompare(bVal); + } else if (typeof aVal === "number" && typeof bVal === "number") { + comparison = aVal - bVal; + } else if (aVal instanceof Date && bVal instanceof Date) { + comparison = aVal.getTime() - bVal.getTime(); + } else { + comparison = String(aVal).localeCompare(String(bVal)); + } + + return sortDirection === "asc" ? comparison : -comparison; + }); + + // Get all possible keys for table headers + const allKeys = Array.from( + new Set(scores.flatMap((score) => Object.keys(score))), + ).filter((key) => !skipKeys.includes(key)); + + // Prioritize important keys for table display + const tableKeys = [ + "title", + "song", + "artist", + "score", + "difficulty", + "lamp", + "diff_lamp", + "rating", + "percent", + "grade", + "judgements", + "maxCombo", + "combo", + "timestamp", + ].filter((key) => allKeys.includes(key)); + + if (scores.length === 0) { + return ( +
+
+ 🎵 +
+

+ No scores found +

+

Import some score data to get started!

+
+ ); + } + + if (viewMode === "cards") { + return ( +
+ {sortedScores.map((score, index) => { + // eslint-disable-next-line @typescript-eslint/no-unused-vars + const { primary, mainStats, expandable, others, timestamp } = + getScoreEntries(score); + + return ( +
+ {/* Primary Info */} +
+
+

+ {score.title || score.song || "Unknown Title"} +

+ {score.artist && ( +

+ {score.artist} +

+ )} +
+
+ + {/* Main Stats */} + {mainStats.length > 0 && ( +
+ {mainStats.slice(0, 4).map(([key, value]) => ( +
+

+ {getDisplayName(key)} +

+

+ {renderValue(value, key)} +

+
+ ))} +
+ )} + + {/* Expandable sections (judgements, optional) */} + {expandable.map(([key, value]) => ( +
+

+ {getDisplayName(key)} +

+ {renderValue(value, key)} +
+ ))} + + {/* Other fields */} + {others.length > 0 && ( +
+
+ {others.map(([key, value]) => ( +
+ + {getDisplayName(key)}: + + + {renderValue(value, key)} + +
+ ))} +
+
+ )} + + {/* Timestamp */} +
+

+ {new Date( + typeof timestamp === "number" ? timestamp : timestamp, + ).toLocaleDateString()}{" "} + •{" "} + {new Date( + typeof timestamp === "number" ? timestamp : timestamp, + ).toLocaleTimeString([], { + hour: "2-digit", + minute: "2-digit", + })} +

+
+
+ ); + })} +
+ ); + } + + // Table + return ( +
+
+ + + + {tableKeys.map((key) => ( + + ))} + + + + {sortedScores.map((score, index) => ( + + {tableKeys.map((key) => ( + + ))} + + ))} + +
+ {key === "judgements" ? ( + {getDisplayName(key)} + ) : ( + + )} +
+ {key === "lamp" || key === "diff_lamp" ? ( +
+ + {score[key] || "No Clear"} + +
+ ) : key === "judgements" ? ( +
+ {renderValue(score[key], key, true)} +
+ ) : key === "timestamp" ? ( + + {new Date( + typeof score[key] === "number" + ? score[key] + : score[key], + ).toLocaleDateString()} + + ) : ( + + {renderValue(score[key], key)} + + )} +
+
+
+ ); +}; + +export default DancerushScoreDisplay; diff --git a/frontend/src/components/displays/GenericScoreDisplay.tsx b/frontend/src/components/displays/GenericScoreDisplay.tsx new file mode 100644 index 0000000..3358f8d --- /dev/null +++ b/frontend/src/components/displays/GenericScoreDisplay.tsx @@ -0,0 +1,424 @@ +import React from "react"; + +interface Score { + // eslint-disable-next-line @typescript-eslint/no-explicit-any + [key: string]: any; + timestamp: string | number; +} + +interface ScoreDisplayProps { + scores: Score[]; + viewMode: "cards" | "table"; + sortField: string; + sortDirection: "asc" | "desc"; + onSort: (field: string) => void; +} + +const ScoreDisplay: React.FC = ({ + scores, + viewMode, + sortField, + sortDirection, + onSort, +}) => { + // Key mappings for better display names. Hit or miss + const keyDisplayNames: Record = { + title: "Title", + artist: "Artist", + score: "Score", + difficulty: "Difficulty", + lamp: "Lamp", + diff_lamp: "Lamp", + timestamp: "Date", + judgements: "Judgements", + maxCombo: "Max Combo", + perfect: "Perfect", + great: "Great", + good: "Good", + bad: "Bad", + miss: "Miss", + rating: "Rating", + percent: "Percent", + chart: "Chart", + song: "Song", + ranking: "Ranking", + combo: "Combo", + grade: "Grade", + level: "Level", + bpm: "BPM", + notes: "Notes", + duration: "Duration", + playcount: "Play Count", + date: "Date", + time: "Time", + }; + + const skipKeys = [ + "id", + "internalname", + "internalName", + "gameInternalName", + "userId", + ]; + const primaryKeys = ["title", "artist", "song"]; + const mainStatKeys = [ + "score", + "difficulty", + "lamp", + "diff_lamp", + "percent", + "rating", + "grade", + ]; + const expandableKeys = ["judgements", "optional"]; + // eslint-disable-next-line @typescript-eslint/no-explicit-any + const formatValue = (value: any, key: string): string => { + if (value === null || value === undefined) return "N/A"; + + // Handle timestamps + if (key === "timestamp" || key === "date") { + const date = new Date(typeof value === "number" ? value : value); + return date.toLocaleDateString(); + } + + if (typeof value === "number") { + if (key === "score" || key === "maxCombo" || key === "combo") { + return value.toLocaleString(); + } + return value.toString(); + } + if (typeof value === "boolean") { + return value ? "Yes" : "No"; + } + + if (Array.isArray(value)) { + return value.join(", "); + } + + return String(value); + }; + + const getDisplayName = (key: string): string => { + return keyDisplayNames[key] || key.charAt(0).toUpperCase() + key.slice(1); + }; + + const renderValue = ( + // eslint-disable-next-line @typescript-eslint/no-explicit-any + value: any, + key: string, + compact: boolean = false, + ): React.ReactElement => { + if (value === null || value === undefined) + return N/A; + + // Handle judgements specially + if (key === "judgements" && typeof value === "object") { + const judgementEntries = Object.entries(value); + + if (compact) { + return ( +
+ {judgementEntries.map(([jKey, jValue]) => ( +
+ + {getDisplayName(jKey)}: + + {formatValue(jValue, jKey)} +
+ ))} +
+ ); + } + + return ( +
+ {judgementEntries.map(([jKey, jValue]) => ( + + {getDisplayName(jKey)}:{" "} + {formatValue(jValue, jKey)} + + ))} +
+ ); + } + + if (typeof value === "object" && !Array.isArray(value)) { + return ( +
+ {Object.entries(value).map(([subKey, subValue]) => ( +
+ {getDisplayName(subKey)}: + + {formatValue(subValue, subKey)} + +
+ ))} +
+ ); + } + + return {formatValue(value, key)}; + }; + + const getScoreEntries = (score: Score) => { + const entries = Object.entries(score).filter( + ([key]) => !skipKeys.includes(key), + ); + + const primary = entries.filter(([key]) => primaryKeys.includes(key)); + const mainStats = entries.filter(([key]) => mainStatKeys.includes(key)); + const expandable = entries.filter(([key]) => expandableKeys.includes(key)); + const others = entries.filter( + ([key]) => + !primaryKeys.includes(key) && + !mainStatKeys.includes(key) && + !expandableKeys.includes(key) && + key !== "timestamp", + ); + + return { + primary, + mainStats, + expandable, + others, + timestamp: score.timestamp, + }; + }; + + const SortIcon = ({ field }: { field: string }) => { + if (sortField !== field) { + return ↕; + } + return sortDirection === "asc" ? ( + ↑ + ) : ( + ↓ + ); + }; + + const sortedScores = [...scores].sort((a, b) => { + const aVal = a[sortField]; + const bVal = b[sortField]; + + if (aVal === undefined || aVal === null) return 1; + if (bVal === undefined || bVal === null) return -1; + + let comparison = 0; + + if (typeof aVal === "string" && typeof bVal === "string") { + comparison = aVal.localeCompare(bVal); + } else if (typeof aVal === "number" && typeof bVal === "number") { + comparison = aVal - bVal; + } else if (aVal instanceof Date && bVal instanceof Date) { + comparison = aVal.getTime() - bVal.getTime(); + } else { + comparison = String(aVal).localeCompare(String(bVal)); + } + + return sortDirection === "asc" ? comparison : -comparison; + }); + + // Get all possible keys for table headers + const allKeys = Array.from( + new Set(scores.flatMap((score) => Object.keys(score))), + ).filter((key) => !skipKeys.includes(key)); + + // Prioritize important keys for table display + const tableKeys = [ + "title", + "song", + "artist", + "score", + "difficulty", + "lamp", + "diff_lamp", + "rating", + "percent", + "grade", + "judgements", + "maxCombo", + "combo", + "timestamp", + ].filter((key) => allKeys.includes(key)); + + if (scores.length === 0) { + return ( +
+
+ 🎵 +
+

+ No scores found +

+

Import some score data to get started!

+
+ ); + } + + if (viewMode === "cards") { + return ( +
+ {sortedScores.map((score, index) => { + // eslint-disable-next-line @typescript-eslint/no-unused-vars + const { primary, mainStats, expandable, others, timestamp } = + getScoreEntries(score); + + return ( +
+ {/* Primary Info */} +
+
+

+ {score.title || score.song || "Unknown Title"} +

+ {score.artist && ( +

+ {score.artist} +

+ )} +
+
+ + {/* Main Stats */} + {mainStats.length > 0 && ( +
+ {mainStats.slice(0, 4).map(([key, value]) => ( +
+

+ {getDisplayName(key)} +

+

+ {renderValue(value, key)} +

+
+ ))} +
+ )} + + {/* Expandable sections (judgements, optional) */} + {expandable.map(([key, value]) => ( +
+

+ {getDisplayName(key)} +

+ {renderValue(value, key)} +
+ ))} + + {/* Other fields */} + {others.length > 0 && ( +
+
+ {others.map(([key, value]) => ( +
+ + {getDisplayName(key)}: + + + {renderValue(value, key)} + +
+ ))} +
+
+ )} + + {/* Timestamp */} +
+

+ {new Date( + typeof timestamp === "number" ? timestamp : timestamp, + ).toLocaleDateString()}{" "} + •{" "} + {new Date( + typeof timestamp === "number" ? timestamp : timestamp, + ).toLocaleTimeString([], { + hour: "2-digit", + minute: "2-digit", + })} +

+
+
+ ); + })} +
+ ); + } + + return ( +
+
+ + + + {tableKeys.map((key) => ( + + ))} + + + + {sortedScores.map((score, index) => ( + + {tableKeys.map((key) => ( + + ))} + + ))} + +
+ {key === "judgements" ? ( + {getDisplayName(key)} + ) : ( + + )} +
+ {key === "lamp" || key === "diff_lamp" ? ( +
+ + {score[key] || "No Clear"} + +
+ ) : key === "judgements" ? ( +
+ {renderValue(score[key], key, true)} +
+ ) : key === "timestamp" ? ( + + {new Date( + typeof score[key] === "number" + ? score[key] + : score[key], + ).toLocaleDateString()} + + ) : ( + + {renderValue(score[key], key)} + + )} +
+
+
+ ); +}; + +export default ScoreDisplay; diff --git a/frontend/src/components/tables/GenericScoreTable.tsx b/frontend/src/components/tables/GenericScoreTable.tsx deleted file mode 100644 index 3358f8d..0000000 --- a/frontend/src/components/tables/GenericScoreTable.tsx +++ /dev/null @@ -1,424 +0,0 @@ -import React from "react"; - -interface Score { - // eslint-disable-next-line @typescript-eslint/no-explicit-any - [key: string]: any; - timestamp: string | number; -} - -interface ScoreDisplayProps { - scores: Score[]; - viewMode: "cards" | "table"; - sortField: string; - sortDirection: "asc" | "desc"; - onSort: (field: string) => void; -} - -const ScoreDisplay: React.FC = ({ - scores, - viewMode, - sortField, - sortDirection, - onSort, -}) => { - // Key mappings for better display names. Hit or miss - const keyDisplayNames: Record = { - title: "Title", - artist: "Artist", - score: "Score", - difficulty: "Difficulty", - lamp: "Lamp", - diff_lamp: "Lamp", - timestamp: "Date", - judgements: "Judgements", - maxCombo: "Max Combo", - perfect: "Perfect", - great: "Great", - good: "Good", - bad: "Bad", - miss: "Miss", - rating: "Rating", - percent: "Percent", - chart: "Chart", - song: "Song", - ranking: "Ranking", - combo: "Combo", - grade: "Grade", - level: "Level", - bpm: "BPM", - notes: "Notes", - duration: "Duration", - playcount: "Play Count", - date: "Date", - time: "Time", - }; - - const skipKeys = [ - "id", - "internalname", - "internalName", - "gameInternalName", - "userId", - ]; - const primaryKeys = ["title", "artist", "song"]; - const mainStatKeys = [ - "score", - "difficulty", - "lamp", - "diff_lamp", - "percent", - "rating", - "grade", - ]; - const expandableKeys = ["judgements", "optional"]; - // eslint-disable-next-line @typescript-eslint/no-explicit-any - const formatValue = (value: any, key: string): string => { - if (value === null || value === undefined) return "N/A"; - - // Handle timestamps - if (key === "timestamp" || key === "date") { - const date = new Date(typeof value === "number" ? value : value); - return date.toLocaleDateString(); - } - - if (typeof value === "number") { - if (key === "score" || key === "maxCombo" || key === "combo") { - return value.toLocaleString(); - } - return value.toString(); - } - if (typeof value === "boolean") { - return value ? "Yes" : "No"; - } - - if (Array.isArray(value)) { - return value.join(", "); - } - - return String(value); - }; - - const getDisplayName = (key: string): string => { - return keyDisplayNames[key] || key.charAt(0).toUpperCase() + key.slice(1); - }; - - const renderValue = ( - // eslint-disable-next-line @typescript-eslint/no-explicit-any - value: any, - key: string, - compact: boolean = false, - ): React.ReactElement => { - if (value === null || value === undefined) - return N/A; - - // Handle judgements specially - if (key === "judgements" && typeof value === "object") { - const judgementEntries = Object.entries(value); - - if (compact) { - return ( -
- {judgementEntries.map(([jKey, jValue]) => ( -
- - {getDisplayName(jKey)}: - - {formatValue(jValue, jKey)} -
- ))} -
- ); - } - - return ( -
- {judgementEntries.map(([jKey, jValue]) => ( - - {getDisplayName(jKey)}:{" "} - {formatValue(jValue, jKey)} - - ))} -
- ); - } - - if (typeof value === "object" && !Array.isArray(value)) { - return ( -
- {Object.entries(value).map(([subKey, subValue]) => ( -
- {getDisplayName(subKey)}: - - {formatValue(subValue, subKey)} - -
- ))} -
- ); - } - - return {formatValue(value, key)}; - }; - - const getScoreEntries = (score: Score) => { - const entries = Object.entries(score).filter( - ([key]) => !skipKeys.includes(key), - ); - - const primary = entries.filter(([key]) => primaryKeys.includes(key)); - const mainStats = entries.filter(([key]) => mainStatKeys.includes(key)); - const expandable = entries.filter(([key]) => expandableKeys.includes(key)); - const others = entries.filter( - ([key]) => - !primaryKeys.includes(key) && - !mainStatKeys.includes(key) && - !expandableKeys.includes(key) && - key !== "timestamp", - ); - - return { - primary, - mainStats, - expandable, - others, - timestamp: score.timestamp, - }; - }; - - const SortIcon = ({ field }: { field: string }) => { - if (sortField !== field) { - return ↕; - } - return sortDirection === "asc" ? ( - ↑ - ) : ( - ↓ - ); - }; - - const sortedScores = [...scores].sort((a, b) => { - const aVal = a[sortField]; - const bVal = b[sortField]; - - if (aVal === undefined || aVal === null) return 1; - if (bVal === undefined || bVal === null) return -1; - - let comparison = 0; - - if (typeof aVal === "string" && typeof bVal === "string") { - comparison = aVal.localeCompare(bVal); - } else if (typeof aVal === "number" && typeof bVal === "number") { - comparison = aVal - bVal; - } else if (aVal instanceof Date && bVal instanceof Date) { - comparison = aVal.getTime() - bVal.getTime(); - } else { - comparison = String(aVal).localeCompare(String(bVal)); - } - - return sortDirection === "asc" ? comparison : -comparison; - }); - - // Get all possible keys for table headers - const allKeys = Array.from( - new Set(scores.flatMap((score) => Object.keys(score))), - ).filter((key) => !skipKeys.includes(key)); - - // Prioritize important keys for table display - const tableKeys = [ - "title", - "song", - "artist", - "score", - "difficulty", - "lamp", - "diff_lamp", - "rating", - "percent", - "grade", - "judgements", - "maxCombo", - "combo", - "timestamp", - ].filter((key) => allKeys.includes(key)); - - if (scores.length === 0) { - return ( -
-
- 🎵 -
-

- No scores found -

-

Import some score data to get started!

-
- ); - } - - if (viewMode === "cards") { - return ( -
- {sortedScores.map((score, index) => { - // eslint-disable-next-line @typescript-eslint/no-unused-vars - const { primary, mainStats, expandable, others, timestamp } = - getScoreEntries(score); - - return ( -
- {/* Primary Info */} -
-
-

- {score.title || score.song || "Unknown Title"} -

- {score.artist && ( -

- {score.artist} -

- )} -
-
- - {/* Main Stats */} - {mainStats.length > 0 && ( -
- {mainStats.slice(0, 4).map(([key, value]) => ( -
-

- {getDisplayName(key)} -

-

- {renderValue(value, key)} -

-
- ))} -
- )} - - {/* Expandable sections (judgements, optional) */} - {expandable.map(([key, value]) => ( -
-

- {getDisplayName(key)} -

- {renderValue(value, key)} -
- ))} - - {/* Other fields */} - {others.length > 0 && ( -
-
- {others.map(([key, value]) => ( -
- - {getDisplayName(key)}: - - - {renderValue(value, key)} - -
- ))} -
-
- )} - - {/* Timestamp */} -
-

- {new Date( - typeof timestamp === "number" ? timestamp : timestamp, - ).toLocaleDateString()}{" "} - •{" "} - {new Date( - typeof timestamp === "number" ? timestamp : timestamp, - ).toLocaleTimeString([], { - hour: "2-digit", - minute: "2-digit", - })} -

-
-
- ); - })} -
- ); - } - - return ( -
-
- - - - {tableKeys.map((key) => ( - - ))} - - - - {sortedScores.map((score, index) => ( - - {tableKeys.map((key) => ( - - ))} - - ))} - -
- {key === "judgements" ? ( - {getDisplayName(key)} - ) : ( - - )} -
- {key === "lamp" || key === "diff_lamp" ? ( -
- - {score[key] || "No Clear"} - -
- ) : key === "judgements" ? ( -
- {renderValue(score[key], key, true)} -
- ) : key === "timestamp" ? ( - - {new Date( - typeof score[key] === "number" - ? score[key] - : score[key], - ).toLocaleDateString()} - - ) : ( - - {renderValue(score[key], key)} - - )} -
-
-
- ); -}; - -export default ScoreDisplay; diff --git a/frontend/src/pages/Score.tsx b/frontend/src/pages/Score.tsx index a39ce25..8e16a86 100644 --- a/frontend/src/pages/Score.tsx +++ b/frontend/src/pages/Score.tsx @@ -3,8 +3,9 @@ import { useAuth } from "../contexts/AuthContext"; import { useNavigate } from "react-router"; import { NavBar } from "../components/NavBar"; import SessionExpiredPopup from "../components/SessionExpiredPopup"; -import ScoreDisplay from "../components/tables/GenericScoreTable"; - +import ScoreDisplay from "../components/displays/GenericScoreDisplay"; +import DancerushScoreDisplay from "../components/displays/DancerushScoreDisplay"; +// TODO: selector for PB/Recent type SortField = string; type SortDirection = "asc" | "desc"; @@ -17,8 +18,8 @@ const Score = () => { const [currentPage, setCurrentPage] = useState(1); const [numPages, setNumPages] = useState(1); const [viewMode, setViewMode] = useState<"cards" | "table">("cards"); - const [sortField, setSortField] = useState("timestamp"); - const [sortDirection, setSortDirection] = useState("desc"); + const [sortField, setSortField] = useState(""); + const [sortDirection, setSortDirection] = useState("asc"); const gameName = new URLSearchParams(window.location.search).get("game") || "dancerush"; @@ -50,6 +51,8 @@ const Score = () => { url.searchParams.append("userId", user.id); url.searchParams.append("internalGameName", gameName); url.searchParams.append("pageNum", pageNum.toString()); + url.searchParams.append("sortKey", 'timestamp'); + url.searchParams.append("direction", "asc"); const response = await fetch(url.toString()); if (!response.ok) throw new Error("Failed to fetch scores"); @@ -134,7 +137,17 @@ const Score = () => { {(() => { - switch (viewMode) { + switch (gameName) { + case "dancerush": + return ( + + ); default: return (