diff --git a/backend/schema.prisma b/backend/schema.prisma index 0657fdf..49dea07 100644 --- a/backend/schema.prisma +++ b/backend/schema.prisma @@ -36,6 +36,7 @@ model Score { id Int @id @default(autoincrement()) gameInternalName String userId Int + timestamp Int //in UNIX milliseconds data Json game Game @relation(fields: [gameInternalName], references: [internalName]) user User @relation(fields: [userId], references: [id]) diff --git a/backend/src/routes/score.ts b/backend/src/routes/score.ts index 03026af..9e9c597 100644 --- a/backend/src/routes/score.ts +++ b/backend/src/routes/score.ts @@ -1,5 +1,6 @@ import express from 'express'; import { prisma } from '../config/db'; +import { timeStamp } from 'node:console'; export const handleScoreUpload = async (req: express.Request, res: express.Response) => { try { @@ -32,6 +33,7 @@ export const handleScoreUpload = async (req: express.Request, res: express.Respo data: scoresArray.map(scoreData => ({ gameInternalName: internalGameName, userId: userId, + timestamp: scoreData.timestamp, data: scoreData })) }); 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/authApi.ts similarity index 97% rename from frontend/src/utils/api.ts rename to 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 { + 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(); +}