Add proper Chunitachi Page

client/package.json

@@ -54,6 +54,7 @@
 		"hash.js": "^1.1.7",
 		"html-webpack-plugin": "^4.5.2",
 		"humanize-duration": "3.27.0",
+		"json-2-csv": "^3.14.4",
 		"luxon": "2.0.1",
 		"mini-css-extract-plugin": "0.8.0",
 		"nanoid": "3.1.23",

client/pnpm-lock.yaml

@@ -50,6 +50,7 @@ specifiers:
   html-webpack-plugin: ^4.5.2
   humanize-duration: 3.27.0
   is-wsl: ^1.1.0
+  json-2-csv: ^3.14.4
   luxon: 2.0.1
   mini-css-extract-plugin: 0.8.0
   nanoid: 3.1.23
@@ -125,6 +126,7 @@ dependencies:
   hash.js: 1.1.7
   html-webpack-plugin: 4.5.2_webpack@4.41.0
   humanize-duration: 3.27.0
+  json-2-csv: 3.14.4
   luxon: 2.0.1
   mini-css-extract-plugin: 0.8.0_webpack@4.41.0
   nanoid: 3.1.23
@@ -5079,6 +5081,11 @@ packages:
     resolution: {integrity: sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU=}
     engines: {node: '>=0.10'}
 
+  /deeks/2.5.1:
+    resolution: {integrity: sha512-fqrBeUz7f1UqaXDRzVB5RG2EfPk15HJRrb2pMZj8mLlSTtz4tRPsK5leFOskoHFPuyZ6+7aRM9j657fvXLkJ7Q==}
+    engines: {node: '>= 12'}
+    dev: false
+
   /deep-equal/1.1.1:
     resolution: {integrity: sha512-yd9c5AdiqVcR+JjcwUQb9DkhJc8ngNr0MahEBGvDiJw8puWab2yZlh+nkasOnZP+EGTAP6rRp2JzJhJZzvNF8g==}
     dependencies:
@@ -5244,6 +5251,11 @@ packages:
       buffer-indexof: 1.1.1
     dev: true
 
+  /doc-path/3.0.2:
+    resolution: {integrity: sha512-VRlA2OKSjTbHWj6wmSanxJ338fE/YN8pqmZ0FIWK5JWkIJMFRc4KmD35JtOrnjvVG0WrzOtDDNHx1lN1tkb+lA==}
+    engines: {node: '>=12'}
+    dev: false
+
   /doctrine/2.1.0:
     resolution: {integrity: sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==}
     engines: {node: '>=0.10.0'}
@@ -7255,6 +7267,14 @@ packages:
     hasBin: true
     dev: false
 
+  /json-2-csv/3.14.4:
+    resolution: {integrity: sha512-6Dg4ZJb5g1Lu6gVM2jJGpu1WUo0/b3xS1b35+dXAWmYzlu2AqTXSFrUzA3l5/aYptjhoiGxCN7CZbxBwrUmhig==}
+    engines: {node: '>= 12'}
+    dependencies:
+      deeks: 2.5.1
+      doc-path: 3.0.2
+    dev: false
+
   /json-parse-better-errors/1.0.2:
     resolution: {integrity: sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw==}
 

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

@@ -0,0 +1,44 @@
+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";
+
+export default function ChunitachiPage() {
+	useSetSubheader(["Import Scores", "Chunitachi"]);
+
+	return (
+		<div>
+			<h1 className="text-center mb-4">What Is Chunitachi?</h1>
+			<div>
+				Chunitachi is a <code>.dll</code> file that hooks into CHUNITHM and automatically
+				sends the scores to a server. {TachiConfig.name} is compatible with what Chunitachi
+				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 <code>chunitachi.dll</code> from{" "}
+					<ExternalLink href="https://github.com/tomatosoupcan/ChunItachi/releases">
+						Here
+					</ExternalLink>
+					.
+				</li>
+				<li>
+					Download your <code>ChunItachi.ini</code> config file{" "}
+					<ExternalLink href="/client-file-flow/CXChunitachi">here</ExternalLink>. <br />
+					<b>This config file contains an API Key, which should be kept secret!</b>.
+				</li>
+				<li>
+					Follow the remaining install instructions on{" "}
+					<ExternalLink href="https://github.com/tomatosoupcan/ChunItachi/blob/main/README.md">
+						GitHub
+					</ExternalLink>
+					.
+				</li>
+				<li>That's it! Your scores should now automatically submit to the server.</li>
+			</ol>
+		</div>
+	);
+}

client/src/app/pages/dashboard/users/UserIntegrationsPage.tsx

@@ -478,8 +478,8 @@ function EditClientModal({
 	const [name, setName] = useState(client.name);
 	const [redirectUri, setRedirectUri] = useState(client.redirectUri ?? "");
 	const [webhookUri, setWebhookUri] = useState(client.webhookUri ?? "");
-	const [apiKeyFilename, setApiKeyFilename] = useState("");
-	const [apiKeyTemplate, setApiKeyTemplate] = useState("");
+	const [apiKeyFilename, setApiKeyFilename] = useState(client.apiKeyFilename ?? "");
+	const [apiKeyTemplate, setApiKeyTemplate] = useState(client.apiKeyTemplate ?? "");
 
 	return (
 		<Modal show={show} onHide={() => setShow(false)}>

client/src/app/pages/dashboard/users/UserSettingsPage.tsx

@@ -104,7 +104,7 @@ function PreferencesForm({ reqUser }: { reqUser: PublicUserDocument }) {
 					onChange={formik.handleChange}
 					label="Developer Mode"
 				/>
-				<Form.Text>Enable debug information.</Form.Text>
+				<Form.Text>Enable debug information and other useful debugging buttons.</Form.Text>
 			</Form.Group>
 			<Form.Group>
 				<Form.Check

client/src/app/routes/ImportRoutes.tsx

@@ -2,6 +2,7 @@ import BarbatosPage from "app/pages/dashboard/import/BarbatosPage";
 import BatchManualPage from "app/pages/dashboard/import/BatchManualPage";
 import BeatorajaDBPage from "app/pages/dashboard/import/BeatorajaDBPage";
 import BeatorajaIRPage from "app/pages/dashboard/import/BeatorajaIRPage";
+import ChunitachiPage from "app/pages/dashboard/import/ChunitachiPage";
 import FervidexPage from "app/pages/dashboard/import/FervidexPage";
 import IIDXEamCSVPage from "app/pages/dashboard/import/IIDXEamCSVPage";
 import ImportPage from "app/pages/dashboard/import/ImportPage";
@@ -93,6 +94,10 @@ export default function ImportRoutes() {
 								<KsHookPage />
 							</Route>
 
+							<Route exact path="/dashboard/import/chunitachi">
+								<ChunitachiPage />
+							</Route>
+
 							<Route exact path="/dashboard/import/iidx-flo">
 								<KAIIntegrationPage
 									hash="6f64b82107cea90aa4c51a33705cd57c1883c8cdc22a634730ca461a431744b3"

client/src/components/tables/components/TachiTable.tsx

@@ -11,6 +11,7 @@ import FilterDirectivesIndicator from "./FilterDirectivesIndicator";
 import NoDataWrapper from "./NoDataWrapper";
 import PageSelector from "./PageSelector";
 import SortableTH from "./SortableTH";
+import { json2csvAsync } from "json-2-csv";
 
 export interface ZTableTHProps {
 	changeSort: (str: string) => void;
@@ -110,6 +111,7 @@ export default function TachiTable<D>({
 		sortMode,
 		reverseSort,
 		changeSort,
+		filteredDataset,
 	} = useZTable(dataset ?? [], {
 		search,
 		searchFunction,
@@ -162,14 +164,46 @@ export default function TachiTable<D>({
 			<div className="col-12 px-0">
 				<div className="row">
 					<div className="col-lg-4 align-self-center">{displayStr}</div>
-					{settings?.preferences.developerMode && (
-						<div className="d-none d-lg-flex col-lg-4 justify-content-center">
-							<Button onClick={() => CopyToClipboard(window)} variant="outline-info">
+					<div className="d-none d-lg-flex col-lg-4 justify-content-center align-items-center">
+						<Button
+							onClick={async () => {
+								let data = dataset;
+								if (search !== "") {
+									data = filteredDataset;
+								}
+
+								CopyToClipboard(
+									// Faulty types with json2csv.
+									// eslint-disable-next-line @typescript-eslint/no-explicit-any
+									await json2csvAsync(data as any, {
+										sortHeader: true,
+									})
+								);
+							}}
+							variant="outline-info"
+							className="w-50"
+						>
+							<Icon type="table" />
+							Export {search !== "" ? "Filtered Data" : "Table"} (CSV)
+						</Button>
+						{settings?.preferences.developerMode && (
+							<Button
+								className="ml-4 w-50"
+								onClick={() => {
+									let data = dataset;
+									if (search !== "") {
+										data = filteredDataset;
+									}
+
+									CopyToClipboard(data);
+								}}
+								variant="outline-info"
+							>
 								<Icon type="table" />
-								Export Data
+								Export {search !== "" ? "Filtered Data" : "Table"} (JSON)
 							</Button>
-						</div>
-					)}
+						)}
+					</div>
 					<div className="col-lg-4 ml-auto text-right">
 						<div className="btn-group">
 							<Button

client/src/components/util/table/useZTable.tsx

@@ -137,5 +137,6 @@ export function useZTable<D>(originalDataset: D[], providedOptions?: Partial<ZTa
 		sortMode,
 		changeSort,
 		reverseSort,
+		filteredDataset: dataset,
 	};
 }

client/src/util/misc.ts

@@ -163,7 +163,10 @@ export function SelectRightChart(
 
 export function CopyToClipboard(data: unknown) {
 	toast.success("Copied data to clipboard.");
-	navigator.clipboard.writeText(JSON.stringify(data, null, "\t"));
+
+	const str = typeof data === "string" ? data : JSON.stringify(data, null, "\t");
+
+	navigator.clipboard.writeText(str);
 }
 
 export const allPermissions: APIPermissions[] = [