From 7ccfb9a52cc78a95a4533ab4b971d959bdeecc1c Mon Sep 17 00:00:00 2001 From: Pinapelz Date: Fri, 4 Jul 2025 22:37:36 -0700 Subject: add score json upload functionality --- frontend/src/pages/Game.tsx | 0 frontend/src/pages/Home.tsx | 93 +++++++++++++++++++++++-------- frontend/src/pages/Import.tsx | 124 +++++++++++++++++++++++++++--------------- 3 files changed, 150 insertions(+), 67 deletions(-) create mode 100644 frontend/src/pages/Game.tsx (limited to 'frontend/src/pages') diff --git a/frontend/src/pages/Game.tsx b/frontend/src/pages/Game.tsx new file mode 100644 index 0000000..e69de29 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([]); + 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 (
@@ -92,31 +128,40 @@ const Home = () => {

Track your rhythm game progress and performance

- {/* Coming Soon Card */} -
-
- - - -
-

Dashboard Coming Soon

-

- We're working hard to bring you an amazing dashboard experience. Track your scores, - analyze your performance, and compete with friends - all coming soon! -

-
-
-

- User ID: {user.id} -

-
-
-

- Email: {user.email} -

-
+ {/* Supported Games */} +
+
+ {supportedGames.map((game) => ( +
+
+ {getGameImage(game.internalName) !== null ? ( + {game.formattedName} + ) : ( +
+
+ + + +
+
+ )} +
+
+

{game.formattedName}

+

{game.description}

+
+
+ ))}
+
); 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([]); 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 = () => ( +
+
+ + + +
+

Batch-Manual Upload

+

+ Upload your game data from a Mirage compatible JSON file +

+ +
+ ); + + const EamusementScrapeUploadCard = () => ( + <> + {/* e-amusement Card */} +
+
+ + + +
+

e-amusement Play History

+

+ Import via scraping your playdata from KONAMI e-amusement +

+ +
+ + ); + + const renderImportOptions = () => { + switch (selectedGame) { + case 'dancerush': + return ( + <> + {/* JSON Upload Card */} + + + + ); + + default: + return ; + } + }; + if (isLoading) { return (
@@ -228,24 +276,7 @@ const Import = () => {

Import Options

- {/* JSON Upload Card */} -
-
- - - -
-

Batch-Manual Upload

-

- Upload your game data from a Mirage compatible JSON file -

- -
+ {renderImportOptions()}
)} @@ -259,6 +290,13 @@ const Import = () => { onUpload={handleJsonUpload} game={supportedGames.find(g => g.internalName === selectedGame)?.formattedName || ''} /> + + {/* Eamusement Modal */} + setIsEamusementModalOpen(false)} + game={supportedGames.find(g => g.internalName === selectedGame) || undefined} + />
); }; -- cgit v1.2.3