diff options
5 files changed, 217 insertions, 12 deletions
diff --git a/frontend/src/components/modals/EagleUserscriptModal.tsx b/frontend/src/components/modals/EagleUserscriptModal.tsx new file mode 100644 index 0000000..a7d1652 --- /dev/null +++ b/frontend/src/components/modals/EagleUserscriptModal.tsx @@ -0,0 +1,169 @@ +interface UserScript { + name: string; + url: string; +} + +interface EagleUserscriptModalProps { + isOpen: boolean; + onClose: () => void; + mainGameName: string; + userPage: string; + importPage: string; + scripts: UserScript[]; +} + +interface EagleUserscriptCardProps { + mainGameName: string; + onClick: () => void; +} + +export const EagleUserscriptCard = ({ mainGameName, onClick }: EagleUserscriptCardProps) => { + 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-orange-600/20 rounded-lg flex items-center justify-center mb-4"> + <svg + className="w-6 h-6 text-orange-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"> + {mainGameName} Eagle Play History (Userscript) + </h4> + <p className="text-slate-400 text-sm mb-4"> + Import playdata from cabinets on the Eagle network + </p> + <button + onClick={onClick} + className="hover:cursor-pointer w-full bg-orange-600 hover:bg-orange-700 text-white py-2 px-3 sm:px-4 rounded-md text-sm sm:text-base font-medium transition-colors" + > + Export Eagle Data + </button> + </div> + ) +} + +const EagleUserscriptModal = ({ + isOpen, + onClose, + mainGameName, + userPage, + importPage, + scripts, +}: EagleUserscriptModalProps) => { + if (!isOpen) return null; + + const handleClose = () => { + onClose(); + }; + if(mainGameName === 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 {mainGameName} Eagle Play Data + </h3> + <p className="text-slate-400 text-sm"> + Follow the instructions below to import your data + </p> + </div> + + {/* Warning */} + <div className="mb-6 rounded-md bg-orange-500/10 border border-orange-500/20 p-3"> + <p className="text-sm text-orange-400"> + You will need your ACCESS CODE to register on Eagle for the first time! <br/><br/> + Do this by tapping your Amusement IC card at any machine on the Eagle network and copying + down the code displayed on the screen. + <br/><br/> + This is likely not the same code as the one on the back of your card. + </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 the{" "} + <a + className="font-bold hover:underline" + href={userPage}> + {mainGameName} Eagle page + </a> + </li> + <li> + Navigate to the{" "} + <a + className="font-bold hover:underline" + href={importPage}> + {mainGameName} Play History Page + </a>{" "} + </li> + <li> + Install the relevant userscript (use a browser extension such as{" "} + <a + className="font-bold hover:underline" + href="https://violentmonkey.github.io/">Violentmonkey</a>) + </li> + {/* Additional Info */} + <div className="my-2 rounded-md bg-orange-500/10 border border-orange-500/20 p-3"> + <p className="text-sm text-orange-400"> + {scripts.map(userscript => ( + <a + href={userscript.url} + className="font-bold underline" + > + {userscript.name} + </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 EagleUserscriptModal;
\ No newline at end of file diff --git a/frontend/src/components/modals/FlowerUserscriptModal.tsx b/frontend/src/components/modals/FlowerUserscriptModal.tsx index 0428a9a..1f99ac7 100644 --- a/frontend/src/components/modals/FlowerUserscriptModal.tsx +++ b/frontend/src/components/modals/FlowerUserscriptModal.tsx @@ -36,7 +36,7 @@ export const FlowerUserscriptCard = ({ mainGameName, onClick }: FlowerUserscript </svg> </div> <h4 className="text-white font-semibold mb-2"> - {mainGameName} Flower/Eagle Play History (Userscript) + {mainGameName} Flower Play History (Userscript) </h4> <p className="text-slate-400 text-sm mb-4"> Import playdata from cabinets on the Flower network @@ -45,7 +45,7 @@ export const FlowerUserscriptCard = ({ mainGameName, onClick }: FlowerUserscript onClick={onClick} className="hover:cursor-pointer w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-3 sm:px-4 rounded-md text-sm sm:text-base font-medium transition-colors" > - Export Flower/Eagle Data + Export Flower Data </button> </div> ) @@ -81,7 +81,7 @@ const FlowerUserscriptModal = ({ {/* Header */} <div className="mb-6"> <h3 className="text-xl font-bold text-white mb-2"> - Import {mainGameName} Flower/Eagle Play Data + Import {mainGameName} Flower Play Data </h3> <p className="text-slate-400 text-sm"> Follow the instructions below to import your data @@ -91,8 +91,8 @@ const FlowerUserscriptModal = ({ {/* Warning */} <div className="mb-6 rounded-md bg-blue-500/10 border border-blue-500/20 p-3"> <p className="text-sm text-blue-400"> - You will need your ACCESS CODE to register on Flower/Eagle for the first time! <br/><br/> - Do this by tapping your Amusement IC card at any machine on the Flower/Eagle network and copying + You will need your ACCESS CODE to register on Flower for the first time! <br/><br/> + Do this by tapping your Amusement IC card at any machine on the Flower network and copying down the code displayed on the screen. <br/><br/> This is likely not the same code as the one on the back of your card. diff --git a/frontend/src/pages/Import.tsx b/frontend/src/pages/Import.tsx index ce7eee5..65aabc8 100644 --- a/frontend/src/pages/Import.tsx +++ b/frontend/src/pages/Import.tsx @@ -8,16 +8,18 @@ import { uploadScore } from "../utils/scoreUpload"; import { NavBar } from "../components/NavBar"; import { EamusementUserscriptCard } from "../components/modals/EamusementUserscriptModal"; import { FlowerUserscriptCard } from "../components/modals/FlowerUserscriptModal"; +import { EagleUserscriptCard } from "../components/modals/EagleUserscriptModal"; const JsonUploadModal = lazy(() => import("../components/modals/JsonUploadModal")); const EamusementUserscriptModal = lazy(() => import("../components/modals/EamusementUserscriptModal")); const DivaNetModal = lazy(() => import("../components/modals/DivaNetModal")); const MusicDiverModal = lazy(() => import("../components/modals/MusicDiverModal")); const FlowerUserscriptModal = lazy(() => import("../components/modals/FlowerUserscriptModal")); +const EagleUserscriptModal = lazy(() => import("../components/modals/EagleUserscriptModal")); const TaikoDonderHirobaModal = lazy(() => import("../components/modals/TaikoDonderHirobaModal")); const TaikoEGTSModal = lazy(() => import("../components/modals/TaikoEGTSModal")); -type ModalType = 'json' | 'dancerush' | 'dancearound' | 'divanet' | 'musicdiver' | 'nostalgia' | 'reflecbeat' | 'taiko' | 'taikoEGTS'; +type ModalType = 'json' | 'dancerush' | 'dancearound' | 'divanet' | 'musicdiver' | 'nostalgiaFlower' | 'nostalgiaEagle' | 'reflecbeatFlower' | 'reflecbeatEagle' | 'taiko' | 'taikoEGTS'; const Import = () => { const { user, isLoading, logout } = useAuth(); @@ -184,7 +186,11 @@ const Import = () => { <JsonUploadCard /> <FlowerUserscriptCard mainGameName="NOSTALGIA" - onClick={() => setOpenModal('nostalgia')} + onClick={() => setOpenModal('nostalgiaFlower')} + /> + <EagleUserscriptCard + mainGameName="NOSTALGIA" + onClick={() => setOpenModal('nostalgiaEagle')} /> </> ); @@ -194,7 +200,11 @@ const Import = () => { <JsonUploadCard /> <FlowerUserscriptCard mainGameName="REFLEC BEAT" - onClick={() => setOpenModal('reflecbeat')} + onClick={() => setOpenModal('reflecbeatFlower')} + /> + <EagleUserscriptCard + mainGameName="REFLEC BEAT" + onClick={() => setOpenModal('reflecbeatEagle')} /> </> ); @@ -376,7 +386,7 @@ const Import = () => { } /> )} - {openModal === 'nostalgia' && ( + {openModal === 'nostalgiaFlower' && ( <FlowerUserscriptModal isOpen={true} onClose={() => setOpenModal(null)} @@ -389,7 +399,20 @@ const Import = () => { }]} /> )} - {openModal === 'reflecbeat' && ( + {openModal === 'nostalgiaEagle' && ( + <EagleUserscriptModal + isOpen={true} + onClose={() => setOpenModal(null)} + mainGameName="NOSTALGIA" + userPage="https://eagle.ac" + importPage="https://eagle.ac/game/nostalgia/54827307" + scripts={[{ + name: "Eagle Play History (Exports only the page you are on)", + url: "https://github.com/pinapelz/Mirage/raw/refs/heads/main/scripts/nostalgia/flower/nostalgia_flower_scraper.user.js" + }]} + /> + )} + {openModal === 'reflecbeatFlower' && ( <FlowerUserscriptModal isOpen={true} onClose={() => setOpenModal(null)} @@ -402,6 +425,19 @@ const Import = () => { }]} /> )} + {openModal === 'reflecbeatEagle' && ( + <EagleUserscriptModal + isOpen={true} + onClose={() => setOpenModal(null)} + mainGameName="REFLEC BEAT" + userPage="https://eagle.ac" + importPage="https://eagle.ac/game/rb/profile/21363050" + scripts={[{ + name: "Eagle Play History (Exports only the page you are on)", + url: "https://github.com/pinapelz/Mirage/raw/refs/heads/main/scripts/reflecbeat/flower/reflecbeat_flower_scraper.user.js" + }]} + /> + )} {openModal === 'taiko' && ( <TaikoDonderHirobaModal isOpen={true} diff --git a/scripts/nostalgia/flower/nostalgia_flower_scraper.user.js b/scripts/nostalgia/flower/nostalgia_flower_scraper.user.js index 9647aeb..23536e1 100644 --- a/scripts/nostalgia/flower/nostalgia_flower_scraper.user.js +++ b/scripts/nostalgia/flower/nostalgia_flower_scraper.user.js @@ -155,7 +155,7 @@ meta: { game: "nostalgia", playtype: "Single", - service: "NOSTALGIA Flower Play History", + service: "NOSTALGIA Flower/Eagle Play History", }, scores: scores, }; diff --git a/scripts/reflecbeat/flower/reflecbeat_flower_scraper.user.js b/scripts/reflecbeat/flower/reflecbeat_flower_scraper.user.js index dd5fd32..f2d60b1 100644 --- a/scripts/reflecbeat/flower/reflecbeat_flower_scraper.user.js +++ b/scripts/reflecbeat/flower/reflecbeat_flower_scraper.user.js @@ -31,7 +31,7 @@ meta: { game: "reflecbeat", playtype: "Single", - service: "REFLEC BEAT Flower Play History" + service: "REFLEC BEAT Flower/Eagle Play History" }, scores: parseScoreLog() }; |