@noya-app/noya-multiplayer-react 0.1.71 → 0.1.72

package/src/components/UserPointersOverlay.tsx

@@ -3,8 +3,8 @@
 import { Observable } from "@noya-app/observable";
 import { memoGeneric } from "@noya-app/react-utils";
 import {
-  EphemeralUserDataManager,
   MultiplayerUser,
+  SharedConnectionDataManager,
   UserManager,
 } from "@noya-app/state-manager";
 import React, { useEffect, useMemo, useState } from "react";
@@ -26,7 +26,7 @@ export type RenderUserPointer = {
 
 type InternalUserPointerProps<E extends UserPointerData> = {
   user: MultiplayerUser;
-  ephemeralUserDataManager: EphemeralUserDataManager<E>;
+  sharedConnectionDataManager: SharedConnectionDataManager<E>;
   hideAfter?: number;
 } & RenderUserPointer;
 
@@ -38,22 +38,22 @@ const UserPointerInternal = memoGeneric(function UserPointerInternal<
   E extends UserPointerData,
 >({
   user,
-  ephemeralUserDataManager,
+  sharedConnectionDataManager,
   hideAfter = 5000,
   renderUserPointer,
 }: InternalUserPointerProps<E>) {
   const observable = useMemo(() => {
-    const metadata$ = ephemeralUserDataManager.metadata$
-      .observePath([user.id] as const)
+    const metadata$ = sharedConnectionDataManager.metadata$
+      .observePath([user.connectionId] as const)
       .throttle(50);
-    const data$ = ephemeralUserDataManager.data$
-      .observePath([user.id] as const)
+    const data$ = sharedConnectionDataManager.data$
+      .observePath([user.connectionId] as const)
       .throttle(50);
 
     return Observable.combine([metadata$, data$], ([metadata, data]) => {
       return { metadata, data };
     });
-  }, [ephemeralUserDataManager, user.id]);
+  }, [sharedConnectionDataManager, user.connectionId]);
 
   const { metadata, data } = useObservable(observable);
 
@@ -75,7 +75,7 @@ const UserPointerInternal = memoGeneric(function UserPointerInternal<
   if (!data?.pointer) return null;
 
   return renderUserPointer({
-    userId: user.id,
+    userId: user.connectionId,
     name: user.name,
     point: data.pointer,
     visible: show,
@@ -84,30 +84,32 @@ const UserPointerInternal = memoGeneric(function UserPointerInternal<
 
 export type UserPointersOverlayProps<E extends UserPointerData> = {
   userManager: UserManager;
-  ephemeralUserDataManager: EphemeralUserDataManager<E>;
+  sharedConnectionDataManager: SharedConnectionDataManager<E>;
 } & RenderUserPointer;
 
 export const UserPointersOverlay = memoGeneric(function UserPointers<
   E extends UserPointerData,
 >({
   userManager,
-  ephemeralUserDataManager,
+  sharedConnectionDataManager,
   renderUserPointer,
 }: UserPointersOverlayProps<E>) {
-  const currentUserId = useObservable(ephemeralUserDataManager.currentUserId$);
+  const currentConnectionId = useObservable(
+    sharedConnectionDataManager.currentConnectionId$
+  );
   const connectedUsers = useObservable(userManager.connectedUsers$);
 
   return (
     <>
       {connectedUsers.map((user) => {
-        if (user.id === currentUserId) return null;
+        if (user.connectionId === currentConnectionId) return null;
 
         return (
           <UserPointerInternal
-            key={user.id}
+            key={user.connectionId}
             user={user}
-            ephemeralUserDataManager={
-              ephemeralUserDataManager as unknown as EphemeralUserDataManager<UserPointerData>
+            sharedConnectionDataManager={
+              sharedConnectionDataManager as unknown as SharedConnectionDataManager<UserPointerData>
             }
             renderUserPointer={renderUserPointer}
           />

package/src/hooks.ts

@@ -108,8 +108,9 @@ export type UseMultiplayerStateOptions<
   M extends object = object,
   E extends object = object,
   MenuT extends string = string,
+  I extends Record<string, any> = Record<string, unknown>,
 > = NoyaManagerOptions<S, M> & {
-  sync?: SyncAdapter<S, M, E, MenuT>;
+  sync?: SyncAdapter<S, M, E, MenuT, I>;
   inspector?: boolean | StateInspectorOptions;
 };
 
@@ -119,10 +120,11 @@ export function useBindNoyaManager<
   M extends object = object,
   E extends object = object,
   MenuT extends string = string,
+  I extends Record<string, any> = Record<string, unknown>,
 >(
-  noyaManager: NoyaManager<S, M, E, MenuT>,
+  noyaManager: NoyaManager<S, M, E, MenuT, I>,
   options?: Pick<
-    UseMultiplayerStateOptions<S, M, E, MenuT>,
+    UseMultiplayerStateOptions<S, M, E, MenuT, I>,
     "inspector" | "sync"
   >
 ) {
@@ -136,7 +138,7 @@ export function useBindNoyaManager<
     taskManager: typeof noyaManager.taskManager;
     connectionEventManager: typeof noyaManager.connectionEventManager;
     userManager: typeof noyaManager.userManager;
-    ephemeralUserDataManager: typeof noyaManager.ephemeralUserDataManager;
+    sharedConnectionDataManager: typeof noyaManager.sharedConnectionDataManager;
     multiplayerStateManager: typeof noyaManager.multiplayerStateManager;
     assetManager: typeof noyaManager.assetManager;
     aiManager: typeof noyaManager.aiManager;
@@ -155,7 +157,7 @@ export function useBindNoyaManager<
       taskManager: noyaManager.taskManager,
       connectionEventManager: noyaManager.connectionEventManager,
       userManager: noyaManager.userManager,
-      ephemeralUserDataManager: noyaManager.ephemeralUserDataManager,
+      sharedConnectionDataManager: noyaManager.sharedConnectionDataManager,
       multiplayerStateManager: noyaManager.multiplayerStateManager,
       assetManager: noyaManager.assetManager,
       aiManager: noyaManager.aiManager,
@@ -179,7 +181,7 @@ export function useBindNoyaManager<
 
   useErrorOverlay<MenuT>(noyaManager);
 
-  useStateInspector<S, M, E, MenuT>({
+  useStateInspector<S, M, E, MenuT, I>({
     noyaManager,
     disabled: !options?.inspector,
     advanced: true,
@@ -194,30 +196,35 @@ export function useMultiplayerState<
   M extends object = object,
   E extends object = object,
   MenuT extends string = string,
+  I extends Record<string, any> = Record<string, unknown>,
 >(
   initialState: S | (() => S),
-  options?: UseMultiplayerStateOptions<S, M, E, MenuT>
+  options?: UseMultiplayerStateOptions<S, M, E, MenuT, I>
 ) {
   const {
     sync = stubSync<
       unknown,
       object,
       object,
-      string
-    >() as unknown as SyncAdapter<S, M, E, MenuT>,
+      string,
+      Record<string, unknown>
+    >() as unknown as SyncAdapter<S, M, E, MenuT, I>,
     inspector,
     ...rest
   } = options ?? {};
 
   const [noyaManager] = useState(
-    () => new NoyaManager<S, M, E, MenuT>(initialState, rest)
+    () => new NoyaManager<S, M, E, MenuT, I>(initialState, rest)
   );
 
-  return useBindNoyaManager<S, M, E, MenuT>(noyaManager, { sync, inspector });
+  return useBindNoyaManager<S, M, E, MenuT, I>(noyaManager, {
+    sync,
+    inspector,
+  });
 }
 
 function useErrorOverlay<MenuT extends string = string>(
-  noyaManager: NoyaManager<any, any, any, MenuT>
+  noyaManager: NoyaManager<any, any, any, MenuT, any>
 ) {
   const unrecoverableError = useObservable(noyaManager.unrecoverableError);
 

package/src/inspector/StateInspector.tsx

@@ -23,6 +23,7 @@ import {
 import { ActivityEventsSection } from "./sections/ActivityEventsSection";
 import { EventsSection } from "./sections/EventsSection";
 import { HistorySection } from "./sections/HistorySection";
+import { ServerScriptLogsSection } from "./sections/ServerScriptLogsSection";
 import { exportAll, importAll } from "./serialization";
 import { StateInspectorButton } from "./StateInspectorButton";
 import {
@@ -52,6 +53,7 @@ export const StateInspector = memoGeneric(function StateInspector<
   M extends object,
   E extends object,
   MenuT extends string = string,
+  I extends Record<string, any> = Record<string, unknown>,
 >({
   noyaManager,
   colorScheme = "light",
@@ -60,7 +62,7 @@ export const StateInspector = memoGeneric(function StateInspector<
   advanced = false,
   ...props
 }: {
-  noyaManager: NoyaManager<S, M, E, MenuT>;
+  noyaManager: NoyaManager<S, M, E, MenuT, I>;
   unstyled?: boolean;
 } & StateInspectorOptions &
   ComponentPropsWithoutRef<"div">) {
@@ -69,12 +71,13 @@ export const StateInspector = memoGeneric(function StateInspector<
     assetManager,
     userManager,
     secretManager,
-    ephemeralUserDataManager,
+    sharedConnectionDataManager,
     connectionEventManager,
     taskManager,
     ioManager,
     resourceManager,
     activityEventsManager,
+    logManager,
   } = noyaManager;
 
   const [didMount, setDidMount] = React.useState(false);
@@ -88,6 +91,7 @@ export const StateInspector = memoGeneric(function StateInspector<
 
   const eventsContainerRef = React.useRef<HTMLDivElement>(null);
   const activityEventsContainerRef = React.useRef<HTMLDivElement>(null);
+  const serverLogsContainerRef = React.useRef<HTMLDivElement>(null);
 
   const [showInspector, setShowInspector] = useLocalStorageState(
     "noya-multiplayer-react-show-inspector",
@@ -113,8 +117,8 @@ export const StateInspector = memoGeneric(function StateInspector<
     "noya-multiplayer-react-show-tasks",
     false
   );
-  const [showEphemeral, setShowEphemeral] = useLocalStorageState(
-    "noya-multiplayer-react-show-ephemeral",
+  const [showShared, setShowShared] = useLocalStorageState(
+    "noya-multiplayer-react-show-shared",
     false
   );
   const [showAssets, setShowAssets] = useLocalStorageState(
@@ -141,6 +145,10 @@ export const StateInspector = memoGeneric(function StateInspector<
     "noya-multiplayer-react-show-activity-events",
     false
   );
+  const [showServerLogs, setShowServerLogs] = useLocalStorageState(
+    "noya-multiplayer-react-show-server-logs",
+    false
+  );
 
   const connectionEvents = useObservable(connectionEventManager.events$);
   useEffect(() => {
@@ -149,11 +157,38 @@ export const StateInspector = memoGeneric(function StateInspector<
         eventsContainerRef.current.scrollHeight;
     }
   }, [connectionEvents]);
+  const serverLogs = useObservable(logManager.logs$);
+  const [serverLogsPaused, setServerLogsPaused] = React.useState(false);
+  const [visibleServerLogs, setVisibleServerLogs] = React.useState(
+    serverLogs ?? []
+  );
+
+  const toggleServerLogsPaused = useCallback(() => {
+    setServerLogsPaused((value) => {
+      if (!value) {
+        setVisibleServerLogs(serverLogs ?? []);
+      }
+      return !value;
+    });
+  }, [serverLogs]);
+
+  useEffect(() => {
+    if (serverLogsPaused) return;
+
+    setVisibleServerLogs(serverLogs ?? []);
+  }, [serverLogs, serverLogsPaused]);
+  useEffect(() => {
+    if (!showServerLogs) return;
+    if (serverLogsContainerRef.current) {
+      serverLogsContainerRef.current.scrollTop =
+        serverLogsContainerRef.current.scrollHeight;
+    }
+  }, [showServerLogs, visibleServerLogs]);
 
   const multipeerStateInitialized = useObservable(
     multiplayerStateManager.isInitialized$
   );
-  const ephemeral = useObservable(ephemeralUserDataManager.data$);
+  const shared = useObservable(sharedConnectionDataManager.data$);
   const historySnapshot = useManagedHistory(multiplayerStateManager.sm);
   const assets = useObservable(assetManager.assets$);
   const resources = useObservable(resourceManager.resources$);
@@ -162,7 +197,7 @@ export const StateInspector = memoGeneric(function StateInspector<
   const secrets = useObservable(secretManager.secrets$);
   const secretsInitialized = useObservable(secretManager.isInitialized$);
   const connectedUsers = useObservable(userManager.connectedUsers$);
-  const userId = useObservable(userManager.currentUserId$);
+  const connectionId = useObservable(userManager.currentConnectionId$);
   const state = useObservable(multiplayerStateManager.optimisticState$);
   const inputsInitialized = useObservable(ioManager.inputsInitialized$);
   const outputTransformsInitialized = useObservable(
@@ -265,32 +300,36 @@ export const StateInspector = memoGeneric(function StateInspector<
         }
       >
         <StateInspectorDisclosureRowInner style={{ flex: "0 0 auto" }}>
-          {connectedUsers?.map((user, index, array) => (
-            <StateInspectorRow
-              key={user.id}
-              colorScheme={colorScheme}
-              variant={user.id === userId ? "up" : undefined}
-              bordered={index !== array.length - 1}
-            >
-              {user.image && (
-                <img
-                  src={user.image}
-                  alt={user.name}
-                  style={{
-                    width: "13px",
-                    height: "13px",
-                    borderRadius: "50%",
-                    marginRight: "4px",
-                    display: "inline-block",
-                    position: "relative",
-                    background: solidBorderColor,
-                    verticalAlign: "middle",
-                  }}
-                />
-              )}
-              {user.name} ({ellipsis(user.id.toString(), 8, "middle")})
-            </StateInspectorRow>
-          ))}
+          {connectedUsers?.map((user, index, array) => {
+            const identifier = user.userId ?? user.connectionId;
+
+            return (
+              <StateInspectorRow
+                key={user.connectionId}
+                colorScheme={colorScheme}
+                variant={user.connectionId === connectionId ? "up" : undefined}
+                bordered={index !== array.length - 1}
+              >
+                {user.image && (
+                  <img
+                    src={user.image}
+                    alt={user.name}
+                    style={{
+                      width: "13px",
+                      height: "13px",
+                      borderRadius: "50%",
+                      marginRight: "4px",
+                      display: "inline-block",
+                      position: "relative",
+                      background: solidBorderColor,
+                      verticalAlign: "middle",
+                    }}
+                  />
+                )}
+                {user.name} ({ellipsis(identifier, 8, "middle")})
+              </StateInspectorRow>
+            );
+          })}
           {!connectedUsers && (
             <div
               style={{
@@ -686,13 +725,13 @@ export const StateInspector = memoGeneric(function StateInspector<
         </StateInspectorDisclosureSection>
       )}
       <StateInspectorDisclosureSection
-        open={showEphemeral}
-        setOpen={setShowEphemeral}
-        title="Ephemeral User Data"
+        open={showShared}
+        setOpen={setShowShared}
+        title="Shared Connection Data"
         colorScheme={colorScheme}
       >
         <StateInspectorDisclosureRowInner>
-          {Object.entries(ephemeral).map(([key, value]) => (
+          {Object.entries(shared).map(([key, value]) => (
             <StateInspectorRow key={key} colorScheme={colorScheme}>
               <ObjectInspector
                 name={key}
@@ -704,6 +743,15 @@ export const StateInspector = memoGeneric(function StateInspector<
           ))}
         </StateInspectorDisclosureRowInner>
       </StateInspectorDisclosureSection>
+      <ServerScriptLogsSection
+        colorScheme={colorScheme}
+        showLogs={showServerLogs}
+        setShowLogs={setShowServerLogs}
+        logs={visibleServerLogs}
+        paused={serverLogsPaused}
+        onTogglePaused={toggleServerLogsPaused}
+        containerRef={serverLogsContainerRef}
+      />
       {advanced && (
         <ActivityEventsSection
           colorScheme={colorScheme}

package/src/inspector/sections/ServerScriptLogsSection.tsx

@@ -0,0 +1,128 @@
+import { ServerScriptLogEntry } from "@noya-app/state-manager";
+import React from "react";
+import { ObjectInspector } from "react-inspector";
+import { getStateInspectorTheme } from "../inspectorTheme";
+import { StateInspectorButton } from "../StateInspectorButton";
+import {
+  StateInspectorDisclosureRowInner,
+  StateInspectorDisclosureSection,
+} from "../StateInspectorDisclosureSection";
+import { StateInspectorRow } from "../StateInspectorRow";
+
+const levelColors: Record<ServerScriptLogEntry["level"], string> = {
+  error: "#f87171",
+  warn: "#facc15",
+  log: "#9ca3af",
+};
+
+function formatTimestamp(timestamp: number) {
+  return new Date(timestamp).toLocaleTimeString();
+}
+
+export function ServerScriptLogsSection({
+  showLogs,
+  setShowLogs,
+  colorScheme,
+  logs,
+  containerRef,
+  paused,
+  onTogglePaused,
+}: {
+  showLogs: boolean;
+  setShowLogs: (value: boolean) => void;
+  colorScheme: "light" | "dark";
+  logs: ServerScriptLogEntry[];
+  containerRef: React.RefObject<HTMLDivElement | null>;
+  paused: boolean;
+  onTogglePaused: () => void;
+}) {
+  const theme = getStateInspectorTheme(colorScheme);
+
+  return (
+    <StateInspectorDisclosureSection
+      open={showLogs}
+      setOpen={setShowLogs}
+      title="Server Script Logs"
+      colorScheme={colorScheme}
+      right={
+        <StateInspectorButton theme={theme} onClick={onTogglePaused}>
+          {paused ? "Resume" : "Pause"}
+        </StateInspectorButton>
+      }
+    >
+      <StateInspectorDisclosureRowInner ref={containerRef}>
+        {paused && (
+          <div
+            style={{
+              padding: "4px 12px",
+              fontSize: "11px",
+              opacity: 0.7,
+            }}
+          >
+            Log streaming paused
+          </div>
+        )}
+        {logs.map((log) => (
+          <StateInspectorRow key={log.id} colorScheme={colorScheme}>
+            <div
+              style={{
+                display: "flex",
+                gap: "6px",
+                alignItems: "center",
+                fontSize: "10px",
+                color: "inherit",
+                marginBottom: log.values.length ? "4px" : 0,
+                textTransform: "uppercase",
+              }}
+            >
+              <span>{formatTimestamp(log.timestamp)}</span>
+              <span style={{ color: levelColors[log.level] }}>{log.level}</span>
+              <span
+                style={{
+                  fontFamily: "monospace",
+                  textTransform: "none",
+                  fontSize: "10px",
+                }}
+              >
+                {log.scriptId}
+              </span>
+            </div>
+            <div
+              style={{
+                display: "flex",
+                flexDirection: "column",
+                gap: "4px",
+              }}
+            >
+              {log.values.length > 0 ? (
+                log.values.map((value, index) => (
+                  <ObjectInspector
+                    key={index}
+                    data={value}
+                    theme={theme}
+                    expandLevel={3}
+                  />
+                ))
+              ) : (
+                <span style={{ fontSize: "11px", opacity: 0.7 }}>No data</span>
+              )}
+            </div>
+          </StateInspectorRow>
+        ))}
+        {!logs?.length && (
+          <div
+            style={{
+              padding: "12px",
+              fontSize: "12px",
+              display: "flex",
+              flexDirection: "column",
+              gap: "4px",
+            }}
+          >
+            <span>No logs received</span>
+          </div>
+        )}
+      </StateInspectorDisclosureRowInner>
+    </StateInspectorDisclosureSection>
+  );
+}

package/src/inspector/serialization.ts

@@ -17,7 +17,9 @@ export async function fetchAssetMap(
   return Object.fromEntries(res);
 }
 
-export async function exportAll(noyaManager: NoyaManager<any, any, any, any>) {
+export async function exportAll(
+  noyaManager: NoyaManager<any, any, any, any, any>
+) {
   const { multiplayerStateManager, assetManager } = noyaManager;
 
   const assetMap = await fetchAssetMap(assetManager.assets$.get());
@@ -64,7 +66,7 @@ export function encodeAll({
 
 export async function importAll(
   buffer: Uint8Array | ArrayBuffer,
-  noyaManager: NoyaManager<any, any, any, any>,
+  noyaManager: NoyaManager<any, any, any, any, any>,
   {
     shouldAllowSchemaChange,
   }: {

package/src/inspector/useStateInspector.tsx

@@ -35,6 +35,7 @@ export function useStateInspector<
   M extends object,
   E extends object,
   MenuT extends string = string,
+  I extends Record<string, any> = Record<string, unknown>,
 >({
   noyaManager,
   disabled = false,
@@ -42,7 +43,7 @@ export function useStateInspector<
   colorScheme,
   anchor,
 }: {
-  noyaManager: NoyaManager<S, M, E, MenuT>;
+  noyaManager: NoyaManager<S, M, E, MenuT, I>;
   disabled?: boolean;
   advanced?: boolean;
   colorScheme?: ComponentProps<typeof StateInspector>["colorScheme"];