diff --git a/backend/prisma/seed.ts b/backend/prisma/seed.ts index c2667d9..01459c5 100644 --- a/backend/prisma/seed.ts +++ b/backend/prisma/seed.ts @@ -21,6 +21,11 @@ async function main() { formattedName: "Hatsune Miku: Project DIVA Arcade Future Tone", description: "A 4-button and touch slider game from SEGA", }, + { + internalName: "musicdiver", + formattedName: "MUSIC DIVER", + description: "Taito's quadrant based drumming game", + }, ], }); console.log("Initial seed data inserted"); diff --git a/frontend/index.html b/frontend/index.html index c5e3113..bf98083 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -4,6 +4,9 @@ + + + Mirage - Rhythm Game Score Tracker diff --git a/frontend/src/assets/games/music_diver.webp b/frontend/src/assets/games/music_diver.webp new file mode 100644 index 0000000..a6cab5e Binary files /dev/null and b/frontend/src/assets/games/music_diver.webp differ diff --git a/frontend/src/components/displays/GenericScoreDisplay.tsx b/frontend/src/components/displays/GenericScoreDisplay.tsx index 054f7de..2e5a1aa 100644 --- a/frontend/src/components/displays/GenericScoreDisplay.tsx +++ b/frontend/src/components/displays/GenericScoreDisplay.tsx @@ -70,6 +70,7 @@ const ScoreDisplay: React.FC = ({ "score", "difficulty", "lamp", + "rank", "diff_lamp", "percent", "rating", diff --git a/frontend/src/components/displays/MusicDiverDisplay.tsx b/frontend/src/components/displays/MusicDiverDisplay.tsx new file mode 100644 index 0000000..6342777 --- /dev/null +++ b/frontend/src/components/displays/MusicDiverDisplay.tsx @@ -0,0 +1,518 @@ +import React from "react"; +import SHA1 from "crypto-js/sha1"; +import { Link } from "react-router"; +import { globalSkipKeys } from "../../types/constants"; + +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 MusicDiverDisplay: 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", + 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", + username: "Username", + num_players: "Players" + }; + + const primaryKeys = ["title", "artist", "song"]; + const mainStatKeys = [ + "score", + "level", + "lamp", + "rank", + "diff_lamp", + "percent", + "rating", + "grade", + ]; + const expandableKeys = ["judgements", "optional"]; + const skipKeys = ["user", "username"] + // get ?game= + const internalGameName =new URLSearchParams(window.location.search).get("game") || "dancerush"; + // 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]) => !globalSkipKeys.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)); + + // Prioritize important keys for table display + const tableKeys = [ + ...(hideTitleArtist ? [] : ["title", "song", "artist"]), + ...(showUsername ? ["username"] : []), + "score", + "difficulty", + "lamp", + "diff_lamp", + "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) => { + const chartIdHash = SHA1(`${internalGameName}${score.title}${score.artist}`).toString(); + // eslint-disable-next-line @typescript-eslint/no-unused-vars + const { primary, mainStats, expandable, others: rawOthers, timestamp } = + getScoreEntries(score); + const others = rawOthers.filter(([key]) => !skipKeys.includes(key)); + + + 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, 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) => ( + + ))} + {showActions && ( + + )} + + + + {sortedScores.map((score, index) => ( + + {tableKeys.map((key) => ( + + ))} + {showActions && ( + + )} + + ))} + +
+ {key === "judgements" ? ( + {getDisplayName(key)} + ) : ( + + )} + + Actions +
+ {key === "lamp" || key === "diff_lamp" ? ( +
+ + {score[key] || "NO DATA"} + +
+ ) : 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 MusicDiverDisplay; diff --git a/frontend/src/index.css b/frontend/src/index.css index f1d8c73..79547f6 100644 --- a/frontend/src/index.css +++ b/frontend/src/index.css @@ -1 +1,7 @@ @import "tailwindcss"; + +@layer base { + .font-orbitron { + font-family: 'Orbitron', sans-serif; + } +} diff --git a/frontend/src/pages/Chart.tsx b/frontend/src/pages/Chart.tsx index a2d5807..062db44 100644 --- a/frontend/src/pages/Chart.tsx +++ b/frontend/src/pages/Chart.tsx @@ -6,6 +6,7 @@ import SessionExpiredPopup from "../components/SessionExpiredPopup"; import ScoreDisplay from "../components/displays/GenericScoreDisplay"; import DancerushScoreDisplay from "../components/displays/DancerushScoreDisplay"; import DivaScoreDisplay from "../components/displays/DivaScoreDisplay"; +import MusicDiverDisplay from "../components/displays/MusicDiverDisplay"; import SongInfoDisplay from "../components/modals/SongInfoDisplay"; type SortField = string; type SortDirection = "asc" | "desc"; @@ -226,6 +227,18 @@ const Chart = () => { hideTitleArtist={true} /> ); + case "musicdiver": + return ( + + ); default: return ( { const { user, isLoading, logout } = useAuth(); @@ -36,6 +37,9 @@ const Home = () => { case "diva": { return divaImage; } + case "musicdiver": { + return musicdiverImage; + } default: { return null; } diff --git a/frontend/src/pages/Score.tsx b/frontend/src/pages/Score.tsx index 7a61311..50b1e63 100644 --- a/frontend/src/pages/Score.tsx +++ b/frontend/src/pages/Score.tsx @@ -8,6 +8,7 @@ import ScoreDisplay from "../components/displays/GenericScoreDisplay"; import DancerushScoreDisplay from "../components/displays/DancerushScoreDisplay"; import DancearoundScoreDisplay from "../components/displays/DancearoundScoreDisplay"; import DivaScoreDisplay from "../components/displays/DivaScoreDisplay"; +import MusicDiverDisplay from "../components/displays/MusicDiverDisplay"; type SortField = string; type SortDirection = "asc" | "desc"; @@ -91,7 +92,7 @@ const Score = () => { setLoading(true); try { const url = new URL(import.meta.env.VITE_API_URL + "/scores"); - url.searchParams.append("userId", user.id); + url.searchParams.append("userId", user.id.toString()); url.searchParams.append("internalGameName", gameName); url.searchParams.append("pageNum", pageNum.toString()); url.searchParams.append("sortKey", requestOrder); @@ -123,7 +124,7 @@ const Score = () => { try { const url = new URL(import.meta.env.VITE_API_URL + "/scores"); - url.searchParams.append("userId", user.id); + url.searchParams.append("userId", user.id.toString()); url.searchParams.append("internalGameName", gameName); url.searchParams.append("scoreId", scoreId.toString()); @@ -245,6 +246,17 @@ const Score = () => { onDelete={handleDeleteScore} /> ); + case "musicdiver": + return ( + + ); default: return ( { + const date = new Date(rec.created_at.replace(" ", "T") + "+09:00"); + const unixTime = date.getTime(); + + // Determine lamp based on flag precedence + let lamp = "FAILED"; + if (rec.clear_flag) lamp = "CLEAR"; + else if (rec.epic_flag) lamp = "EPIC"; + else if (rec.all_perfect_flag) lamp = "ALL PERFECT"; + else if (rec.full_combo_flag) lamp = "FULL COMBO"; + + return { + timestamp: unixTime, + title: rec.music_title, + artist: rec.artist_name, + difficulty: diffMap[rec.difficulty_id] || "UNKNOWN", + level: rec.level, + score: rec.score, + rank: rec.rank, + lamp, + judgements: { + critical: rec.critical_num, + perfect: rec.perfect_num, + great: rec.great_num, + good: rec.good_num, + bad: rec.bad_num, + miss: rec.miss_num, + }, + }; + }); + + mirage = { + meta: { + game: "musicdiver", + playtype: "Single", + service: "MUSIC DIVER My Page Recent History", + }, + scores: remappedData, + }; + + console.log("🎵 Music Diver Records:", remappedData); + console.log("Mirage export object:", mirage); + + showDownloadButton(); + } catch (err) { + console.error("Error fetching Music Diver data:", err); + } + } + + function showDownloadButton() { + // Avoid duplicates + if (document.getElementById("md-download-json")) return; + + const btn = document.createElement("button"); + btn.id = "md-download-json"; + btn.textContent = "⬇️ Download Mirage Score JSON"; + Object.assign(btn.style, { + position: "fixed", + bottom: "20px", + right: "20px", + zIndex: "9999", + padding: "10px 16px", + background: "#1e90ff", + color: "#fff", + border: "none", + borderRadius: "8px", + cursor: "pointer", + fontSize: "14px", + boxShadow: "0 2px 8px rgba(0,0,0,0.25)", + transition: "background 0.2s", + }); + + btn.onmouseenter = () => (btn.style.background = "#0070f0"); + btn.onmouseleave = () => (btn.style.background = "#1e90ff"); + + btn.addEventListener("click", () => { + if (!remappedData.length) { + alert("No data available yet. Try refreshing!"); + return; + } + const blob = new Blob([JSON.stringify(mirage, null, 2)], { + type: "application/json", + }); + const url = URL.createObjectURL(blob); + const a = document.createElement("a"); + a.href = url; + a.download = "musicdiver_records.json"; + a.click(); + URL.revokeObjectURL(url); + }); + + document.body.appendChild(btn); + } + + window.addEventListener("load", fetchRecordHistory); +})();