Event sourcing world actions

packages/client-core/src/components/InstanceChat/index.tsx

@@ -32,7 +32,6 @@ import { AuthState } from '@etherealengine/client-core/src/user/services/AuthSer
 import { AudioEffectPlayer } from '@etherealengine/engine/src/audio/systems/MediaSystem'
 import { Engine } from '@etherealengine/engine/src/ecs/classes/Engine'
 import { EngineState } from '@etherealengine/engine/src/ecs/classes/EngineState'
-import { WorldNetworkAction } from '@etherealengine/engine/src/networking/functions/WorldNetworkAction'
 import { WorldState } from '@etherealengine/engine/src/networking/interfaces/WorldState'
 import { dispatchAction, getMutableState, useHookstate } from '@etherealengine/hyperflux'
 import Avatar from '@etherealengine/ui/src/primitives/mui/Avatar'
@@ -47,6 +46,7 @@ import { Close as CloseIcon, Message as MessageIcon } from '@mui/icons-material'
 import Fab from '@mui/material/Fab'
 
 import { AppAction } from '../../common/services/AppService'
+import { AvatarUIActions, AvatarUIState } from '../../systems/state/AvatarUIState'
 import { getUserAvatarThumbnail } from '../../user/functions/useUserAvatarThumbnail'
 import { useShelfStyles } from '../Shelves/useShelfStyles'
 import defaultStyles from './index.module.scss'
@@ -89,7 +89,7 @@ export const useChatHooks = ({ chatWindowOpen, setUnreadMessages, messageRefInpu
   const composingMessage = useHookstate('')
   const cursorPosition = useHookstate(0)
   const user = useHookstate(getMutableState(AuthState).user)
-  const usersTyping = useHookstate(getMutableState(EngineState)).usersTyping[user?.id.value].value
+  const usersTyping = useHookstate(getMutableState(AvatarUIState)).usersTyping[user?.id.value].value
   const isMultiline = useHookstate(false)
 
   useEffect(() => {
@@ -102,7 +102,7 @@ export const useChatHooks = ({ chatWindowOpen, setUnreadMessages, messageRefInpu
     if (!composingMessage.value || !usersTyping) return
     const delayDebounce = setTimeout(() => {
       dispatchAction(
-        WorldNetworkAction.setUserTyping({
+        AvatarUIActions.setUserTyping({
           typing: false
         })
       )
@@ -132,7 +132,7 @@ export const useChatHooks = ({ chatWindowOpen, setUnreadMessages, messageRefInpu
     if (message.length > composingMessage.value.length) {
       if (!usersTyping) {
         dispatchAction(
-          WorldNetworkAction.setUserTyping({
+          AvatarUIActions.setUserTyping({
             typing: true
           })
         )
@@ -141,7 +141,7 @@ export const useChatHooks = ({ chatWindowOpen, setUnreadMessages, messageRefInpu
     if (message.length == 0 || message.length < composingMessage.value.length) {
       if (usersTyping) {
         dispatchAction(
-          WorldNetworkAction.setUserTyping({
+          AvatarUIActions.setUserTyping({
             typing: false
           })
         )
@@ -156,7 +156,7 @@ export const useChatHooks = ({ chatWindowOpen, setUnreadMessages, messageRefInpu
     if (composingMessage?.value?.length && instanceId) {
       if (usersTyping) {
         dispatchAction(
-          WorldNetworkAction.setUserTyping({
+          AvatarUIActions.setUserTyping({
             typing: false
           })
         )

packages/client-core/src/media/webcam/WebcamInput.ts

@@ -292,6 +292,7 @@ const execute = () => {
   for (const entity of webcamQuery()) setAvatarExpression(entity)
 }
 
+/** @todo - this system currently is not used and has been replaced by the /capture route */
 export const WebcamInputSystem = defineSystem({
   uuid: 'ee.client.WebcamInputSystem',
   execute

packages/client-core/src/systems/AvatarUISystem.tsx

@@ -57,6 +57,7 @@ import { getMutableState, getState, none } from '@etherealengine/hyperflux'
 
 import AvatarContextMenu from '../user/components/UserMenu/menus/AvatarContextMenu'
 import { PopupMenuState } from '../user/components/UserMenu/PopupMenuService'
+import { AvatarUIStateSystem } from './state/AvatarUIState'
 import { createAvatarDetailView } from './ui/AvatarDetailView'
 import { AvatarUIContextMenuState } from './ui/UserMenuView'
 
@@ -290,5 +291,6 @@ const reactor = () => {
 export const AvatarUISystem = defineSystem({
   uuid: 'ee.client.AvatarUISystem',
   execute,
-  reactor
+  reactor,
+  subSystems: [AvatarUIStateSystem]
 })

packages/engine/src/avatar/components/SpawnPoseComponent.ts → packages/client-core/src/systems/state/AvatarUIState.ts

@@ -23,24 +23,39 @@ All portions of the code written by the Ethereal Engine team are Copyright © 20
 Ethereal Engine. All Rights Reserved.
 */
 
-import { Quaternion, Vector3 } from 'three'
-
-import { defineComponent } from '../../ecs/functions/ComponentFunctions'
-
-export const SpawnPoseComponent = defineComponent({
-  name: 'SpawnPoseComponent',
-
-  onInit: (entity) => {
-    return {
-      position: new Vector3(),
-      rotation: new Quaternion()
-    }
+import { matches } from '@etherealengine/engine/src/common/functions/MatchesUtils'
+import { defineSystem } from '@etherealengine/engine/src/ecs/functions/SystemFunctions'
+import { NetworkTopics } from '@etherealengine/engine/src/networking/classes/Network'
+import { defineAction, defineState, none, receiveActions } from '@etherealengine/hyperflux'
+
+export class AvatarUIActions {
+  static setUserTyping = defineAction({
+    type: 'ee.client.avatar.USER_IS_TYPING',
+    typing: matches.boolean,
+    $topic: NetworkTopics.world
+  })
+}
+
+export const AvatarUIState = defineState({
+  name: 'AvatarUIState',
+
+  initial: {
+    usersTyping: {} as { [key: string]: true }
   },
 
-  onSet: (entity, component, json) => {
-    if (!json) return
+  receptors: [
+    [
+      AvatarUIActions.setUserTyping,
+      (state, action) => {
+        state.usersTyping[action.$from].set(action.typing ? true : none)
+      }
+    ]
+  ]
+})
 
-    if (json.position) component.position.set(json.position)
-    if (json.rotation) component.rotation.set(json.rotation)
+export const AvatarUIStateSystem = defineSystem({
+  uuid: 'ee.engine.avatar.AvatarUIStateSystem',
+  execute: () => {
+    receiveActions(AvatarUIState)
   }
 })

packages/client-core/src/systems/ui/AvatarDetailView/index.tsx

@@ -36,9 +36,9 @@ import { createXRUI } from '@etherealengine/engine/src/xrui/functions/createXRUI
 import { useXRUIState } from '@etherealengine/engine/src/xrui/functions/useXRUIState'
 import { createState, getMutableState, useHookstate } from '@etherealengine/hyperflux'
 
+import { AvatarUIState } from '../../state/AvatarUIState'
 import styleString from './index.scss?inline'
 
-/** @deprecated */
 export function createAvatarDetailView(id: string) {
   const videoPreviewMesh = new Mesh(new CircleGeometry(0.25, 32), new MeshBasicMaterial())
   const ui = createXRUI(
@@ -55,16 +55,16 @@ export function createAvatarDetailView(id: string) {
 interface AvatarDetailState {
   id: string
 }
-/** @deprecated */
+
 const AvatarDetailView = () => {
   const { t } = useTranslation()
   const detailState = useXRUIState<AvatarDetailState>()
-  const user = Array.from(Engine.instance.worldNetworkState.peers?.get({ noproxy: true }).values()).find(
-    (peer) => peer.userId === detailState.id.value
-  )
+  const user = Engine.instance.worldNetworkState?.peers
+    ? Array.from(Engine.instance.worldNetwork.peers.values()).find((peer) => peer.userId === detailState.id.value)
+    : undefined
   const worldState = useHookstate(getMutableState(WorldState)).get({ noproxy: true })
-  const engineState = useHookstate(getMutableState(EngineState))
-  const usersTyping = engineState.usersTyping[detailState.id.value].value
+  const usersTypingState = useHookstate(getMutableState(AvatarUIState).usersTyping)
+  const usersTyping = usersTypingState[detailState.id.value]?.value
   const username = worldState?.userNames && user ? worldState.userNames[user.userId] : 'A user'
 
   return (

packages/client-core/src/user/components/UserMenu/menus/SettingMenu.tsx

@@ -35,6 +35,8 @@ import Text from '@etherealengine/client-core/src/common/components/Text'
 import { AuthService, AuthState } from '@etherealengine/client-core/src/user/services/AuthService'
 import { defaultThemeModes, defaultThemeSettings } from '@etherealengine/common/src/constants/DefaultThemeSettings'
 import capitalizeFirstLetter from '@etherealengine/common/src/utils/capitalizeFirstLetter'
+import InputGroup from '@etherealengine/editor/src/components/inputs/InputGroup'
+import SelectInput from '@etherealengine/editor/src/components/inputs/SelectInput'
 import { AudioSettingAction, AudioState } from '@etherealengine/engine/src/audio/AudioState'
 import {
   AvatarAxesControlScheme,
@@ -58,6 +60,29 @@ import { UserMenus } from '../../../UserUISystem'
 import styles from '../index.module.scss'
 import { PopupMenuServices } from '../PopupMenuService'
 
+const ShadowMapResolutionOptions = [
+  {
+    label: '256px',
+    value: 256
+  },
+  {
+    label: '512px',
+    value: 512
+  },
+  {
+    label: '1024px',
+    value: 1024
+  },
+  {
+    label: '2048px',
+    value: 2048
+  },
+  {
+    label: '4096px (not recommended)',
+    value: 4096
+  }
+]
+
 const chromeDesktop = !isMobile && /chrome/i.test(navigator.userAgent)
 
 type Props = {
@@ -458,6 +483,17 @@ const SettingMenu = ({ isPopover }: Props): JSX.Element => {
               onChange={handleQualityLevelChange}
             />
 
+            <InputGroup
+              name="Shadow Map Resolution"
+              label={t('editor:properties.directionalLight.lbl-shadowmapResolution')}
+            >
+              <SelectInput
+                options={ShadowMapResolutionOptions}
+                value={rendererState.shadowMapResolution.value}
+                onChange={(resolution: number) => rendererState.shadowMapResolution.set(resolution)}
+              />
+            </InputGroup>
+
             <Grid container spacing={{ xs: 0, sm: 2 }}>
               <Grid item xs={12} sm={4}>
                 <InputCheck

packages/client-core/src/world/startClientSystems.ts

@@ -48,9 +48,9 @@ import { EquippableSystem } from '@etherealengine/engine/src/interaction/systems
 import { InteractiveSystem } from '@etherealengine/engine/src/interaction/systems/InteractiveSystem'
 import { MediaControlSystem } from '@etherealengine/engine/src/interaction/systems/MediaControlSystem'
 import { MotionCaptureSystem } from '@etherealengine/engine/src/mocap/MotionCaptureSystem'
+import { EntityNetworkStateSystem } from '@etherealengine/engine/src/networking/state/EntityNetworkState'
 import { IncomingNetworkSystem } from '@etherealengine/engine/src/networking/systems/IncomingNetworkSystem'
 import { OutgoingNetworkSystem } from '@etherealengine/engine/src/networking/systems/OutgoingNetworkSystem'
-import { WorldNetworkActionSystem } from '@etherealengine/engine/src/networking/systems/WorldNetworkActionSystem'
 import { PhysicsSystem } from '@etherealengine/engine/src/physics/systems/PhysicsSystem'
 import { HighlightSystem } from '@etherealengine/engine/src/renderer/HighlightSystem'
 import { WebGLRendererSystem } from '@etherealengine/engine/src/renderer/WebGLRendererSystem'
@@ -69,7 +69,7 @@ export const startClientSystems = () => {
   })
 
   /** Fixed */
-  startSystems([IncomingNetworkSystem, WorldNetworkActionSystem, EquippableSystem, AvatarSimulationSystemGroup], {
+  startSystems([IncomingNetworkSystem, EntityNetworkStateSystem, EquippableSystem, AvatarSimulationSystemGroup], {
     with: SimulationSystemGroup
   })
 

packages/client-core/src/world/useDefaultLocationSystems.ts

@@ -29,7 +29,6 @@ import { InputSystemGroup, PresentationSystemGroup } from '@etherealengine/engin
 import { startSystems } from '@etherealengine/engine/src/ecs/functions/SystemFunctions'
 import { TransformSystem } from '@etherealengine/engine/src/transform/systems/TransformSystem'
 
-import { WebcamInputSystem } from '../media/webcam/WebcamInput'
 import { ClientNetworkingSystem } from '../networking/ClientNetworkingSystem'
 import { AvatarUISystem } from '../systems/AvatarUISystem'
 import { LoadingUISystem } from '../systems/LoadingUISystem'
@@ -40,8 +39,6 @@ import { UserUISystem } from '../user/UserUISystem'
 
 export const useDefaultLocationSystems = (online: boolean) => {
   useEffect(() => {
-    startSystems([WebcamInputSystem], { with: InputSystemGroup })
-
     startSystems([LoadingUISystem, AvatarUISystem, WidgetUISystem], { before: TransformSystem })
 
     const postPresentationSystems = [UserUISystem, FilteredUsersSystem, WarningUISystem]

packages/client-core/tests/mocha.env.js

@@ -26,6 +26,7 @@ Ethereal Engine. All Rights Reserved.
 
 
 process.env.APP_ENV = 'test'
+process.env.NODE_ENV = 'test'
 process.env.TS_NODE_FILES = true
 process.env.TS_NODE_PROJECT = 'tsconfig.json'
 process.env.TS_NODE_COMPILER_OPTIONS = '{\"module\": \"commonjs\" }'

packages/client/tests/mocha.env.js

@@ -26,6 +26,7 @@ Ethereal Engine. All Rights Reserved.
 
 
 process.env.APP_ENV = 'test'
+process.env.NODE_ENV = 'test'
 process.env.TS_NODE_FILES = true
 process.env.TS_NODE_PROJECT = 'tsconfig.json'
 process.env.TS_NODE_COMPILER_OPTIONS = '{\"module\": \"commonjs\" }'

packages/editor/src/components/properties/LightShadowProperties.tsx

@@ -32,36 +32,9 @@ import { Component, useComponent } from '@etherealengine/engine/src/ecs/function
 import BooleanInput from '../inputs/BooleanInput'
 import InputGroup from '../inputs/InputGroup'
 import NumericInputGroup from '../inputs/NumericInputGroup'
-import SelectInput from '../inputs/SelectInput'
-import { updateProperties, updateProperty } from './Util'
+import { updateProperty } from './Util'
 
-/**
- *  Array containing options for shadow resolution
- */
-const ShadowMapResolutionOptions = [
-  {
-    label: '256px',
-    value: 256
-  },
-  {
-    label: '512px',
-    value: 512
-  },
-  {
-    label: '1024px',
-    value: 1024
-  },
-  {
-    label: '2048px',
-    value: 2048
-  },
-  {
-    label: '4096px (not recommended)',
-    value: 4096
-  }
-]
-
-//creating properties for LightShadowProperties component
+/**creating properties for LightShadowProperties component */
 type LightShadowPropertiesProps = {
   entity: Entity
   comp: Component<any, any>
@@ -70,31 +43,17 @@ type LightShadowPropertiesProps = {
 /**
  * OnChangeShadowMapResolution used to customize properties of LightShadowProperties
  * Used with LightNodeEditors.
- *
- * @type {[class component]}
  */
 export const LightShadowProperties = (props: LightShadowPropertiesProps) => {
   const { t } = useTranslation()
 
-  const changeShadowMapResolution = (resolution) => {
-    updateProperties(props.comp, { shadowMapResolution: resolution })
-  }
-
   const lightComponent = useComponent(props.entity, props.comp).value as any
 
   return (
     <>
       <InputGroup name="Cast Shadows" label={t('editor:properties.directionalLight.lbl-castShadows')}>
         <BooleanInput value={lightComponent.castShadow} onChange={updateProperty(props.comp, 'castShadow')} />
       </InputGroup>
-      <InputGroup name="Shadow Map Resolution" label={t('editor:properties.directionalLight.lbl-shadowmapResolution')}>
-        <SelectInput
-          key={props.entity}
-          options={ShadowMapResolutionOptions}
-          value={lightComponent.shadowMapResolution?.x}
-          onChange={changeShadowMapResolution}
-        />
-      </InputGroup>
       <NumericInputGroup
         name="Shadow Bias"
         label={t('editor:properties.directionalLight.lbl-shadowBias')}

packages/editor/tests/mocha.env.js

@@ -26,6 +26,7 @@ Ethereal Engine. All Rights Reserved.
 
 
 process.env.APP_ENV = 'test'
+process.env.NODE_ENV = 'test'
 process.env.TS_NODE_FILES = true
 process.env.TS_NODE_PROJECT = 'tsconfig.json'
 process.env.TS_NODE_COMPILER_OPTIONS = '{\"module\": \"commonjs\" }'

packages/engine/package.json

@@ -68,6 +68,7 @@
     "web-worker": "1.2.0"
   },
   "devDependencies": {
+    "@testing-library/react": "^14.0.0",
     "@types/mocha": "10.0.1",
     "@types/mock-require": "2.0.1",
     "@types/offscreencanvas": "2019.7.0",