reorg

package.json

@@ -6,6 +6,7 @@
   "scripts": {
     "dev": "vite",
     "build": "vite build",
+    "check": "tsc",
     "generate-pwa-assets": "pwa-assets-generator"
   },
   "type": "module",

scripts/compileStepcharts.ts

@@ -6,8 +6,8 @@ import { Readable } from "node:stream";
 import * as ndjson from "ndjson";
 import { readdir, writeFile, stat } from "node:fs/promises";
 import { createWriteStream } from "node:fs";
-import { parseSm } from "../lib/parseSm";
+import { parseSm } from "../lib/stepcharts/parseSm";
-import { parseSimfile } from "../lib/parseSimfile";
+import { parseSimfile } from "../lib/stepcharts/parseSimfile";
 
 const rootDir = process.env.STEPCHARTS_DIR ?? "/tmp/stepcharts";
 const stepchartsDir = join(rootDir, "prodStepcharts");

src/App.tsx

@@ -20,6 +20,7 @@ import Scores from "./pages/Scores";
 import Settings from "./pages/Settings";
 import ImportChartWorker from "./importCharts?worker";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { CHART_STORE_CREATION_EVENT } from "./globals";
 
 const queryClient = new QueryClient();
 
@@ -76,6 +77,12 @@ export function AppWrapper() {
 export default function App() {
   useEffect(() => {
     const worker = new ImportChartWorker();
+    worker.onmessage = (evt) => {
+      console.log("got event from web worker", evt);
+      if (evt.kind === "chartStoreCreate") {
+        document.dispatchEvent(CHART_STORE_CREATION_EVENT);
+      }
+    };
   });
 
   return (

src/constants.ts

@@ -1 +0,0 @@
-export const APP_DATA_VERSION = 1;

src/globals.ts

@@ -0,0 +1,4 @@
+// export const APP_DATA_VERSION = 1;
+export const APP_DATA_VERSION =
+  Math.floor(new Date().getTime() / 1000) % 1000000;
+export const CHART_STORE_CREATION_EVENT = new Event("chartStoreCreate");

src/importCharts.ts

@@ -1,5 +1,5 @@
 import stepchartsUrl from "../data/stepData.ndjson?url";
-import { APP_DATA_VERSION } from "./constants";
+import { APP_DATA_VERSION, CHART_STORE_CREATION_EVENT } from "./globals";
 import ndjsonStream from "can-ndjson-stream";
 
 export async function importCharts() {
@@ -7,6 +7,8 @@ export async function importCharts() {
     db: { result: db },
     refetchCharts,
   } = await openDb();
+
+  console.log("refetch", refetchCharts);
   console.log("db", db);
 
   if (refetchCharts) {
@@ -62,29 +64,51 @@ async function* iterStream(reader: ReadableStreamReader) {
   }
 }
 
+function migrateToVersion1(db: IDBOpenDBRequest) {
+  try {
+    const store = db.result.createObjectStore("chartStore", {
+      // TODO: Try to use the Konami ID here
+      autoIncrement: true,
+    });
+    store.createIndex("title", "title", { unique: false });
+    store.createIndex("artist", "artist", { unique: false });
+    store.createIndex("mode", "mode", { unique: false });
+    console.log("created object store");
+    self.postMessage({ kind: "chartStoreCreate" });
+  } catch (e) {}
+}
+
 function openDb() {
   return new Promise((resolve) => {
+    console.log("opening db...");
     const db = indexedDB.open("ddrDb", APP_DATA_VERSION);
+
     let refetchCharts = false;
-    db.onupgradeneeded = (evt) => {
-      console.log("UPGRADE", evt.oldVersion, evt.newVersion);
 
+    db.addEventListener("error", (evt) => {
+      console.log("ERROR", evt);
+    });
+
+    db.addEventListener("blocked", (evt) => {
+      console.log("BLOCKED", evt);
+    });
+
+    db.addEventListener("upgradeneeded", (evt) => {
+      console.log("IDB need upgrade", evt.oldVersion, "to", evt.newVersion);
       refetchCharts = true;
+      migrateToVersion1(db);
 
-      {
+      console.log("done upgrading");
-        const store = db.result.createObjectStore("chartStore", {
+    });
-          // TODO: Try to use the Konami ID here
+
-          autoIncrement: true,
+    db.addEventListener("success", (evt) => {
-        });
+      console.log("IDB success", db.result.version, evt);
-        store.createIndex("title", "title", { unique: false });
-        store.createIndex("artist", "artist", { unique: false });
-        store.createIndex("mode", "mode", { unique: false });
-      }
-    };
-    db.onsuccess = () => {
       resolve({ db, refetchCharts });
-    };
+    });
   });
 }
 
-await importCharts();
+addEventListener("message", (evt) => {
+  console.log("message!", evt);
+  importCharts();
+});

src/pages/Charts.tsx

@@ -1,23 +1,73 @@
 import { useQuery, useQueryClient } from "@tanstack/react-query";
-import { APP_DATA_VERSION } from "../constants";
+import { APP_DATA_VERSION, CHART_STORE_CREATION_EVENT } from "../globals";
+
+function openDb(): Promise<IDBOpenDBRequest> {
+  return new Promise((resolve) => {
+    const req = indexedDB.open("ddrDb", APP_DATA_VERSION);
+    req.onsuccess = (evt) => resolve(req);
+  });
+}
+
+async function openStore(): Promise<IDBObjectStore> {
+  const db = await openDb();
+  const tx = db.result.transaction("chartStore", "readonly");
+  return tx.objectStore("chartStore");
+}
 
 async function fetchCharts() {
-  const db = indexedDB.open("ddrDb", APP_DATA_VERSION);
+  let store = null;
-  return [];
+  try {
+    store = await openStore();
+  } catch (e) {
+    console.log("could not open store", e.message);
+  }
+
+  if (!store) {
+    await new Promise<void>((resolve) => {
+      document.addEventListener("chartStoreCreate", (evt) => {
+        console.log("SHIET");
+        resolve();
+      });
+    });
+
+    store = await openStore();
+  }
+
+  const entries = await new Promise<any[]>((resolve) => {
+    const req = store.getAll(undefined, 100);
+    req.onsuccess = (evt) => resolve(req.result);
+  });
+  console.log("entries", entries);
+  return entries;
 }
 
 export default function Charts() {
-  const queryClient = useQueryClient();
   const fetchChartsQuery = useQuery({
     queryKey: ["fetchCharts"],
     queryFn: fetchCharts,
   });
 
+  let inner = undefined;
+
+  if (fetchChartsQuery.isSuccess) {
+    inner = (
+      <div>
+        {fetchChartsQuery.data.map((chart) => (
+          // <div>{JSON.stringify(Object.keys(chart))}</div>
+          <div>{JSON.stringify(chart.title)}</div>
+        ))}
+      </div>
+    );
+  }
+
   return (
     <>
       <h1>Charts</h1>
 
-      {JSON.stringify(fetchChartsQuery)}
+      {fetchChartsQuery.status}
+      {fetchChartsQuery.error?.message}
+
+      {inner}
     </>
   );
 }

tsconfig.json

@@ -3,6 +3,8 @@
     "jsx": "react-jsx",
     "module": "ESNext",
     "target": "ESNext",
-    "moduleResolution": "Node"
+    "moduleResolution": "Node",
+    "skipLibCheck": true,
+    "noEmit": true
   }
 }