Add Mikado hook as a featured import method for SDVX (#947)

client/src/app/pages/dashboard/import/ImportPage.tsx

@@ -148,11 +148,11 @@ function ImportInfoDisplayer({ game }: { game: Game }) {
 	} else if (game === "sdvx") {
 		Content.unshift(
 			<ImportInfoCard
-				name="Barbatos"
-				href="barbatos"
-				desc="Automatically import scores, whenever you get them!"
-				moreInfo="This is the recommended way to import SDVX scores, as it provides high quality data in real-time."
-				key="Barbatos"
+				name="Mikado"
+				href="mikado"
+				desc="Automatically import scores and dans!"
+				moreInfo="This is the recommended way to import SDVX scores, data is submitted after passing the score/result screen."
+				key="Mikado"
 			/>,
 			<ImportInfoCard
 				name="Konaste Hook"
@@ -161,6 +161,18 @@ function ImportInfoDisplayer({ game }: { game: Game }) {
 				moreInfo="Yep, it's that simple."
 				key="Konaste Hook"
 			/>,
+			<ImportInfoCard
+				name="Barbatos"
+				href="barbatos"
+				desc="Automatically import scores, whenever you get them!"
+				moreInfo={
+					<>
+						High quality data in real-time. <br />
+						Note: Only for versions up to 2022081600.
+					</>
+				}
+				key="Barbatos"
+			/>,
 			<ImportTypeInfoCard
 				key="file/eamusement-sdvx-csv"
 				importType="file/eamusement-sdvx-csv"

client/src/app/pages/dashboard/import/MikadoPage.tsx

@@ -0,0 +1,53 @@
+import useSetSubheader from "components/layout/header/useSetSubheader";
+import Divider from "components/util/Divider";
+import ExternalLink from "components/util/ExternalLink";
+import { TachiConfig } from "lib/config";
+import React from "react";
+import Alert from "react-bootstrap/Alert";
+
+export default function MikadoPage() {
+	useSetSubheader(["Import Scores", "Mikado"]);
+
+	return (
+		<div>
+			<h1 className="text-center mb-4">What Is Mikado?</h1>
+			<div>
+				Mikado is a <code>.dll</code> file that hooks into SDVX and automatically sends
+				the scores to a server. {TachiConfig.name} is compatible with what Mikado sends,
+				so you can use it to submit scores!
+			</div>
+			<Divider />
+			<h1 className="text-center my-4">Setup Instructions</h1>
+			<ol className="instructions-list">
+				<li>
+					Download the latest version of <code>mikado.dll</code> from{" "}
+					<ExternalLink href="https://github.com/adamaq01/mikado/releases/latest">
+						here
+					</ExternalLink>
+					.
+				</li>
+				<li>
+					Download your <code>mikado.toml</code> config file{" "}
+					<ExternalLink href="/client-file-flow/CXMikado">here</ExternalLink>
+					. <br />
+					<Alert variant="warning" className="mt-2">
+						This file contains an API Key, which is meant to be kept secret!
+					</Alert>
+				</li>
+				<li>
+					Drop both files inside your SDVX folder, next to your <code>.bat</code> file.
+				</li>
+				<ul className="instructions-list">
+					<li>
+						BemaniTools: Add <code>-K mikado.dll</code> to your <code>.bat</code>{" "}
+						file.
+					</li>
+					<li>
+						SpiceTools: Add <code>-k mikado.dll</code> to your <code>.bat</code> file.
+					</li>
+				</ul>
+				<li>Your scores and dans now automatically upload to {TachiConfig.name}!</li>
+			</ol>
+		</div>
+	);
+}

client/src/app/pages/dashboard/misc/CreditsPage.tsx

@@ -161,6 +161,9 @@ export default function CreditsPage() {
 					<li>
 						{a("Chunitachi", "CHUNITHM Black Magic")}: <strong>tomatosoup</strong>
 					</li>
+					<li>
+						{a("Mikado", "SDVX Pocky")}: <strong>adamaq01</strong>
+					</li>
 					<li>
 						{a("Server", "Ethereum Mining Solutions")}: <strong>viddy</strong>
 						<br />

client/src/app/routes/ImportRoutes.tsx

@@ -1,4 +1,5 @@
 import BarbatosPage from "app/pages/dashboard/import/BarbatosPage";
+import MikadoPage from "app/pages/dashboard/import/MikadoPage";
 import BatchManualPage from "app/pages/dashboard/import/BatchManualPage";
 import LR2orajaDBPage from "app/pages/dashboard/import/LR2orajaDBPage";
 import BeatorajaIRPage from "app/pages/dashboard/import/BeatorajaIRPage";
@@ -118,6 +119,9 @@ export default function ImportRoutes() {
 							<Route exact path="/import/silent-hook">
 								<SilentHookPage />
 							</Route>
+							<Route exact path="/import/mikado">
+								<MikadoPage />
+							</Route>
 
 							<Route exact path="/import/chunitachi">
 								<ChunitachiPage />

server/src/lib/builtin-clients/builtin-clients.ts

@@ -124,6 +124,43 @@ apikey = %%TACHI_KEY%%`,
 		requestedPermissions: ["submit_score"],
 		webhookUri: null,
 	},
+	{
+		name: "Mikado",
+		webhookUri: null,
+		redirectUri: null,
+		requestedPermissions: ["submit_score"],
+		clientID: "CXMikado",
+		apiKeyFilename: "mikado.toml",
+		apiKeyTemplate: `[general]
+# Set to 'false' to disable the hook
+enable = true
+# Whether the hook should export your class (skill level) or not
+export_class = true
+# Whether the hook should should inject your Tachi PBs in place of Cloud PBs
+inject_cloud_pbs = true
+# Timeout for web requests, in milliseconds
+timeout = 3000
+
+[cards]
+# Card numbers that should be whitelisted
+# If this is empty, all cards will be whitelisted
+# E000 format, should be in single quotes and separated by commas
+# Example: whitelist = ['E000000000', 'E000000001']
+whitelist = []
+
+[tachi]
+# Tachi instance base URL
+base_url = '${ServerConfig.OUR_URL}'
+# Tachi status endpoint
+status = '/api/v1/status'
+# Tachi score import endpoint
+import = '/ir/direct-manual/import'
+# Tachi pbs endpoint
+pbs = '/api/v1/users/{}/games/sdvx/Single/pbs/all'
+# Your Tachi API key
+api_key = '%%TACHI_KEY%%'
+`,
+	},
 ];
 
 const BtchiDefaultClients: DefaultClients = [