aboutsummaryrefslogtreecommitdiffstats
path: root/frontend/src
diff options
context:
space:
mode:
Diffstat (limited to 'frontend/src')
-rw-r--r--frontend/src/App.tsx16
-rw-r--r--frontend/src/components/NavBar.tsx90
-rw-r--r--frontend/src/components/SessionExpiredPopup.tsx32
-rw-r--r--frontend/src/components/tables/GenericScoreTable.tsx421
-rw-r--r--frontend/src/pages/Home.tsx122
-rw-r--r--frontend/src/pages/Import.tsx200
-rw-r--r--frontend/src/pages/Score.tsx174
7 files changed, 870 insertions, 185 deletions
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 65f3355..f6fffca 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,10 +1,11 @@
-import { Routes, Route } from 'react-router';
-import { AuthProvider } from './contexts/AuthContext';
-import Landing from './pages/Landing';
-import Login from './pages/Login';
-import Register from './pages/Register';
-import Import from './pages/Import';
-import Home from './pages/Home';
+import { Routes, Route } from "react-router";
+import { AuthProvider } from "./contexts/AuthContext";
+import Landing from "./pages/Landing";
+import Login from "./pages/Login";
+import Register from "./pages/Register";
+import Import from "./pages/Import";
+import Home from "./pages/Home";
+import Score from "./pages/Score";
function App() {
return (
@@ -15,6 +16,7 @@ function App() {
<Route path="/register" element={<Register />} />
<Route path="/import" element={<Import />} />
<Route path="/home" element={<Home />} />
+ <Route path="/score" element={<Score />} />
</Routes>
</AuthProvider>
);
diff --git a/frontend/src/components/NavBar.tsx b/frontend/src/components/NavBar.tsx
new file mode 100644
index 0000000..7e111d0
--- /dev/null
+++ b/frontend/src/components/NavBar.tsx
@@ -0,0 +1,90 @@
+import { Link } from "react-router";
+
+export const NavBar = ({ currentPage, user, handleLogout }: {
+ currentPage: string;
+ user: { username: string };
+ handleLogout: () => void;
+}) => {
+ const getMenuOptions = () => {
+ switch (currentPage) {
+ case 'dashboard':
+ return (
+ <>
+ <Link
+ to="/import"
+ className="text-slate-300 hover:text-white px-4 py-2 rounded-lg text-sm font-medium transition-all duration-200 hover:bg-slate-800/50"
+ >
+ Import Data
+ </Link>
+ </>
+ );
+ case 'import':
+ return (
+ <>
+ <Link
+ to="/home"
+ className="text-slate-300 hover:text-white px-4 py-2 rounded-lg text-sm font-medium transition-all duration-200 hover:bg-slate-800/50"
+ >
+ Home
+ </Link>
+ </>
+ );
+ case 'score':
+ return (
+ <>
+ <Link
+ to="/home"
+ className="text-slate-300 hover:text-white px-4 py-2 rounded-lg text-sm font-medium transition-all duration-200 hover:bg-slate-800/50"
+ >
+ Home
+ </Link>
+ <Link
+ to="/import"
+ className="text-slate-300 hover:text-white px-4 py-2 rounded-lg text-sm font-medium transition-all duration-200 hover:bg-slate-800/50"
+ >
+ Import Data
+ </Link>
+ </>
+ );
+ default:
+ return (
+ <Link
+ to="/import"
+ className="text-slate-300 hover:text-white px-4 py-2 rounded-lg text-sm font-medium transition-all duration-200 hover:bg-slate-800/50"
+ >
+ Import Data
+ </Link>
+ );
+ }
+ };
+
+ return (
+ <nav className="border-b border-slate-800/50 bg-slate-950/95 backdrop-blur-sm sticky top-0 z-50">
+ <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+ <div className="flex items-center justify-between h-16">
+ <div className="flex items-center space-x-3">
+ <div className="w-8 h-8 bg-gradient-to-r from-violet-600 to-violet-700 rounded-lg flex items-center justify-center shadow-lg">
+ <span className="text-white font-bold text-sm">M</span>
+ </div>
+ <span className="text-white font-semibold text-lg">Mirage</span>
+ </div>
+ <div className="flex items-center space-x-4">
+ {getMenuOptions()}
+ <span className="text-slate-300 text-sm">
+ Welcome back,{" "}
+ <span className="text-violet-400 font-medium">
+ {user.username}
+ </span>
+ </span>
+ <button
+ onClick={handleLogout}
+ className="text-slate-300 hover:text-white px-4 py-2 rounded-lg text-sm font-medium transition-all duration-200 hover:bg-slate-800/50"
+ >
+ Sign Out
+ </button>
+ </div>
+ </div>
+ </div>
+ </nav>
+ );
+};
diff --git a/frontend/src/components/SessionExpiredPopup.tsx b/frontend/src/components/SessionExpiredPopup.tsx
new file mode 100644
index 0000000..625d97d
--- /dev/null
+++ b/frontend/src/components/SessionExpiredPopup.tsx
@@ -0,0 +1,32 @@
+import { Link } from "react-router";
+
+export default function SessionExpiredPopup() {
+ return (
+ <div className="min-h-screen bg-slate-950 flex items-center justify-center">
+ <div className="text-center max-w-md mx-auto px-6">
+ <div className="bg-slate-900 rounded-lg p-8 border border-slate-700">
+ <h2 className="text-2xl font-bold text-white mb-4">
+ Session Expired
+ </h2>
+ <p className="text-slate-300 mb-6">
+ Please sign in to import your data.
+ </p>
+ <div className="space-y-3">
+ <Link
+ to="/login"
+ className="block w-full bg-violet-600 hover:bg-violet-700 text-white py-3 rounded-md font-medium transition-colors"
+ >
+ Sign In
+ </Link>
+ <Link
+ to="/"
+ className="block w-full border border-slate-600 hover:border-violet-500 text-slate-300 hover:text-white py-3 rounded-md font-medium transition-colors"
+ >
+ Back to Home
+ </Link>
+ </div>
+ </div>
+ </div>
+ </div>
+ );
+}
diff --git a/frontend/src/components/tables/GenericScoreTable.tsx b/frontend/src/components/tables/GenericScoreTable.tsx
new file mode 100644
index 0000000..f82e1ff
--- /dev/null
+++ b/frontend/src/components/tables/GenericScoreTable.tsx
@@ -0,0 +1,421 @@
+import React from "react";
+
+interface Score {
+ [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"];
+
+ 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 = (
+ value: any,
+ key: string,
+ compact: boolean = false,
+ ): JSX.Element => {
+ 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) => {
+ 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;
diff --git a/frontend/src/pages/Home.tsx b/frontend/src/pages/Home.tsx
index 0ee6862..0aba7f0 100644
--- a/frontend/src/pages/Home.tsx
+++ b/frontend/src/pages/Home.tsx
@@ -1,9 +1,11 @@
-import { Link, useNavigate } from 'react-router';
-import { useAuth } from '../contexts/AuthContext';
-import type { SupportedGame } from '../types/game';
-import { useState, useEffect } from 'react';
+import { useNavigate } from "react-router";
+import { NavBar } from "../components/NavBar";
+import { useAuth } from "../contexts/AuthContext";
+import type { SupportedGame } from "../types/game";
+import SessionExpiredPopup from "../components/SessionExpiredPopup";
+import { useState, useEffect } from "react";
-import dancerushImage from '../assets/games/dancerush.webp';
+import dancerushImage from "../assets/games/dancerush.webp";
const Home = () => {
const { user, isLoading, logout } = useAuth();
@@ -14,36 +16,38 @@ const Home = () => {
const handleLogout = async () => {
try {
await logout();
- navigate('/');
+ navigate("/");
} catch (error) {
- console.error('Logout failed:', error);
- alert('Network error during logout. Please try again.');
+ console.error("Logout failed:", error);
+ alert("Network error during logout. Please try again.");
}
};
const getGameImage = (internalName: string) => {
- switch(internalName){
+ switch (internalName) {
case "dancerush": {
return dancerushImage;
}
- default: {
- return null
+ default: {
+ return null;
}
}
- }
+ };
useEffect(() => {
const fetchSupportedGames = async () => {
try {
- const response = await fetch(import.meta.env.VITE_API_URL+'/supportedGames');
+ const response = await fetch(
+ import.meta.env.VITE_API_URL + "/supportedGames",
+ );
if (!response.ok) {
- throw new Error('Failed to fetch supported games');
+ throw new Error("Failed to fetch supported games");
}
const data = await response.json();
setSupportedGames(data);
} catch (error) {
- console.error('Failed to fetch supported games:', error);
- alert('Failed to load supported games. Please refresh the page.');
+ console.error("Failed to fetch supported games:", error);
+ alert("Failed to load supported games. Please refresh the page.");
} finally {
setGamesLoading(false);
}
@@ -63,69 +67,21 @@ const Home = () => {
}
if (!user) {
- return (
- <div className="min-h-screen bg-slate-950 flex items-center justify-center">
- <div className="text-center max-w-md mx-auto px-6">
- <div className="bg-slate-900 rounded-lg p-8 border border-slate-700">
- <h2 className="text-2xl font-bold text-white mb-4">Session Expired</h2>
- <p className="text-slate-300 mb-6">Please sign in to access your dashboard.</p>
- <div className="space-y-3">
- <Link
- to="/login"
- className="block w-full bg-violet-600 hover:bg-violet-700 text-white py-3 rounded-md font-medium transition-colors"
- >
- Sign In
- </Link>
- <Link
- to="/"
- className="block w-full border border-slate-600 hover:border-violet-500 text-slate-300 hover:text-white py-3 rounded-md font-medium transition-colors"
- >
- Back to Home
- </Link>
- </div>
- </div>
- </div>
- </div>
- );
+ return <SessionExpiredPopup />;
}
return (
<div className="min-h-screen bg-slate-950">
- {/* Navigation */}
- <nav className="border-b border-slate-800 bg-slate-950/95 backdrop-blur-sm sticky top-0 z-50">
- <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
- <div className="flex items-center justify-between h-16">
- <div className="flex items-center space-x-3">
- <div className="w-8 h-8 bg-violet-600 rounded-md flex items-center justify-center">
- <span className="text-white font-bold text-sm">M</span>
- </div>
- <span className="text-white font-semibold text-lg">Mirage</span>
- </div>
- <div className="flex items-center space-x-4">
- <Link
- to="/import"
- className="text-slate-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors"
- >
- Import Data
- </Link>
- <span className="text-slate-300 text-sm">Welcome back, {user.username}</span>
- <button
- onClick={handleLogout}
- className="text-slate-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors"
- >
- Sign Out
- </button>
- </div>
- </div>
- </div>
- </nav>
+ <NavBar user={user} handleLogout={handleLogout} currentPage="import"/>
{/* Main Content */}
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
{/* Header */}
<div className="mb-8">
<h1 className="text-3xl font-bold text-white mb-2">Dashboard</h1>
- <p className="text-slate-400">Track your rhythm game progress and performance</p>
+ <p className="text-slate-400">
+ Track your rhythm game progress and performance
+ </p>
</div>
{/* Supported Games */}
@@ -134,34 +90,48 @@ const Home = () => {
{supportedGames.map((game) => (
<div
key={game.internalName}
- className="bg-slate-900 rounded-xl border border-slate-700 overflow-hidden hover:border-violet-500 hover:shadow-lg hover:shadow-violet-500/10 transition-all duration-300 group"
+ className="bg-slate-900 rounded-xl border border-slate-700 overflow-hidden hover:border-violet-500 hover:shadow-lg hover:shadow-violet-500/10 transition-all duration-300 group cursor-pointer"
+ onClick={() => navigate(`/score?game=${game.internalName}`)}
>
<div className="aspect-video bg-slate-800 relative overflow-hidden">
{getGameImage(game.internalName) !== null ? (
<img
- src={getGameImage(game.internalName) || undefined}
+ src={getGameImage(game.internalName) || undefined}
alt={game.formattedName}
className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
/>
) : (
<div className="w-full h-full flex items-center justify-center">
<div className="text-slate-600">
- <svg className="w-16 h-16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
- <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
+ <svg
+ className="w-16 h-16"
+ fill="none"
+ stroke="currentColor"
+ viewBox="0 0 24 24"
+ >
+ <path
+ strokeLinecap="round"
+ strokeLinejoin="round"
+ strokeWidth={1.5}
+ d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
+ />
</svg>
</div>
</div>
)}
</div>
<div className="p-6">
- <h3 className="text-xl font-semibold text-white mb-2 group-hover:text-violet-400 transition-colors">{game.formattedName}</h3>
- <p className="text-slate-400 text-sm leading-relaxed">{game.description}</p>
+ <h3 className="text-xl font-semibold text-white mb-2 group-hover:text-violet-400 transition-colors">
+ {game.formattedName}
+ </h3>
+ <p className="text-slate-400 text-sm leading-relaxed">
+ {game.description}
+ </p>
</div>
</div>
))}
</div>
</div>
-
</div>
</div>
);
diff --git a/frontend/src/pages/Import.tsx b/frontend/src/pages/Import.tsx
index efd1d03..fe2501f 100644
--- a/frontend/src/pages/Import.tsx
+++ b/frontend/src/pages/Import.tsx
@@ -1,40 +1,42 @@
-import { useState, useEffect } from 'react';
-import { Link, useNavigate } from 'react-router';
-import { useAuth } from '../contexts/AuthContext';
-import JsonUploadModal from '../components/modals/JsonUploadModal';
-import EamusementModal from '../components/modals/EamusementModal';
-import type { SupportedGame } from '../types/game';
-import { uploadScore } from '../utils/scoreUpload';
-
-
+import { useState, useEffect } from "react";
+import { useNavigate } from "react-router";
+import { useAuth } from "../contexts/AuthContext";
+import JsonUploadModal from "../components/modals/JsonUploadModal";
+import EamusementModal from "../components/modals/EamusementModal";
+import SessionExpiredPopup from "../components/SessionExpiredPopup";
+import type { SupportedGame } from "../types/game";
+import { uploadScore } from "../utils/scoreUpload";
+import { NavBar } from "../components/NavBar";
const Import = () => {
const { user, isLoading, logout } = useAuth();
const navigate = useNavigate();
- const [selectedGame, setSelectedGame] = useState('');
+ const [selectedGame, setSelectedGame] = useState("");
const [isJsonModalOpen, setIsJsonModalOpen] = useState(false);
const [isEamusementModalOpen, setIsEamusementModalOpen] = useState(false);
const [supportedGames, setSupportedGames] = useState<SupportedGame[]>([]);
const [gamesLoading, setGamesLoading] = useState(true);
const [uploadStatus, setUploadStatus] = useState<{
- type: 'success' | 'error' | null;
+ type: "success" | "error" | null;
message: string;
- }>({ type: null, message: '' });
+ }>({ type: null, message: "" });
useEffect(() => {
const fetchSupportedGames = async () => {
try {
- const response = await fetch(import.meta.env.VITE_API_URL+'/supportedGames');
+ const response = await fetch(
+ import.meta.env.VITE_API_URL + "/supportedGames",
+ );
if (!response.ok) {
- throw new Error('Failed to fetch supported games');
+ throw new Error("Failed to fetch supported games");
}
const data = await response.json();
setSupportedGames(data);
} catch (error) {
- console.error('Failed to fetch supported games:', error);
+ console.error("Failed to fetch supported games:", error);
setUploadStatus({
- type: 'error',
- message: 'Failed to load supported games. Please refresh the page.'
+ type: "error",
+ message: "Failed to load supported games. Please refresh the page.",
});
} finally {
setGamesLoading(false);
@@ -47,10 +49,10 @@ const Import = () => {
const handleLogout = async () => {
try {
await logout();
- navigate('/');
+ navigate("/");
} catch (error) {
- console.error('Logout failed:', error);
- alert('Network error during logout. Please try again.');
+ console.error("Logout failed:", error);
+ alert("Network error during logout. Please try again.");
}
};
@@ -58,30 +60,33 @@ const Import = () => {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const handleJsonUpload = async (data: any) => {
try {
- console.log('Uploading data for game:', selectedGame, data);
+ console.log("Uploading data for game:", selectedGame, data);
const result = await uploadScore({
meta: {
game: data.meta.game,
service: data.meta.service,
- playtype: data.meta.playtype
+ playtype: data.meta.playtype,
},
- scores: data.scores
+ scores: data.scores,
});
setUploadStatus({
- type: 'success',
- message: `Successfully imported ${result.scoreCount} score(s) for ${supportedGames.find(g => g.internalName === data.meta.game)?.formattedName || data.meta.game}`
+ type: "success",
+ message: `Successfully imported ${result.scoreCount} score(s) for ${supportedGames.find((g) => g.internalName === data.meta.game)?.formattedName || data.meta.game}`,
});
setTimeout(() => {
- setUploadStatus({ type: null, message: '' });
+ setUploadStatus({ type: null, message: "" });
}, 5000);
} catch (error) {
- console.error('Upload failed:', error);
+ console.error("Upload failed:", error);
setUploadStatus({
- type: 'error',
- message: error instanceof Error ? error.message : 'Failed to import data. Please try again.'
+ type: "error",
+ message:
+ error instanceof Error
+ ? error.message
+ : "Failed to import data. Please try again.",
});
}
};
@@ -89,8 +94,18 @@ const Import = () => {
const JsonUploadCard = () => (
<div className="bg-slate-800 rounded-lg border border-slate-700 p-6 hover:border-violet-500 transition-colors">
<div className="w-12 h-12 bg-violet-600/20 rounded-lg flex items-center justify-center mb-4">
- <svg className="w-6 h-6 text-violet-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
- <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
+ <svg
+ className="w-6 h-6 text-violet-400"
+ fill="none"
+ stroke="currentColor"
+ viewBox="0 0 24 24"
+ >
+ <path
+ strokeLinecap="round"
+ strokeLinejoin="round"
+ strokeWidth={2}
+ d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"
+ />
</svg>
</div>
<h4 className="text-white font-semibold mb-2">Batch-Manual Upload</h4>
@@ -111,11 +126,23 @@ const Import = () => {
{/* e-amusement Card */}
<div className="bg-slate-800 rounded-lg border border-slate-700 p-6 hover:border-violet-500 transition-colors">
<div className="w-12 h-12 bg-blue-600/20 rounded-lg flex items-center justify-center mb-4">
- <svg className="w-6 h-6 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
- <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
+ <svg
+ className="w-6 h-6 text-blue-400"
+ fill="none"
+ stroke="currentColor"
+ viewBox="0 0 24 24"
+ >
+ <path
+ strokeLinecap="round"
+ strokeLinejoin="round"
+ strokeWidth={2}
+ d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
+ />
</svg>
</div>
- <h4 className="text-white font-semibold mb-2">e-amusement Play History</h4>
+ <h4 className="text-white font-semibold mb-2">
+ e-amusement Play History
+ </h4>
<p className="text-slate-400 text-sm mb-4">
Import via scraping your playdata from KONAMI e-amusement
</p>
@@ -131,12 +158,12 @@ const Import = () => {
const renderImportOptions = () => {
switch (selectedGame) {
- case 'dancerush':
+ case "dancerush":
return (
<>
{/* JSON Upload Card */}
<JsonUploadCard />
- <EamusementScrapeUploadCard/>
+ <EamusementScrapeUploadCard />
</>
);
@@ -157,83 +184,40 @@ const Import = () => {
}
if (!user) {
- return (
- <div className="min-h-screen bg-slate-950 flex items-center justify-center">
- <div className="text-center max-w-md mx-auto px-6">
- <div className="bg-slate-900 rounded-lg p-8 border border-slate-700">
- <h2 className="text-2xl font-bold text-white mb-4">Session Expired</h2>
- <p className="text-slate-300 mb-6">Please sign in to import your data.</p>
- <div className="space-y-3">
- <Link
- to="/login"
- className="block w-full bg-violet-600 hover:bg-violet-700 text-white py-3 rounded-md font-medium transition-colors"
- >
- Sign In
- </Link>
- <Link
- to="/"
- className="block w-full border border-slate-600 hover:border-violet-500 text-slate-300 hover:text-white py-3 rounded-md font-medium transition-colors"
- >
- Back to Home
- </Link>
- </div>
- </div>
- </div>
- </div>
- );
+ return <SessionExpiredPopup />;
}
return (
<div className="min-h-screen bg-slate-950">
{/* Navigation */}
- <nav className="border-b border-slate-800 bg-slate-950/95 backdrop-blur-sm sticky top-0 z-50">
- <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
- <div className="flex items-center justify-between h-16">
- <div className="flex items-center space-x-3">
- <Link to="/home" className="flex items-center space-x-3 group">
- <div className="w-8 h-8 bg-violet-600 rounded-md flex items-center justify-center group-hover:bg-violet-700 transition-colors">
- <span className="text-white font-bold text-sm">M</span>
- </div>
- <span className="text-white font-semibold text-lg">Mirage</span>
- </Link>
- </div>
- <div className="flex items-center space-x-4">
- <Link
- to="/home"
- className="text-slate-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors"
- >
- Dashboard
- </Link>
- <span className="text-slate-300 text-sm">Welcome back, {user.username}</span>
- <button
- onClick={handleLogout}
- className="text-slate-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors"
- >
- Sign Out
- </button>
- </div>
- </div>
- </div>
- </nav>
+ <NavBar user={user} handleLogout={handleLogout} currentPage="import"/>
{/* Main Content */}
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
{/* Header */}
<div className="mb-8">
<h1 className="text-3xl font-bold text-white mb-2">Import Data</h1>
- <p className="text-slate-400">Import your game scores and progress from various sources</p>
+ <p className="text-slate-400">
+ Import your game scores and progress from various sources
+ </p>
</div>
{/* Status Message */}
{uploadStatus.type && (
- <div className={`mb-6 rounded-md p-4 ${
- uploadStatus.type === 'success'
- ? 'bg-green-500/10 border border-green-500/20'
- : 'bg-red-500/10 border border-red-500/20'
- }`}>
- <p className={`text-sm ${
- uploadStatus.type === 'success' ? 'text-green-400' : 'text-red-400'
- }`}>
+ <div
+ className={`mb-6 rounded-md p-4 ${
+ uploadStatus.type === "success"
+ ? "bg-green-500/10 border border-green-500/20"
+ : "bg-red-500/10 border border-red-500/20"
+ }`}
+ >
+ <p
+ className={`text-sm ${
+ uploadStatus.type === "success"
+ ? "text-green-400"
+ : "text-red-400"
+ }`}
+ >
{uploadStatus.message}
</p>
</div>
@@ -262,7 +246,11 @@ const Import = () => {
>
<option value="">Select a game</option>
{supportedGames.map((game) => (
- <option key={game.internalName} value={game.internalName} title={game.description}>
+ <option
+ key={game.internalName}
+ value={game.internalName}
+ title={game.description}
+ >
{game.formattedName}
</option>
))}
@@ -273,7 +261,9 @@ const Import = () => {
{/* Import Options */}
{selectedGame && (
<div className="space-y-6 mt-8">
- <h3 className="text-lg font-semibold text-white">Import Options</h3>
+ <h3 className="text-lg font-semibold text-white">
+ Import Options
+ </h3>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
{renderImportOptions()}
@@ -288,14 +278,20 @@ const Import = () => {
isOpen={isJsonModalOpen}
onClose={() => setIsJsonModalOpen(false)}
onUpload={handleJsonUpload}
- game={supportedGames.find(g => g.internalName === selectedGame)?.formattedName || ''}
+ game={
+ supportedGames.find((g) => g.internalName === selectedGame)
+ ?.formattedName || ""
+ }
/>
{/* Eamusement Modal */}
<EamusementModal
isOpen={isEamusementModalOpen}
onClose={() => setIsEamusementModalOpen(false)}
- game={supportedGames.find(g => g.internalName === selectedGame) || undefined}
+ game={
+ supportedGames.find((g) => g.internalName === selectedGame) ||
+ undefined
+ }
/>
</div>
);
diff --git a/frontend/src/pages/Score.tsx b/frontend/src/pages/Score.tsx
new file mode 100644
index 0000000..e9feecd
--- /dev/null
+++ b/frontend/src/pages/Score.tsx
@@ -0,0 +1,174 @@
+import { useEffect, useState, useCallback } from "react";
+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";
+
+type SortField = string;
+type SortDirection = "asc" | "desc";
+
+const Score = () => {
+ const { user, isLoading, logout } = useAuth();
+ const navigate = useNavigate();
+ const [scores, setScores] = useState<any[]>([]);
+ const [loading, setLoading] = useState(true);
+ const [currentPage, setCurrentPage] = useState(1);
+ const [numPages, setNumPages] = useState(1);
+ const [viewMode, setViewMode] = useState<"cards" | "table">("cards");
+ const [sortField, setSortField] = useState<SortField>("timestamp");
+ const [sortDirection, setSortDirection] = useState<SortDirection>("desc");
+
+ const gameName =
+ new URLSearchParams(window.location.search).get("game") || "dancerush";
+
+ const handleLogout = async () => {
+ try {
+ await logout();
+ navigate("/");
+ } catch (error) {
+ console.error("Logout failed:", error);
+ alert("Network error during logout. Please try again.");
+ }
+ };
+
+ const flattenScoreData = (score: any) => {
+ const flat = { ...score, ...score.data };
+ delete flat.data;
+ delete flat.gameInternalName;
+ return flat;
+ };
+
+ const fetchScores = useCallback(
+ async (pageNum: number) => {
+ if (!user) return;
+
+ setLoading(true);
+ try {
+ const url = new URL(import.meta.env.VITE_API_URL + "/scores");
+ url.searchParams.append("userId", user.id);
+ url.searchParams.append("internalGameName", gameName);
+ url.searchParams.append("pageNum", pageNum.toString());
+
+ const response = await fetch(url.toString());
+ if (!response.ok) throw new Error("Failed to fetch scores");
+ const data = await response.json();
+ const flattened = data.scores.map(flattenScoreData);
+ setScores(flattened);
+ setNumPages(data.num_pages);
+ setCurrentPage(pageNum);
+ } catch (error) {
+ console.error("Failed to load scores:", error);
+ alert("Failed to load scores. Please refresh the page.");
+ } finally {
+ setLoading(false);
+ }
+ },
+ [user],
+ );
+
+ useEffect(() => {
+ if (user) fetchScores(1);
+ }, [user, fetchScores]);
+
+ const handleSort = (field: SortField) => {
+ if (sortField === field) {
+ setSortDirection(sortDirection === "asc" ? "desc" : "asc");
+ } else {
+ setSortField(field);
+ setSortDirection("desc");
+ }
+ };
+
+ if (!user) {
+ return <SessionExpiredPopup />;
+ }
+
+ if (isLoading || loading) {
+ return (
+ <div className="min-h-screen bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950 flex items-center justify-center">
+ <div className="text-center">
+ <div className="w-12 h-12 border-4 border-violet-500 border-t-transparent rounded-full animate-spin mx-auto mb-6"></div>
+ <p className="text-slate-300 text-lg">Loading your scores...</p>
+ </div>
+ </div>
+ );
+ }
+
+ return (
+ <div className="min-h-screen bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950 text-white">
+ <NavBar user={user} handleLogout={handleLogout} currentPage="score"/>
+ <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+ <div className="mb-12">
+ <div className="flex items-center justify-between mb-4">
+ <h1 className="text-4xl font-bold bg-gradient-to-r from-violet-400 to-violet-600 bg-clip-text text-transparent">
+ Your Scores
+ </h1>
+ <div className="flex items-center space-x-2 bg-slate-900/50 backdrop-blur-sm rounded-xl p-1 border border-slate-800/50">
+ <button
+ onClick={() => setViewMode("cards")}
+ className={`px-4 py-2 rounded-lg text-sm font-medium transition-all duration-200 ${
+ viewMode === "cards"
+ ? "bg-violet-600 text-white shadow-lg shadow-violet-500/25"
+ : "text-slate-300 hover:text-white hover:bg-slate-800/50"
+ }`}
+ >
+ Cards
+ </button>
+ <button
+ onClick={() => setViewMode("table")}
+ className={`px-4 py-2 rounded-lg text-sm font-medium transition-all duration-200 ${
+ viewMode === "table"
+ ? "bg-violet-600 text-white shadow-lg shadow-violet-500/25"
+ : "text-slate-300 hover:text-white hover:bg-slate-800/50"
+ }`}
+ >
+ Table
+ </button>
+ </div>
+ </div>
+ <p className="text-slate-400 text-lg">
+ Displaying {scores.length} scores • Page {currentPage} of {numPages}
+ </p>
+ </div>
+
+ {(() => {
+ switch (viewMode) {
+ default:
+ return (
+ <ScoreDisplay
+ scores={scores}
+ viewMode={viewMode}
+ sortField={sortField}
+ sortDirection={sortDirection}
+ onSort={handleSort}
+ />
+ );
+ }
+ })()}
+
+ {numPages > 1 && (
+ <div className="flex justify-center mt-12">
+ <div className="flex space-x-2 bg-slate-900/50 backdrop-blur-sm rounded-xl p-2 border border-slate-800/50">
+ {[...Array(numPages)].map((_, i) => (
+ <button
+ key={i}
+ onClick={() => fetchScores(i + 1)}
+ className={`px-4 py-2 rounded-lg text-sm font-medium transition-all duration-200 ${
+ currentPage === i + 1
+ ? "bg-violet-600 text-white shadow-lg shadow-violet-500/25"
+ : "text-slate-300 hover:text-white hover:bg-slate-800/50"
+ }`}
+ >
+ {i + 1}
+ </button>
+ ))}
+ </div>
+ </div>
+ )}
+ </main>
+ </div>
+ );
+};
+
+export default Score;
send patches to the email below
yukais@pinapelz.com
include the subject [PATCH repo_name]
pinapelz.com
homepage