Use Partykit for whole-app sync

.env.template

@@ -0,0 +1,9 @@
+# Generate one of your own for free at
+# https://start.gg/admin/profile/developer
+# Read more about start.gg auth here:
+# https://developer.start.gg/docs/authentication
+STARTGG_TOKEN=YOUR_TOKEN_HERE
+
+# For persistence of the partykit state to somewhere more reliable
+SUPABASE_URL=SOMETHING
+SUPABASE_KEY=SOMETHING

codegen.ts

@@ -0,0 +1,17 @@
+import { CodegenConfig } from "@graphql-codegen/cli";
+import baseConfig from "./graphql.config";
+
+const config: CodegenConfig = {
+  ...baseConfig,
+  ignoreNoDocuments: false, // for better experience with the watcher
+  generates: {
+    "./src/startgg-gql/generated/": {
+      preset: "client",
+      presetConfig: {
+        fragmentMasking: false,
+      },
+    },
+  },
+};
+
+export default config;

graphql.config.ts

@@ -0,0 +1,14 @@
+import "dotenv/config";
+
+export default {
+  schema: [
+    {
+      "https://api.start.gg/gql/alpha": {
+        headers: {
+          Authorization: `Bearer ${process.env.STARTGG_TOKEN}`,
+        },
+      },
+    },
+  ],
+  documents: ["./src/startgg-gql/*.ts"],
+};

package.json

@@ -46,9 +46,14 @@
     "@blueprintjs/datetime2": "2.3.15",
     "@blueprintjs/icons": "5.14.0",
     "@blueprintjs/select": "5.3.3",
+    "@blueprintjs/table": "^5.2.2",
     "@eslint/js": "^9.14.0",
+    "@graphql-codegen/cli": "5.0.3",
+    "@graphql-codegen/client-preset": "4.4.0",
     "@lcdp/offline-plugin": "5.1.1",
     "@pmmmwh/react-refresh-webpack-plugin": "0.5.15",
+    "@reduxjs/toolkit": "2.3.0",
+    "@supabase/supabase-js": "^2.45.4",
     "@types/better-sqlite3": "7.6.11",
     "@types/eslint__js": "^8.42.3",
     "@types/fuzzy-search": "2.1.5",
@@ -58,6 +63,8 @@
     "@types/papaparse": "patch:@types/papaparse@npm%3A5.3.14#~/.yarn/patches/@types-papaparse-npm-5.3.14-864eddd3a0.patch",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
+    "@urql/core": "^5.0.4",
+    "@urql/exchange-graphcache": "^7.1.2",
     "autoprefixer": "10.4.20",
     "axios": "1.7.7",
     "babel-loader": "9.2.1",
@@ -71,13 +78,15 @@
     "css-loader": "7.1.2",
     "css-minimizer-webpack-plugin": "7.0.0",
     "date-fns": "2.30.0",
+    "dotenv": "^16.4.5",
     "eslint": "^9.0.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-react-hooks": "^5.0.0",
     "favicons": "7.2.0",
     "favicons-webpack-plugin": "6.0.1",
     "fork-ts-checker-webpack-plugin": "9.0.2",
     "fuzzy-search": "3.2.1",
+    "graphql": "^16.9.0",
     "he": "1.2.0",
     "html-entities": "2.5.2",
     "html-loader": "5.1.0",
@@ -95,6 +104,8 @@
     "normalize.css": "8.0.1",
     "p-queue": "8.0.1",
     "papaparse": "5.4.1",
+    "partykit": "0.0.111",
+    "partysocket": "1.0.1",
     "peerjs": "2.0.0-beta.3",
     "postcss": "8.4.49",
     "postcss-loader": "8.1.1",
@@ -103,13 +114,16 @@
     "react-dom": "18.3.1",
     "react-error-boundary": "4.1.2",
     "react-intl": "6.8.7",
+    "react-redux": "^9.1.2",
     "react-refresh": "0.14.2",
+    "react-router-dom": "^6.24.1",
     "sanitize-filename": "1.6.3",
     "simfile-parser": "0.7.2",
     "style-loader": "4.0.0",
     "typescript": "5.6.3",
     "typescript-eslint": "^8.14.0",
     "undici": "6.21.0",
+    "urql": "^4.1.0",
     "victory": "37.3.2",
     "webpack": "5.96.1",
     "webpack-cli": "5.1.4",

partykit.json

@@ -0,0 +1,6 @@
+{
+  "$schema": "https://www.partykit.io/schema.json",
+  "name": "ddr-card-draw-party",
+  "main": "src/party/server.ts",
+  "compatibilityDate": "2024-06-21"
+}

src/app.tsx

@@ -1,5 +1,6 @@
 import "normalize.css";
 import "@blueprintjs/core/lib/css/blueprint.css";
+import "@blueprintjs/table/lib/css/table.css";
 import "@blueprintjs/icons/lib/css/blueprint-icons.css";
 import "@blueprintjs/select/lib/css/blueprint-select.css";
 import "@blueprintjs/datetime2/lib/css/blueprint-datetime2.css";
@@ -8,21 +9,145 @@ import { FocusStyleManager } from "@blueprintjs/core";
 
 FocusStyleManager.onlyShowFocusOnTabs();
 
-import { DrawingList } from "./drawing-list";
 import { UpdateManager } from "./update-manager";
-import { DrawStateManager } from "./draw-state";
+import { IntlProvider } from "./intl-provider";
 import { Header } from "./header";
 import { ThemeSyncWidget } from "./theme-toggle";
-import { DropHandler } from "./drop-handler";
+import { Provider } from "react-redux";
+import { store } from "./state/store";
+import { PartySocketManager } from "./party/client";
+import { Provider as UrqlProvider } from "urql";
+
+import {
+  createBrowserRouter,
+  Outlet,
+  RouterProvider,
+  useParams,
+  Link,
+} from "react-router-dom";
+import { CabManagement } from "./cab-management";
+import { MainView } from "./main-view";
+import { nanoid } from "nanoid";
+import { urqlClient } from "./startgg-gql";
+
+const router = createBrowserRouter([
+  {
+    path: "/",
+    Component: () => {
+      return (
+        <div style={{ padding: "1em" }}>
+          <h1>DDR Tools Event Mode</h1>
+          <h2 style={{ fontStyle: "italic" }}>Alpha Preview</h2>
+          <p>
+            You need to pick an event first. Would you like to:{" "}
+            <Link to={`/e/${nanoid()}`}>Create New Event?</Link>
+          </p>
+          <p>
+            No idea what this is?{" "}
+            <a href="https://youtu.be/4Gpj9jTNcfM">Here's a video</a> trying to
+            explain how to use it!
+          </p>
+        </div>
+      );
+    },
+  },
+  {
+    path: "e/:roomName",
+    element: <AppForRoom />,
+  },
+  {
+    path: "e/:roomName/cab/:cabId/source",
+    element: <ObsSource />,
+    children: [
+      {
+        path: "cards",
+        lazy: async () => {
+          const { CabCards } = await import("./obs-sources/cards");
+          return { Component: CabCards };
+        },
+      },
+      {
+        path: "title",
+        lazy: async () => {
+          const { CabTitle } = await import("./obs-sources/text");
+          return { Component: CabTitle };
+        },
+      },
+      {
+        path: "players",
+        lazy: async () => {
+          const { CabPlayers } = await import("./obs-sources/text");
+          return { Component: CabPlayers };
+        },
+      },
+      {
+        path: "p1",
+        lazy: async () => {
+          const { CabPlayer } = await import("./obs-sources/text");
+          return { element: <CabPlayer p={1} /> };
+        },
+      },
+      {
+        path: "p2",
+        lazy: async () => {
+          const { CabPlayer } = await import("./obs-sources/text");
+          return { element: <CabPlayer p={2} /> };
+        },
+      },
+    ],
+  },
+]);
+
+function ObsSource() {
+  const params = useParams<"roomName" | "cabId">();
+  if (!params.roomName) {
+    return null;
+  }
+  return (
+    <Provider store={store}>
+      <PartySocketManager roomName={params.roomName}>
+        <IntlProvider>
+          <Outlet />
+        </IntlProvider>
+      </PartySocketManager>
+    </Provider>
+  );
+}
+
+function AppForRoom() {
+  const params = useParams<"roomName">();
+  if (!params.roomName) {
+    return null;
+  }
+  return (
+    <Provider store={store}>
+      <PartySocketManager roomName={params.roomName}>
+        <UrqlProvider value={urqlClient}>
+          <Header />
+          <div
+            style={{
+              display: "flex",
+              flexDirection: "row",
+              justifyContent: "stretch",
+              flex: "1 1 0px",
+              overflow: "hidden",
+            }}
+          >
+            <CabManagement />
+            <MainView />
+          </div>
+        </UrqlProvider>
+      </PartySocketManager>
+    </Provider>
+  );
+}
 
 export function App() {
   return (
-    <DrawStateManager defaultDataSet="a3">
+    <IntlProvider>
       <ThemeSyncWidget />
       <UpdateManager />
-      <Header />
-      <DrawingList />
-      <DropHandler />
-    </DrawStateManager>
+      <RouterProvider router={router} />
+    </IntlProvider>
   );
 }