@noya-app/noya-multiplayer-react 0.1.42 → 0.1.44

package/src/NoyaStateContext.tsx

@@ -1,10 +1,20 @@
-import { GetAtPath, ObservableOptions, PathKey } from "@noya-app/observable";
 import {
+  GetAtPath,
+  Observable,
+  ObservableOptions,
+  PathKey,
+} from "@noya-app/observable";
+import {
+  AIManager,
   AssetManager,
+  ConnectedUsersManager,
+  EphemeralUserDataManager,
   MultiplayerStateManager,
+  SecretManager,
   StateManagerOptions,
   Static,
   TSchema,
+  WorkflowManager,
 } from "@noya-app/state-manager";
 import React, {
   createContext,
@@ -16,14 +26,21 @@ import React, {
 import { useNoyaState, UseNoyaStateOptions } from "./noyaApp";
 import { useObservable } from "./useObservable";
 
-interface NoyaStateProviderProps<S, M, E>
+interface NoyaStateProviderProps<S, M, E extends object>
   extends Omit<UseNoyaStateOptions<S, M, E>, "schema" | "mergeHistoryEntries"> {
   children: React.ReactNode;
   initialState?: S;
+  fallback?: React.ReactNode;
 }
 
 const AnyNoyaStateContext = createContext<
-  | { ms: MultiplayerStateManager<any, any>; assetManager: AssetManager }
+  | {
+      ms: MultiplayerStateManager<any, any>;
+      assetManager: AssetManager;
+      workflowManager: WorkflowManager;
+      secretManager: SecretManager;
+      aiManager: AIManager;
+    }
   | undefined
 >(undefined);
 
@@ -64,7 +81,91 @@ export function useAssetManager() {
   );
 }
 
-export function createNoyaContext<Schema extends TSchema, M = void, E = void>({
+export function useAIManager() {
+  const { aiManager } = useAnyNoyaStateContext();
+  return aiManager;
+}
+
+export function useSecretManager() {
+  const { secretManager } = useAnyNoyaStateContext();
+  return secretManager;
+}
+
+export function useSecrets() {
+  const { secretManager } = useAnyNoyaStateContext();
+  return useObservable(secretManager.secrets$);
+}
+
+export function useSecret(name: string) {
+  const { secretManager } = useAnyNoyaStateContext();
+
+  return useObservable(
+    secretManager.secrets$,
+    useCallback((secrets) => secrets.find((s) => s.name === name), [name])
+  );
+}
+
+export function useIsInitialized() {
+  const { ms, secretManager, assetManager } = useAnyNoyaStateContext();
+  const isInitializedObservable = useMemo(
+    () =>
+      Observable.combine(
+        [
+          ms.isInitialized$,
+          secretManager.isInitialized$,
+          assetManager.isInitialized$,
+        ],
+        (values) => values.every((v) => v)
+      ),
+    [ms, secretManager, assetManager]
+  );
+
+  return useObservable(isInitializedObservable);
+}
+
+export function useWorkflowManager() {
+  const { workflowManager } = useAnyNoyaStateContext();
+  return workflowManager;
+}
+
+export const ConnectedUsersContext = createContext<
+  ConnectedUsersManager | undefined
+>(undefined);
+
+export function useConnectedUsersManager() {
+  return useContext(ConnectedUsersContext);
+}
+
+export const AnyEphemeralUserDataManagerContext = createContext<
+  EphemeralUserDataManager<object> | undefined
+>(undefined);
+
+export function useAnyEphemeralUserData() {
+  return useContext(AnyEphemeralUserDataManagerContext);
+}
+
+export function useCurrentUserId() {
+  const connectedUsersManager = useConnectedUsersManager();
+  return useObservable(connectedUsersManager?.currentUserId$);
+}
+
+export const FallbackUntilInitialized = ({
+  children,
+  fallback,
+}: {
+  children: React.ReactNode;
+  fallback?: React.ReactNode;
+}) => {
+  const isInitialized = useIsInitialized();
+
+  return isInitialized ? children : fallback ?? null;
+};
+
+export function createNoyaContext<
+  Schema extends TSchema,
+  M = void,
+  E extends object = object,
+>({
   schema,
   mergeHistoryEntries,
 }: {
@@ -80,35 +181,71 @@ export function createNoyaContext<Schema extends TSchema, M = void, E = void>({
     | {
         ms: MultiplayerStateManager<S, M>;
         assetManager: AssetManager;
+        secretManager: SecretManager;
       }
     | undefined
   >;
 
+  const EphemeralUserDataManagerContext =
+    AnyEphemeralUserDataManagerContext as React.Context<
+      EphemeralUserDataManager<E> | undefined
+    >;
+
   function NoyaStateProvider({
     children,
     initialState,
     ...options
   }: NoyaStateProviderProps<S, M, E>) {
-    const [, , { multiplayerStateManager, assetManager }] = useNoyaState(
-      initialState,
+    const [
+      ,
+      ,
       {
-        ...(options as any),
-        schema,
-        mergeHistoryEntries,
-      }
-    );
+        multiplayerStateManager,
+        assetManager,
+        workflowManager,
+        secretManager,
+        aiManager,
+        ephemeralUserDataManager,
+        connectedUsersManager,
+      },
+    ] = useNoyaState<S, M, E>(initialState, {
+      ...(options as any),
+      schema,
+      mergeHistoryEntries,
+    });
 
     const value = useMemo(
       () => ({
         ms: multiplayerStateManager as MultiplayerStateManager<any, any>,
         assetManager,
+        workflowManager,
+        secretManager,
+        aiManager,
       }),
-      [multiplayerStateManager, assetManager]
+      [
+        multiplayerStateManager,
+        assetManager,
+        workflowManager,
+        secretManager,
+        aiManager,
+      ]
     );
 
     return (
       <AnyNoyaStateContext.Provider value={value}>
-        {children}
+        <ConnectedUsersContext.Provider value={connectedUsersManager}>
+          <EphemeralUserDataManagerContext.Provider
+            value={ephemeralUserDataManager}
+          >
+            {options.fallback !== undefined ? (
+              <FallbackUntilInitialized fallback={options.fallback}>
+                {children}
+              </FallbackUntilInitialized>
+            ) : (
+              children
+            )}
+          </EphemeralUserDataManagerContext.Provider>
+        </ConnectedUsersContext.Provider>
       </AnyNoyaStateContext.Provider>
     );
   }
@@ -220,6 +357,18 @@ export function createNoyaContext<Schema extends TSchema, M = void, E = void>({
     return ms;
   }
 
+  function useEphemeralUserDataManager() {
+    const ephemeralUserData = useContext(EphemeralUserDataManagerContext);
+
+    if (!ephemeralUserData) {
+      throw new Error(
+        "useEphemeralUserData must be used within a NoyaStateProvider"
+      );
+    }
+
+    return ephemeralUserData;
+  }
+
   return {
     Context: NoyaStateContext,
     Provider: NoyaStateProvider,
@@ -227,6 +376,7 @@ export function createNoyaContext<Schema extends TSchema, M = void, E = void>({
     useSetValue,
     useValueState,
     useStateManager,
+    useEphemeralUserDataManager,
     // useAssets,
     // useAssetManager,
     // useAsset,

package/src/components/UserPointersOverlay.tsx

@@ -1,132 +1,92 @@
 "use client";
 
-import { EphemeralUserData, MultiplayerUser } from "@noya-app/state-manager";
-import React, { memo, useEffect, useMemo, useState } from "react";
-import { getAvatarStyle } from "../avatarStyle";
+import { memoGeneric } from "@noya-app/react-utils";
+import {
+  ConnectedUsersManager,
+  EphemeralUserDataManager,
+  MultiplayerUser,
+} from "@noya-app/state-manager";
+import React, { useEffect, useState } from "react";
 import { useObservable } from "../useObservable";
-
 type Point = { x: number; y: number };
 
 export type UserPointerData = { pointer?: Point };
 
-export type UserPointerProps<E extends UserPointerData> = {
+export type RenderUserPointerProps = {
+  userId: string;
+  name?: string;
+  visible: boolean;
+  point: Point;
+};
+
+export type RenderUserPointer = {
+  renderUserPointer: (options: RenderUserPointerProps) => React.ReactNode;
+};
+
+type InternalUserPointerProps<E extends UserPointerData> = {
   user: MultiplayerUser;
-  ephemeralUserData: EphemeralUserData<E>;
+  ephemeralUserDataManager: EphemeralUserDataManager<E>;
   hideAfter?: number;
-};
+} & RenderUserPointer;
 
 function shouldShow(hideAfter: number, updatedAt: number) {
   return !!updatedAt && Date.now() - updatedAt < hideAfter;
 }
 
-const UserPointer_ = function UserPointer<E extends UserPointerData>({
+const UserPointerInternal = memoGeneric(function UserPointerInternal<
+  E extends UserPointerData,
+>({
   user,
-  ephemeralUserData,
+  ephemeralUserDataManager,
   hideAfter = 5000,
-}: UserPointerProps<E>) {
-  const metadata = useObservable(ephemeralUserData.metadata$, [
+  renderUserPointer,
+}: InternalUserPointerProps<E>) {
+  const metadata = useObservable(ephemeralUserDataManager.metadata$, [
+    user.id,
+  ] as const);
+  const data = useObservable(ephemeralUserDataManager.data$, [
     user.id,
   ] as const);
-  const data = useObservable(ephemeralUserData.data$, [user.id] as const);
-  const avatarStyle = useMemo(() => getAvatarStyle(user.id), [user.id]);
 
   const [, setForceUpdate] = useState(0);
 
   const updatedAt = metadata?.updatedAt ?? 0;
+  const show = shouldShow(hideAfter, updatedAt);
 
   useEffect(() => {
-    if (!shouldShow(hideAfter, updatedAt)) return;
+    if (!show) return;
 
     const timeoutId = setTimeout(() => {
       setForceUpdate((prev) => prev + 1);
     }, hideAfter);
 
     return () => clearTimeout(timeoutId);
-  }, [hideAfter, updatedAt]);
-
-  const show = shouldShow(hideAfter, updatedAt);
-
-  if (!data || !data.pointer) return null;
-
-  return (
-    <UserPointerContainer key={user.id} point={data.pointer} show={show}>
-      <UserPointerIcon color={avatarStyle.backgroundColor} />
-      <UserNameTag background={avatarStyle.backgroundColor}>
-        {user.name}
-      </UserNameTag>
-    </UserPointerContainer>
-  );
-};
+  }, [hideAfter, show, updatedAt]);
 
-export const UserPointer = memo(UserPointer_) as typeof UserPointer_;
+  if (!data?.pointer) return null;
 
-export const UserPointerContainer = memo(function UserPointerContainer({
-  point,
-  children,
-  show = true,
-}: {
-  point: Point;
-  children: React.ReactNode;
-  show?: boolean;
-}) {
-  return (
-    <div
-      style={{
-        position: "absolute",
-        top: 0,
-        left: 0,
-        transform: `translate(${Math.round(point.x)}px, ${Math.round(
-          point.y
-        )}px)`,
-        opacity: show ? 1 : 0,
-        transition: "transform 0.1s, opacity 0.2s",
-      }}
-    >
-      {children}
-    </div>
-  );
-});
-
-export const UserNameTag = memo(function UserNameTag({
-  background,
-  children,
-}: {
-  background: string;
-  children: React.ReactNode;
-}) {
-  return (
-    <span
-      style={{
-        position: "relative",
-        top: "8px",
-        left: "15px",
-        fontSize: 11,
-        lineHeight: "1",
-        fontWeight: 500,
-        boxShadow: "0 1px 1px rgba(0,0,0,0.1)",
-        padding: "2px 4px 3px",
-        pointerEvents: "none",
-        letterSpacing: "-0.3px",
-        outline: `1px solid rgba(255,255,255,0.3)`,
-        outlineOffset: "-1px",
-        background,
-        color: "white",
-      }}
-    >
-      {children}
-    </span>
-  );
+  return renderUserPointer({
+    userId: user.id,
+    name: user.name,
+    point: data.pointer,
+    visible: show,
+  });
 });
 
 export type UserPointersOverlayProps<E extends UserPointerData> = {
-  connectedUsers: MultiplayerUser[];
-  ephemeralUserData: EphemeralUserData<E>;
-};
+  connectedUsersManager: ConnectedUsersManager;
+  ephemeralUserDataManager: EphemeralUserDataManager<E>;
+} & RenderUserPointer;
 
-export const UserPointersOverlay = memo(function UserPointers<
+export const UserPointersOverlay = memoGeneric(function UserPointers<
   E extends UserPointerData,
->({ connectedUsers, ephemeralUserData }: UserPointersOverlayProps<E>) {
-  const currentUserId = useObservable(ephemeralUserData.currentUserId$);
+>({
+  connectedUsersManager,
+  ephemeralUserDataManager,
+  renderUserPointer,
+}: UserPointersOverlayProps<E>) {
+  const currentUserId = useObservable(ephemeralUserDataManager.currentUserId$);
+  const connectedUsers = useObservable(connectedUsersManager.connectedUsers$);
 
   return (
     <>
@@ -134,49 +94,16 @@ export const UserPointersOverlay = memo(function UserPointers<
         if (user.id === currentUserId) return null;
 
         return (
-          <UserPointer
+          <UserPointerInternal
             key={user.id}
             user={user}
-            ephemeralUserData={
-              ephemeralUserData as unknown as EphemeralUserData<E>
+            ephemeralUserDataManager={
+              ephemeralUserDataManager as unknown as EphemeralUserDataManager<UserPointerData>
             }
+            renderUserPointer={renderUserPointer}
           />
         );
       })}
     </>
   );
 });
-
-export const UserPointerIcon = memo(function CursorIcon({
-  color = "black",
-}: {
-  color?: string;
-}) {
-  return (
-    <svg
-      width="15"
-      height="15"
-      viewBox="0 0 15 15"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      style={{
-        position: "absolute",
-        filter: "drop-shadow(0 1px 1px rgba(0,0,0,0.1))",
-        // filter: "drop-shadow(0 1px 1px rgba(0,0,0,0.6))",
-      }}
-    >
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M3.29227 0.0451998C3.47033 -0.0361222 3.67946 -0.00606629 3.8274 0.122107L12.8587 7.94648C13.0134 8.08054 13.0708 8.29538 13.0035 8.48873C12.9362 8.68208 12.7578 8.81488 12.5533 8.8239L9.21887 8.97096L11.1504 13.2149C11.2648 13.4662 11.1538 13.7626 10.9026 13.877L8.75024 14.8575C8.499 14.972 8.20255 14.8611 8.08802 14.6099L6.15339 10.3665L3.86279 12.7817C3.72196 12.9302 3.50487 12.9779 3.31479 12.9021C3.1247 12.8263 3 12.6423 3 12.4376V0.500008C3 0.304264 3.11422 0.126522 3.29227 0.0451998Z"
-        fill={color}
-      />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M3.29227 0.048984C3.47033 -0.032338 3.67946 -0.00228211 3.8274 0.125891L12.8587 7.95026C13.0134 8.08432 13.0708 8.29916 13.0035 8.49251C12.9362 8.68586 12.7578 8.81866 12.5533 8.82768L9.21887 8.97474L11.1504 13.2187C11.2648 13.47 11.1538 13.7664 10.9026 13.8808L8.75024 14.8613C8.499 14.9758 8.20255 14.8649 8.08802 14.6137L6.15339 10.3703L3.86279 12.7855C3.72196 12.934 3.50487 12.9817 3.31479 12.9059C3.1247 12.8301 3 12.6461 3 12.4414V0.503792C3 0.308048 3.11422 0.130306 3.29227 0.048984ZM4 1.59852V11.1877L5.93799 9.14425C6.05238 9.02363 6.21924 8.96776 6.38319 8.99516C6.54715 9.02256 6.68677 9.12965 6.75573 9.2809L8.79056 13.7441L10.0332 13.178L8.00195 8.71497C7.93313 8.56376 7.94391 8.38824 8.03072 8.24659C8.11753 8.10494 8.26903 8.01566 8.435 8.00834L11.2549 7.88397L4 1.59852Z"
-        fill="rgba(255,255,255,0.5)"
-      />
-    </svg>
-  );
-});