diff options
Diffstat (limited to 'frontend/src/components/tables')
| -rw-r--r-- | frontend/src/components/tables/GenericScoreTable.tsx | 424 |
1 files changed, 0 insertions, 424 deletions
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<ScoreDisplayProps> = ({ - scores, - viewMode, - sortField, - sortDirection, - onSort, -}) => { - // Key mappings for better display names. Hit or miss - const keyDisplayNames: Record<string, string> = { - 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 <span className="text-slate-500">N/A</span>; - - // Handle judgements specially - if (key === "judgements" && typeof value === "object") { - const judgementEntries = Object.entries(value); - - if (compact) { - return ( - <div className="text-xs text-slate-300 space-y-1"> - {judgementEntries.map(([jKey, jValue]) => ( - <div key={jKey} className="flex justify-between"> - <span className="text-slate-400 capitalize"> - {getDisplayName(jKey)}: - </span> - <span className="font-medium">{formatValue(jValue, jKey)}</span> - </div> - ))} - </div> - ); - } - - return ( - <div className="flex flex-wrap gap-1 text-xs"> - {judgementEntries.map(([jKey, jValue]) => ( - <span - key={jKey} - className="bg-slate-700/50 text-slate-200 px-2 py-1 rounded-full border border-slate-600" - > - <span className="capitalize">{getDisplayName(jKey)}</span>:{" "} - {formatValue(jValue, jKey)} - </span> - ))} - </div> - ); - } - - if (typeof value === "object" && !Array.isArray(value)) { - return ( - <div className="space-y-1"> - {Object.entries(value).map(([subKey, subValue]) => ( - <div key={subKey} className="flex justify-between text-xs"> - <span className="text-slate-400">{getDisplayName(subKey)}:</span> - <span className="font-medium"> - {formatValue(subValue, subKey)} - </span> - </div> - ))} - </div> - ); - } - - return <span>{formatValue(value, key)}</span>; - }; - - 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 <span className="text-slate-500">↕</span>; - } - return sortDirection === "asc" ? ( - <span className="text-violet-400">↑</span> - ) : ( - <span className="text-violet-400">↓</span> - ); - }; - - 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 ( - <div className="text-center py-16"> - <div className="w-24 h-24 bg-slate-800 rounded-full flex items-center justify-center mx-auto mb-6"> - <span className="text-slate-400 text-2xl">🎵</span> - </div> - <h3 className="text-xl font-semibold text-slate-300 mb-2"> - No scores found - </h3> - <p className="text-slate-500">Import some score data to get started!</p> - </div> - ); - } - - if (viewMode === "cards") { - return ( - <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3 gap-6"> - {sortedScores.map((score, index) => { - // eslint-disable-next-line @typescript-eslint/no-unused-vars - const { primary, mainStats, expandable, others, timestamp } = - getScoreEntries(score); - - return ( - <div - key={score.id || index} - className="bg-slate-900/50 backdrop-blur-sm border border-slate-800/50 rounded-xl p-6 hover:border-violet-500/30 transition-all duration-300 hover:shadow-lg hover:shadow-violet-500/10" - > - {/* Primary Info */} - <div className="flex items-start justify-between mb-4"> - <div className="flex-1 min-w-0"> - <h3 className="text-lg font-semibold text-white mb-1 break-words leading-tight"> - {score.title || score.song || "Unknown Title"} - </h3> - {score.artist && ( - <p className="text-slate-400 text-sm break-words leading-tight"> - {score.artist} - </p> - )} - </div> - </div> - - {/* Main Stats */} - {mainStats.length > 0 && ( - <div className="grid grid-cols-2 gap-4 mb-4"> - {mainStats.slice(0, 4).map(([key, value]) => ( - <div key={key} className="bg-slate-800/50 rounded-lg p-3"> - <p className="text-slate-400 text-xs uppercase tracking-wide mb-1"> - {getDisplayName(key)} - </p> - <p className="text-white font-semibold text-lg"> - {renderValue(value, key)} - </p> - </div> - ))} - </div> - )} - - {/* Expandable sections (judgements, optional) */} - {expandable.map(([key, value]) => ( - <div key={key} className="mb-4"> - <p className="text-slate-400 text-xs uppercase tracking-wide mb-2"> - {getDisplayName(key)} - </p> - {renderValue(value, key)} - </div> - ))} - - {/* Other fields */} - {others.length > 0 && ( - <div className="mb-4"> - <div className="grid grid-cols-2 gap-2 text-sm"> - {others.map(([key, value]) => ( - <div key={key} className="flex justify-between"> - <span className="text-slate-400"> - {getDisplayName(key)}: - </span> - <span className="text-white font-medium"> - {renderValue(value, key)} - </span> - </div> - ))} - </div> - </div> - )} - - {/* Timestamp */} - <div className="pt-4 border-t border-slate-800/50"> - <p className="text-slate-500 text-xs"> - {new Date( - typeof timestamp === "number" ? timestamp : timestamp, - ).toLocaleDateString()}{" "} - •{" "} - {new Date( - typeof timestamp === "number" ? timestamp : timestamp, - ).toLocaleTimeString([], { - hour: "2-digit", - minute: "2-digit", - })} - </p> - </div> - </div> - ); - })} - </div> - ); - } - - return ( - <div className="bg-slate-900/50 backdrop-blur-sm border border-slate-800/50 rounded-xl overflow-hidden"> - <div className="overflow-x-auto"> - <table className="w-full text-sm min-w-[1000px]"> - <thead className="bg-slate-800/50 border-b border-slate-700/50"> - <tr> - {tableKeys.map((key) => ( - <th - key={key} - className="px-4 py-3 text-left text-slate-300 font-medium" - > - {key === "judgements" ? ( - <span>{getDisplayName(key)}</span> - ) : ( - <button - onClick={() => onSort(key)} - className="flex items-center space-x-2 hover:text-white transition-colors" - > - <span>{getDisplayName(key)}</span> - <SortIcon field={key} /> - </button> - )} - </th> - ))} - </tr> - </thead> - <tbody className="divide-y divide-slate-800/50"> - {sortedScores.map((score, index) => ( - <tr - key={score.id || index} - className="hover:bg-slate-800/30 transition-colors" - > - {tableKeys.map((key) => ( - <td key={key} className="px-4 py-3"> - {key === "lamp" || key === "diff_lamp" ? ( - <div className="flex items-center space-x-2"> - <span className="inline-block bg-slate-800/50 text-slate-200 px-2 py-1 rounded text-xs border border-slate-600"> - {score[key] || "No Clear"} - </span> - </div> - ) : key === "judgements" ? ( - <div className="w-32"> - {renderValue(score[key], key, true)} - </div> - ) : key === "timestamp" ? ( - <span className="text-slate-400 text-xs"> - {new Date( - typeof score[key] === "number" - ? score[key] - : score[key], - ).toLocaleDateString()} - </span> - ) : ( - <span - className={`${key === "title" || key === "song" ? "text-white font-medium" : key === "score" ? "text-white font-medium" : "text-slate-300"}`} - > - {renderValue(score[key], key)} - </span> - )} - </td> - ))} - </tr> - ))} - </tbody> - </table> - </div> - </div> - ); -}; - -export default ScoreDisplay; |