From 95d1fdd32712721ce065780d4be44ea8f6b6db59 Mon Sep 17 00:00:00 2001 From: Pinapelz Date: Fri, 26 Sep 2025 00:51:22 -0700 Subject: [PATCH] implement dancearound custom score view --- backend/src/routes/score.ts | 54 +- .../assets/games/dancearound/grade_clear.webp | Bin 0 -> 1162 bytes .../games/dancearound/grade_excellent.webp | Bin 0 -> 1496 bytes .../games/dancearound/grade_failed.webp | Bin 0 -> 1096 bytes .../games/dancearound/grade_fullcombo.webp | Bin 0 -> 1364 bytes .../displays/DancearoundScoreDisplay.tsx | 473 ++++++++++++++++++ .../displays/GenericScoreDisplay.tsx | 2 +- frontend/src/pages/Chart.tsx | 16 +- frontend/src/pages/Score.tsx | 12 + 9 files changed, 534 insertions(+), 23 deletions(-) create mode 100644 frontend/src/assets/games/dancearound/grade_clear.webp create mode 100644 frontend/src/assets/games/dancearound/grade_excellent.webp create mode 100644 frontend/src/assets/games/dancearound/grade_failed.webp create mode 100644 frontend/src/assets/games/dancearound/grade_fullcombo.webp create mode 100644 frontend/src/components/displays/DancearoundScoreDisplay.tsx diff --git a/backend/src/routes/score.ts b/backend/src/routes/score.ts index 1f6bdf6..a652b93 100644 --- a/backend/src/routes/score.ts +++ b/backend/src/routes/score.ts @@ -375,13 +375,15 @@ export const handleGetScoresByChartId = async ( ) => { try { const { chartId } = req.params; - const { sortKey, direction, pageNum, pbOnly } = req.query; + const { sortKey, direction, pageNum, pbOnly, game } = req.query; const chartIdString = chartId as string; const pageNumber = parseInt(pageNum as string); const sortKeyString = (sortKey as string) || "timestamp"; const directionString = (direction as string)?.toLowerCase() === "asc" ? "asc" : "desc"; const pbOnlyFlag = pbOnly === "true"; + const gameInternalName = game as string; + if ( directionString && directionString !== "asc" && @@ -400,20 +402,22 @@ export const handleGetScoresByChartId = async ( SELECT DISTINCT ON (s."userId") s.*, u.username FROM "Score" s JOIN "User" u ON s."userId" = u.id - WHERE s."chartId" = $1 + WHERE s."chartId" = $1 AND s."gameInternalName" = $2 ORDER BY s."userId", s."timestamp" ${directionString.toUpperCase()} - OFFSET $2 - LIMIT $3 + OFFSET $3 + LIMIT $4 `, chartIdString, + gameInternalName, (pageNumber - 1) * PAGE_SIZE, PAGE_SIZE, ); } else { // Check if we need grade-based sorting by sampling one score const sampleScore = await prisma.$queryRawUnsafe( - `SELECT s.data->>'${sortKeyString}' as value FROM "Score" s WHERE s."chartId" = $1 AND s.data->>'${sortKeyString}' IS NOT NULL LIMIT 1`, - chartIdString + `SELECT s.data->>'${sortKeyString}' as value FROM "Score" s WHERE s."chartId" = $1 AND s."gameInternalName" = $2 AND s.data->>'${sortKeyString}' IS NOT NULL LIMIT 1`, + chartIdString, + gameInternalName ); const isGradeSort = sampleScore.length > 0 && @@ -426,12 +430,13 @@ export const handleGetScoresByChartId = async ( SELECT DISTINCT ON (s."userId") s.*, u.username FROM "Score" s JOIN "User" u ON s."userId" = u.id - WHERE s."chartId" = $1 + WHERE s."chartId" = $1 AND s."gameInternalName" = $2 ORDER BY s."userId", ${createGradeCaseStatement(sortKeyString, directionString)} - OFFSET $2 - LIMIT $3 + OFFSET $3 + LIMIT $4 `, chartIdString, + gameInternalName, (pageNumber - 1) * PAGE_SIZE, PAGE_SIZE, ); @@ -441,12 +446,13 @@ export const handleGetScoresByChartId = async ( SELECT DISTINCT ON (s."userId") s.*, u.username FROM "Score" s JOIN "User" u ON s."userId" = u.id - WHERE s."chartId" = $1 + WHERE s."chartId" = $1 AND s."gameInternalName" = $2 ORDER BY s."userId", (s.data->>'${sortKeyString}')::numeric ${directionString.toUpperCase()} - OFFSET $2 - LIMIT $3 + OFFSET $3 + LIMIT $4 `, chartIdString, + gameInternalName, (pageNumber - 1) * PAGE_SIZE, PAGE_SIZE, ); @@ -458,15 +464,17 @@ export const handleGetScoresByChartId = async ( ` SELECT COUNT(DISTINCT "userId") as count FROM "Score" - WHERE "chartId" = $1 + WHERE "chartId" = $1 AND "gameInternalName" = $2 `, chartIdString, + gameInternalName, ); totalScores = Number(userCountResult[0]?.count || 0); } else { totalScores = await prisma.score.count({ where: { chartId: chartIdString, + gameInternalName: gameInternalName, }, }); @@ -474,6 +482,7 @@ export const handleGetScoresByChartId = async ( scores = await prisma.score.findMany({ where: { chartId: chartIdString, + gameInternalName: gameInternalName, }, include: { user: { @@ -491,8 +500,9 @@ export const handleGetScoresByChartId = async ( } else { // Check if we need grade-based sorting by sampling one score const sampleScore = await prisma.$queryRawUnsafe( - `SELECT s.data->>'${sortKeyString}' as value FROM "Score" s WHERE s."chartId" = $1 AND s.data->>'${sortKeyString}' IS NOT NULL LIMIT 1`, - chartIdString + `SELECT s.data->>'${sortKeyString}' as value FROM "Score" s WHERE s."chartId" = $1 AND s."gameInternalName" = $2 AND s.data->>'${sortKeyString}' IS NOT NULL LIMIT 1`, + chartIdString, + gameInternalName ); const isGradeSort = sampleScore.length > 0 && @@ -504,12 +514,13 @@ export const handleGetScoresByChartId = async ( ` SELECT s.*, u.username FROM "Score" s JOIN "User" u ON s."userId" = u.id - WHERE s."chartId" = $1 + WHERE s."chartId" = $1 AND s."gameInternalName" = $2 ORDER BY ${createGradeCaseStatement(sortKeyString, directionString)} - OFFSET $2 - LIMIT $3 + OFFSET $3 + LIMIT $4 `, chartIdString, + gameInternalName, (pageNumber - 1) * PAGE_SIZE, PAGE_SIZE, ); @@ -519,12 +530,13 @@ export const handleGetScoresByChartId = async ( ` SELECT s.*, u.username FROM "Score" s JOIN "User" u ON s."userId" = u.id - WHERE s."chartId" = $1 + WHERE s."chartId" = $1 AND s."gameInternalName" = $2 ORDER BY (s.data->>'${sortKeyString}')::numeric ${directionString.toUpperCase()} - OFFSET $2 - LIMIT $3 + OFFSET $3 + LIMIT $4 `, chartIdString, + gameInternalName, (pageNumber - 1) * PAGE_SIZE, PAGE_SIZE, ); diff --git a/frontend/src/assets/games/dancearound/grade_clear.webp b/frontend/src/assets/games/dancearound/grade_clear.webp new file mode 100644 index 0000000000000000000000000000000000000000..ada2388851208ef262fe7bd0b339901fa418ce18 GIT binary patch literal 1162 zcmV;51aRWtE$t>#Me*bHkFY04uR_1r2CRief#8kvzId|CftLw7 z7shy56sn3&Z(>B}(h?@dUWrfz$XCMu|29L?0W2vk!wV#|Ya&FNR^F_4i`&hwk!Yu{{1#@s*HqJCd|?GMC1jW_W$MrY%OA8of8Z;{%%`3z|okW zq;n{U#XPqhW9T@p_(yg0x35?uSVX)e9>&gFh3>7yJVT~J(J>2Ev$3Jx^Y&c8EOOyD zhY;$w@Vg~cVXf8zCWPs~Vml_~(kiQ$=mnq_W731zpr)9j*ZDx9igV|l7@AjTpyo+_ zfipt7M&fEor3HdtoLQbPNd3R#p_jeG|CUGIp0-ISQSDDrEWF2~raFd?%k^G#uI*ZX z&I9sOxy7Ah{IQ;Olk#770PRy#PFUZ}mgzdD{M2FpgooVPe}huOi~ST8dWwi!GBfm~w_gDdM~iPY(ir2c@ow*2k_LiHcg&&RKqG*8`C|SuTP~LKI1E*P}ztJS5wimE4j^ISy|JACgsk z!IT@iJfsNUQKL^NK`;=OXt@*HNugSIOqWucJ^h5}(SCTX`;kv7INraOa^Ljl-+BpL zmI^@&M#n z(pFVE0xa@EcgM?SJ=wf@jHXI=K2rBn@$Dw)IQbJQl^c0i>hNh_91xq^3(O~Y@>Yz) zf)yBNzi`_##bW56bEuB@%oa#xOg;$P)bt5>*QL7;mBQDQ zlNu5)mqt?1VlGq(ijzkke^39{(ThLmqHYE2b)-IWzh`!cbk4_vJ(@7d{PH|+%wPHg z#ZVt2XQq#Jal!W^b~_Pd|67;cHg&LVB2w0Qm%t{07VrLS9~=TbT<|~E63+`;{J`iM zmo}Z%aqnmLm(Q%$i|I7YxPR|%cY+{N6^Zk`HHEv{lVRpfwWj5O>5$$lyLegk8yTQs cx@)klhr{eH%>K>O&jk#9@KvQtf&c&j04BmR?f?J) literal 0 HcmV?d00001 diff --git a/frontend/src/assets/games/dancearound/grade_excellent.webp b/frontend/src/assets/games/dancearound/grade_excellent.webp new file mode 100644 index 0000000000000000000000000000000000000000..cae0309c3af39af0169f132c156bee9bf68cd63f GIT binary patch literal 1496 zcmV;}1tD^`nDU=;xHEKqtbjW0>Y`;k=qLXs>{dhV}ylhpD`$q_uO7Q&Ja z09H^qAO-~h08kYGodGIF05||XkwBJ5rKBPuE_mypuo4Mm0L^>PyrI`egKkaRHuKE- zZf^b89{$`gSAJi8DT5}j68vp<(0GqP#&Ld|_5}TB>p$qt`s9oqStbsJjc(ara>KZN zM`a4fLOyBY0~}gMci7xcVi9QJ|B{`BYYO1^)D1U|@N;a#;1(KtN5x!(wQ(|(W^n}` zK?UPxGI?Ya8QY(YB=TeMe)lf~$`dUA$s$h`;=Eo!0RH~=UHz>{KHqFye!v;oH@h$1 zE;~Nxm4GF9k8=%1PjZJOr*2v*lBo`}ce)J96xgG@Xzuct>)SbfApJLKvLwj6?FsPl z$x>a^TvUkeYMP6d)3HdiI=(7oD1uuj}=(lMfey z7wI0d{*k{oSBT3Neds&*(TBW3R_Xbtja-!+bH|gaV&_ztHW}!kk?+4=T%7WY44_U# zJ=SksI|;u54aok)s^IR5{I*?TnwG~Pz=Tv{mMd? zxV)!4h4zgsQ4G5WJAd;(yQacJw%F=cyX7nSN3s*b-p-{wqt1GGxkjp&ct8Y<*4nKp zb(O*xmQVNq&xmA${c^8U#UTwF>$qw=hY7j;Z4dv}a+p}jBhVEpTrx`0&@z2xuJQ)s z`MJ#h7DsYNr8Zg*H`p^25*cmyk#CVZ`GM5ngYih*{kzO zmfXAWlU6LCC3Ul^2*9l$FFTSm{AVg4^j6+I%_8-w15O(69nF+|$i@QkwL|XI<%Hug zsuQH#NpuQKro@#nxVQ(@%6ms2-5llQI{}fY72Ntg@>v8U`&hWK=WRt zxhnz(-avR-^N7RdbxUH??bV4Ue?XWiBns|~@@}C43MUMMF;>tf6ipX)k|TF^8Z+nW zk98c(gKwsf6QK|vAqZ7XPcF5U28f&g(bU&}5B9!?dzSB+pWRfx_h^wJPd$Y={fn9A z0i+yD0n%q~t5V$Z60ar|AvBchfbo{mCBFP=ZvsP!n@x^qyqAx!_iqdG%td5lbN`nV z8%c5*mAjhdF;R}3Ym>J>{)1$THe-ecOk0qE+th%)$Q{0WMa)#hOr<&4=U|6%Rl4Pn z;W1cT=LPf+NOBV+&^F`G04d_yBS}#KR?llqH!a(yk1vCX+8m=bJvAfLnj=jW%4SX+ z75X{&!Q$C0`;AB^OnPzmEV3RGJMhm_Lt%{91cN(#{9I)O-zIx#?h4doh|Je+y+&l? zDJ##hubn;S%_!W>myH=D=Xjt0{74b!4oQ2+mbP=<9f_7#95yUTDA13j)vPp2V#V*+ zRWSIy+BRWQT9}yOHs)hDYNNOI6@!f!cUig0%=fsNJQ63Y0HKhMb6U#oae6P41n0*F z<-AkO=F3<#kG*h);iPiF?JxZavBxtTb`bGuVQnL&mL7Pkm~Y|UqBT*xmu=G}NdC}P yI&PliF+)nizql?terXq?T91y&fB(TvJtDriIYa;6Tppk??eYxZ>tb~_0000WCe(KT literal 0 HcmV?d00001 diff --git a/frontend/src/assets/games/dancearound/grade_failed.webp b/frontend/src/assets/games/dancearound/grade_failed.webp new file mode 100644 index 0000000000000000000000000000000000000000..c10fa89d2d0c8bd95fa744a9b8a65871ebe497da GIT binary patch literal 1096 zcmV-O1h@NANk&FM1ONb6MM6+kP&il$0000I0000*001`t06|VkO$Gn}0RR90{{a9& zPEAG>1ONa90003105AXmGXMYp0006(Oi)OV000014>11`5duI;VYfFBj6>*JQfju-Ntk1H%Mwk7N(s?MDPD)e8rjsN z02k^KX-m3`sXm}-0vNK^2mk<9P&goD0{{S!5dfV5Dlq^w06vjCm`Nq0A|WgqshF@5 z326+l5Anb^KstbUPvYa-l5uK30XOHBW7fRL<0HN-zhCirP5L|7FZqY|j;@}BAFM{P z%l;lr*o_ch#j|t`%jp?4Nnc>gpoQ`Ih>|LN$pF0?7M_8!hTo|tx#Sm)$kEt~jZQ|u zcRPlm&bi~A`3+*?GLTWxIE4rdXPS{gW)V|N^guJmAguPrAOLw&Rs-!)6hFWlqM zbfT@N)(XWp5AdYLfBt0|_#;zb;~uq<5m(P&Ynj{pb77Tme4EO8tSnd*>GvyDeY$kZ zTzAQGn5`;ZMcR3>RENTnv_fleGxNWtC^E%`+rCK=x|sbjlo1VnFtC-B=BpwM8w?=@$aEl3u7wY%l?(bZqRnBWmWTt zIQ!%j73i*YCG?99F)axVl_s`6O_yWQ9c6ggObpi^dpsH+{`pUI(_%UsL@(5ENO zP*IvW;xPx?cZ$w6$abt2cV~a3AuqD$1pXlQ5&#tCmgGLrQg4vD=X+~a{^bK>Na(ID z_v93v$2N_QdVh&km8Fbt!1FN`zC3^o*K-0x@LYfYXqYiId2&-c|Hb{AVE*?O*`)|~ Om!Ye^18ubO0002@#rW(1 literal 0 HcmV?d00001 diff --git a/frontend/src/assets/games/dancearound/grade_fullcombo.webp b/frontend/src/assets/games/dancearound/grade_fullcombo.webp new file mode 100644 index 0000000000000000000000000000000000000000..5822f7a146323bc2f4e5043098c33b668426ac00 GIT binary patch literal 1364 zcmV-a1*`f}Nk&FY1pok7MM6+kP&il$0000G0000*001`t06|PpNQwXe009p${}BYNB4d7?yliP&go*1ONa~6#$(9Dn!fRqdHQva6FW_LDwM z5A=QvKhb(8qzY*sKt8PY1?fNN*ZSO%-(LCVL1bPGutzJOpm$!(auFEWt5DS+ z@s(%G7d%d^RVf)8((Zhs8I!K+A=~O|%`d$CyD8VFlpSgb7?P4g*@*%pKs=C8MYj>Xi-m@?j*_hNEUx*@?on$ZI!@MOV;(N_pPMf zfgZmph;4PCf3?0hicdngPj{=ctGFrBwO&sB7F+(0q~qTT#!5eZ+*Kf7eIU&2RRUnL zqoB=y@zalQFW3`emlc`QCkp;5ukRUDIHE=t*Tt=VNMZ6P(a`&EWxbraAYDF+6$P9o z|BexBnI=9)zgI^xd{j#Dr1So@J>f3?S7X(l|JJlC^#x<_O$bSG(X-h7^csRR?_Wy> z>#u#JeskH)aXj*J*>~s(&zr!vziA3eV?uLYTPRWyeAEFKA}Le2oCt6Z9LooT?#0Il zTXaE;r~oe9R4QELQZL$fS1us?okijr{T@5WctTF+*FW&TDg8>xF>@7Zak{aaN$U-0oJ}=OLQf$g$)?0HO%z z)PMz8H!g}Vj#&NwH@Q{%BmVk5qt(U)&B>s4{KGx<>b%SO;RZl{x*B2`5N%mo>fiHQ zl~|3TgH0=pDs0aw^?1^l8|i({u!)^=M4`L&n|It3&^ug6e*VPKo=dC$^t$e0qkxeQ zkyjYv4Z5e_Mtr$4FbE--n$-pvRjMb-=z(74_20q+X*K|azp>6)N7@--23|OOUIt?v z-(BOM;7gy{tK=3A3d5nd+Dkafk91R3ErBzy3f?bX0tu3fLgVTwS*0_W5NhS;T7`Q_Y8@&ER#Jbe)?QS|H>U-9Kgx)rjrjzm_b|04DA?><@=BxP W{OVE`VB3kY*jU&)iB`#g0001xxtzoR literal 0 HcmV?d00001 diff --git a/frontend/src/components/displays/DancearoundScoreDisplay.tsx b/frontend/src/components/displays/DancearoundScoreDisplay.tsx new file mode 100644 index 0000000..26a54fa --- /dev/null +++ b/frontend/src/components/displays/DancearoundScoreDisplay.tsx @@ -0,0 +1,473 @@ +import React from "react"; +import {Link} from "react-router"; +import { globalSkipKeys } from "../../types/constants"; +import lampExcellent from "../../assets/games/dancearound/grade_excellent.webp"; +import lampFullcombo from "../../assets/games/dancearound/grade_fullcombo.webp"; +import lampClear from "../../assets/games/dancearound/grade_clear.webp"; +import lampFailure from "../../assets/games/dancearound/grade_failed.webp"; +import SHA1 from "crypto-js/sha1"; + +interface Score { + // eslint-disable-next-line @typescript-eslint/no-explicit-any + [key: string]: any; + timestamp: string | number; + username?: string; +} + +interface ScoreDisplayProps { + scores: Score[]; + viewMode: "cards" | "table"; + sortField: string; + sortDirection: "asc" | "desc"; + onSort: (field: string) => void; + onDelete?: (scoreId: number) => void; + showUsername?: boolean; + hideTitleArtist?: boolean; +} + +const DancearoundScoreDisplay: React.FC = ({ + scores, + viewMode, + sortField, + sortDirection, + onSort, + onDelete, + showUsername = false, + hideTitleArtist = false, +}) => { + // Key mappings for better display names. Hit or miss + const keyDisplayNames: Record = { + title: "Title", + artist: "Artist", + score: "Score", + difficulty: "Difficulty Level", + lamp: "Rank", + diff_lamp: "Chart Difficulty", + timestamp: "Date", + judgements: "Judgements", + maxCombo: "Max Combo", + perfect: "Perfect", + great: "Great", + good: "Good", + bad: "Bad", + miss: "Miss", + username: "Username", + clear_status: "Status" + }; + + const primaryKeys = ["title", "artist", "song"]; + const mainStatKeys = [ + "score", + "difficulty", + "lamp", + "diff_lamp", + ]; + const expandableKeys = ["judgements", "optional"]; + const localSkipKeys = ["num_players"] + // 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; + + if (key === "clear_status") { + let lampImg; + if (value === "EXC") { + lampImg = lampExcellent; + } else if (value === "FULL COMBO" ) { + lampImg = lampFullcombo; + } else if (value === "PASSED") { + lampImg = lampClear; + } else if (value === "FAILURE") { + lampImg = lampFailure; + } + return ( +
+ {lampImg ? ( + {`${value} + ) : ( + + {formatValue(value, key)} + + )} +
+ ); + } + + // 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]) => !globalSkipKeys.includes(key) && !localSkipKeys.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) => !globalSkipKeys.includes(key) && !localSkipKeys.includes(key)); + + // Prioritize important keys for table display + const tableKeys = [ + ...(hideTitleArtist ? [] : ["title", "song", "artist"]), + ...(showUsername ? ["username"] : []), + "score", + "difficulty", + "lamp", + "diff_lamp", + "clear_status", + "rating", + "percent", + "grade", + "judgements", + "maxCombo", + "combo", + "timestamp", + ].filter((key) => allKeys.includes(key)); + + // Add actions column if delete function is provided + const showActions = onDelete && viewMode === "table"; + + 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); + const chartIdHash = SHA1(`dancearound${score.title}${score.artist}`).toString(); + return ( +
+ {/* Primary Info */} +
+
+ {!hideTitleArtist && ( + +

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

+ {score.artist && ( +

+ {score.artist} +

+ )} + + )} + {showUsername && score.username && ( +

+ by {score.username} +

+ )} +
+
+ + {/* Main Stats */} + {mainStats.length > 0 && ( +
+ {mainStats.slice(0, 5).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) => ( + + ))} + {showActions && ( + + )} + + + + {sortedScores.map((score, index) => ( + + {tableKeys.map((key) => ( + + ))} + {showActions && ( + + )} + + ))} + +
+ {key === "judgements" ? ( + {getDisplayName(key)} + ) : ( + + )} + + Actions +
+ {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()} + + ) : key === "username" ? ( + + {score[key] || "Unknown"} + + ) : ( + + {renderValue(score[key], key)} + + )} + 		+ +
+
+
+ ); +}; + +export default DancearoundScoreDisplay; diff --git a/frontend/src/components/displays/GenericScoreDisplay.tsx b/frontend/src/components/displays/GenericScoreDisplay.tsx index 003f022..05d9f1e 100644 --- a/frontend/src/components/displays/GenericScoreDisplay.tsx +++ b/frontend/src/components/displays/GenericScoreDisplay.tsx @@ -285,7 +285,7 @@ const ScoreDisplay: React.FC = ({
{!hideTitleArtist && ( - +

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

diff --git a/frontend/src/pages/Chart.tsx b/frontend/src/pages/Chart.tsx index 19f57cc..757cbbb 100644 --- a/frontend/src/pages/Chart.tsx +++ b/frontend/src/pages/Chart.tsx @@ -10,6 +10,7 @@ type SortField = string; type SortDirection = "asc" | "desc"; import { getFilterOptions } from "../types/constants"; +import DancearoundScoreDisplay from "../components/displays/DancearoundScoreDisplay"; const Chart = () => { const { user, isLoading, logout } = useAuth(); @@ -82,6 +83,7 @@ const Chart = () => { url.searchParams.append("sortKey", requestOrder); url.searchParams.append("direction", "asc"); url.searchParams.append("pbOnly", "true"); + url.searchParams.append("game", gameName); const response = await fetch(url.toString(), {credentials: 'include'}); if (!response.ok) throw new Error("Failed to fetch scores"); @@ -97,7 +99,7 @@ const Chart = () => { setLoading(false); } }, - [user, requestOrder, chartIdHash], + [user, requestOrder, chartIdHash, gameName], ); useEffect(() => { @@ -184,6 +186,18 @@ const Chart = () => { hideTitleArtist={true} /> ); + case "dancearound": + return ( + + ); default: return ( { onDelete={handleDeleteScore} /> ); + case "dancearound": + return ( + + ); default: return (