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

package/dist/index.mjs

@@ -101,6 +101,15 @@ var darkTheme = {
   BASE_BACKGROUND_COLOR: "transparent",
   OBJECT_NAME_COLOR: "rgba(255,255,255,0.7)"
 };
+var styles = {
+  sectionInner: {
+    flex: "1 1 0",
+    overflowY: "auto",
+    overflowX: "hidden",
+    display: "flex",
+    flexDirection: "column"
+  }
+};
 function ToggleButton({
   showInspector,
   setShowInspector,
@@ -123,7 +132,10 @@ function ToggleButton({
         justifyContent: "center",
         padding: "2px 0"
       },
-      onClick: () => setShowInspector(!showInspector)
+      onClick: (event) => {
+        event.stopPropagation();
+        setShowInspector(!showInspector);
+      }
     },
     /* @__PURE__ */ React2.createElement("span", { style: { width: "12px", height: "12px" } }, showInspector === (anchor === "right") ? /* @__PURE__ */ React2.createElement(
       "svg",
@@ -171,7 +183,8 @@ function DisclosureSection({
   right,
   children,
   colorScheme,
-  isFirst
+  isFirst,
+  style
 }) {
   const theme = colorScheme === "light" ? lightTheme : darkTheme;
   const borderColor = colorScheme === "light" ? "rgba(0,0,0,0.1)" : "rgba(255,255,255,0.1)";
@@ -181,7 +194,8 @@ function DisclosureSection({
       style: {
         flex: open ? "1 1 0" : "0",
         display: "flex",
-        flexDirection: "column"
+        flexDirection: "column",
+        ...style
       }
     },
     /* @__PURE__ */ React2.createElement(
@@ -215,10 +229,52 @@ function DisclosureSection({
     open && children
   );
 }
+function InspectorRow({
+  children,
+  colorScheme,
+  selected,
+  style,
+  variant
+}) {
+  const solidBorderColor = colorScheme === "light" ? "rgb(223 223 223)" : "rgb(29 29 29)";
+  return /* @__PURE__ */ React2.createElement(
+    "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%)" : void 0,
+        // background:
+        //   colorScheme === "light"
+        //     ? "rgba(0,0,0,0.05)"
+        //     : "rgba(255,255,255,0.05)",
+        ...style
+      }
+    },
+    /* @__PURE__ */ React2.createElement(
+      "span",
+      {
+        style: {
+          fontFamily: "Menlo, monospace",
+          fontSize: "11px",
+          borderRadius: 4,
+          display: "inline-block"
+        }
+      },
+      children
+    )
+  );
+}
 var HISTORY_ELEMENT_PREFIX = "noya-multiplayer-history-";
 var StateInspector = memo(function StateInspector2({
   state,
   connectionEvents,
+  connectedUsers,
+  userId,
   unstyled,
   colorScheme = "light",
   stateManager,
@@ -243,6 +299,14 @@ var StateInspector = memo(function StateInspector2({
     "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
+  );
   useEffect2(() => {
     trackEvents.set(showEvents);
   }, [showEvents]);
@@ -261,7 +325,7 @@ var StateInspector = memo(function StateInspector2({
     if (!historyContainerRef.current)
       return;
     const historyEntry = historyContainerRef.current.querySelector(
-      `#${HISTORY_ELEMENT_PREFIX}${historySnapshot.historyIndex - 1}`
+      `#${HISTORY_ELEMENT_PREFIX}${historySnapshot.historyIndex}`
     );
     if (historyEntry) {
       historyEntry.scrollIntoView({
@@ -271,7 +335,6 @@ var StateInspector = memo(function StateInspector2({
     }
   }, [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 solidBorderColor = colorScheme === "light" ? "rgb(223 223 223)" : "rgb(29 29 29)";
   const baseStyle = {
     position: "fixed",
@@ -330,10 +393,15 @@ var StateInspector = memo(function StateInspector2({
     /* @__PURE__ */ React2.createElement(
       DisclosureSection,
       {
-        open: true,
-        title: "Data",
-        colorScheme,
         isFirst: true,
+        open: showUsers,
+        setOpen: setShowUsers,
+        title: "Users",
+        colorScheme,
+        style: {
+          flex: "0 0 auto",
+          maxHeight: "200px"
+        },
         right: /* @__PURE__ */ React2.createElement(
           ToggleButton,
           {
@@ -344,14 +412,44 @@ var StateInspector = memo(function StateInspector2({
           }
         )
       },
-      /* @__PURE__ */ React2.createElement(
+      /* @__PURE__ */ React2.createElement("div", { style: { ...styles.sectionInner, flex: "0 0 auto" } }, connectedUsers?.map((user) => /* @__PURE__ */ React2.createElement(
+        InspectorRow,
+        {
+          key: user.id,
+          colorScheme,
+          variant: user.id === userId ? "up" : void 0
+        },
+        user.name,
+        " (",
+        ellipsis(user.id.toString(), 8, "middle"),
+        ")"
+      )), !connectedUsers && /* @__PURE__ */ React2.createElement(
         "div",
         {
           style: {
-            flex: "1 1 0",
-            overflowY: "auto",
+            padding: "12px",
+            fontSize: "12px",
             display: "flex",
             flexDirection: "column",
+            gap: "4px"
+          }
+        },
+        /* @__PURE__ */ React2.createElement("span", null, "No connected users")
+      ))
+    ),
+    /* @__PURE__ */ React2.createElement(
+      DisclosureSection,
+      {
+        title: "Data",
+        colorScheme,
+        setOpen: setShowData,
+        open: showData
+      },
+      /* @__PURE__ */ React2.createElement(
+        "div",
+        {
+          style: {
+            ...styles.sectionInner,
             gap: "1px",
             padding: "1px 12px"
           }
@@ -367,72 +465,58 @@ var StateInspector = memo(function StateInspector2({
         title: "History",
         colorScheme
       },
-      /* @__PURE__ */ React2.createElement(
+      /* @__PURE__ */ React2.createElement("div", { ref: historyContainerRef, style: styles.sectionInner }, /* @__PURE__ */ React2.createElement(
         "div",
         {
-          ref: historyContainerRef,
+          id: `${HISTORY_ELEMENT_PREFIX}0`,
           style: {
-            flex: "1 1 0",
-            overflowY: "auto",
-            overflowX: "hidden",
+            borderBottom: `1px solid ${solidBorderColor}`,
+            fontSize: "12px",
+            fontFamily: "Menlo, monospace",
+            padding: "2px 12px 1px",
             display: "flex",
-            flexDirection: "column"
+            alignItems: "center",
+            background: historySnapshot.historyIndex === 0 ? "rgb(59 130 246 / 15%)" : void 0
           }
         },
-        historySnapshot.history.length < 50 && /* @__PURE__ */ React2.createElement(
-          "div",
+        /* @__PURE__ */ React2.createElement(
+          "span",
           {
-            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%)" : void 0
+              fontSize: "11px",
+              borderRadius: 4,
+              display: "inline-block"
             }
           },
-          /* @__PURE__ */ React2.createElement(
-            "span",
-            {
-              style: {
-                fontFamily: "Menlo, monospace",
-                fontSize: "11px",
-                borderRadius: 4,
-                display: "inline-block"
-              }
-            },
-            "Initial state"
-          )
-        ),
-        historySnapshot.history.slice(-50).map((entry, index) => /* @__PURE__ */ React2.createElement(
-          "div",
+          "Initial state"
+        )
+      ), historySnapshot.history.map((entry, index) => /* @__PURE__ */ React2.createElement(
+        "div",
+        {
+          id: `${HISTORY_ELEMENT_PREFIX}${index + 1}`,
+          key: index,
+          style: {
+            padding: "0px 12px 1px",
+            borderBottom: `1px solid ${solidBorderColor}`,
+            background: index + 1 === historySnapshot.historyIndex ? "rgb(59 130 246 / 15%)" : void 0
+          }
+        },
+        entry.redoPatches?.map((patch, j) => /* @__PURE__ */ React2.createElement(
+          "pre",
           {
-            id: `noya-multiplayer-history-${index}`,
-            key: index,
+            key: j,
             style: {
-              padding: "0px 12px 1px",
-              borderBottom: `1px solid ${solidBorderColor}`,
-              background: index === historySnapshot.historyIndex - 1 ? "rgb(59 130 246 / 15%)" : void 0
+              fontSize: "11px",
+              display: "flex",
+              flexWrap: "wrap"
             }
           },
-          entry.redoPatches?.map((patch, j) => /* @__PURE__ */ React2.createElement(
-            "pre",
-            {
-              key: j,
-              style: {
-                fontSize: "11px",
-                display: "flex",
-                flexWrap: "wrap"
-              }
-            },
-            patch.op === "add" && /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement("span", { style: { fontStyle: "italic" } }, pathToString(patch.path)), " = ", /* @__PURE__ */ React2.createElement(ObjectInspector, { data: patch.value, theme })),
-            patch.op === "replace" && /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement("span", { style: { fontStyle: "italic" } }, pathToString(patch.path)), " = ", /* @__PURE__ */ React2.createElement(ObjectInspector, { data: patch.value, theme })),
-            patch.op === "remove" && /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement("span", { style: { color: theme.OBJECT_VALUE_STRING_COLOR } }, "delete", " "), /* @__PURE__ */ React2.createElement("span", { style: { fontStyle: "italic" } }, pathToString(patch.path)))
-          ))
+          patch.op === "add" && /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement("span", { style: { fontStyle: "italic" } }, pathToString(patch.path)), " = ", /* @__PURE__ */ React2.createElement(ObjectInspector, { data: patch.value, theme })),
+          patch.op === "replace" && /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement("span", { style: { fontStyle: "italic" } }, pathToString(patch.path)), " = ", /* @__PURE__ */ React2.createElement(ObjectInspector, { data: patch.value, theme })),
+          patch.op === "remove" && /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement("span", { style: { color: theme.OBJECT_VALUE_STRING_COLOR } }, "delete", " "), /* @__PURE__ */ React2.createElement("span", { style: { fontStyle: "italic" } }, pathToString(patch.path)))
         ))
-      )
+      )))
     ),
     /* @__PURE__ */ React2.createElement(
       DisclosureSection,
@@ -442,98 +526,56 @@ var StateInspector = memo(function StateInspector2({
         title: "Events",
         colorScheme
       },
-      /* @__PURE__ */ React2.createElement(
-        "div",
-        {
-          ref: eventsContainerRef,
-          style: {
-            flex: "1 1 0",
-            overflowY: "auto",
-            display: "flex",
-            flexDirection: "column"
-          }
-        },
-        connectionEvents?.map((event, index) => /* @__PURE__ */ React2.createElement(
-          "div",
+      /* @__PURE__ */ React2.createElement("div", { ref: eventsContainerRef, style: styles.sectionInner }, connectionEvents?.map(
+        (event, index) => event.type === "stateChange" ? /* @__PURE__ */ React2.createElement(InspectorRow, { key: index, colorScheme }, "connection:", " ", /* @__PURE__ */ React2.createElement("span", { style: { fontStyle: "italic" } }, event.state.toLowerCase())) : /* @__PURE__ */ React2.createElement(
+          InspectorRow,
           {
             key: index,
+            colorScheme,
+            variant: event.type === "send" ? "up" : "down",
             style: {
-              borderBottom: `1px solid ${borderColor}`
+              padding: "0px 12px 1px"
             }
           },
-          event.type === "stateChange" ? /* @__PURE__ */ React2.createElement(
-            "div",
-            {
-              style: {
-                padding: "2px 12px",
-                background: colorScheme === "light" ? "rgba(0,0,0,0.05)" : "rgba(255,255,255,0.05)",
-                display: "flex",
-                alignItems: "center"
-              }
-            },
-            /* @__PURE__ */ React2.createElement(
-              "span",
-              {
-                style: {
-                  fontFamily: "Menlo, monospace",
-                  fontSize: "11px",
-                  borderRadius: 4,
-                  display: "inline-block"
-                }
-              },
-              "connection:",
-              " ",
-              /* @__PURE__ */ React2.createElement("span", { style: { fontStyle: "italic" } }, event.state.toLowerCase())
-            )
-          ) : /* @__PURE__ */ React2.createElement(
-            "div",
+          /* @__PURE__ */ React2.createElement(
+            ObjectInspector,
             {
-              style: {
-                padding: "0px 12px 1px",
-                background: event.type === "send" ? "rgba(0,255,0,0.1)" : "rgba(255,0,0,0.1)"
+              data: event.message,
+              theme,
+              nodeRenderer: ({
+                depth,
+                name,
+                data,
+                isNonenumerable,
+                expanded
+              }) => {
+                const direction = event.type === "send" ? "up" : "down";
+                return depth === 0 ? /* @__PURE__ */ React2.createElement(ObjectRootLabel, { direction, data }) : /* @__PURE__ */ React2.createElement(
+                  ObjectLabel,
+                  {
+                    direction,
+                    name,
+                    data,
+                    isNonenumerable
+                  }
+                );
               }
-            },
-            /* @__PURE__ */ React2.createElement(
-              ObjectInspector,
-              {
-                data: event.message,
-                theme,
-                nodeRenderer: ({
-                  depth,
-                  name,
-                  data,
-                  isNonenumerable,
-                  expanded
-                }) => {
-                  const direction = event.type === "send" ? "up" : "down";
-                  return depth === 0 ? /* @__PURE__ */ React2.createElement(ObjectRootLabel, { direction, data }) : /* @__PURE__ */ React2.createElement(
-                    ObjectLabel,
-                    {
-                      direction,
-                      name,
-                      data,
-                      isNonenumerable
-                    }
-                  );
-                }
-              }
-            )
-          )
-        )),
-        !connectionEvents && /* @__PURE__ */ React2.createElement(
-          "div",
-          {
-            style: {
-              padding: "12px",
-              fontSize: "12px",
-              display: "flex",
-              flexDirection: "column",
-              gap: "4px"
             }
-          },
-          /* @__PURE__ */ React2.createElement("span", null, "No recorded events")
+          )
         )
-      )
+      ), !connectionEvents && /* @__PURE__ */ React2.createElement(
+        "div",
+        {
+          style: {
+            padding: "12px",
+            fontSize: "12px",
+            display: "flex",
+            flexDirection: "column",
+            gap: "4px"
+          }
+        },
+        /* @__PURE__ */ React2.createElement("span", null, "No recorded events")
+      ))
     )
   );
 });
@@ -616,6 +658,8 @@ function createPortalElement() {
 function useStateInspector({
   state,
   connectionEvents,
+  connectedUsers,
+  userId,
   disabled = false,
   colorScheme,
   anchor,
@@ -642,13 +686,24 @@ function useStateInspector({
         {
           state,
           connectionEvents,
+          connectedUsers,
+          userId,
           colorScheme,
           anchor,
           stateManager
         }
       )
     );
-  }, [anchor, colorScheme, connectionEvents, root, state, stateManager]);
+  }, [
+    anchor,
+    colorScheme,
+    connectedUsers,
+    connectionEvents,
+    root,
+    state,
+    stateManager,
+    userId
+  ]);
 }
 
 // src/hooks.ts
@@ -725,26 +780,37 @@ function useMultiplayerState(initialState, options) {
   );
   const syncRef = useRef(sync);
   const [connectionEvents, setConnectionEvents] = useState2();
+  const [connectedUsers, setConnectedUsers] = useState2([]);
+  const [userId, setUserId] = useState2();
   const extras = useMemo(() => {
     return {
-      connectionEvents
+      connectionEvents,
+      connectedUsers
     };
-  }, [connectionEvents]);
+  }, [connectionEvents, connectedUsers]);
   const globalTrackEvents = useObservable(trackEvents);
   const trackConnectionEvents = options.trackConnectionEvents ?? globalTrackEvents;
   const trackEventsCallbackRef = useRef();
+  const trackConnectedUsersCallbackRef = useRef();
   useEffect3(() => {
     trackEventsCallbackRef.current = trackConnectionEvents ? (e) => setConnectionEvents((events) => {
       const updated = events ? [...events, e] : [e];
       return updated.length > 50 ? updated.slice(-50) : updated;
     }) : void 0;
   }, [trackConnectionEvents]);
+  useEffect3(() => {
+    trackConnectedUsersCallbackRef.current = (users, userId2) => {
+      setConnectedUsers(users);
+      setUserId(userId2);
+    };
+  });
   useEffect3(() => {
     if (syncRef.current) {
-      return syncRef.current(
-        multiplayerStateManager,
-        (e) => trackEventsCallbackRef.current?.(e)
-      );
+      return syncRef.current({
+        ms: multiplayerStateManager,
+        onConnectionEvent: (e) => trackEventsCallbackRef.current?.(e),
+        onChangeConnectedUsers: (users, userId2) => trackConnectedUsersCallbackRef.current?.(users, userId2)
+      });
     }
   }, [multiplayerStateManager]);
   const state = useSyncMultiplayerStateManager(multiplayerStateManager);
@@ -752,6 +818,8 @@ function useMultiplayerState(initialState, options) {
     stateManager: multiplayerStateManager.sm,
     state,
     connectionEvents,
+    connectedUsers,
+    userId,
     disabled: !options.inspector,
     ...typeof options.inspector === "object" && options.inspector
   });