From 7988dbc9e40ba1fd0feddddda8f2433d5206785a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Paczy=C5=84ski?= Date: Thu, 7 Dec 2023 12:21:57 +0100 Subject: [PATCH] Group reflect user into seperate rooms --- package.json | 1 + src/shared/hooks/reflect.ts | 9 +-------- src/shared/utils/reflect.ts | 10 ++++++++++ src/ui/Island/IslandPresence.tsx | 16 +++++++--------- yarn.lock | 14 ++++++++++++++ 5 files changed, 33 insertions(+), 17 deletions(-) diff --git a/package.json b/package.json index 3c2e7af6a..d7d9f4392 100644 --- a/package.json +++ b/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", diff --git a/src/shared/hooks/reflect.ts b/src/shared/hooks/reflect.ts index aab9c7e34..385e1cefe 100644 --- a/src/shared/hooks/reflect.ts +++ b/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 } } diff --git a/src/shared/utils/reflect.ts b/src/shared/utils/reflect.ts index 340aebff6..6aa562bd8 100644 --- a/src/shared/utils/reflect.ts +++ b/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(schema: Schema) { 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 diff --git a/src/ui/Island/IslandPresence.tsx b/src/ui/Island/IslandPresence.tsx index 85858ca37..d5805f639 100644 --- a/src/ui/Island/IslandPresence.tsx +++ b/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 ( ) }) diff --git a/yarn.lock b/yarn.lock index 676401343..e7f2deded 100644 --- a/yarn.lock +++ b/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"