ui/routing: move scene down clans/:id"

pkgs/clan-app/ui/src/routes/Clan/Clan.tsx

@@ -1,10 +1,14 @@
 import { RouteSectionProps } from "@solidjs/router";
-import { Component, JSX } from "solid-js";
+import { Component, createEffect, JSX } from "solid-js";
-import { useMaybeClanURI } from "@/src/hooks/clan";
+import { useClanURI } from "@/src/hooks/clan";
 import { CubeScene } from "@/src/scene/cubes";
 import { MachinesQueryResult, useMachinesQuery } from "@/src/queries/queries";
+import { callApi } from "@/src/hooks/api";
+import { store, setStore } from "@/src/stores/clan";
+import { produce } from "solid-js/store";
+import { Button } from "@/src/components/Button/Button";
 
-export const Clans: Component<RouteSectionProps> = (props) => {
+export const Clan: Component<RouteSectionProps> = (props) => {
   return (
     <>
       <div
@@ -15,17 +19,103 @@ export const Clans: Component<RouteSectionProps> = (props) => {
       >
         {props.children}
       </div>
-      <ClanSwitchDog />
+      <ClanSceneController />
     </>
   );
 };
 
-const ClanSwitchDog = () => {
+const ClanSceneController = () => {
-  const maybeClanURI = useMaybeClanURI();
+  const clanURI = useClanURI({ force: true });
+
+  const onCreate = async (id: string) => {
+    const api = callApi("create_machine", {
+      opts: {
+        clan_dir: {
+          identifier: clanURI,
+        },
+        machine: {
+          name: id,
+        },
+      },
+    });
+    const res = await api.result;
+    if (res.status === "error") {
+      // TODO: Handle displaying errors
+      console.error("Error creating machine:");
+
+      // Important: rejects the promise
+      throw new Error(res.errors[0].message);
+    }
+    return;
+  };
+
+  createEffect(() => {
+    console.log("sceneData changed:", store.sceneData);
+  });
 
   return (
-    <SceneDataProvider clanURI={maybeClanURI}>
+    <SceneDataProvider clanURI={clanURI}>
-      {({ query }) => <CubeScene cubesQuery={query} />}
+      {({ query }) => {
+        return (
+          <>
+            <div
+              class="flex flex-row"
+              style={{ position: "absolute", top: "10px", left: "10px" }}
+            >
+              <Button
+                ghost
+                onClick={() => {
+                  setStore(
+                    produce((s) => {
+                      for (const machineId in s.sceneData[clanURI]) {
+                        // Reset the position of each machine to [0, 0]
+                        // delete s.sceneData[clanURI][machineId];
+                      }
+                    }),
+                  );
+                }}
+              >
+                Reset Store
+              </Button>
+              <Button
+                ghost
+                onClick={() => {
+                  console.log("Refetching API");
+                  query.refetch();
+                }}
+              >
+                Refetch API
+              </Button>
+            </div>
+            <CubeScene
+              cubesQuery={query}
+              onCreate={onCreate}
+              sceneStore={() => {
+                const clanURI = useClanURI({ force: true });
+                return store.sceneData?.[clanURI];
+              }}
+              setMachinePos={(machineId: string, pos: [number, number]) => {
+                console.log("calling setStore", machineId, pos);
+                setStore(
+                  produce((s) => {
+                    if (!s.sceneData) {
+                      s.sceneData = {};
+                    }
+                    if (!s.sceneData[clanURI]) {
+                      s.sceneData[clanURI] = {};
+                    }
+                    if (!s.sceneData[clanURI][machineId]) {
+                      s.sceneData[clanURI][machineId] = { position: pos };
+                    } else {
+                      s.sceneData[clanURI][machineId].position = pos;
+                    }
+                  }),
+                );
+              }}
+            />
+          </>
+        );
+      }}
     </SceneDataProvider>
   );
 };

pkgs/clan-app/ui/src/routes/index.tsx

@@ -1,6 +1,6 @@
 import type { RouteDefinition } from "@solidjs/router/dist/types";
 import { Onboarding } from "@/src/routes/Onboarding/Onboarding";
-import { Clans } from "@/src/routes/Clan/Clan";
+import { Clan } from "@/src/routes/Clan/Clan";
 
 export const Routes: RouteDefinition[] = [
   {
@@ -9,7 +9,6 @@ export const Routes: RouteDefinition[] = [
   },
   {
     path: "/clans",
-    component: Clans,
     children: [
       {
         path: "/",
@@ -25,7 +24,7 @@ export const Routes: RouteDefinition[] = [
         children: [
           {
             path: "/",
-            component: (props) => <h1>ClanID: {props.params.clanURI}</h1>,
+            component: Clan,
           },
           {
             path: "/machines",