add score json upload functionality

12 files changed, 320 insertions, 69 deletions

diff --git a/frontend/src/assets/games/dancerush.webp b/frontend/src/assets/games/dancerush.webp
new file mode 100644
index 0000000..8229375
--- /dev/null
+++ b/frontend/src/assets/games/dancerush.webp
diff --git a/frontend/src/assets/games/mirage.webp b/frontend/src/assets/games/mirage.webp
new file mode 100644
index 0000000..34aafcb
--- /dev/null
+++ b/frontend/src/assets/games/mirage.webp
diff --git a/frontend/src/components/modals/EamusementModal.tsx b/frontend/src/components/modals/EamusementModal.tsx
new file mode 100644
index 0000000..a861315
--- /dev/null
+++ b/frontend/src/components/modals/EamusementModal.tsx
@@ -0,0 +1,115 @@
+import type { SupportedGame } from "../../types/game";
+import { EamuseImportInfo } from "../../types/constants";
+
+interface EamusementUploadModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  game: SupportedGame | undefined;
+}
+
+const EamusementUploadModal = ({
+  isOpen,
+  onClose,
+  game,
+}: EamusementUploadModalProps) => {
+  if (!isOpen) return null;
+
+  const handleClose = () => {
+    onClose();
+  };
+  if(game === undefined){
+    return "Sorry, due to some extreme error the game you're looking for doesn't seem to exist..."
+  }
+  return (
+    <div className="fixed inset-0 z-50 overflow-y-auto">
+      {/* Backdrop */}
+      <div
+        className="fixed inset-0 bg-black/50 backdrop-blur-sm transition-opacity"
+        onClick={handleClose}
+      />
+
+      {/* Modal */}
+      <div className="flex min-h-full items-center justify-center p-4">
+        <div className="relative bg-slate-900 rounded-lg border border-slate-700 w-full max-w-xl p-6 shadow-xl">
+          {/* Header */}
+          <div className="mb-6">
+            <h3 className="text-xl font-bold text-white mb-2">
+              Import {game.formattedName} Data
+            </h3>
+            <p className="text-slate-400 text-sm">
+              Follow the instructions below to import your data
+            </p>
+          </div>
+
+          {/* Warning */}
+          <div className="mb-6 rounded-md bg-blue-500/10 border border-blue-500/20 p-3">
+            <p className="text-sm text-blue-400">
+              You may or may need to be subscribed to{" "}
+              <a
+                className="font-bold hover:underline"
+                href="https://p.eagate.573.jp/payment/p/ex_select_course.html"
+              >
+                KONAMI's e-amusement Basic and/or Premium course
+              </a>{" "}
+              to view a exportable playdata history for certain games.
+            </p>
+          </div>
+
+          {/* Instructions */}
+          <div className="mb-4 rounded-md bg-slate-800 border border-slate-700 p-4">
+            <h4 className="text-sm font-semibold text-slate-300 mb-2">
+              Instructions:
+            </h4>
+            <ol className="text-sm text-slate-400 space-y-1 list-decimal list-inside">
+              <li>Log into your e-amusement account</li>
+              {EamuseImportInfo[game.internalName] ? (
+                <li>
+                  Navigate to your{" "}
+                  <a href={EamuseImportInfo[game.internalName]?.scorePage}>
+                    {game.formattedName} score data page
+                  </a>{" "}
+                  {game.formattedName} score data page
+                </li>
+              ) : (
+                <li>Navigate to your {game.formattedName} score data page</li>
+              )}
+              {EamuseImportInfo[game.internalName] ? (
+                <li>
+                  Install the userscript to your browser (use an extension such
+                  as Tampermonkey)
+                </li>
+              ) : (
+                <li>
+                  Scrape the data using any method of your choice and translate
+                  it into a Mirage {game.formattedName} compatible JSON format
+                </li>
+              )}
+              <li>Upload the resulting JSON file into Mirage using the Batch-Manual Upload functionality</li>
+              <li>Verify that all data has been imported correctly</li>
+            </ol>
+          </div>
+
+          {/* Additional Info */}
+          <div className="mb-6 rounded-md bg-blue-500/10 border border-blue-500/20 p-3">
+            <p className="text-sm text-blue-400">
+              This feature is currently under development. Please check back
+              later for the full implementation.
+            </p>
+          </div>
+
+          {/* Actions */}
+          <div className="flex justify-center">
+            <button
+              onClick={handleClose}
+              className="px-6 py-2 bg-violet-600 hover:bg-violet-700 text-white rounded-md font-medium transition-colors"
+            >
+              Got it
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default EamusementUploadModal;
diff --git a/frontend/src/components/modals/JsonUploadModal.tsx b/frontend/src/components/modals/JsonUploadModal.tsx
index 1cb541b..7d8f838 100644
--- a/frontend/src/components/modals/JsonUploadModal.tsx
+++ b/frontend/src/components/modals/JsonUploadModal.tsx
@@ -3,6 +3,8 @@ import { useState, useRef } from 'react';
 interface JsonUploadModalProps {
   isOpen: boolean;
   onClose: () => void;
+  // has to be any as this is a dynamic trackerm with dynamic score formats
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   onUpload: (data: any) => void;
   game: string;
 }
diff --git a/frontend/src/contexts/AuthContext.tsx b/frontend/src/contexts/AuthContext.tsx
index 7e2668d..8abeeb4 100644
--- a/frontend/src/contexts/AuthContext.tsx
+++ b/frontend/src/contexts/AuthContext.tsx
@@ -1,7 +1,7 @@
 import React, { createContext, useContext, useState, useEffect } from 'react';
 import type { ReactNode } from 'react';
-import { authApi } from '../utils/api';
-import type { User as ApiUser, SessionResponse } from '../utils/api';
+import { authApi } from '../utils/authApi';
+import type { User as ApiUser, SessionResponse } from '../utils/authApi';
 
 interface User {
   id: string;
diff --git a/frontend/src/pages/Game.tsx b/frontend/src/pages/Game.tsx
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/frontend/src/pages/Game.tsx
diff --git a/frontend/src/pages/Home.tsx b/frontend/src/pages/Home.tsx
index e42a2b8..0ee6862 100644
--- a/frontend/src/pages/Home.tsx
+++ b/frontend/src/pages/Home.tsx
@@ -1,8 +1,14 @@
 import { Link, useNavigate } from 'react-router';
 import { useAuth } from '../contexts/AuthContext';
+import type { SupportedGame } from '../types/game';
+import { useState, useEffect } from 'react';
+
+import dancerushImage from '../assets/games/dancerush.webp';
 
 const Home = () => {
   const { user, isLoading, logout } = useAuth();
+  const [supportedGames, setSupportedGames] = useState<SupportedGame[]>([]);
+  const [gamesLoading, setGamesLoading] = useState(true);
   const navigate = useNavigate();
 
   const handleLogout = async () => {
@@ -15,7 +21,37 @@ const Home = () => {
     }
   };
 
-  if (isLoading) {
+  const getGameImage = (internalName: string) => {
+    switch(internalName){
+      case "dancerush": {
+        return dancerushImage;
+      }
+       default: {
+         return null
+      }
+    }
+  }
+
+  useEffect(() => {
+    const fetchSupportedGames = async () => {
+      try {
+        const response = await fetch(import.meta.env.VITE_API_URL+'/supportedGames');
+        if (!response.ok) {
+          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.');
+      } finally {
+        setGamesLoading(false);
+      }
+    };
+    fetchSupportedGames();
+  }, []);
+
+  if (isLoading || gamesLoading) {
     return (
       <div className="min-h-screen bg-slate-950 flex items-center justify-center">
         <div className="text-center">
@@ -92,31 +128,40 @@ const Home = () => {
           <p className="text-slate-400">Track your rhythm game progress and performance</p>
         </div>
 
-        {/* Coming Soon Card */}
-        <div className="bg-slate-900 rounded-lg border border-slate-700 p-12 text-center">
-          <div className="w-16 h-16 bg-violet-600/20 rounded-full flex items-center justify-center mx-auto mb-6">
-            <svg className="w-8 h-8 text-violet-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
-            </svg>
-          </div>
-          <h2 className="text-2xl font-bold text-white mb-4">Dashboard Coming Soon</h2>
-          <p className="text-slate-300 mb-8 max-w-2xl mx-auto">
-            We're working hard to bring you an amazing dashboard experience. Track your scores,
-            analyze your performance, and compete with friends - all coming soon!
-          </p>
-          <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
-            <div className="bg-slate-800 px-6 py-3 rounded-lg border border-slate-600">
-              <p className="text-sm text-slate-300">
-                <span className="font-semibold text-violet-300">User ID:</span> {user.id}
-              </p>
-            </div>
-            <div className="bg-slate-800 px-6 py-3 rounded-lg border border-slate-600">
-              <p className="text-sm text-slate-300">
-                <span className="font-semibold text-violet-300">Email:</span> {user.email}
-              </p>
-            </div>
+        {/* Supported Games */}
+        <div className="mb-12">
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+            {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"
+              >
+                <div className="aspect-video bg-slate-800 relative overflow-hidden">
+                  {getGameImage(game.internalName) !== null ? (
+                    <img
+                    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>
+                      </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>
+                </div>
+              </div>
+            ))}
           </div>
         </div>
+
       </div>
     </div>
   );
diff --git a/frontend/src/pages/Import.tsx b/frontend/src/pages/Import.tsx
index 877e0e4..efd1d03 100644
--- a/frontend/src/pages/Import.tsx
+++ b/frontend/src/pages/Import.tsx
@@ -2,18 +2,18 @@ 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';
+
 
-interface SupportedGame {
-  internalName: string;
-  formattedName: string;
-  description: string;
-}
 
 const Import = () => {
   const { user, isLoading, logout } = useAuth();
   const navigate = useNavigate();
   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<{
@@ -54,32 +54,21 @@ const Import = () => {
     }
   };
 
+  // has to be any as this is a dynamic trackerm with dynamic score formats
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const handleJsonUpload = async (data: any) => {
     try {
       console.log('Uploading data for game:', selectedGame, data);
-      const response = await fetch(`${import.meta.env.VITE_API_URL}/uploadScore`, {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
+
+      const result = await uploadScore({
+        meta: {
+          game: data.meta.game,
+          service: data.meta.service,
+          playtype: data.meta.playtype
         },
-        credentials: 'include',
-        body: JSON.stringify({
-          meta: {
-            game: data.meta.game,
-            service: data.meta.service,
-            playtype: data.meta.playtype
-          },
-          scores: data.scores
-        })
+        scores: data.scores
       });
 
-      if (!response.ok) {
-        const errorData = await response.json();
-        throw new Error(errorData.error || 'Failed to upload scores');
-      }
-
-      const result = await response.json();
-
       setUploadStatus({
         type: 'success',
         message: `Successfully imported ${result.scoreCount} score(s) for ${supportedGames.find(g => g.internalName === data.meta.game)?.formattedName || data.meta.game}`
@@ -97,6 +86,65 @@ 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>
+      </div>
+      <h4 className="text-white font-semibold mb-2">Batch-Manual Upload</h4>
+      <p className="text-slate-400 text-sm mb-4">
+        Upload your game data from a Mirage compatible JSON file
+      </p>
+      <button
+        onClick={() => setIsJsonModalOpen(true)}
+        className="w-full bg-violet-600 hover:bg-violet-700 text-white py-2 px-4 rounded-md font-medium transition-colors"
+      >
+        Upload JSON
+      </button>
+    </div>
+  );
+
+  const EamusementScrapeUploadCard = () => (
+    <>
+      {/* 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>
+        </div>
+        <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>
+        <button
+          onClick={() => setIsEamusementModalOpen(true)}
+          className="w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-md font-medium transition-colors"
+        >
+          Connect e-amusement
+        </button>
+      </div>
+    </>
+  );
+
+  const renderImportOptions = () => {
+    switch (selectedGame) {
+      case 'dancerush':
+        return (
+          <>
+            {/* JSON Upload Card */}
+            <JsonUploadCard />
+            <EamusementScrapeUploadCard/>
+          </>
+        );
+
+      default:
+        return <JsonUploadCard />;
+    }
+  };
+
   if (isLoading) {
     return (
       <div className="min-h-screen bg-slate-950 flex items-center justify-center">
@@ -228,24 +276,7 @@ const Import = () => {
               <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">
-                {/* JSON Upload 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-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>
-                  </div>
-                  <h4 className="text-white font-semibold mb-2">Batch-Manual Upload</h4>
-                  <p className="text-slate-400 text-sm mb-4">
-                    Upload your game data from a Mirage compatible JSON file
-                  </p>
-                  <button
-                    onClick={() => setIsJsonModalOpen(true)}
-                    className="w-full bg-violet-600 hover:bg-violet-700 text-white py-2 px-4 rounded-md font-medium transition-colors"
-                  >
-                    Upload JSON
-                  </button>
-                </div>
+                {renderImportOptions()}
               </div>
             </div>
           )}
@@ -259,6 +290,13 @@ const Import = () => {
         onUpload={handleJsonUpload}
         game={supportedGames.find(g => g.internalName === selectedGame)?.formattedName || ''}
       />
+
+      {/* Eamusement Modal */}
+      <EamusementModal
+        isOpen={isEamusementModalOpen}
+        onClose={() => setIsEamusementModalOpen(false)}
+        game={supportedGames.find(g => g.internalName === selectedGame) || undefined}
+      />
     </div>
   );
 };
diff --git a/frontend/src/types/constants.ts b/frontend/src/types/constants.ts
new file mode 100644
index 0000000..3f2c97b
--- /dev/null
+++ b/frontend/src/types/constants.ts
@@ -0,0 +1,5 @@
+export const EamuseImportInfo: Record<string, { scorePage: string }> = {
+  dancerush: {
+    scorePage: "https://p.eagate.573.jp/game/dan/1st/playdata/entrance.html#music_data",
+  },
+};
diff --git a/frontend/src/types/game.ts b/frontend/src/types/game.ts
new file mode 100644
index 0000000..3c595ea
--- /dev/null
+++ b/frontend/src/types/game.ts
@@ -0,0 +1,5 @@
+export interface SupportedGame {
+  internalName: string;
+  formattedName: string;
+  description: string;
+}
diff --git a/frontend/src/utils/api.ts b/frontend/src/utils/authApi.ts
index 528c170..469553d 100644
--- a/frontend/src/utils/api.ts
+++ b/frontend/src/utils/authApi.ts
@@ -3,6 +3,7 @@ const API_BASE_URL = import.meta.env.VITE_API_URL;
 // Auth API functions
 export const authApi = {
   async login(credentials: { username: string; password: string }) {
+    credentials.username = credentials.username.trim();
     try {
       const response = await fetch(`${API_BASE_URL}/authenticate`, {
         method: 'POST',
@@ -31,6 +32,7 @@ export const authApi = {
     email: string;
     password: string;
   }) {
+    userData.username = userData.username.trim();
     try {
       const response = await fetch(`${API_BASE_URL}/register`, {
         method: 'POST',
diff --git a/frontend/src/utils/scoreUpload.ts b/frontend/src/utils/scoreUpload.ts
new file mode 100644
index 0000000..7fa7c86
--- /dev/null
+++ b/frontend/src/utils/scoreUpload.ts
@@ -0,0 +1,39 @@
+interface UploadScoreData {
+  meta: {
+    game: string;
+    service: string;
+    playtype: string;
+  };
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  scores: any[];
+}
+
+interface UploadScoreResponse {
+  scoreCount: number;
+  message?: string;
+}
+
+export async function uploadScore(data: UploadScoreData): Promise<UploadScoreResponse> {
+  const response = await fetch(`${import.meta.env.VITE_API_URL}/uploadScore`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    credentials: 'include',
+    body: JSON.stringify({
+      meta: {
+        game: data.meta.game,
+        service: data.meta.service,
+        playtype: data.meta.playtype
+      },
+      scores: data.scores
+    })
+  });
+
+  if (!response.ok) {
+    const errorData = await response.json();
+    throw new Error(errorData.error || 'Failed to upload scores');
+  }
+
+  return response.json();
+}