@noya-app/noya-multiplayer-react 0.1.12 → 0.1.14

package/src/inspector/StateInspector.tsx

@@ -1,8 +1,11 @@
+"use client";
+
 import {
   ConnectionEvent,
   ExtendedPathKey,
+  MultiplayerStateManager,
   MultiplayerUser,
-  StateManager,
+  Task,
 } from "@noya-app/state-manager";
 import React, {
   CSSProperties,
@@ -20,7 +23,7 @@ import {
   chromeDark,
   chromeLight,
 } from "react-inspector";
-import { trackEvents } from "../globals";
+import { shouldTrackEvents$, shouldTrackTasks$ } from "../globals";
 import { useManagedHistory } from "../hooks";
 import { useLocalStorageState } from "./useLocalStorageState";
 
@@ -170,7 +173,7 @@ function DisclosureSection({
             }}
           />
         )}
-        <span style={{ flex: "1 1 0" }}>{title}</span>
+        <span style={{ flex: "1 1 0", userSelect: "none" }}>{title}</span>
         {right}
       </div>
       {open && children}
@@ -234,7 +237,7 @@ function InspectorRow({
 
 const HISTORY_ELEMENT_PREFIX = "noya-multiplayer-history-";
 
-type Anchor = "left" | "right";
+type Anchor = "left" | "right" | "bottom left" | "bottom right";
 
 export const StateInspector = memo(function StateInspector<
   S extends object,
@@ -243,21 +246,25 @@ export const StateInspector = memo(function StateInspector<
   state,
   connectionEvents,
   connectedUsers,
+  tasks,
   userId,
   unstyled,
   colorScheme = "light",
-  stateManager,
+  multiplayerStateManager,
   anchor = "right",
+  forceInit,
   ...props
 }: {
   state: S;
   connectionEvents?: ConnectionEvent<S>[];
   connectedUsers?: MultiplayerUser[];
+  tasks?: Task[];
   userId?: string;
   unstyled?: boolean;
   colorScheme?: "light" | "dark";
-  stateManager: StateManager<S, M>;
+  multiplayerStateManager: MultiplayerStateManager<S, M>;
   anchor?: Anchor;
+  forceInit: () => void;
 } & ComponentPropsWithoutRef<"div">) {
   const [didMount, setDidMount] = React.useState(false);
 
@@ -288,11 +295,19 @@ export const StateInspector = memo(function StateInspector<
     "noya-multiplayer-react-show-data",
     true
   );
+  const [showTasks, setShowTasks] = useLocalStorageState(
+    "noya-multiplayer-react-show-tasks",
+    false
+  );
 
   useEffect(() => {
-    trackEvents.set(showEvents);
+    shouldTrackEvents$.set(showEvents);
   }, [showEvents]);
 
+  useEffect(() => {
+    shouldTrackTasks$.set(showTasks);
+  }, [showTasks]);
+
   useEffect(() => {
     if (eventsContainerRef.current) {
       eventsContainerRef.current.scrollTop =
@@ -300,7 +315,7 @@ export const StateInspector = memo(function StateInspector<
     }
   }, [connectionEvents]);
 
-  const historySnapshot = useManagedHistory(stateManager);
+  const historySnapshot = useManagedHistory(multiplayerStateManager.sm);
 
   useEffect(() => {
     if (historyContainerRef.current) {
@@ -334,7 +349,7 @@ export const StateInspector = memo(function StateInspector<
   const baseStyle: CSSProperties = {
     position: "fixed",
     top: 12,
-    ...(anchor === "right" ? { right: 12 } : { left: 12 }),
+    ...(anchor.includes("right") ? { right: 12 } : { left: 12 }),
     bottom: 12,
     width: 400,
     background:
@@ -361,8 +376,10 @@ export const StateInspector = memo(function StateInspector<
         style={{
           ...baseStyle,
           padding: "4px 10px",
-          bottom: undefined,
           width: undefined,
+          ...(anchor.includes("bottom")
+            ? { bottom: 12, top: undefined }
+            : { bottom: undefined }),
         }}
         onClick={() => setShowInspector(true)}
       >
@@ -433,15 +450,42 @@ export const StateInspector = memo(function StateInspector<
         colorScheme={colorScheme}
         setOpen={setShowData}
         open={showData}
+        right={
+          <span
+            style={{
+              display: "flex",
+              gap: "4px",
+            }}
+          >
+            <SmallButton
+              // disabled={!historySnapshot.canUndo}
+              theme={theme}
+              onClick={() => {
+                forceInit();
+              }}
+            >
+              Reset
+            </SmallButton>
+          </span>
+        }
       >
-        <div
-          style={{
-            ...styles.sectionInner,
-            gap: "1px",
-            padding: "1px 12px",
-          }}
-        >
-          <ObjectInspector data={state} theme={theme} />
+        <div style={styles.sectionInner}>
+          <InspectorRow colorScheme={colorScheme}>
+            <ObjectInspector
+              name={multiplayerStateManager.sm.schema ? "state" : undefined}
+              data={state}
+              theme={theme}
+            />
+          </InspectorRow>
+          {multiplayerStateManager.sm.schema && (
+            <InspectorRow colorScheme={colorScheme}>
+              <ObjectInspector
+                name="schema"
+                data={multiplayerStateManager.sm.schema}
+                theme={theme}
+              />
+            </InspectorRow>
+          )}
         </div>
       </DisclosureSection>
       <DisclosureSection
@@ -449,6 +493,57 @@ export const StateInspector = memo(function StateInspector<
         setOpen={setShowHistory}
         title="History"
         colorScheme={colorScheme}
+        right={
+          <span
+            style={{
+              display: "flex",
+              gap: "4px",
+            }}
+          >
+            <SmallButton
+              disabled={!historySnapshot.canUndo}
+              theme={theme}
+              onClick={() => {
+                multiplayerStateManager.sm.undo();
+              }}
+            >
+              <span style={{ width: "12px", height: "12px" }}>
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="1em"
+                  height="1em"
+                  viewBox="0 0 20 20"
+                >
+                  <path
+                    fill="currentColor"
+                    d="M12 5H7V2L1 6l6 4V7h5c2.2 0 4 1.8 4 4s-1.8 4-4 4H7v2h5c3.3 0 6-2.7 6-6s-2.7-6-6-6"
+                  />
+                </svg>
+              </span>
+            </SmallButton>
+            <SmallButton
+              disabled={!historySnapshot.canRedo}
+              theme={theme}
+              onClick={() => {
+                multiplayerStateManager.sm.redo();
+              }}
+            >
+              <span style={{ width: "12px", height: "12px" }}>
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="1em"
+                  height="1em"
+                  viewBox="0 0 20 20"
+                >
+                  <path
+                    fill="currentColor"
+                    d="M8 5h5V2l6 4l-6 4V7H8c-2.2 0-4 1.8-4 4s1.8 4 4 4h5v2H8c-3.3 0-6-2.7-6-6s2.7-6 6-6"
+                  />
+                </svg>
+              </span>
+            </SmallButton>
+          </span>
+        }
       >
         <div ref={historyContainerRef} style={styles.sectionInner}>
           <div
@@ -533,6 +628,35 @@ export const StateInspector = memo(function StateInspector<
           ))}
         </div>
       </DisclosureSection>
+      <DisclosureSection
+        title="Tasks"
+        colorScheme={colorScheme}
+        open={showTasks}
+        setOpen={setShowTasks}
+      >
+        <div style={styles.sectionInner}>
+          {tasks?.map((task) => (
+            <InspectorRow
+              key={task.id}
+              colorScheme={colorScheme}
+              style={{
+                backgroundColor:
+                  task.status === "done"
+                    ? "rgba(0,255,0,0.2)"
+                    : task.status === "error"
+                      ? "rgba(255,0,0,0.2)"
+                      : undefined,
+              }}
+            >
+              <ObjectInspector
+                name={task.name}
+                data={task.payload}
+                theme={theme}
+              />
+            </InspectorRow>
+          ))}
+        </div>
+      </DisclosureSection>
       <DisclosureSection
         open={showEvents}
         setOpen={setShowEvents}
@@ -710,3 +834,46 @@ function ellipsis(
       return `${str.slice(0, maxLength)}…`;
   }
 }
+
+function SmallButton({
+  children,
+  onClick,
+  style,
+  theme,
+  disabled,
+}: {
+  children: React.ReactNode;
+  onClick: () => void;
+  style?: CSSProperties;
+  theme: typeof chromeLight;
+  disabled?: boolean;
+}) {
+  return (
+    <button
+      type="button"
+      disabled={disabled}
+      onClick={(event) => {
+        event.stopPropagation();
+        onClick();
+      }}
+      style={{
+        flex: "0",
+        appearance: "none",
+        background: "none",
+        color: theme.BASE_COLOR,
+        opacity: disabled ? 0.25 : 1,
+        border: "none",
+        fontSize: "12px",
+        whiteSpace: "nowrap",
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: "2px 0",
+        cursor: "pointer",
+        ...style,
+      }}
+    >
+      {children}
+    </button>
+  );
+}

package/src/inspector/useLocalStorageState.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React from "react";
 
 const localStorage = typeof window !== "undefined" ? window.localStorage : null;

package/src/inspector/useStateInspector.tsx

@@ -1,7 +1,10 @@
+"use client";
+
 import {
   ConnectionEvent,
+  MultiplayerStateManager,
   MultiplayerUser,
-  StateManager,
+  Task,
 } from "@noya-app/state-manager";
 import React, { ComponentProps, useLayoutEffect } from "react";
 import { createRoot } from "react-dom/client";
@@ -19,18 +22,22 @@ export function useStateInspector<S extends object, M>({
   state,
   connectionEvents,
   connectedUsers,
+  tasks,
   userId,
   disabled = false,
   colorScheme,
   anchor,
-  stateManager,
+  multiplayerStateManager,
+  forceInit,
 }: {
   state: S;
   connectionEvents?: ConnectionEvent<S>[];
   connectedUsers?: MultiplayerUser[];
+  tasks?: Task[];
   userId?: string;
   disabled: boolean;
-  stateManager: StateManager<S, M>;
+  multiplayerStateManager: MultiplayerStateManager<S, M>;
+  forceInit: () => void;
 } & Pick<ComponentProps<typeof StateInspector>, "colorScheme" | "anchor">) {
   const [root, setRoot] = React.useState<Root | null>(null);
 
@@ -58,10 +65,14 @@ export function useStateInspector<S extends object, M>({
         state={state}
         connectionEvents={connectionEvents}
         connectedUsers={connectedUsers}
+        tasks={tasks}
         userId={userId}
         colorScheme={colorScheme}
         anchor={anchor}
-        stateManager={stateManager as StateManager<any, any>}
+        forceInit={forceInit}
+        multiplayerStateManager={
+          multiplayerStateManager as MultiplayerStateManager<any, any>
+        }
       />
     );
   }, [
@@ -71,7 +82,9 @@ export function useStateInspector<S extends object, M>({
     connectionEvents,
     root,
     state,
-    stateManager,
+    multiplayerStateManager,
     userId,
+    tasks,
+    forceInit,
   ]);
 }