Group reflect user into seperate rooms

package.json

@@ -49,6 +49,7 @@
     "react-markdown": "^9.0.0",
     "react-redux": "^8.1.2",
     "react-router-dom": "^5",
+    "reflect-orchestrator": "^0.0.2",
     "rehype-external-links": "^3.0.0",
     "stream": "^0.0.2",
     "stream-browserify": "^3.0.0",

src/shared/hooks/reflect.ts

@@ -1,6 +1,5 @@
 import { createContext, useContext, useEffect, useMemo, useState } from "react"
 import {
-  selectDisplayedRealmId,
   selectRealmNameById,
   selectStakingRealmId,
   selectWalletName,
@@ -160,7 +159,6 @@ export function useReflectCurrentUser() {
 export function useReflectCursors() {
   const reflectClients = useReflectPresence()
   const currentUser = useReflectCurrentUser()
-  const realmModalOpened = useDappSelector(selectDisplayedRealmId)
 
   // Find index of current user to determine the "room" placement
   const currentUserIndex = reflectClients.findIndex(
@@ -180,15 +178,10 @@ export function useReflectCursors() {
   // We want users to always have a chance to interact with each other so we split them
   // into "rooms" based on their index in the reflectClients array. This way map stays interactive
   // while still being not overcrowded.
-  const visibleClients = reflectClients.slice(
+  const visibleCursors = reflectClients.slice(
     currentRoomValue,
     currentRoomValue + maxNumberOfVisibleCursors
   )
 
-  // Hide current user cursor when the realm modal is opened
-  const visibleCursors = !realmModalOpened
-    ? visibleClients
-    : visibleClients.filter((client) => client.id !== currentUser?.id)
-
   return { visibleCursors, currentUser }
 }

src/shared/utils/reflect.ts

@@ -9,12 +9,21 @@ import {
   reflectClientSchema,
 } from "shared/types"
 import { Schema } from "zod"
+import {
+  OrchestrationOptions,
+  createOrchestrationMutators,
+} from "reflect-orchestrator"
 
 // Source: https://github.com/rocicorp/reflect-draw/blob/main/src/datamodel/zod.ts
 function parseReflectState<T>(schema: Schema<T>) {
   return process.env.NODE_ENV !== "production" ? schema.parse : (val: T) => val
 }
 
+// Set max room capacity to 50, still displaying 5 at one time
+const orchestrationOptions: OrchestrationOptions = {
+  maxClientsPerRoom: 50,
+}
+
 export const {
   init: initClientState,
   get: getClientState,
@@ -57,6 +66,7 @@ export const mutators = {
   setCursor,
   setUserInfo,
   setUserPresence,
+  ...createOrchestrationMutators(orchestrationOptions),
 }
 
 export type ReflectMutators = typeof mutators

src/ui/Island/IslandPresence.tsx

@@ -1,28 +1,26 @@
 import React from "react"
 import { useReflectCursors } from "shared/hooks"
+import { selectRealmPanelVisible, useDappSelector } from "redux-state"
 import IslandCursor from "./Cursor"
 
 export default function IslandPresence() {
   const { visibleCursors, currentUser } = useReflectCursors()
+  const realmPanelVisible = useDappSelector(selectRealmPanelVisible)
+
   const reflectEnabled = process.env.SHOW_REFLECT === "true"
 
-  if (
-    !visibleCursors ||
-    !visibleCursors.length ||
-    !currentUser ||
-    !reflectEnabled
-  )
-    return null
+  if (!visibleCursors.length || !currentUser || !reflectEnabled) return null
 
   return visibleCursors.map(({ id, cursor, userInfo }) => {
-    if (!cursor) return null
+    const isCurrentUser = id === currentUser.id
+    if (!cursor || (isCurrentUser && realmPanelVisible)) return null
 
     return (
       <IslandCursor
         key={id}
         cursor={cursor}
         userInfo={userInfo}
-        extraCursor={id !== currentUser.id}
+        extraCursor={!isCurrentUser}
       />
     )
   })

yarn.lock

@@ -2777,6 +2777,11 @@
   resolved "https://registry.yarnpkg.com/@rocicorp/rails/-/rails-0.8.0.tgz#ee8f3826c640f1fc8cb4b8de97b952378098c052"
   integrity sha512-BX/Owk5ikuLcXghQxlfPgcBWou5TWoGxktSxqUQZdCrsiP0CHEjOPJVhli4TuwRbxuzqS4MaHSeHa//PuwchGQ==
 
+"@rocicorp/rails@^0.8.1":
+  version "0.8.1"
+  resolved "https://registry.yarnpkg.com/@rocicorp/rails/-/rails-0.8.1.tgz#f78a9017b7cd5587eecb04e5b6e74911cc52dfe9"
+  integrity sha512-+NwaJtKyAP0W5KK84nVqlpl03aJXsEhiQg3FZYj08jTPYYdp2zfzc8dpzXcpC8GcfFST8vgqj/fMlgNU9Zvnsw==
+
 "@rocicorp/reflect@^0.38.202311200859":
   version "0.38.202311200859"
   resolved "https://registry.yarnpkg.com/@rocicorp/reflect/-/reflect-0.38.202311200859.tgz#487a0340698d22d78febb1de7a36dd6b999adf7d"
@@ -9404,6 +9409,15 @@ redux@^4.2.1:
   dependencies:
     "@babel/runtime" "^7.9.2"
 
+reflect-orchestrator@^0.0.2:
+  version "0.0.2"
+  resolved "https://registry.yarnpkg.com/reflect-orchestrator/-/reflect-orchestrator-0.0.2.tgz#6a50f45e1187514ee44d112cdb7d436cf4a058bc"
+  integrity sha512-5BgNFIkvbUIWh3r9iYx1qjJ/rBKMwpTS7ZYES/CPunQhm2nSgAl8Zrm/DZPVFFIpnVTgixsumql6Tq9gCwr8Uw==
+  dependencies:
+    "@badrap/valita" "^0.3.0"
+    "@rocicorp/rails" "^0.8.1"
+    "@rocicorp/reflect" "^0.38.202311200859"
+
 reflect.getprototypeof@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/reflect.getprototypeof/-/reflect.getprototypeof-1.0.3.tgz#2738fd896fcc3477ffbd4190b40c2458026b6928"