@noya-app/noya-multiplayer-react 0.1.9 → 0.1.11

package/src/inspector/StateInspector.tsx

@@ -39,10 +39,12 @@ function ToggleButton({
   showInspector,
   setShowInspector,
   theme,
+  anchor,
 }: {
   showInspector: boolean;
   setShowInspector: (value: boolean) => void;
   theme: typeof chromeLight;
+  anchor: Anchor;
 }) {
   return (
     <span
@@ -51,7 +53,6 @@ function ToggleButton({
         flex: "0",
         appearance: "none",
         color: theme.BASE_COLOR,
-        background: "rgba(0,0,0,0.1)",
         border: "none",
         fontSize: "12px",
         whiteSpace: "nowrap",
@@ -63,7 +64,7 @@ function ToggleButton({
       onClick={() => setShowInspector(!showInspector)}
     >
       <span style={{ width: "12px", height: "12px" }}>
-        {showInspector ? (
+        {showInspector === (anchor === "right") ? (
           <svg
             xmlns="http://www.w3.org/2000/svg"
             fill="none"
@@ -136,6 +137,7 @@ function DisclosureSection({
           fontSize: "12px",
           padding: "4px 10px",
           display: "flex",
+          alignItems: "center",
           ...(!isFirst && { borderTop: `1px solid ${borderColor}` }),
           ...(open && { borderBottom: `1px solid ${borderColor}` }),
         }}
@@ -144,9 +146,8 @@ function DisclosureSection({
           <Arrow
             expanded={open}
             style={{
-              fontSize: "11px",
-              // fontSize: theme.ARROW_FONT_SIZE,
-              marginRight: theme.ARROW_MARGIN_RIGHT,
+              fontSize: theme.ARROW_FONT_SIZE,
+              marginRight: theme.ARROW_MARGIN_RIGHT + 1,
               color: theme.ARROW_COLOR,
             }}
           />
@@ -159,6 +160,10 @@ function DisclosureSection({
   );
 }
 
+const HISTORY_ELEMENT_PREFIX = "noya-multiplayer-history-";
+
+type Anchor = "left" | "right";
+
 export const StateInspector = memo(function StateInspector<
   S extends object,
   M,
@@ -168,6 +173,7 @@ export const StateInspector = memo(function StateInspector<
   unstyled,
   colorScheme = "light",
   stateManager,
+  anchor = "right",
   ...props
 }: {
   state: S;
@@ -175,6 +181,7 @@ export const StateInspector = memo(function StateInspector<
   unstyled?: boolean;
   colorScheme?: "light" | "dark";
   stateManager: StateManager<S, M>;
+  anchor?: Anchor;
 } & ComponentPropsWithoutRef<"div">) {
   const [didMount, setDidMount] = React.useState(false);
 
@@ -223,7 +230,7 @@ export const StateInspector = memo(function StateInspector<
     if (!historyContainerRef.current) return;
 
     const historyEntry = historyContainerRef.current.querySelector(
-      `#history-${historySnapshot.historyIndex - 1}`
+      `#${HISTORY_ELEMENT_PREFIX}${historySnapshot.historyIndex}`
     );
 
     if (historyEntry) {
@@ -237,17 +244,19 @@ export const StateInspector = memo(function StateInspector<
   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: CSSProperties = {
     position: "fixed",
     top: 12,
-    right: 12,
+    ...(anchor === "right" ? { right: 12 } : { left: 12 }),
     bottom: 12,
     width: 400,
     background:
       colorScheme === "light" ? "rgba(255,255,255,0.95)" : "rgba(0,0,0,0.95)",
     backdropFilter: "blur(48px)",
-    border: `1px solid ${borderColor}`,
+    border: `1px solid ${solidBorderColor}`,
     // outlineOffset: -1,
     borderRadius: 4,
     display: "flex",
@@ -256,6 +265,7 @@ export const StateInspector = memo(function StateInspector<
     color: theme.BASE_COLOR,
     overflow: "hidden",
     zIndex: 9999,
+    lineHeight: "13px",
   };
 
   if (!didMount) return null;
@@ -267,15 +277,16 @@ export const StateInspector = memo(function StateInspector<
         style={{
           ...baseStyle,
           padding: "4px 10px",
-          borderRadius: 8,
           bottom: undefined,
           width: undefined,
         }}
+        onClick={() => setShowInspector(true)}
       >
         <ToggleButton
           showInspector={showInspector}
           setShowInspector={setShowInspector}
           theme={theme}
+          anchor={anchor}
         />
       </div>
     );
@@ -300,6 +311,7 @@ export const StateInspector = memo(function StateInspector<
             showInspector={showInspector}
             setShowInspector={setShowInspector}
             theme={theme}
+            anchor={anchor}
           />
         }
       >
@@ -332,48 +344,42 @@ export const StateInspector = memo(function StateInspector<
             flexDirection: "column",
           }}
         >
-          {historySnapshot.history.length < 50 && (
-            <div
-              id={`history-${0}`}
+          <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 ${borderColor}`,
-                fontSize: "12px",
                 fontFamily: "Menlo, monospace",
-                padding: "2px 12px 1px",
-                display: "flex",
-                alignItems: "center",
-                background:
-                  historySnapshot.historyIndex === 0
-                    ? colorScheme === "light"
-                      ? "rgba(0,0,0,0.2)"
-                      : "rgb(59 130 246 / 38%)"
-                    : 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={`history-${index}`}
+              id={`${HISTORY_ELEMENT_PREFIX}${index + 1}`}
               key={index}
               style={{
                 padding: "0px 12px 1px",
-                borderBottom: `1px solid ${borderColor}`,
+                borderBottom: `1px solid ${solidBorderColor}`,
                 background:
-                  index === historySnapshot.historyIndex - 1
-                    ? colorScheme === "light"
-                      ? "rgba(0,0,0,0.2)"
-                      : "rgb(59 130 246 / 15%)"
+                  index + 1 === historySnapshot.historyIndex
+                    ? "rgb(59 130 246 / 15%)"
                     : undefined,
               }}
             >
@@ -589,6 +595,7 @@ function Arrow({
         display: "inline-block",
         textAlign: "center",
         transform: expanded ? "rotate(0deg)" : "rotate(-90deg)",
+        fontFamily: "Menlo, monospace",
         ...style,
       }}
     >

package/src/inspector/useStateInspector.tsx

@@ -16,14 +16,14 @@ export function useStateInspector<S extends object, M>({
   connectionEvents,
   disabled = false,
   colorScheme,
+  anchor,
   stateManager,
 }: {
   state: S;
   connectionEvents?: ConnectionEvent<S>[];
   disabled: boolean;
-  colorScheme: ComponentProps<typeof StateInspector>["colorScheme"];
   stateManager: StateManager<S, M>;
-}) {
+} & Pick<ComponentProps<typeof StateInspector>, "colorScheme" | "anchor">) {
   const [root, setRoot] = React.useState<Root | null>(null);
 
   useLayoutEffect(() => {
@@ -50,8 +50,9 @@ export function useStateInspector<S extends object, M>({
         state={state}
         connectionEvents={connectionEvents}
         colorScheme={colorScheme}
+        anchor={anchor}
         stateManager={stateManager as StateManager<any, any>}
       />
     );
-  }, [colorScheme, connectionEvents, root, state, stateManager]);
+  }, [anchor, colorScheme, connectionEvents, root, state, stateManager]);
 }