add donder hiroba import method card

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>
   );