From cc197c39c06eabcb3cb38fc7cca6b13792b137d5 Mon Sep 17 00:00:00 2001 From: Pinapelz Date: Wed, 17 Dec 2025 13:05:31 -0800 Subject: create seperate module for EAG import methods for clarity --- .../src/components/modals/EagleUserscriptModal.tsx | 169 +++++++++++++++++++++ .../components/modals/FlowerUserscriptModal.tsx | 10 +- frontend/src/pages/Import.tsx | 46 +++++- .../flower/nostalgia_flower_scraper.user.js | 2 +- .../flower/reflecbeat_flower_scraper.user.js | 2 +- 5 files changed, 217 insertions(+), 12 deletions(-) create mode 100644 frontend/src/components/modals/EagleUserscriptModal.tsx 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 ( +
+
+ + + +
+

+ {mainGameName} Eagle Play History (Userscript) +

+

+ Import playdata from cabinets on the Eagle network +

+ +
+ ) +} + +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 ( +
+ {/* Backdrop */} +
+ + {/* Modal */} +
+
+ {/* Header */} +
+

+ Import {mainGameName} Eagle Play Data +

+

+ Follow the instructions below to import your data +

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

+ You will need your ACCESS CODE to register on Eagle for the first time!

+ Do this by tapping your Amusement IC card at any machine on the Eagle network and copying + down the code displayed on the screen. +

+ This is likely not the same code as the one on the back of your card. +

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

+ Instructions: +

+
    +
  1. + Log into the{" "} + + {mainGameName} Eagle page + +
    2. +
  2. + Navigate to the{" "} + + {mainGameName} Play History Page + {" "} +
    3. +
  3. + Install the relevant userscript (use a browser extension such as{" "} + Violentmonkey) +
    4. + {/* Additional Info */} +
    +

    + {scripts.map(userscript => ( + + {userscript.name} + + ))} +

    +
    +
  4. + A button will appear on the page that you can click to start the scraping process. +
    5. +
  5. + Upload the resulting JSON file into Mirage using the + Batch-Manual Upload functionality +
    6. +
  6. Verify that all data has been imported correctly
    7. +
+
+ + {/* Actions */} +
+ +
+
+
+
+ ); +}; + +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

- {mainGameName} Flower/Eagle Play History (Userscript) + {mainGameName} Flower Play History (Userscript)

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 ) @@ -81,7 +81,7 @@ const FlowerUserscriptModal = ({ {/* Header */}

- Import {mainGameName} Flower/Eagle Play Data + Import {mainGameName} Flower Play Data

Follow the instructions below to import your data @@ -91,8 +91,8 @@ const FlowerUserscriptModal = ({ {/* Warning */}

- You will need your ACCESS CODE to register on Flower/Eagle for the first time!

- 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!

+ Do this by tapping your Amusement IC card at any machine on the Flower network and copying down the code displayed on the screen.

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 = () => { setOpenModal('nostalgia')} + onClick={() => setOpenModal('nostalgiaFlower')} + /> + setOpenModal('nostalgiaEagle')} /> ); @@ -194,7 +200,11 @@ const Import = () => { setOpenModal('reflecbeat')} + onClick={() => setOpenModal('reflecbeatFlower')} + /> + setOpenModal('reflecbeatEagle')} /> ); @@ -376,7 +386,7 @@ const Import = () => { } /> )} - {openModal === 'nostalgia' && ( + {openModal === 'nostalgiaFlower' && ( setOpenModal(null)} @@ -389,7 +399,20 @@ const Import = () => { }]} /> )} - {openModal === 'reflecbeat' && ( + {openModal === 'nostalgiaEagle' && ( + 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' && ( setOpenModal(null)} @@ -402,6 +425,19 @@ const Import = () => { }]} /> )} + {openModal === 'reflecbeatEagle' && ( + 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' && (