diff options
| -rw-r--r-- | frontend/src/components/modals/TaikoDonderHirobaModal.tsx | 20 | ||||
| -rw-r--r-- | frontend/src/pages/Import.tsx | 25 |
2 files changed, 37 insertions, 8 deletions
diff --git a/frontend/src/components/modals/TaikoDonderHirobaModal.tsx b/frontend/src/components/modals/TaikoDonderHirobaModal.tsx index c8f46c8..897bd75 100644 --- a/frontend/src/components/modals/TaikoDonderHirobaModal.tsx +++ b/frontend/src/components/modals/TaikoDonderHirobaModal.tsx @@ -16,9 +16,9 @@ const TaikoDonderHirobaModal = ({ 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-blue-600/20 rounded-lg flex items-center justify-center mb-4"> + <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-blue-400" + className="w-6 h-6 text-orange-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" @@ -33,13 +33,13 @@ const TaikoDonderHirobaModal = ({ </div> <h4 className="text-white font-semibold mb-2">Donder Hiroba Import</h4> <p className="text-slate-400 text-sm mb-4"> - Import Play History from Donder Hiroba + Import Play History from Donder Hiroba (Official Taiko Cabinets) </p> <button onClick={renderAsCard} - className="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" + className="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 MyPage + Export Donder Hiroba </button> </div> ); @@ -67,20 +67,26 @@ const TaikoDonderHirobaModal = ({ {/* Header */} <div className="mb-6"> <h3 className="text-xl font-bold text-white mb-2"> - Import {game.formattedName} Data (Donder Hiroba) + Import Donder Hiroba Data </h3> <p className="text-slate-400 text-sm"> Exporting from Donder Hiroba requires slightly more setup than other methods. Follow the instructions{" "} <a href="https://github.com/pinapelz/donder-hiroba-to-mirage-import/blob/main/README.md" - className="text-blue-500 hover:underline" + className="text-orange-500 hover:underline" > here </a> . </p> </div> + <div className="mb-6 rounded-md bg-orange-500/10 border border-orange-500/20 p-3"> + <p className="text-sm text-orange-400"> + In case it isn't already clear. You will need to have played at least 1 game of Taiko on an official cabinet using + an IC Card to register on Donder Hiroba. + </p> + </div> {/* Actions */} <div className="flex justify-center"> <button diff --git a/frontend/src/pages/Import.tsx b/frontend/src/pages/Import.tsx index 4e3707c..b4d80a8 100644 --- a/frontend/src/pages/Import.tsx +++ b/frontend/src/pages/Import.tsx @@ -8,6 +8,7 @@ import { uploadScore } from "../utils/scoreUpload"; import { NavBar } from "../components/NavBar"; import { EamusementUserscriptCard } from "../components/modals/EamusementUserscriptModal"; import { FlowerUserscriptCard } from "../components/modals/FlowerUserscriptModal"; +import TaikoDonderHirobaModal from "../components/modals/TaikoDonderHirobaModal"; const JsonUploadModal = lazy(() => import("../components/modals/JsonUploadModal")); const EamusementUserscriptModal = lazy(() => import("../components/modals/EamusementUserscriptModal")); @@ -15,7 +16,7 @@ const DivaNetModal = lazy(() => import("../components/modals/DivaNetModal")); const MusicDiverModal = lazy(() => import("../components/modals/MusicDiverModal")); const FlowerUserscriptModal = lazy(() => import("../components/modals/FlowerUserscriptModal")); -type ModalType = 'json' | 'dancerush' | 'dancearound' | 'divanet' | 'musicdiver' | 'nostalgia' | 'reflecbeat'; +type ModalType = 'json' | 'dancerush' | 'dancearound' | 'divanet' | 'musicdiver' | 'nostalgia' | 'reflecbeat' | 'taiko'; const Import = () => { const { user, isLoading, logout } = useAuth(); @@ -196,6 +197,18 @@ const Import = () => { /> </> ); + case "taiko": + return ( + <> + <JsonUploadCard /> + <TaikoDonderHirobaModal + isOpen={false} + onClose={() => {}} + game={supportedGames.find((g) => g.internalName === selectedGame)} + renderAsCard={() => setOpenModal('taiko')} + /> + </> + ); default: return <JsonUploadCard />; } @@ -382,6 +395,16 @@ const Import = () => { }]} /> )} + {openModal === 'taiko' && ( + <TaikoDonderHirobaModal + isOpen={true} + onClose={() => setOpenModal(null)} + game={ + supportedGames.find((g) => g.internalName === selectedGame) || + undefined + } + /> + )} </Suspense> </div> ); |