diff options
Diffstat (limited to 'frontend/src/pages')
| -rw-r--r-- | frontend/src/pages/Game.tsx | 0 | ||||
| -rw-r--r-- | frontend/src/pages/Home.tsx | 93 | ||||
| -rw-r--r-- | frontend/src/pages/Import.tsx | 124 |
3 files changed, 150 insertions, 67 deletions
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> ); }; |