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/assets/games/dancerush.webp | Bin 0 -> 168330 bytes frontend/src/assets/games/mirage.webp | Bin 0 -> 39724 bytes frontend/src/components/modals/EamusementModal.tsx | 115 +++++++++++++++ frontend/src/components/modals/JsonUploadModal.tsx | 2 + frontend/src/contexts/AuthContext.tsx | 4 +- frontend/src/pages/Game.tsx | 0 frontend/src/pages/Home.tsx | 93 +++++++++--- frontend/src/pages/Import.tsx | 124 ++++++++++------ frontend/src/types/constants.ts | 5 + frontend/src/types/game.ts | 5 + frontend/src/utils/api.ts | 161 -------------------- frontend/src/utils/authApi.ts | 163 +++++++++++++++++++++ frontend/src/utils/scoreUpload.ts | 39 +++++ 13 files changed, 481 insertions(+), 230 deletions(-) create mode 100644 frontend/src/assets/games/dancerush.webp create mode 100644 frontend/src/assets/games/mirage.webp create mode 100644 frontend/src/components/modals/EamusementModal.tsx create mode 100644 frontend/src/pages/Game.tsx create mode 100644 frontend/src/types/constants.ts create mode 100644 frontend/src/types/game.ts delete mode 100644 frontend/src/utils/api.ts create mode 100644 frontend/src/utils/authApi.ts create mode 100644 frontend/src/utils/scoreUpload.ts (limited to 'frontend/src') diff --git a/frontend/src/assets/games/dancerush.webp b/frontend/src/assets/games/dancerush.webp new file mode 100644 index 0000000..8229375 Binary files /dev/null and b/frontend/src/assets/games/dancerush.webp differ diff --git a/frontend/src/assets/games/mirage.webp b/frontend/src/assets/games/mirage.webp new file mode 100644 index 0000000..34aafcb Binary files /dev/null and b/frontend/src/assets/games/mirage.webp differ 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 ( +
+ {/* Backdrop */} +
+ + {/* Modal */} +
+
+ {/* Header */} +
+

+ Import {game.formattedName} Data +

+

+ Follow the instructions below to import your data +

+
+ + {/* Warning */} +
+

+ You may or may need to be subscribed to{" "} + + KONAMI's e-amusement Basic and/or Premium course + {" "} + to view a exportable playdata history for certain games. +

+
+ + {/* Instructions */} +
+

+ Instructions: +

+
    +
  1. Log into your e-amusement account
    2. + {EamuseImportInfo[game.internalName] ? ( +
  2. + Navigate to your{" "} + + {game.formattedName} score data page + {" "} + {game.formattedName} score data page +
    3. + ) : ( +
  3. Navigate to your {game.formattedName} score data page
    4. + )} + {EamuseImportInfo[game.internalName] ? ( +
  4. + Install the userscript to your browser (use an extension such + as Tampermonkey) +
    5. + ) : ( +
  5. + Scrape the data using any method of your choice and translate + it into a Mirage {game.formattedName} compatible JSON format +
    6. + )} +
  6. Upload the resulting JSON file into Mirage using the Batch-Manual Upload functionality
    7. +
  7. Verify that all data has been imported correctly
    8. +
+
+ + {/* Additional Info */} +
+

+ This feature is currently under development. Please check back + later for the full implementation. +

+
+ + {/* Actions */} +
+ +
+
+
+
+ ); +}; + +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 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} + />
); }; 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 = { + 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/api.ts deleted file mode 100644 index 528c170..0000000 --- a/frontend/src/utils/api.ts +++ /dev/null @@ -1,161 +0,0 @@ -const API_BASE_URL = import.meta.env.VITE_API_URL; - -// Auth API functions -export const authApi = { - async login(credentials: { username: string; password: string }) { - try { - const response = await fetch(`${API_BASE_URL}/authenticate`, { - method: 'POST', - credentials: 'include', - headers: { - 'Content-Type': 'application/json', - }, - body: JSON.stringify(credentials), - }); - - const data = await response.json(); - - if (!response.ok) { - return { error: data.error || `HTTP ${response.status}` }; - } - - return { data }; - } catch (error) { - console.error('Login failed:', error); - return { error: 'Network error. Please check your connection.' }; - } - }, - - async register(userData: { - username: string; - email: string; - password: string; - }) { - try { - const response = await fetch(`${API_BASE_URL}/register`, { - method: 'POST', - credentials: 'include', - headers: { - 'Content-Type': 'application/json', - }, - body: JSON.stringify(userData), - }); - - const data = await response.json(); - - if (!response.ok) { - return { error: data.error || `HTTP ${response.status}` }; - } - - return { data }; - } catch (error) { - console.error('Registration failed:', error); - return { error: 'Network error. Please check your connection.' }; - } - }, - - async logout() { - try { - const response = await fetch(`${API_BASE_URL}/logout`, { - method: 'POST', - credentials: 'include', - headers: { - 'Content-Type': 'application/json', - }, - }); - - const data = await response.json(); - - if (!response.ok) { - return { error: data.error || `HTTP ${response.status}` }; - } - - return { data }; - } catch (error) { - console.error('Logout failed:', error); - return { error: 'Network error. Please check your connection.' }; - } - }, - - async getSession() { - try { - const response = await fetch(`${API_BASE_URL}/session`, { - method: 'GET', - credentials: 'include', - headers: { - 'Content-Type': 'application/json', - }, - }); - - const data = await response.json(); - - if (!response.ok) { - return { error: data.error || `HTTP ${response.status}` }; - } - - return { data }; - } catch (error) { - console.error('Session check failed:', error); - return { error: 'Network error. Please check your connection.' }; - } - }, - - async getCurrentUser() { - try { - const response = await fetch(`${API_BASE_URL}/me`, { - method: 'GET', - credentials: 'include', - headers: { - 'Content-Type': 'application/json', - }, - }); - - const data = await response.json(); - - if (!response.ok) { - return { error: data.error || `HTTP ${response.status}` }; - } - - return { data }; - } catch (error) { - console.error('Get current user failed:', error); - return { error: 'Network error. Please check your connection.' }; - } - }, -}; - -export const infoApi = { - async getUsers() { - try { - const response = await fetch(`${API_BASE_URL}/users`, { - method: 'GET', - credentials: 'include', - headers: { - 'Content-Type': 'application/json', - }, - }); - - const data = await response.json(); - - if (!response.ok) { - return { error: data.error || `HTTP ${response.status}` }; - } - - return { data }; - } catch (error) { - console.error('Get users failed:', error); - return { error: 'Network error. Please check your connection.' }; - } - }, -}; - -export interface User { - id: number; - username: string; - email: string; -} - -export interface SessionResponse { - authenticated: boolean; - user?: User; -} diff --git a/frontend/src/utils/authApi.ts b/frontend/src/utils/authApi.ts new file mode 100644 index 0000000..469553d --- /dev/null +++ b/frontend/src/utils/authApi.ts @@ -0,0 +1,163 @@ +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', + credentials: 'include', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify(credentials), + }); + + const data = await response.json(); + + if (!response.ok) { + return { error: data.error || `HTTP ${response.status}` }; + } + + return { data }; + } catch (error) { + console.error('Login failed:', error); + return { error: 'Network error. Please check your connection.' }; + } + }, + + async register(userData: { + username: string; + email: string; + password: string; + }) { + userData.username = userData.username.trim(); + try { + const response = await fetch(`${API_BASE_URL}/register`, { + method: 'POST', + credentials: 'include', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify(userData), + }); + + const data = await response.json(); + + if (!response.ok) { + return { error: data.error || `HTTP ${response.status}` }; + } + + return { data }; + } catch (error) { + console.error('Registration failed:', error); + return { error: 'Network error. Please check your connection.' }; + } + }, + + async logout() { + try { + const response = await fetch(`${API_BASE_URL}/logout`, { + method: 'POST', + credentials: 'include', + headers: { + 'Content-Type': 'application/json', + }, + }); + + const data = await response.json(); + + if (!response.ok) { + return { error: data.error || `HTTP ${response.status}` }; + } + + return { data }; + } catch (error) { + console.error('Logout failed:', error); + return { error: 'Network error. Please check your connection.' }; + } + }, + + async getSession() { + try { + const response = await fetch(`${API_BASE_URL}/session`, { + method: 'GET', + credentials: 'include', + headers: { + 'Content-Type': 'application/json', + }, + }); + + const data = await response.json(); + + if (!response.ok) { + return { error: data.error || `HTTP ${response.status}` }; + } + + return { data }; + } catch (error) { + console.error('Session check failed:', error); + return { error: 'Network error. Please check your connection.' }; + } + }, + + async getCurrentUser() { + try { + const response = await fetch(`${API_BASE_URL}/me`, { + method: 'GET', + credentials: 'include', + headers: { + 'Content-Type': 'application/json', + }, + }); + + const data = await response.json(); + + if (!response.ok) { + return { error: data.error || `HTTP ${response.status}` }; + } + + return { data }; + } catch (error) { + console.error('Get current user failed:', error); + return { error: 'Network error. Please check your connection.' }; + } + }, +}; + +export const infoApi = { + async getUsers() { + try { + const response = await fetch(`${API_BASE_URL}/users`, { + method: 'GET', + credentials: 'include', + headers: { + 'Content-Type': 'application/json', + }, + }); + + const data = await response.json(); + + if (!response.ok) { + return { error: data.error || `HTTP ${response.status}` }; + } + + return { data }; + } catch (error) { + console.error('Get users failed:', error); + return { error: 'Network error. Please check your connection.' }; + } + }, +}; + +export interface User { + id: number; + username: string; + email: string; +} + +export interface SessionResponse { + authenticated: boolean; + user?: User; +} 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 { + 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(); +} -- cgit v1.2.3