diff options
| -rw-r--r-- | frontend/src/components/modals/DanceAroundModal.tsx | 82 | ||||
| -rw-r--r-- | frontend/src/components/modals/DancerushModal.tsx | 79 | ||||
| -rw-r--r-- | frontend/src/components/modals/DivaNetModal.tsx | 29 | ||||
| -rw-r--r-- | frontend/src/components/modals/MusicDiverModal.tsx | 128 | ||||
| -rw-r--r-- | frontend/src/types/constants.ts | 6 |
5 files changed, 226 insertions, 98 deletions
diff --git a/frontend/src/components/modals/DanceAroundModal.tsx b/frontend/src/components/modals/DanceAroundModal.tsx index 45f1f6f..43c71eb 100644 --- a/frontend/src/components/modals/DanceAroundModal.tsx +++ b/frontend/src/components/modals/DanceAroundModal.tsx @@ -1,5 +1,4 @@ import type { SupportedGame } from "../../types/game"; -import { EamuseImportInfo } from "../../types/constants"; interface DanceAroundModalProps { isOpen: boolean; @@ -12,7 +11,7 @@ const DanceAroundModal = ({ isOpen, onClose, game, - renderAsCard + renderAsCard, }: DanceAroundModalProps) => { if (renderAsCard) { return ( @@ -53,8 +52,8 @@ const DanceAroundModal = ({ const handleClose = () => { onClose(); }; - if(game === undefined){ - return "Sorry, due to some extreme error the game you're looking for doesn't seem to exist..." + 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"> @@ -97,45 +96,50 @@ const DanceAroundModal = ({ 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["dancearound"] ? ( - <li> - Navigate to your{" "} - <a href={EamuseImportInfo["dancearound"]?.scorePage}> - Dance aROUND score data page - </a>{" "} - Dance aROUND score data page - </li> - ) : ( - <li>Navigate to your Dance aROUND score data page</li> - )} - {EamuseImportInfo["dancearound"] ? ( - <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 Dance aROUND compatible JSON format - </li> - )} - <li>Upload the resulting JSON file into Mirage using the Batch-Manual Upload functionality</li> + <li> + Log into the{" "} + <a + className="font-bold hover:underline" + href="https://p.eagate.573.jp/game/around/1st/top/index.html"> + DANCE aROUND e-amusement page + </a> + </li> + <li> + Navigate to the{" "} + <a + className="font-bold hover:underline" + href="https://p.eagate.573.jp/game/around/1st/top/index.html#play_hist"> + DANCE aROUND Play History Page + </a>{" "} + </li> + <li> + Install the relevant userscript (use a browser extension such as{" "} + <a + className="font-bold hover:underline" + href="https://www.tampermonkey.net/">Tampermonkey</a>) + </li> + {/* Additional Info */} + <div className="my-2 rounded-md bg-blue-500/10 border border-blue-500/20 p-3"> + <p className="text-sm text-blue-400"> + <a + href="https://github.com/pinapelz/Mirage/raw/refs/heads/main/scripts/dancerush/dancearound_play_history.user.js" + className="font-bold underline" + > + e-amusement Recently Played Score Export Userscript (Last 20 Played) + </a> + </p> + </div> + <li> + A button will appear on the page that you can click to start the scraping process. + </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"> - <a - href="https://github.com/pinapelz/Mirage/raw/refs/heads/main/scripts/dancearound/dancearound_play_history.user.js" - className="underline" - > - e-amusement Recently Played Score Export Userscript (Last 30 Played) - </a> - </p> - </div> {/* Actions */} <div className="flex justify-center"> diff --git a/frontend/src/components/modals/DancerushModal.tsx b/frontend/src/components/modals/DancerushModal.tsx index a13ce2a..f350a5a 100644 --- a/frontend/src/components/modals/DancerushModal.tsx +++ b/frontend/src/components/modals/DancerushModal.tsx @@ -1,5 +1,4 @@ import type { SupportedGame } from "../../types/game"; -import { EamuseImportInfo } from "../../types/constants"; interface DancerushModalProps { isOpen: boolean; @@ -70,7 +69,7 @@ const DancerushModal = ({ {/* Header */} <div className="mb-6"> <h3 className="text-xl font-bold text-white mb-2"> - Import DANCERUSH Data + Import DANCERUSH e-amusement Data </h3> <p className="text-slate-400 text-sm"> Follow the instructions below to import your data @@ -97,46 +96,50 @@ const DancerushModal = ({ 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["dancerush"] ? ( - <li> - Navigate to your{" "} - <a href={EamuseImportInfo["dancerush"]?.scorePage}> - DANCERUSH score data page - </a>{" "} - DANCERUSH score data page - </li> - ) : ( - <li>Navigate to your DANCERUSH score data page</li> - )} - {EamuseImportInfo["dancerush"] ? ( - <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 DANCERUSH compatible JSON format - </li> - )} - <li>Upload the resulting JSON file into Mirage using the Batch-Manual Upload functionality</li> + <li> + Log into the{" "} + <a + className="font-bold hover:underline" + href="https://p.eagate.573.jp/game/dan/1st/top/entrance.html"> + DANCERUSH e-amusement page + </a> + </li> + <li> + Navigate to the{" "} + <a + className="font-bold hover:underline" + href="https://p.eagate.573.jp/game/dan/1st/playdata/index.html#play_hist"> + DANCERUSH Play History Page + </a>{" "} + </li> + <li> + Install the relevant userscript (use a browser extension such as{" "} + <a + className="font-bold hover:underline" + href="https://www.tampermonkey.net/">Tampermonkey</a>) + </li> + {/* Additional Info */} + <div className="my-2 rounded-md bg-blue-500/10 border border-blue-500/20 p-3"> + <p className="text-sm text-blue-400"> + <a + href="https://github.com/pinapelz/Mirage/raw/refs/heads/main/scripts/dancerush/dancerush_play_history.user.js" + className="font-bold underline" + > + e-amusement Recently Played Score Export Userscript (Last 20 Played) + </a> + </p> + </div> + <li> + A button will appear on the page that you can click to start the scraping process. + </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"> - <a - href="https://github.com/pinapelz/Mirage/raw/refs/heads/main/scripts/dancerush/dancerush_play_history.user.js" - className="underline" - > - e-amusement Recently Played Score Export Userscript (Last 20 Played) - </a> - </p> - </div> - {/* Actions */} <div className="flex justify-center"> <button diff --git a/frontend/src/components/modals/DivaNetModal.tsx b/frontend/src/components/modals/DivaNetModal.tsx index a8eefb7..00babc2 100644 --- a/frontend/src/components/modals/DivaNetModal.tsx +++ b/frontend/src/components/modals/DivaNetModal.tsx @@ -82,14 +82,24 @@ const DivaNetModal = ({ Instructions: </h4> <ol className="text-sm text-slate-400 space-y-1 list-decimal list-inside"> - <li>Log into your DIVA.NET account</li> + <li>Log into your <a className="font-bold hover:underline" href="https://project-diva-ac.net/divanet/">DIVA.NET account</a></li> <li> - Navigate to the <a href="https://project-diva-ac.net/divanet/personal/playHistory/0">Play History (プレイ履歴) Page</a> + Navigate to the <a className="font-bold hover:underline" href="https://project-diva-ac.net/divanet/personal/playHistory/0">Play History (プレイ履歴) Page</a> </li> <li> - Install the userscript to your browser (use an extension such - as Tampermonkey). + Install the relevant userscript (use a browser extension like <a className="font-bold hover:underline" href="https://www.tampermonkey.net/">Tampermonkey</a>) </li> + {/* Additional Info */} + <div className="my-2 rounded-md bg-blue-500/10 border border-blue-500/20 p-3"> + <p className="text-sm text-blue-400"> + <a + href="https://github.com/pinapelz/Mirage/raw/refs/heads/main/scripts/projectdiva-arcade/diva_net_history.user.js" + className="font-bold underline" + > + DIVA.NET Recently Played Score Export Userscript (Last 20 Played) + </a> + </p> + </div> <li> A button will appear on the page that you can click to start the scraping process. </li> @@ -98,17 +108,6 @@ const DivaNetModal = ({ </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"> - <a - href="https://github.com/pinapelz/Mirage/raw/refs/heads/main/scripts/projectdiva-arcade/diva_net_history.user.js" - className="underline" - > - DIVA.NET Recently Played Score Export Userscript (Last 20 Played) - </a> - </p> - </div> {/* Actions */} <div className="flex justify-center"> diff --git a/frontend/src/components/modals/MusicDiverModal.tsx b/frontend/src/components/modals/MusicDiverModal.tsx new file mode 100644 index 0000000..a8672fc --- /dev/null +++ b/frontend/src/components/modals/MusicDiverModal.tsx @@ -0,0 +1,128 @@ +import type { SupportedGame } from "../../types/game"; + +interface MusicDiverMyPageModalProps { + isOpen: boolean; + onClose: () => void; + game: SupportedGame | undefined; + renderAsCard?: () => void; +} + +const MusicDiverMyPageModal = ({ + isOpen, + onClose, + game, + renderAsCard +}: MusicDiverMyPageModalProps) => { + if (renderAsCard) { + return ( + <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-green-600/20 rounded-lg flex items-center justify-center mb-4"> + <svg + className="w-6 h-6 text-green-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"> + MUSIC DIVER MyPage + </h4> + <p className="text-slate-400 text-sm mb-4"> + Import Play History via MUSIC DIVER MyPage + </p> + <button + onClick={renderAsCard} + className="w-full bg-green-600 hover:bg-green-700 text-white py-2 px-3 sm:px-4 rounded-md text-sm sm:text-base font-medium transition-colors" + > + Export MyPage + </button> + </div> + ); + } + + 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> + + {/* 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 <a href="https://mypage.musicdiver.jp">MUSIC DIVER MyPage account</a></li> + <li> + Navigate to the <a href="">Play History (プレイ履歴) Page</a> + </li> + <li> + Install the appropriate userscript to your browser (use an extension such + as Tampermonkey). + </li> + {/* 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"> + <a + href="https://github.com/pinapelz/Mirage/raw/refs/heads/main/scripts/projectdiva-arcade/diva_net_history.user.js" + className="underline" + > + DIVA.NET Recently Played Score Export Userscript (Last 20 Played) + </a> + </p> + </div> + <li> + A button will appear on the page that you can click to start the scraping process. + </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> + + + {/* 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 MusicDiverMyPageModal; diff --git a/frontend/src/types/constants.ts b/frontend/src/types/constants.ts index 028545d..d51869e 100644 --- a/frontend/src/types/constants.ts +++ b/frontend/src/types/constants.ts @@ -1,9 +1,3 @@ -export const EamuseImportInfo: Record<string, { scorePage: string }> = { - dancerush: { - scorePage: "https://p.eagate.573.jp/game/dan/1st/playdata/entrance.html#music_data", - }, -}; - export const globalSkipKeys = [ "id", "internalname", |