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

package/src/inspector/StateInspector.tsx

@@ -1,6 +1,7 @@
 import {
   ConnectionEvent,
   ExtendedPathKey,
+  MultiplayerUser,
   StateManager,
 } from "@noya-app/state-manager";
 import React, {
@@ -35,6 +36,16 @@ const darkTheme = {
   OBJECT_NAME_COLOR: "rgba(255,255,255,0.7)",
 } as any;
 
+const styles = {
+  sectionInner: {
+    flex: "1 1 0",
+    overflowY: "auto",
+    overflowX: "hidden",
+    display: "flex",
+    flexDirection: "column",
+  },
+} as const;
+
 function ToggleButton({
   showInspector,
   setShowInspector,
@@ -61,7 +72,11 @@ function ToggleButton({
         justifyContent: "center",
         padding: "2px 0",
       }}
-      onClick={() => setShowInspector(!showInspector)}
+      onClick={(event) => {
+        event.stopPropagation();
+
+        setShowInspector(!showInspector);
+      }}
     >
       <span style={{ width: "12px", height: "12px" }}>
         {showInspector === (anchor === "right") ? (
@@ -108,6 +123,7 @@ function DisclosureSection({
   children,
   colorScheme,
   isFirst,
+  style,
 }: {
   open: boolean;
   setOpen?: (value: boolean) => void;
@@ -116,6 +132,7 @@ function DisclosureSection({
   children: React.ReactNode;
   colorScheme: "light" | "dark";
   isFirst?: boolean;
+  style?: CSSProperties;
 }) {
   const theme = colorScheme === "light" ? lightTheme : darkTheme;
 
@@ -128,6 +145,7 @@ function DisclosureSection({
         flex: open ? "1 1 0" : "0",
         display: "flex",
         flexDirection: "column",
+        ...style,
       }}
     >
       <div
@@ -160,6 +178,60 @@ function DisclosureSection({
   );
 }
 
+function InspectorRow({
+  children,
+  colorScheme,
+  selected,
+  style,
+  variant,
+}: {
+  children: React.ReactNode;
+  colorScheme: "light" | "dark";
+  selected?: boolean;
+  style?: CSSProperties;
+  variant?: "up" | "down";
+}) {
+  const solidBorderColor =
+    colorScheme === "light" ? "rgb(223 223 223)" : "rgb(29 29 29)";
+
+  return (
+    <div
+      style={{
+        borderBottom: `1px solid ${solidBorderColor}`,
+        fontSize: "12px",
+        fontFamily: "Menlo, monospace",
+        padding: "2px 12px 1px",
+        display: "flex",
+        alignItems: "center",
+        background:
+          variant === "up"
+            ? "rgba(0,255,0,0.1)"
+            : variant === "down"
+              ? "rgba(255,0,0,0.1)"
+              : selected
+                ? "rgb(59 130 246 / 15%)"
+                : undefined,
+        // background:
+        //   colorScheme === "light"
+        //     ? "rgba(0,0,0,0.05)"
+        //     : "rgba(255,255,255,0.05)",
+        ...style,
+      }}
+    >
+      <span
+        style={{
+          fontFamily: "Menlo, monospace",
+          fontSize: "11px",
+          borderRadius: 4,
+          display: "inline-block",
+        }}
+      >
+        {children}
+      </span>
+    </div>
+  );
+}
+
 const HISTORY_ELEMENT_PREFIX = "noya-multiplayer-history-";
 
 type Anchor = "left" | "right";
@@ -170,6 +242,8 @@ export const StateInspector = memo(function StateInspector<
 >({
   state,
   connectionEvents,
+  connectedUsers,
+  userId,
   unstyled,
   colorScheme = "light",
   stateManager,
@@ -178,6 +252,8 @@ export const StateInspector = memo(function StateInspector<
 }: {
   state: S;
   connectionEvents?: ConnectionEvent<S>[];
+  connectedUsers?: MultiplayerUser[];
+  userId?: string;
   unstyled?: boolean;
   colorScheme?: "light" | "dark";
   stateManager: StateManager<S, M>;
@@ -204,6 +280,14 @@ export const StateInspector = memo(function StateInspector<
     "noya-multiplayer-react-show-history",
     false
   );
+  const [showUsers, setShowUsers] = useLocalStorageState(
+    "noya-multiplayer-react-show-users",
+    true
+  );
+  const [showData, setShowData] = useLocalStorageState(
+    "noya-multiplayer-react-show-data",
+    true
+  );
 
   useEffect(() => {
     trackEvents.set(showEvents);
@@ -230,7 +314,7 @@ export const StateInspector = memo(function StateInspector<
     if (!historyContainerRef.current) return;
 
     const historyEntry = historyContainerRef.current.querySelector(
-      `#${HISTORY_ELEMENT_PREFIX}${historySnapshot.historyIndex - 1}`
+      `#${HISTORY_ELEMENT_PREFIX}${historySnapshot.historyIndex}`
     );
 
     if (historyEntry) {
@@ -242,8 +326,8 @@ export const StateInspector = memo(function StateInspector<
   }, [historySnapshot.historyIndex]);
 
   const theme = colorScheme === "light" ? lightTheme : darkTheme;
-  const borderColor =
-    colorScheme === "light" ? "rgba(0,0,0,0.1)" : "rgba(255,255,255,0.1)";
+  // const borderColor =
+  //   colorScheme === "light" ? "rgba(0,0,0,0.1)" : "rgba(255,255,255,0.1)";
   const solidBorderColor =
     colorScheme === "light" ? "rgb(223 223 223)" : "rgb(29 29 29)";
 
@@ -300,12 +384,16 @@ export const StateInspector = memo(function StateInspector<
         ...props.style,
       }}
     >
-      {/* <div style={{ flex: "0", fontSize: "12px" }}>User ID: {userId}</div> */}
       <DisclosureSection
-        open
-        title="Data"
-        colorScheme={colorScheme}
         isFirst
+        open={showUsers}
+        setOpen={setShowUsers}
+        title="Users"
+        colorScheme={colorScheme}
+        style={{
+          flex: "0 0 auto",
+          maxHeight: "200px",
+        }}
         right={
           <ToggleButton
             showInspector={showInspector}
@@ -314,13 +402,41 @@ export const StateInspector = memo(function StateInspector<
             anchor={anchor}
           />
         }
+      >
+        <div style={{ ...styles.sectionInner, flex: "0 0 auto" }}>
+          {connectedUsers?.map((user) => (
+            <InspectorRow
+              key={user.id}
+              colorScheme={colorScheme}
+              variant={user.id === userId ? "up" : undefined}
+            >
+              {user.name} ({ellipsis(user.id.toString(), 8, "middle")})
+            </InspectorRow>
+          ))}
+          {!connectedUsers && (
+            <div
+              style={{
+                padding: "12px",
+                fontSize: "12px",
+                display: "flex",
+                flexDirection: "column",
+                gap: "4px",
+              }}
+            >
+              <span>No connected users</span>
+            </div>
+          )}
+        </div>
+      </DisclosureSection>
+      <DisclosureSection
+        title="Data"
+        colorScheme={colorScheme}
+        setOpen={setShowData}
+        open={showData}
       >
         <div
           style={{
-            flex: "1 1 0",
-            overflowY: "auto",
-            display: "flex",
-            flexDirection: "column",
+            ...styles.sectionInner,
             gap: "1px",
             padding: "1px 12px",
           }}
@@ -334,53 +450,42 @@ export const StateInspector = memo(function StateInspector<
         title="History"
         colorScheme={colorScheme}
       >
-        <div
-          ref={historyContainerRef}
-          style={{
-            flex: "1 1 0",
-            overflowY: "auto",
-            overflowX: "hidden",
-            display: "flex",
-            flexDirection: "column",
-          }}
-        >
-          {historySnapshot.history.length < 50 && (
-            <div
-              id={`${HISTORY_ELEMENT_PREFIX}0`}
+        <div ref={historyContainerRef} style={styles.sectionInner}>
+          <div
+            id={`${HISTORY_ELEMENT_PREFIX}0`}
+            style={{
+              borderBottom: `1px solid ${solidBorderColor}`,
+              fontSize: "12px",
+              fontFamily: "Menlo, monospace",
+              padding: "2px 12px 1px",
+              display: "flex",
+              alignItems: "center",
+              background:
+                historySnapshot.historyIndex === 0
+                  ? "rgb(59 130 246 / 15%)"
+                  : undefined,
+            }}
+          >
+            <span
               style={{
-                borderBottom: `1px solid ${solidBorderColor}`,
-                fontSize: "12px",
                 fontFamily: "Menlo, monospace",
-                padding: "2px 12px 1px",
-                display: "flex",
-                alignItems: "center",
-                background:
-                  historySnapshot.historyIndex === 0
-                    ? "rgb(59 130 246 / 15%)"
-                    : undefined,
+                fontSize: "11px",
+                borderRadius: 4,
+                display: "inline-block",
               }}
             >
-              <span
-                style={{
-                  fontFamily: "Menlo, monospace",
-                  fontSize: "11px",
-                  borderRadius: 4,
-                  display: "inline-block",
-                }}
-              >
-                Initial state
-              </span>
-            </div>
-          )}
-          {historySnapshot.history.slice(-50).map((entry, index) => (
+              Initial state
+            </span>
+          </div>
+          {historySnapshot.history.map((entry, index) => (
             <div
-              id={`noya-multiplayer-history-${index}`}
+              id={`${HISTORY_ELEMENT_PREFIX}${index + 1}`}
               key={index}
               style={{
                 padding: "0px 12px 1px",
                 borderBottom: `1px solid ${solidBorderColor}`,
                 background:
-                  index === historySnapshot.historyIndex - 1
+                  index + 1 === historySnapshot.historyIndex
                     ? "rgb(59 130 246 / 15%)"
                     : undefined,
               }}
@@ -434,86 +539,51 @@ export const StateInspector = memo(function StateInspector<
         title="Events"
         colorScheme={colorScheme}
       >
-        <div
-          ref={eventsContainerRef}
-          style={{
-            flex: "1 1 0",
-            overflowY: "auto",
-            display: "flex",
-            flexDirection: "column",
-          }}
-        >
-          {connectionEvents?.map((event, index) => (
-            <div
-              key={index}
-              style={{
-                borderBottom: `1px solid ${borderColor}`,
-              }}
-            >
-              {event.type === "stateChange" ? (
-                <div
-                  style={{
-                    padding: "2px 12px",
-                    background:
-                      colorScheme === "light"
-                        ? "rgba(0,0,0,0.05)"
-                        : "rgba(255,255,255,0.05)",
-                    display: "flex",
-                    alignItems: "center",
-                  }}
-                >
-                  <span
-                    style={{
-                      fontFamily: "Menlo, monospace",
-                      fontSize: "11px",
-                      borderRadius: 4,
-                      display: "inline-block",
-                    }}
-                  >
-                    connection:{" "}
-                    <span style={{ fontStyle: "italic" }}>
-                      {event.state.toLowerCase()}
-                    </span>
-                  </span>
-                </div>
-              ) : (
-                <div
-                  style={{
-                    padding: "0px 12px 1px",
-                    background:
-                      event.type === "send"
-                        ? "rgba(0,255,0,0.1)"
-                        : "rgba(255,0,0,0.1)",
+        <div ref={eventsContainerRef} style={styles.sectionInner}>
+          {connectionEvents?.map((event, index) =>
+            event.type === "stateChange" ? (
+              <InspectorRow key={index} colorScheme={colorScheme}>
+                connection:{" "}
+                <span style={{ fontStyle: "italic" }}>
+                  {event.state.toLowerCase()}
+                </span>
+              </InspectorRow>
+            ) : (
+              <InspectorRow
+                key={index}
+                colorScheme={colorScheme}
+                variant={event.type === "send" ? "up" : "down"}
+                style={{
+                  padding: "0px 12px 1px",
+                }}
+              >
+                <ObjectInspector
+                  data={event.message}
+                  theme={theme}
+                  nodeRenderer={({
+                    depth,
+                    name,
+                    data,
+                    isNonenumerable,
+                    expanded,
+                  }: any) => {
+                    const direction = event.type === "send" ? "up" : "down";
+
+                    return depth === 0 ? (
+                      <ObjectRootLabel direction={direction} data={data} />
+                    ) : (
+                      <ObjectLabel
+                        direction={direction}
+                        name={name}
+                        data={data}
+                        isNonenumerable={isNonenumerable}
+                      />
+                    );
                   }}
-                >
-                  <ObjectInspector
-                    data={event.message}
-                    theme={theme}
-                    nodeRenderer={({
-                      depth,
-                      name,
-                      data,
-                      isNonenumerable,
-                      expanded,
-                    }: any) => {
-                      const direction = event.type === "send" ? "up" : "down";
-
-                      return depth === 0 ? (
-                        <ObjectRootLabel direction={direction} data={data} />
-                      ) : (
-                        <ObjectLabel
-                          direction={direction}
-                          name={name}
-                          data={data}
-                          isNonenumerable={isNonenumerable}
-                        />
-                      );
-                    }}
-                  />
-                </div>
-              )}
-            </div>
-          ))}
+                />
+              </InspectorRow>
+            )
+          )}
           {!connectionEvents && (
             <div
               style={{
@@ -606,61 +676,6 @@ function Arrow({
   );
 }
 
-// <div className="flex py-px flex-col-reverse">
-// <button
-// type="button"
-// className={cx(
-// "px-4 py-2 cursor-pointer text-left",
-// 0 === historySnapshot.historyIndex && "bg-orange-500/25"
-// )}
-// onClick={() => {
-// // stateManager.goToHistoryIndex(0);
-// }}
-// >
-// <div className="flex justify-between gap-2">
-// <span>Initial State</span>
-// </div>
-// </button>
-// {historySnapshot.history.map((entry, index) => (
-// <button
-// key={index}
-// type="button"
-// className={cx(
-// "px-4 py-2 cursor-pointer text-left",
-// index === historySnapshot.historyIndex - 1 &&
-// "bg-orange-500/25"
-// )}
-// onClick={() => {
-// // stateManager.goToHistoryIndex(index + 1);
-// }}
-// >
-// <div className="flex justify-between gap-2">
-// <span>
-// {index + 1}. {entry.metadata.name}
-// </span>
-// <span>
-// {new Date(
-// entry.metadata.timestamp
-// ).toLocaleTimeString()}
-// </span>
-// </div>
-// <div className="font-mono text-xs">
-// {entry.redoPatches?.map((patch, index) => (
-// <pre key={index} className="max-w-full">
-// {patch.op === "remove"
-// ? `Delete ${pathToString(patch.path)}`
-// : `${pathToString(patch.path)} = ${JSON.stringify(
-// patch.value,
-// null,
-// 2
-// )}`}
-// </pre>
-// ))}
-// </div>
-// </button>
-// ))}
-// </div>
-
 function pathToString(extendedPath: ExtendedPathKey[]) {
   return extendedPath
     .map((key) =>

package/src/inspector/useStateInspector.tsx

@@ -1,4 +1,8 @@
-import { ConnectionEvent, StateManager } from "@noya-app/state-manager";
+import {
+  ConnectionEvent,
+  MultiplayerUser,
+  StateManager,
+} from "@noya-app/state-manager";
 import React, { ComponentProps, useLayoutEffect } from "react";
 import { createRoot } from "react-dom/client";
 
@@ -14,6 +18,8 @@ function createPortalElement() {
 export function useStateInspector<S extends object, M>({
   state,
   connectionEvents,
+  connectedUsers,
+  userId,
   disabled = false,
   colorScheme,
   anchor,
@@ -21,6 +27,8 @@ export function useStateInspector<S extends object, M>({
 }: {
   state: S;
   connectionEvents?: ConnectionEvent<S>[];
+  connectedUsers?: MultiplayerUser[];
+  userId?: string;
   disabled: boolean;
   stateManager: StateManager<S, M>;
 } & Pick<ComponentProps<typeof StateInspector>, "colorScheme" | "anchor">) {
@@ -49,10 +57,21 @@ export function useStateInspector<S extends object, M>({
       <StateInspector
         state={state}
         connectionEvents={connectionEvents}
+        connectedUsers={connectedUsers}
+        userId={userId}
         colorScheme={colorScheme}
         anchor={anchor}
         stateManager={stateManager as StateManager<any, any>}
       />
     );
-  }, [anchor, colorScheme, connectionEvents, root, state, stateManager]);
+  }, [
+    anchor,
+    colorScheme,
+    connectedUsers,
+    connectionEvents,
+    root,
+    state,
+    stateManager,
+    userId,
+  ]);
 }