From 4748a6af3d112ab42efb4c2fcfb8a6b2084b8d55 Mon Sep 17 00:00:00 2001
From: Patric Stout <github@truebrain.nl>
Date: Sat, 11 May 2024 15:51:32 +0200
Subject: [PATCH] feat: developer debug tool, to quickly analyze errors with
 fits (#50)

This can be opened via the console:

  window.esf_debug()
---
 app/page.tsx                      | 13 +++++++++++
 components/Debug/Debug.module.css | 13 +++++++++++
 components/Debug/Debug.tsx        | 36 +++++++++++++++++++++++++++++++
 components/Debug/index.ts         |  1 +
 4 files changed, 63 insertions(+)
 create mode 100644 components/Debug/Debug.module.css
 create mode 100644 components/Debug/Debug.tsx
 create mode 100644 components/Debug/index.ts

diff --git a/app/page.tsx b/app/page.tsx
index 59f4b41..7efa1b5 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -7,11 +7,23 @@ import { DogmaEngineProvider, EsiCharacterSelection, EsiProvider, EveDataProvide
 
 import { Banner } from "@/components/Banner";
 import { LocationHash } from "@/components/LocationHash";
+import { Debug } from "@/components/Debug";
 
 import styles from "./page.module.css";
 
+declare global {
+  interface Window {
+    esf_debug: () => void;
+  }
+}
+
 const Page = () => {
   const [selection, setSelection] = React.useState<"hulls" | "hardware">("hulls");
+  const [debug, setDebug] = React.useState(false);
+
+  React.useEffect(() => {
+    window.esf_debug = () => setDebug((prev) => !prev);
+  }, []);
 
   return <ShipSnapshotProvider>
     <EsiProvider>
@@ -41,6 +53,7 @@ const Page = () => {
             <ShipStatistics />
           </div>
         </div>
+        {debug && <Debug />}
       </LocalFitProvider>
     </EsiProvider>
   </ShipSnapshotProvider>;
diff --git a/components/Debug/Debug.module.css b/components/Debug/Debug.module.css
new file mode 100644
index 0000000..011e587
--- /dev/null
+++ b/components/Debug/Debug.module.css
@@ -0,0 +1,13 @@
+.debug {
+    background-color: #cdcdcd;
+    padding: 10px;
+}
+
+.header {
+    margin-bottom: 10px;
+    text-align: center;
+}
+
+.debug > select {
+    margin-bottom: 10px;
+}
diff --git a/components/Debug/Debug.tsx b/components/Debug/Debug.tsx
new file mode 100644
index 0000000..93ced71
--- /dev/null
+++ b/components/Debug/Debug.tsx
@@ -0,0 +1,36 @@
+import React from "react";
+
+import styles from "./Debug.module.css";
+import { CalculationDetail, EveDataContext, ShipSnapshotContext } from "@eveshipfit/react";
+
+export const Debug = () => {
+  const eveData = React.useContext(EveDataContext);
+  const snapshot = React.useContext(ShipSnapshotContext);
+
+  const [tab, setTab] = React.useState<"JSON" | "Ship" | "Char" | "Structure" | "Target" | { Item?: number; Charge?: number }>("Ship");
+
+  const items = snapshot?.items?.map((item, index) => { return { item, index }; }).sort((a, b) => a.item.flag - b.item.flag) ?? [];
+
+  return <>
+    <div className={styles.debug}>
+      <div className={styles.header}>EVEShip.fit debugger</div>
+
+      <select value={JSON.stringify(tab)} onChange={e => setTab(JSON.parse(e.target.value))}>
+        <option value='"JSON"'>JSON</option>
+        <option value='"Ship"'>Ship</option>
+        <option value='"Char"'>Character</option>
+        {items.map(({item, index}) => <React.Fragment key={index}>
+          <option value={`{"Item":${index}}`}>
+            {item.flag} - {eveData.typeIDs?.[item.type_id]?.name}
+          </option>
+          {item.charge && <option value={`{"Charge":${index}}`}>
+            |-- {eveData.typeIDs?.[item.charge.type_id]?.name}
+          </option>}
+        </React.Fragment>)}
+      </select>
+
+      {tab === "JSON" && <pre>{JSON.stringify(snapshot.currentFit, null, 2)}</pre>}
+      {tab !== "JSON" && <CalculationDetail source={tab} />}
+    </div>
+  </>
+}
diff --git a/components/Debug/index.ts b/components/Debug/index.ts
new file mode 100644
index 0000000..4995a53
--- /dev/null
+++ b/components/Debug/index.ts
@@ -0,0 +1 @@
+export { Debug } from './Debug';